@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Paytone+One&family=Playwrite+VN:wght@100..400&family=Sigmar&family=Unbounded:wght@200..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Anta&family=Oswald:wght@200..700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap");

/* ==================================================
   RESET E CONFIGURAÇÃO GLOBAL
   ================================================== */

/* Define box-sizing como border-box para todos os elementos,
   incluindo os pseudo-elementos (::before e ::after),
   para facilitar o cálculo de tamanhos com padding e border. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Zera margens e paddings padrões do navegador,
      define largura e altura mínimas, evita rolagem horizontal,
      e configura a fonte e cores básicas da página. */
html,
body {
  font-family: "Parkinsans", serif;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden; /* Impede rolagem horizontal */
  line-height: 1.5; /* Espaçamento entre linhas */
  scroll-behavior: smooth; /* Rolagem suave ao usar âncoras */
  flex-direction: column;
  padding: 0; /* Sem espaçamento interno */
  margin: 0; /* Sem margem automática que centraliza */
}


/* ==================================================
      VARIÁVEIS CSS (ROOT)
      ================================================== */

/* Aqui definimos variáveis globais para cores, espaçamentos,
      tamanhos de fonte e bordas. Isso facilita a manutenção do código. */
:root {
  /* Paleta de Cores */
  --primeira: #ffee00;
  --segunda: #dc3545;
  --terceira: #8ab2d0;
  --quarta: #3d6b94;
  --quinta: #002c53;
  --whatsapp: #25d366;

  /* Cores de fundo correspondentes */
  --background-primeira: #0c3f8c;
  --background-segunda: #faad0f;
  --background-terceira: #f0f0f0;
  --background-quarta: #f8f8f8;
  --background-quinta: #000000;
  --background-sexta: #1b1b1b;

  /* Cores de texto */
  --text-branco: #ffffff; /* Cor do texto principal */
  --text-preto: #000000;
  --text-titulo: #002c53;
  --text-cinza: #444; /* Cor de texto apagado, notas, etc. */
}

/* ==================================================
      ELEMENTOS BASE
      ================================================== */

/* Links sem sublinhado e com cor herdada do texto.
      O hover adiciona sublinhado para indicar interação. */
a {
  text-decoration: none;
  color: inherit; /* herde a cor do texto de seu elemento pai */
}

/* Remove estilos padrão de listas (bolinhas, numeração) */
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Botões com estilo padrão e efeito no hover */
button {
  cursor: pointer; /* Mostra o cursor de "mãozinha" ao passar por cima */
}

/* ==================================================
        ESTILO PARA AS IMAGENS DE FUNDO DA PAGINA
      ================================================== */

/* Configurações padrão para imagens */
img {
  max-width: 100%; /* Garante que a imagem não ultrapasse o contêiner */
  height: auto; /* Mantém a proporção da imagem */
  display: block; /* Evita espaços extras abaixo da imagem */
  overflow: hidden; /* Esconde qualquer parte que ultrapasse o contêiner */
}

.fundo_padrao {
  height: 100%;
  background-position: center center; /* centralizar a imagem */
  background-repeat: no-repeat; /* não repetir */
  background-size: cover; /* não repetir */
  background-attachment: fixed;
}
.img04 {
  background-image: url("/assets/img/fundo/img04.jpg");
}

/* ==================================================
                    BOTÃO FLUTUANTE
      ================================================== */

/* Container dos botões flutuantes */
.social-float {
  position: fixed;
  bottom: 35px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* Estilo base para os botões */
.social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-decoration: none;
}

/* WhatsApp */
.social-btn.whatsapp {
  background-color: #25d366;
}

/* Instagram */
.social-btn.instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}