/* =======================
   RESET & BASE
======================= */
*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{ 
  font-family: Arial, sans-serif; 
  margin:0; 
  padding:0; 
  background:#111; 
  color:#eee; 
  font-size:16px;
}

/* =======================
   HEADER
======================= */
header{ 
  background: linear-gradient(90deg, #ff4b2b, #ff416c); 
  color:white; 
  text-align:center; 
  padding:3rem 1rem; 
}

header h1{
  margin-bottom:1rem;
}

main{ 
  max-width:1200px; 
  margin:auto; 
  padding:2rem 1rem; 
}

/* =======================
   BOTÕES
======================= */
.main-btn{ 
  padding:0.9rem 2rem; 
  background:#6a0dad; 
  color:white; 
  border:none; 
  border-radius:8px; 
  cursor:pointer; 
  font-size:1rem; 
  font-weight:bold;
  transition: transform 0.2s, box-shadow 0.2s;
}

.main-btn:hover{ 
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(255,75,43,0.5);
}

/* =======================
   PREVIEW / VÍDEOS
======================= */
.preview{
  max-width:1000px;
  margin:3rem auto;
  padding:0 1rem;
}

.video-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:center;
}

.video-card{
  background:#1e1e2f;
  border-radius:12px;
  padding:1rem;
  width:100%;
  max-width:480px;
  box-shadow:0 8px 20px rgba(0,0,0,0.6);
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover{
  transform:scale(1.03);
  box-shadow:0 12px 25px rgba(0,0,0,0.8);
}

.video-player{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  background:black;
  object-fit:cover;
}

.video-card h3{
  margin:1rem 0 0.5rem 0;
  color:#ff416c;
}

.video-desc{
  font-size:0.9rem;
  color:#ccc;
  margin-bottom:1rem;
}

/* =======================
   PLANOS
======================= */
.plan-container{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:2rem; 
  justify-content:center; 
}

.plan{ 
  background:#1e1e2f; 
  border-radius:12px; 
  padding:2rem 1.5rem; 
  text-align:center; 
  flex:1 1 280px; 
  max-width:320px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.plan:hover{ 
  transform:scale(1.05); 
}

/* Basic */
.plan:not(.popular):not(.elite){
  box-shadow:0 8px 20px rgba(42,82,152,0.7);
}
.plan:not(.popular):not(.elite) h3{
  color:#2a5298;
}

/* Premium */
.plan.popular{
  box-shadow:0 8px 20px rgba(255,65,108,0.7);
}
.plan.popular h3{
  color:#ff4b2b;
}

/* Elite */
.plan.elite{
  box-shadow:0 8px 20px rgba(155,48,255,0.7);
}
.plan.elite h3{
  color:#9b30ff;
}

/* Botões planos */
.plan-btn{ 
  display:inline-block; 
  margin-top:1rem; 
  padding:0.9rem 2rem; 
  border-radius:8px; 
  text-decoration:none; 
  font-weight:bold; 
  transition: transform 0.2s, box-shadow 0.2s;
}

.plan .plan-btn{
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  color:white;
}

.plan.popular .plan-btn{
  background: linear-gradient(90deg, #ff4b2b, #ff416c);
}

.plan.elite .plan-btn{
  background: linear-gradient(90deg, #6a0dad, #9b30ff);
}

/* =======================
   PAGAMENTOS
======================= */
.payment-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); 
  gap:1rem; 
  margin-bottom:1rem; 
}

.payment-box{ 
  background:#222; 
  border-radius:10px; 
  padding:1rem; 
  text-align:center; 
  font-weight:bold; 
  box-shadow:0 4px 10px rgba(0,0,0,0.5); 
  cursor:pointer; 
  transition: transform 0.2s, box-shadow 0.2s;
}

.payment-box:hover{ 
  transform: scale(1.05); 
  box-shadow: 0 6px 18px rgba(255,75,43,0.5);
}

.after-pay{ 
  text-align:center; 
  font-size:0.9rem; 
  color:#bbb; 
}

/* =======================
   NOTIFICAÇÕES
======================= */
#notifications{
  position: fixed;
  bottom:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}

.notif-box{
  background: linear-gradient(90deg, #ff4b2b, #6a0dad);
  color:white;
  padding:1rem 1.5rem;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,0.5);
  font-weight:bold;
  min-width:250px;
  max-width:320px;
  font-size:0.95rem;
}

/* =======================
   CONFIRM PAGE
======================= */
.confirm-box{
  background:#1e1e2f;
  padding:2rem;
  border-radius:12px;
  max-width:500px;
  margin:4rem auto;
}

.confirm-box input{
  width:100%;
  padding:0.8rem;
  margin-bottom:1rem;
  border-radius:8px;
  border:none;
  background:#222;
  color:white;
}

/* =======================
   FOOTER
======================= */
footer{
  background: linear-gradient(135deg, #0f1020, #1a1e2f);
  color:#eee;
  padding:2rem 1rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  border-top:2px solid #6a0dad;
}

footer a{
  color:#00d1ff;
  text-decoration:none;
  font-weight:bold;
}

footer a:hover{
  color:#ff416c;
}

/* =======================
   MOBILE (IMPORTANTE)
======================= */
@media (max-width:768px){

  body{
    font-size:16px;
  }

  header{
    padding:2rem 1rem;
  }

  header h1{
    font-size:1.8rem;
  }

  main{
    padding:1.5rem 1rem;
  }

  /* Vídeos empilhados */
  .video-wrapper{
    flex-direction:column;
    align-items:center;
  }

  .video-card{
    max-width:95%;
  }

  /* Planos largura total */
  .plan{
    flex:1 1 100%;
    max-width:90%;
  }

  /* Botões maiores para toque */
  .main-btn,
  .plan-btn{
    width:100%;
    max-width:300px;
    padding:1rem;
    font-size:1rem;
  }

  /* Pagamentos 2 colunas */
  .payment-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* Notificação adaptada */
  .notif-box{
    max-width:90vw;
    min-width:auto;
    font-size:0.85rem;
    padding:0.8rem 1rem;
  }
}
.payment-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); 
  gap:1rem;
  margin-bottom:1rem; 
}

.payment-box{ 
  background:#222; 
  border-radius:10px; 
  padding:1.5rem 1rem; 
  text-align:center; 
  box-shadow:0 4px 10px rgba(0,0,0,0.5); 
  cursor:pointer; 
  transition: transform 0.2s, box-shadow 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.payment-box i{
  font-size:1.8rem;
}

.payment-box:hover{ 
  transform: scale(1.08); 
  box-shadow: 0 6px 18px rgba(255,75,43,0.5);
}
/* Cores dos métodos */
.fa-brands.fa-paypal{
  color:#009cde;
}

.fa-brands.fa-bitcoin{
  color:#f7931a;
}

.fa-coins{
  color:#26a17b;
}

.fa-gift{
  color:#ff416c;
}