/* ==========
   Elite Fitness – Estilos customizados
   Todas as customizações estão aqui para manter o HTML limpo.
   ========== */

:root{
  --brand-red: #ff4d4d;
  --brand-yellow: #f9cb28;
}

/* Keyframes */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulse {
  0% { transform: scale(1) }
  50% { transform: scale(1.05) }
  100% { transform: scale(1) }
}

/* Utilities */
.grad-text {
  background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-band{
  background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow), var(--brand-red));
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}
.logo-title{
  font-weight: 800;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons */
.btn-primary{
  display:inline-block;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow));
  color:#000;
  font-weight:700;
  padding:0.75rem 1.5rem;
  border-radius:999px;
  transition:transform .2s ease, opacity .2s ease;
}
.btn-primary:hover{ opacity:.9; transform:scale(1.05); }

.btn-outline{
  display:inline-block;
  border:1px solid #fff;
  color:#fff;
  font-weight:700;
  padding:0.75rem 1.5rem;
  border-radius:999px;
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn-outline:hover{ background:#fff; color:#000; transform:scale(1.05); }

.btn-muted{
  width:100%;
  background: linear-gradient(90deg,#3f3f46,#27272a);
  color:#fff;
  font-weight:700;
  padding:0.75rem 1.5rem;
  border-radius:999px;
  transition:opacity .2s ease;
}
.btn-muted:hover{ opacity:.9; }

.btn-gradient{
  width:100%;
  background: linear-gradient(90deg, var(--brand-yellow), var(--brand-red));
  color:#000;
  font-weight:700;
  padding:0.75rem 1.5rem;
  border-radius:999px;
  transition:opacity .2s ease, transform .2s ease;
}
.btn-gradient:hover{ opacity:.95; transform:scale(1.02); }

/* Header links */
.nav-link{ color:#fff; transition:color .2s ease; }
.nav-link:hover{ color: var(--brand-red); }
.mobile-link{ display:block; border-radius:0.5rem; padding:0.5rem 0.75rem; }
.mobile-link:hover{ background:rgba(255,255,255,0.08); }

/* Cards & 3D */
.box-3d{
  transform-style: preserve-3d;
  transition: transform .5s ease, box-shadow .5s ease;
  box-shadow: 0 20px 30px rgba(255,255,255,.08);
}
.box-3d:hover{
  transform: translateY(-6px) rotateX(3deg);
  box-shadow: 0 30px 50px rgba(255,255,255,.14);
}

.card-3d{
  background:#111827;
  border-radius:0.75rem;
  padding:2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  transition: border-color .2s ease;
}
.card-icon{
  width:5rem; height:5rem;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin:0 auto 1.25rem auto;
}
.grad-a{ background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow)); color:#000; }
.grad-b{ background: linear-gradient(90deg, var(--brand-yellow), var(--brand-red)); color:#000; }
.card-title{ font-weight:700; font-size:1.125rem; margin-bottom:.5rem; }
.card-text{ color:#9ca3af; }

/* Plans */
.plan-card{
  position:relative;
  background:#111827;
  border-radius:0.75rem;
  padding:2rem;
  text-align:center;
  display:flex; flex-direction:column;
  transition: transform .2s ease;
}
.plan-card:hover{ transform:translateY(-2px); }
.plan-card.featured{
  background: linear-gradient(135deg,#0f172a,#1f2937);
  border:1px solid var(--brand-yellow);
  transform: scale(1.03);
}
.badge{
  position:absolute; right:1rem; top:-0.75rem;
  background: var(--brand-yellow);
  color:#000; font-weight:800;
  font-size:.75rem;
  padding:0.25rem 0.5rem;
  border-radius:0.375rem;
}
.plan-title{ font-weight:800; font-size:1.25rem; margin-bottom:0.5rem; }
.plan-price{ font-weight:800; font-size:clamp(1.75rem, 3vw, 2.25rem); margin-bottom:1rem; }
.plan-period{ color:#9ca3af; font-size:.9rem; margin-left:.25rem; }
.plan-features{ color:#9ca3af; display:grid; gap:.5rem; margin:0 0 1.5rem 0; }

/* Stats */
.stat{
  background:#1f2937;
  border-radius:0.5rem;
  padding:1rem;
  text-align:center;
}
.stat-num{ font-weight:800; font-size:clamp(1.25rem,2.5vw,1.875rem); }
.stat-label{ color:#9ca3af; font-size:0.8rem; }

/* Decorative balls */
.deco-ball{
  position:absolute;
  width:6rem; height:6rem;
  bottom:-1.5rem; left:-1.5rem;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
  animation:pulse 2s infinite;
}
.deco-ball.red{ background: var(--brand-red); color:#000; }
.deco-ball.yellow{ background: var(--brand-yellow); color:#000; }
.deco-ball.top-right{ top:-1.5rem; right:-1.5rem; bottom:auto; left:auto; }

/* Forms */
.form-label{ display:block; color:#d1d5db; margin-bottom:0.5rem; }
.form-input{
  width:100%;
  background:#1f2937;
  border:1px solid #374151;
  border-radius:0.5rem;
  padding:0.75rem 1rem;
  color:#fff;
  outline: none;
}
.form-input:focus{
  box-shadow: 0 0 0 3px rgba(249,203,40,0.25);
  border-color: var(--brand-yellow);
}

/* Titles */
.section-title{
  font-weight:800;
  font-size:clamp(1.5rem, 3.2vw, 2.25rem);
  margin-bottom:1rem;
}
.section-sub{
  color:#9ca3af;
  max-width:52ch;
  margin:0 auto;
}

/* Footer */
.footer-title{ font-weight:700; margin-bottom:1rem; font-size:1.1rem; }
.footer-link{ color:#9ca3af; transition: color .2s ease; }
.footer-link:hover{ color:#fff; }