* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', sans-serif; background:#0d0d0d; color:#e0e0e0; line-height:1.6; scroll-behavior:smooth; }

/* Scrollbar personalizada */
::-webkit-scrollbar { width:12px; }
::-webkit-scrollbar-track { background:#111; border-radius:10px; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#f59e0b,#fbbf24); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#fbbf24,#f59e0b); }

/* Container */
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }

/* Header */
header { position:sticky; top:0; background:rgba(17,17,17,0.95); backdrop-filter:blur(8px); z-index:50; box-shadow:0 4px 15px rgba(0,0,0,0.4);}
header .nav-container { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; }
header nav a { margin-left:2rem; color:#ccc; font-weight:500; transition:0.3s; text-decoration:none; }
header nav a:hover { color:#fbbf24; }

/* Botones Discord */
.btn-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #111;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(255,175,55,0.3);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.btn-discord:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(255,175,55,0.5);
}
@media (max-width:768px) {
  .btn-discord { width:80%; padding:0.8rem 1.5rem; font-size:1rem; }
}

/* Hero */
.hero { min-height:90vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:2rem; position:relative; overflow:hidden;}
.hero::after {
  content:""; position:absolute; width:200%; height:200%; background:radial-gradient(circle, rgba(255,175,55,0.05) 10%, transparent 50%); top:-50%; left:-50%; transform:rotate(45deg); animation:rotateBG 40s linear infinite;
}
@keyframes rotateBG { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.hero img { width:120px; height:120px; margin-bottom:1rem; animation:bounce 2s infinite; }
.hero h1 { font-size:3rem; background:linear-gradient(90deg,#fbbf24,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem; }
.hero p { color:#bbb; max-width:700px; margin-bottom:2rem; font-size:1.2rem; }

/* Cards Servidores */
.servicios { padding:6rem 0; }
.servicios h2 { text-align:center; font-size:2.5rem; background:linear-gradient(90deg,#fbbf24,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:3rem; }
.cards { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:768px){ .cards { grid-template-columns:repeat(2,1fr); } }
.card { background:#1a1a1a; border-radius:2rem; padding:2rem; box-shadow:0 10px 25px rgba(0,0,0,0.6); transition:0.5s; position:relative; overflow:hidden; }
.card::before { content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,175,55,0.05) 20%, transparent 50%); transform:rotate(0deg); transition:0.5s; }
.card:hover::before { transform:rotate(45deg); }
.card:hover { transform:translateY(-10px); box-shadow:0 20px 45px rgba(255,175,55,0.4); }
.card h3 { font-size:1.75rem; color:#f59e0b; margin-bottom:1rem; }
.card p { color:#ccc; margin-bottom:1.5rem; }

/* CTA Discord */
.cta { background:#1c1c1c; text-align:center; padding:6rem 2rem; border-radius:2rem; box-shadow:0 10px 25px rgba(0,0,0,0.6); margin:4rem 1rem; position:relative; cursor: pointer; overflow:hidden; }
.cta::after { content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,175,55,0.05) 20%, transparent 50%); transform:rotate(0deg); transition:0.5s; }
.cta:hover::after { transform:rotate(45deg); }
.cta h2 { font-size:2.5rem; color:#fbbf24; margin-bottom:1rem; }
.cta p { color:#bbb; margin-bottom:2rem; font-size:1.2rem; }

/* Footer */
footer { text-align:center; padding:2rem 0; color:#888; }

/* Animaciones */
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-15px);} }