@font-face {
   font-family: "Unbounded";
   src: url("../fontes/Unbounded-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Poppins";
   src: url("../fontes/Poppins-Regular.ttf") format("truetype");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Reset Otimizado */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box; /* Impede que o padding quebre o tamanho da tela */
}

/* Estilo-Desktop */
body {
   background-color: #0E1014;
   color: #FFFFFF;
   overflow-x: hidden; /* Corta qualquer vazamento horizontal acidental */
}

/* Ajuste do Header para não usar margens gigantes que quebram no mobile */
header {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto; /* Centraliza a caixa do header no PC */
   padding: 75px 20px 0;
}

header img {
   display: block;
   /* A margem esquerda foi removida para usar o alinhamento da caixa acima */
}

h1 {
   font-size: 64px;
   font-family: "Unbounded", sans-serif;
   text-align: center;
   margin-top: 60px;
   padding: 0 20px; /* Margem de segurança nas laterais */
}

h1 span {
   color: #9747FF;
}

p {
   font-size: 24px;
   font-family: "Poppins", sans-serif;
   text-align: center;
   /* A MÁGICA ACONTECE AQUI: Em vez de width: 792px, usamos max-width */
   width: 100%;
   max-width: 792px; 
   margin: 24px auto 0;
   padding: 0 20px;
}

a {
   color: #FFFFFF;
   font-family: "Poppins", sans-serif;
   font-size: 24px;
   text-decoration: none;
   background-color: #9747FF;
   width: 100%;
   max-width: 340px; /* Responsivo */
   height: 66px;
   display: block;
   text-align: center;
   line-height: 66px;
   border-radius: 36px;
   margin: 40px auto;
}

a:hover {
   background-color: #8233E8;
}

section img {
   display: block;
   width: 100%;
   max-width: 792px; /* Responsivo */
   height: auto; /* Mantém a proporção da imagem sem amassar */
   margin: 0 auto;
   padding: 0 20px;
}

/* =========================================
   MEDIA QUERIES (Responsividade)
========================================= */

/* Tablets e Monitores Menores */
@media(max-width: 768px) {
   header {
      padding: 65px 40px 0;
   }

   h1 {
      font-size: 48px; /* Título um pouco menor para não apertar */
   }

   p {
      font-size: 20px;
   }
}

/* Celulares (Ajustado para 480px para pegar qualquer tamanho de celular) */
@media(max-width: 480px) {
   header {
      padding: 32px 16px 0;
   }

   h1 {
      font-size: 36px;
      margin-top: 40px;
   }

   p {
      font-size: 16px; /* Fonte ajustada para leitura no mobile */
   }

   a {
      font-size: 18px;
      max-width: 260px;
      height: 56px;
      line-height: 56px;
   }
}