html, body {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth; /* rolagem suave */
  scroll-snap-type: y mandatory; /* ativa snapping vertical */
  overflow-y: scroll;
}

.section {
  /*height: 100vh; /* cada seção ocupa a tela inteira */
  scroll-snap-align: start; /* trava o início da seção */
}

.top-section {
  position: relative;
  width: 100%;
  height: 100vh; 
  background: url("images/background2.png") no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

/* camada azul com blur */
.top-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 123, 255, 0.3); /* azul translúcido */
  backdrop-filter: blur(8px);         /* aplica blur */
  -webkit-backdrop-filter: blur(8px); /* suporte Safari */
  z-index: 0;
}

.top-section > * {
  position: relative;
  z-index: 1; /* garante que o conteúdo fique acima */
}


/* Parte de baixo com fundo branco */
.bottom-section {
  background-color: white;
  color: #636363;
  padding: 40px 0;
  font-family: var(--bs-font-sans-serif);
}

.bottom-section a {
  color: #212529; /* cinza escuro Bootstrap */
  text-decoration: none; /* opcional: remove sublinhado */
}

.bottom-section a:hover {
  color: #212529; /* ainda mais escuro no hover */
  font-weight: bold;   /* negrito */
}

/* Footer */
.footer-section {
  background-color: rgb(0, 54, 110);
  color: #f8f9fa; /* cinza */
  padding: 40px 0;
  font-family: var(--bs-font-sans-serif); /* mesma fonte padrão do Bootstrap */
}

.top-section,
.bottom-section,
.footer-section {
  overflow: visible;
}

.top-section img {
  display: block;
  max-width: 100%;
  height: auto;
}

#backToTop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;

  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;

  /* estado oculto (antes/depois) */
  opacity: 0;
  transform: translateY(-40px);      /* começa um pouquinho acima */
  visibility: hidden;
  pointer-events: none;

  /* animações suaves */
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;       /* atrasa a visibilidade p/ não clicar durante fade */
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* estado visível */
#backToTop.is-visible {
  opacity: 1;
  transform: translateY(0);          /* “descendo” pra posição final */
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .25s ease,
    transform .25s ease;
}