/* ==========================================================================
   Hyperions MC — hyperionsmc.com
   Estilos específicos de la página /soporte/ (prefijo .sp-).
   Requiere /css/styles.css cargado antes (variables, fuentes y keyframes).
   ========================================================================== */

/* ---------- Cabecera: enlace de texto ---------- */
.nav-link { font-weight: 600; font-size: .92rem; color: var(--muted); padding: 8px 6px; }
.nav-link:hover { color: var(--gold-bright); }

/* ---------- Contenedores ---------- */
.sp-container {
  position: relative; width: 100%; max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px);
}
.sp-container--narrow { max-width: 900px; }

/* ---------- Animación de entrada ---------- */
.sp-rise-1 { animation: hy-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.sp-rise-2 { animation: hy-rise .7s cubic-bezier(.2,.7,.2,1) .06s both; }
.sp-rise-3 { animation: hy-rise .7s cubic-bezier(.2,.7,.2,1) .12s both; }

/* ---------- Hero ---------- */
.sp-hero {
  position: relative; overflow: hidden;
  /* La cabecera (.site-header) es absoluta: el padding superior la compensa. */
  padding: clamp(130px, 18vh, 170px) 0 clamp(32px, 5vh, 48px);
}
.sp-hero__bg {
  position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(44% 60% at 88% 10%, rgba(168,85,247,.16), transparent 70%),
    radial-gradient(40% 55% at 8% 90%, rgba(244,197,106,.1), transparent 72%);
}
.sp-hero .eyebrow { margin-bottom: 14px; }
.sp-hero__title {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(2.2rem, 6.5vw, 4rem); line-height: 1.02; letter-spacing: -.02em;
  max-width: 820px;
}
.sp-hero__lead {
  margin: 18px 0 0; max-width: 620px;
  font-size: clamp(1rem, 2.4vw, 1.15rem); color: var(--muted);
}

/* ---------- Canales de soporte ---------- */
.sp-canales { padding: 0 0 clamp(40px, 6vh, 60px); }
.sp-canales__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.sp-canal {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.8vw, 32px); border-radius: 20px;
  color: var(--text);
}
.sp-canal:hover { color: var(--text); }
.sp-canal--discord {
  background: linear-gradient(135deg, rgba(88,101,242,.16), rgba(12,10,18,.6));
  border: 1px solid rgba(124,58,237,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sp-canal--discord:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -32px rgba(124,58,237,.7); }
.sp-canal--gold,
.sp-canal--green {
  background: linear-gradient(180deg, rgba(22,19,33,.6), rgba(12,10,18,.55));
  border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease;
}
.sp-canal--gold:hover { transform: translateY(-6px); border-color: rgba(244,197,106,.45); }
.sp-canal--green:hover { transform: translateY(-6px); border-color: rgba(52,211,153,.45); }

.sp-canal__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 14px; flex: none;
}
.sp-canal__icon--violet { background: rgba(168,85,247,.15); border: 1px solid rgba(168,85,247,.4); color: var(--violet-bright); }
.sp-canal__icon--gold { background: rgba(244,197,106,.1); border: 1px solid rgba(244,197,106,.35); color: var(--gold-bright); }
.sp-canal__icon--green { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.35); color: var(--green); }

.sp-canal__title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--text); }
.sp-canal__text { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.sp-canal__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .9rem;
}
.sp-canal__cta--violet { color: var(--violet-bright); }
.sp-canal__cta--gold { color: var(--gold-bright); }
.sp-canal__cta--green { color: var(--green); }

/* ---------- Texto monoespaciado ---------- */
.sp-mono { font-family: ui-monospace, monospace; }
.sp-mono--violet { color: var(--violet-bright); }
.sp-mono--gold { color: var(--gold-bright); font-weight: 600; }

/* ---------- FAQ (desplegables nativos <details>) ---------- */
.sp-faq { padding: 0 0 clamp(50px, 8vh, 80px); }
.sp-faq__title {
  margin: 0 0 22px; font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
}
.sp-faq__list { display: flex; flex-direction: column; gap: 12px; }
.sp-faq__item {
  padding: 18px 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
}
.sp-faq__q { font-weight: 700; font-size: 1rem; color: var(--text); cursor: pointer; }
.sp-faq__q::marker { color: var(--gold); }
.sp-faq__a { margin: 12px 0 0; color: var(--muted); font-size: .94rem; }
.sp-faq__a a { font-weight: 700; }