@import url(css/header.css);
@import url(css/about.css);
@import url(css/services.css);
@import url(css/artigos.css);
@import url(css/faq.css);
@import url(css/footer.css);

@import url(css/sobremim.css);

@import url(css/saibamais.css);

@import url(css/reembolso.css);

:root {
  --azul-escuro: #34495e;
  --preto-azulado: #002a3b;
  --ciano-escuro: #2d5f73;
  --ciano: #487d93;
  --branco: #fff;
  --ciano-claro: #65a3b8;

  --primary-font: "Julius Sans One";
  --secondary-font: "Century Gothic";
  --third-font: "Montserrat Alternates";
  --fourth-font: "Amethysta";
  --fifth-font: "Inspiration";
}

@font-face {
  font-family: "Century Gothic";
  src: url(/sentidoEacao/assets/centurygothic.ttf) format("ttf");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: var(--secondary-font);
}

.imagem {
  user-select: none;
  pointer-events: none;
}

/* toTop */

#btnTopo {
  position: fixed;
  bottom: 20px;
  left: 20px;

  width: 80px;
  height: 80px;

  background-image: url("assets/seta_topo.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: transparent;

  border: none;
  border-radius: 100%;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 999; /* garante que fique por cima */
}

/* Efeito ao passar o mouse */
#btnTopo:hover {
  transform: scale(1.1);
}

/* Quando o botão estiver visível */
#btnTopo.mostrar {
  opacity: 1;
  pointer-events: auto;
}