/* ==========================================================================
   Hyperions MC — /tienda/
   Estilos propios de la página de tienda (prefijo .td-). Se carga DESPUÉS
   de /css/styles.css y reutiliza sus variables, keyframes y componentes.
   ========================================================================== */

/* ---------- Cabecera: variante en flujo (la plantilla la muestra opaca,
   con borde inferior, en lugar de superpuesta como en la portada) ---------- */
.td-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: rgba(8,7,14,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.td-header .site-header__inner { padding-top: 16px; padding-bottom: 16px; }

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

/* ---------- Hero de la tienda ---------- */
.td-hero {
  position: relative;
  padding: clamp(52px, 9vh, 88px) 0 clamp(36px, 6vh, 56px);
  overflow: hidden;
}
.td-hero__bg {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(44% 60% at 14% 10%, rgba(168,85,247,.18), transparent 70%),
    radial-gradient(40% 55% at 88% 90%, rgba(244,197,106,.12), transparent 72%);
}
.td-hero__container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}
.td-hero__eyebrow {
  margin-bottom: 14px;
  animation: hy-rise .6s cubic-bezier(.2,.7,.2,1) both;
}
.td-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: 760px;
  animation: hy-rise .7s cubic-bezier(.2,.7,.2,1) .06s both;
}
.td-hero__lead {
  margin: 18px 0 0;
  max-width: 600px;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--muted);
  animation: hy-rise .7s cubic-bezier(.2,.7,.2,1) .12s both;
}
.td-strong { color: var(--text); }

/* Escalera de rangos */
.td-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  animation: hy-rise .7s cubic-bezier(.2,.7,.2,1) .18s both;
}
.td-ladder__arrow { flex: none; }
.td-ladder__pill {
  padding: 6px 13px;
  border-radius: 100px;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
}
.td-ladder__pill--mortal { border: 1px solid rgba(169,164,184,.35); background: rgba(169,164,184,.07); color: #A9A4B8; }
.td-ladder__pill--hero { border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.08); color: #34D399; }
.td-ladder__pill--demigod { border: 1px solid rgba(125,211,252,.4); background: rgba(125,211,252,.08); color: #7DD3FC; }
.td-ladder__pill--titan { border: 1px solid rgba(168,85,247,.45); background: rgba(168,85,247,.08); color: #C7A0F5; }
.td-ladder__pill--olympian { border: 1px solid rgba(244,197,106,.5); background: rgba(244,197,106,.1); color: #FFD97A; }

/* ---------- Sección de rangos en venta ---------- */
.td-shop { padding: 0 0 clamp(70px, 11vh, 120px); }
.td-shop__container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

/* Selector Mensual / Permanente */
.td-toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3.5vh, 30px);
}
.td-toggle {
  display: inline-flex;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  gap: 4px;
}
.td-toggle__btn {
  padding: 10px 20px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .02em;
  transition: all .2s ease;
  background: transparent;
  color: #A9A4B8;
}
.td-toggle__btn.is-active {
  background: linear-gradient(135deg, #FFE7A6, #F4C56A 55%, #D99A2B);
  color: #1a1206;
}
.td-savings { font-size: .86rem; color: var(--faint); }

/* Rejilla de tarjetas */
.td-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;
}

/* Tarjeta de rango */
.td-rango {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 30px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22,19,33,.6), rgba(12,10,18,.55));
  border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.td-rango--hero { border-color: rgba(52,211,153,.28); }
.td-rango--hero:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -32px rgba(52,211,153,.55); }
.td-rango--demigod { border-color: rgba(125,211,252,.32); }
.td-rango--demigod:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -32px rgba(125,211,252,.55); }
.td-rango--titan { border-color: rgba(168,85,247,.35); }
.td-rango--titan:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -32px rgba(168,85,247,.6); }
.td-rango--olympian {
  background: linear-gradient(180deg, rgba(34,27,16,.55), rgba(14,11,18,.6));
  border-color: rgba(244,197,106,.55);
  animation: hy-glow 4s ease-in-out infinite;
  transition: transform .25s ease;
}
.td-rango--olympian:hover { transform: translateY(-6px); }

.td-rango__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.td-rango__chip {
  padding: 5px 12px;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: .78rem;
}
.td-rango__chip--hero { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.4); color: #34D399; }
.td-rango__chip--demigod { background: rgba(125,211,252,.1); border: 1px solid rgba(125,211,252,.45); color: #7DD3FC; }
.td-rango__chip--titan { background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.45); color: #C7A0F5; }
.td-rango__chip--olympian { background: rgba(244,197,106,.12); border: 1px solid rgba(244,197,106,.5); color: #FFD97A; }

.td-rango__badge {
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .14em;
}
.td-rango__badge--demigod { background: rgba(125,211,252,.14); color: #7DD3FC; }
.td-rango__badge--olympian { background: linear-gradient(135deg, #FFE7A6, #D99A2B); color: #1a1206; }

.td-rango__nombre {
  margin-top: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
}
.td-rango__nombre--hero { color: #34D399; }
.td-rango__nombre--demigod { color: #7DD3FC; }
.td-rango__nombre--titan { color: #C7A0F5; }

.td-precio-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.td-precio {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.1rem;
}
.td-precio-nota {
  font-size: .78rem;
  color: var(--faint);
  font-weight: 600;
}

.td-rango__desde {
  margin: 18px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.td-rango--olympian .td-rango__desde { border-top-color: rgba(244,197,106,.2); }

/* Lista de perks */
.td-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.td-perk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.td-perk__check { flex: none; margin-top: 4px; }
.td-perk__text { font-size: .92rem; color: var(--muted); }
.td-cmd {
  font-family: ui-monospace, monospace;
  color: var(--text);
  font-weight: 600;
}
.td-lock { vertical-align: -1px; }

/* Botones de compra */
.td-buy {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .98rem;
  transition: transform .18s ease, filter .18s ease;
}
.td-buy--hero { background: linear-gradient(135deg, #6EE7B7, #34D399 55%, #0EA36F); color: #062015; }
.td-buy--hero:hover { transform: translateY(-2px); filter: brightness(1.06); color: #062015; }
.td-buy--demigod { background: linear-gradient(135deg, #BAE6FD, #7DD3FC 55%, #38BDF8); color: #06222e; }
.td-buy--demigod:hover { transform: translateY(-2px); filter: brightness(1.06); color: #06222e; }
.td-buy--titan { background: linear-gradient(135deg, #C7A0F5, #A855F7 55%, #7C3AED); color: #fff; }
.td-buy--titan:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.td-buy--olympian { background: linear-gradient(135deg, #FFE7A6, #F4C56A 50%, #D99A2B); color: #1a1206; }
.td-buy--olympian:hover { transform: translateY(-2px); filter: brightness(1.06); color: #1a1206; }

/* Fila de notas */
.td-notas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 40px);
  align-items: stretch;
}
.td-nota {
  flex: 1 1 280px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.td-nota__icon { flex: none; margin-top: 2px; }
.td-nota__text {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
}
.td-nota--link {
  align-items: center;
  justify-content: space-between;
  border-color: rgba(168,85,247,.4);
  background: rgba(168,85,247,.08);
  transition: all .2s ease;
}
.td-nota--link:hover { background: rgba(168,85,247,.15); border-color: var(--violet); }
.td-nota__link-text {
  font-size: .92rem;
  color: var(--violet-bright);
  font-weight: 700;
}
.td-nota__arrow { flex: none; }