/* ==========================================================================
   Hyperions MC — hyperionsmc.com/rangos/
   Estilos específicos de la página de rangos (prefijo .rg-).
   Se carga DESPUÉS de /css/styles.css y reutiliza sus variables,
   clases y keyframes (hy-rise, etc.). Sin estilos inline (CSP estricta).
   ========================================================================== */

:root {
  --rg-cell: #0B0912;
}

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

/* ---------- Contenedor común ---------- */
.rg-container {
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px);
}

/* ---------- Hero de la página ---------- */
/* La cabecera del sitio es position:absolute, así que el padding superior
   absorbe su altura además del respiro original de la plantilla. */
.rg-hero { position: relative; padding: clamp(120px, 18vh, 176px) 0 clamp(32px, 5vh, 48px); overflow: hidden; }
.rg-hero__bg {
  position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(44% 60% at 86% 8%, rgba(168,85,247,.16), transparent 70%),
    radial-gradient(40% 55% at 10% 90%, rgba(244,197,106,.1), transparent 72%);
}
.rg-hero__container { position: relative; }
.rg-hero .eyebrow { margin-bottom: 14px; animation: hy-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.rg-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;
  animation: hy-rise .7s cubic-bezier(.2,.7,.2,1) .06s both;
}
.rg-gray { color: var(--muted); }
.rg-hero__lead {
  margin: 18px 0 0; max-width: 640px;
  font-size: clamp(1rem, 2.4vw, 1.15rem); color: var(--muted);
  animation: hy-rise .7s cubic-bezier(.2,.7,.2,1) .12s both;
}
.rg-hero__lead strong { color: var(--text); }

/* ---------- Comparativa ---------- */
.rg-compare { padding: 0 0 clamp(50px, 8vh, 80px); }

/* Contenedor con scroll horizontal propio: en móvil la tabla se desliza
   sin romper la página. */
.rg-table-wrap {
  border: 1px solid var(--border); border-radius: 18px;
  background: rgba(255,255,255,.02);
  overflow-x: auto; max-width: 100%;
}
.rg-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 820px; font-size: .9rem; }
.rg-table th, .rg-table td { border-bottom: 1px solid var(--border); }

.rg-th { padding: 16px 12px; }
.rg-th--dim { background: rgba(255,255,255,.015); }
.rg-th--oly, .rg-td--oly { background: rgba(244,197,106,.04); }
.rg-th-feature {
  position: sticky; left: 0; z-index: 3; background: var(--rg-cell);
  text-align: left; padding: 16px 18px; min-width: 230px;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}

/* Insignias de rango */
.rg-rank {
  display: inline-block; padding: 5px 12px; border-radius: 8px;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: .74rem;
}
.rg-rank--mortal { background: rgba(169,164,184,.08); border: 1px solid rgba(169,164,184,.35); color: #A9A4B8; }
.rg-rank--hero { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.4); color: #34D399; }
.rg-rank--demigod { background: rgba(125,211,252,.08); border: 1px solid rgba(125,211,252,.42); color: #7DD3FC; }
.rg-rank--titan { background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.45); color: #C7A0F5; }
.rg-rank--oly { background: rgba(244,197,106,.12); border: 1px solid rgba(244,197,106,.5); color: #FFD97A; }
.rg-price { font-size: .66rem; color: var(--faint); font-weight: 700; margin-top: 6px; letter-spacing: .1em; }

/* Filas de sección y celdas de perks */
.rg-td-section {
  position: sticky; left: 0; padding: 12px 18px;
  background: rgba(244,197,106,.05);
  font-size: .68rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.rg-td-feature { position: sticky; left: 0; z-index: 2; background: var(--rg-cell); padding: 13px 18px; }
.rg-perk { font-weight: 700; color: var(--text); }
.rg-perk-desc { font-size: .76rem; color: var(--faint); }

/* Celdas de valores */
.rg-td { padding: 13px 12px; text-align: center; }
.rg-val-mortal { font-weight: 800; color: #A9A4B8; }
.rg-val-hero { font-weight: 800; color: #34D399; }
.rg-val-demigod { font-weight: 800; color: #7DD3FC; }
.rg-val-titan { font-weight: 800; color: #C7A0F5; }
.rg-val-oly { font-weight: 900; color: #FFD97A; }
.rg-dash { color: #4a4556; font-weight: 700; }
.rg-lock { vertical-align: -1px; }

/* Pastilla "PRÓXIMAMENTE" */
.rg-soon {
  padding: 2px 7px; border-radius: 100px;
  background: rgba(168,85,247,.14); color: var(--violet-bright);
  font-weight: 700; font-size: .6rem; letter-spacing: .08em; vertical-align: 1px;
}
.rg-soon--lg { padding: 2px 8px; font-size: .66rem; letter-spacing: .1em; vertical-align: baseline; }

/* ---------- Leyenda bajo la tabla ---------- */
.rg-legend { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 18px; font-size: .82rem; color: var(--faint); }
.rg-legend__item { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Banda CTA ---------- */
.rg-cta {
  margin-top: clamp(36px, 6vh, 56px); padding: clamp(28px, 4vw, 44px);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(244,197,106,.1));
  border: 1px solid rgba(244,197,106,.28);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.rg-cta__text { max-width: 520px; }
.rg-cta__title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.1; }
.rg-cta__desc { margin: 10px 0 0; color: var(--muted); font-size: .98rem; }
.rg-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 13px;
  background: linear-gradient(135deg, #FFE7A6, #F4C56A 50%, #D99A2B);
  color: #1a1206; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.05rem;
  transition: transform .2s ease, filter .2s ease;
}
.rg-cta__btn:hover { transform: translateY(-3px); filter: brightness(1.05); color: #1a1206; }

/* Encuadre móvil: columna fija más estrecha para que asomen los rangos */
@media (max-width: 640px) {
  .rg-table { font-size: .84rem; min-width: 740px; }
  .rg-th-feature, .rg-td-feature {
    min-width: 158px; max-width: 176px; width: 176px;
    padding-left: 12px; padding-right: 12px;
    box-shadow: 10px 0 14px -10px rgba(0, 0, 0, .9);
  }
}