/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}


p {
  margin-bottom: 16px;
  line-height: 1.6;
}
/* Body e centralização */
body {
  background-color: #ffffff; /* branco */
  color: #2F80ED; /* azul principal */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
  max-width: 1200px; /* limita largura máxima do conteúdo */
  margin: 0 auto; /* centraliza horizontalmente */
}

/* Logo */
img.logo {
  width: clamp(80px, 15vw, 150px); /* cresce proporcionalmente, mas com limites */
  height: auto;
  margin-bottom: 20px;
}

/* Título principal */
h1 {
  margin-bottom: 24px;
  font-size: clamp(1.5rem, 4vw, 5rem); /* responsivo, cresce com a tela */
}

/* Botão principal */
button {
  background-color: #2F80ED;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 30px;
  font-size: clamp(1rem, 2vw, 2.2rem); /* cresce proporcionalmente */
  padding: clamp(10px, 1.5vw, 28px) clamp(20px, 3vw, 36px);
}

button:hover {
  background-color: #1366c8; /* tom mais escuro de azul */
}

/* Container do PIX */
.pix-container {
  width: 90%; /* ocupa até 90% da tela */
  max-width: clamp(300px, 50vw, 800px); /* cresce proporcionalmente, limite mínimo e máximo */
  background: #f9f9f9;
  padding: clamp(15px, 2vw, 30px); /* padding proporcional */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

/* Imagem do PIX */
.pix-container img {
  width: clamp(150px, 50%, 500px); /* QR code cresce proporcionalmente */
  height: auto;
  margin: 10px 0;
}

/* Texto do PIX */
.pix-container p {
  font-size: clamp(0.9rem, 2vw, 1.5rem); /* cresce proporcionalmente */
  word-break: break-all;
}

/* Media Queries */

/* Celulares pequenos */
@media (max-width: 400px) {
  h1 { font-size: 1.5rem; }
  button { width: 100%; }
}