/* ====================RESET & GERAL============================== */
* {margin:0; padding:0; box-sizing:border-box;}
:root {
  --primary-color:#FF6F61;
  --secondary-color:#6C63FF;
  --bg-dark:#0d0d0d;
  --card-bg:#111;
  --text-color:#fff;
  --btn-color:#FF6F61;
  --btn-hover:#6C63FF;
  --nav-height:7.2rem;
  font-size:62.5%;
}
body {
  font-family:'DM Sans', sans-serif;
  font-size:1.6rem;
  text-align:center;
  background:var(--bg-dark);
  color:var(--text-color);
  overflow-x:hidden;
  padding-bottom:5rem;
  position:relative;
}

/* ====================PARTÍCULAS BACKGROUND============================== */
canvas#bg-canvas {position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}

/* ====================HEADER============================== */
.wrapper {max-width:1200px; margin:0 auto; padding:0 2rem;}
section {padding:8rem 0;}
#services header h2 {font-size:3rem;margin-bottom:1rem;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 0 0 10px rgba(255,111,97,0.7), 0 0 20px rgba(108,99,255,0.5);}
#services header h4, #services header h5 {font-size:1.6rem;margin-bottom:0.8rem;color:#aaa;}

/* ====================CARDS============================== */
.cards {display:flex; flex-direction:column; gap:3rem;}
@media(min-width:768px){.cards{flex-direction:row; justify-content:space-between;}}
.card {background:var(--card-bg);border-radius:2rem;padding:3rem 2rem;color:var(--text-color);text-align:left;position:relative;overflow:hidden;cursor:pointer;transition:all 0.5s ease;transform:translateY(50px);opacity:0;box-shadow:0 0 20px rgba(255,111,97,0.2);}
.card:hover {transform:translateY(-15px) rotateZ(1deg);box-shadow:0 0 40px rgba(255,111,97,0.6), 0 0 60px rgba(108,99,255,0.6);}
.card svg {width:40px; height:40px; margin-bottom:1rem;}
.card h3 {font-size:2.2rem;margin-bottom:1rem;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 0 0 8px rgba(255,111,97,0.7),0 0 15px rgba(108,99,255,0.5);}
.meses {display:flex; align-items:baseline; gap:0.5rem; margin-bottom:2rem; font-size:1.6rem;}
.meses span {font-weight:700; font-size:2rem;}

/* ====================LISTA DE BENEFÍCIOS============================== */
.card ul li {display:flex; align-items:center; gap:1rem; padding:0.6rem 0;font-size:1.5rem; transition: all 0.3s;}
.card ul li:hover {transform:translateX(10px); color:#FFD700;}

/* ====================BOTÃO COMPRAR============================== */
.btn {display:inline-block;background:var(--btn-color);color:var(--text-color);font-weight:700;text-transform:uppercase;padding:1rem 3rem;border-radius:3rem;text-decoration:none;font-size:1.6rem;transition:all 0.4s;box-shadow:0 0 20px rgba(255,111,97,0.5);}
.btn:hover {background:var(--btn-hover);box-shadow:0 0 30px rgba(108,99,255,0.7), 0 0 40px rgba(255,111,97,0.6);transform:translateY(-3px);}

/* ====================SUPORTE============================== */
#support {margin-top:6rem;padding:4rem 2rem;background: linear-gradient(135deg, rgba(255,111,97,0.2), rgba(108,99,255,0.2));border-radius:2rem;text-align:center;box-shadow:0 0 30px rgba(255,111,97,0.3),0 0 30px rgba(108,99,255,0.3);}
#support h2 {font-size:2.8rem;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-bottom:2rem;}
#support p {font-size:1.6rem;margin-bottom:1rem;color:#ddd;}
#support a {display:inline-flex;align-items:center;gap:0.8rem;background:var(--btn-color);color:#fff;padding:1rem 2.5rem;border-radius:3rem;font-weight:700;text-decoration:none;margin:0.5rem;transition:all 0.3s;box-shadow:0 0 15px rgba(255,111,97,0.5);}
#support a:hover {background:var(--btn-hover); transform:translateY(-3px); box-shadow:0 0 25px rgba(108,99,255,0.7);}
#support svg {width:24px; height:24px;}

/* ====================SEÇÃO CALCULADORA PIX============================== */
#calculator {margin-top:6rem;padding:4rem 2rem;background: linear-gradient(135deg, rgba(108,99,255,0.2), rgba(255,111,97,0.2));border-radius:2rem;text-align:center;box-shadow:0 0 30px rgba(108,99,255,0.3),0 0 30px rgba(255,111,97,0.3);}
#calculator input {width:200px; padding:1rem; font-size:1.6rem; border-radius:1rem; border:none; margin-right:1rem;}
#calculator button {padding:1rem 2rem; font-size:1.6rem; border-radius:1rem; border:none; font-weight:700;background:var(--btn-color); color:#fff; cursor:pointer; transition:all 0.3s; box-shadow:0 0 15px rgba(255,111,97,0.5);}
#calculator button:hover {background:var(--btn-hover); transform:translateY(-3px); box-shadow:0 0 25px rgba(108,99,255,0.7);}
#calculator p {margin-top:1rem; font-size:1.6rem;}
#calculator img {margin-top:1rem; width:200px; height:200px;}

/* ====================RESPONSIVO============================== */
@media(max-width:767px){.card{text-align:center;}.meses{justify-content:center;}.cards{gap:2rem;}#support a{justify-content:center;width:80%;margin:0.5rem auto;}#calculator input,#calculator button{width:80%;margin:0.5rem 0;}}

/* Botão Voltar fixo */
.goBackBtn {
  font-size: 22px;
  display: block;
  background: #111111;
  border-radius: 100px;
  padding: 8px 19px;
  font-weight: bold;
  color: #c069a6;
  transition: all 0.7s ease;
}

.goBackBtn:hover {
  background: #111111;
  transform: scale(1.07);
  box-shadow: 0 8px 65px rgb(162 90 140);
}