/*
 * MYRION — capa de fidelidad visual FASE 2.
 * Ajusta la composición contra la referencia suministrada sin tocar lógica,
 * rutas, IDs legacy ni contenido dinámico de universos.
 */

:root {
  --myrion-fidelity-red: #ff2635;
  --myrion-fidelity-edge: rgba(255, 45, 58, .62);
  --myrion-fidelity-metal-hi: rgba(218, 209, 211, .34);
  --myrion-fidelity-metal-lo: rgba(33, 27, 29, .94);
}

/* Cabecera: metal oscuro, biseles largos y una línea energética fina. */
.myrion-header .header-wrapper {
  background:
    linear-gradient(180deg, rgba(27, 23, 24, .995) 0%, rgba(10, 8, 9, .995) 56%, rgba(3, 3, 3, .998) 100%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,65,75,.24),
    0 2px 0 rgba(92,82,85,.26),
    0 7px 28px rgba(0,0,0,.78),
    0 3px 16px rgba(255,18,33,.13) !important;
}
.myrion-header .header-wrapper::before,
.myrion-header .header-wrapper::after {
  content:"";
  position:absolute;
  z-index:2;
  top:9px;
  bottom:10px;
  width:86px;
  pointer-events:none;
  opacity:.72;
}
.myrion-header .header-wrapper::before {
  left:0;
  background:linear-gradient(128deg, transparent 39%, rgba(144,130,134,.34) 40% 41%, transparent 42%),
             linear-gradient(52deg, transparent 63%, rgba(255,38,53,.26) 64% 65%, transparent 66%);
}
.myrion-header .header-wrapper::after {
  right:0;
  transform:scaleX(-1);
  background:linear-gradient(128deg, transparent 39%, rgba(144,130,134,.34) 40% 41%, transparent 42%),
             linear-gradient(52deg, transparent 63%, rgba(255,38,53,.26) 64% 65%, transparent 66%);
}
.myrion-header__frame {
  inset:6px 28px 8px !important;
  border-top-color:rgba(207,196,198,.22) !important;
  border-bottom-color:rgba(255,38,53,.46) !important;
}

.myrion-brand__sigil { width:52px !important; height:63px !important; }
.myrion-brand__copy strong {
  font-size:clamp(25px,2vw,34px) !important;
  letter-spacing:.105em !important;
  text-shadow:0 2px 3px rgba(0,0,0,.92), 0 0 12px rgba(255,255,255,.025);
}
.myrion-brand__copy small { letter-spacing:.265em !important; color:#aaa0a3 !important; }

.myrion-nav.navigation { height:56px !important; }
.myrion-nav__item.nav-item { min-width:132px !important; height:56px !important; }
.myrion-nav__item::after { height:2px !important; bottom:4px !important; }
.myrion-nav__item.active { box-shadow:inset 0 -11px 20px rgba(255,27,42,.035); }

/* Derecha compacta: evita saltos con saldo, cuenta y badges largos. */
.myrion-actions.navigation { min-width:0; }
.myrion-balance.nav-profile { min-width:92px !important; max-width:132px; width:auto !important; }
.myrion-balance__value { overflow:hidden; text-overflow:ellipsis; max-width:82px; }
.myrion-account-link.nav-profile { min-width:116px !important; max-width:174px; }
.myrion-account-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notification-counter { min-width:18px; padding:0 5px !important; }

/* Escena: el eclipse debe dominar la mitad superior como en la referencia. */
.myrion-reference.xz-infernal { min-height:calc(100vh - var(--myrion-ref-header)) !important; }
.myrion-reference .xz-infernal__scene {
  inset:-18px -22px -20px !important;
  background-position:center 40% !important;
  transform:translate3d(var(--xz-scene-x),var(--xz-scene-y),0) scale(1.035) !important;
}
.myrion-reference .xz-infernal__ambient {
  background:
    radial-gradient(ellipse at 50% 29%, transparent 0 24%, rgba(0,0,0,.05) 47%, rgba(0,0,0,.18) 73%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.04) 48%,rgba(0,0,0,.24) 100%) !important;
}

/* Hero: reproduce la jerarquía y las distancias del mockup. */
.myrion-reference .xz-hero {
  min-height:314px !important;
  padding:48px 190px 12px !important;
}
.xz-hero__reference-emblem { width:30px !important; height:36px !important; margin-bottom:6px !important; }
.myrion-reference .xz-hero__eyebrow { font-size:9px !important; letter-spacing:.31em !important; }
.myrion-reference .xz-hero__meta { margin-top:9px !important; font-size:9px !important; letter-spacing:.31em !important; }
.myrion-reference .xz-hero h1 {
  margin-top:24px !important;
  font-size:clamp(47px,4.45vw,var(--myrion-title-max)) !important;
  line-height:.97 !important;
  text-shadow:0 4px 6px rgba(0,0,0,.75), 0 0 3px rgba(255,255,255,.16);
}
.myrion-reference .xz-hero__divider { width:min(430px,48vw) !important; margin:13px auto 10px !important; }
.myrion-reference .xz-hero__divider::before,
.myrion-reference .xz-hero__divider::after { opacity:.9; }
.myrion-reference .xz-hero__divider img { width:28px !important; height:30px !important; }
.myrion-reference .xz-hero__subtitle { font-size:10px !important; letter-spacing:.48em !important; }

.myrion-reference .xz-side-message {
  top:88px !important;
  writing-mode:horizontal-tb !important;
  transform:none !important;
  max-width:150px !important;
  font-size:9px !important;
  line-height:1.85 !important;
  letter-spacing:.22em !important;
  color:rgba(221,210,212,.72) !important;
}
.myrion-reference .xz-side-message--left { left:22px !important; text-align:left; }
.myrion-reference .xz-side-message--right { right:22px !important; text-align:right; }

/* Cards: proporción, biseles y botón más cercanos al arte objetivo. */
.myrion-reference .xz-universes {
  width:min(1040px,calc(100% - 48px)) !important;
  margin:-2px auto 0 !important;
  padding:0 0 34px !important;
}
.myrion-reference .xz-universe-grid { align-items:stretch; }
.myrion-reference .xz-universe-card {
  position:relative;
  overflow:visible !important;
  border:1px solid rgba(124,102,107,.72) !important;
  background:
    linear-gradient(180deg,rgba(19,15,17,.84),rgba(4,4,4,.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -14px 28px rgba(0,0,0,.44),
    0 10px 24px rgba(0,0,0,.56),
    0 0 13px rgba(255,30,44,.10) !important;
  clip-path:polygon(8% 0,92% 0,100% 8%,100% 92%,92% 100%,8% 100%,0 92%,0 8%);
}
.myrion-reference .xz-universe-card::before {
  content:"";
  position:absolute;
  z-index:20;
  inset:-5px;
  pointer-events:none;
  clip-path:inherit;
  border:1px solid rgba(255,45,58,.28);
  box-shadow:inset 0 0 12px rgba(255,30,44,.07);
}
.myrion-reference .xz-universe-card--featured {
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045), 0 13px 28px rgba(0,0,0,.62), 0 0 18px rgba(255,30,44,.14) !important;
}
.myrion-reference .xz-universe-card__image { border-bottom:1px solid rgba(255,40,53,.42) !important; }
.myrion-reference .xz-universe-card__shade {
  background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.08) 49%,rgba(2,2,2,.88) 100%) !important;
}
.myrion-reference .xz-universe-card__identity { bottom:11px !important; }
.myrion-reference .xz-universe-card__name {
  font-size:clamp(28px,2.35vw,35px) !important;
  letter-spacing:.055em !important;
  text-shadow:0 3px 4px #000,0 0 2px rgba(255,255,255,.24);
}
.myrion-reference .xz-universe-card__subtitle { font-size:8px !important; letter-spacing:.19em !important; }
.myrion-reference .xz-universe-card__body { padding:10px 16px 17px !important; }
.myrion-reference .xz-enter {
  min-height:38px !important;
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
  border-color:rgba(255,45,58,.78) !important;
  background:linear-gradient(180deg,rgba(45,8,12,.78),rgba(8,5,6,.92)) !important;
  box-shadow:inset 0 0 14px rgba(255,31,44,.06),0 0 8px rgba(255,26,39,.08);
}
.myrion-reference .xz-enter:hover { box-shadow:inset 0 0 18px rgba(255,31,44,.12),0 0 14px rgba(255,26,39,.19); }
.myrion-reference .xz-universe-card__sigil { width:22px !important; height:25px !important; bottom:-13px !important; }

.xz-reference-message {
  right:max(26px,calc((100vw - 1480px)/2 + 20px)) !important;
  bottom:34px !important;
  width:145px !important;
  line-height:1.85 !important;
  letter-spacing:.22em !important;
}

/* Footer visualmente bajo y dividido como la referencia; conserva enlaces legacy. */
.footer {
  position:relative;
  border-top:1px solid rgba(174,155,160,.34) !important;
  background:
    linear-gradient(180deg,rgba(13,10,11,.99),rgba(3,3,3,.998)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 -4px 22px rgba(0,0,0,.45) !important;
}
.footer::before {
  content:"";
  position:absolute;
  left:0;right:0;top:-2px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,38,53,.20),rgba(255,255,255,.15),rgba(255,38,53,.20),transparent);
}
.footer .footer-container { min-height:118px !important; padding-top:18px !important; padding-bottom:16px !important; }

/* QA responsive por familias de resolución solicitadas. */
@media (min-width:2560px) {
  .myrion-header__inner.header-container { width:min(1560px,calc(100% - 110px)) !important; }
  .myrion-reference .xz-infernal__scene { background-size:cover !important; background-position:center 39% !important; }
  .myrion-reference .xz-hero { width:min(1480px,calc(100% - 120px)) !important; }
}
@media (min-width:3000px) {
  .myrion-reference .xz-infernal__scene { background-size:100% auto !important; }
  .myrion-reference .xz-universes { width:min(1120px,calc(100% - 70px)) !important; }
}
@media (max-width:1366px) {
  .myrion-header__inner.header-container {
    width:calc(100% - 30px) !important;
    grid-template-columns:minmax(220px,.8fr) minmax(375px,1.2fr) minmax(330px,1fr) !important;
    gap:10px !important;
  }
  .myrion-brand__sigil { width:45px !important;height:55px !important; }
  .myrion-brand__copy strong { font-size:25px !important; }
  .myrion-nav__item.nav-item { min-width:112px !important;padding:0 12px !important; }
  .myrion-reference .xz-hero { padding-left:150px !important;padding-right:150px !important; }
}
@media (max-width:1100px) {
  .myrion-header__inner.header-container { grid-template-columns:220px 1fr auto !important; }
  .myrion-brand__copy small { letter-spacing:.16em !important; }
  .myrion-nav__item.nav-item { min-width:96px !important; font-size:11px !important; gap:7px; }
  .myrion-account-link span { display:none; }
  .myrion-account-link.nav-profile { min-width:48px !important; width:48px !important; padding:0 !important; }
  .myrion-balance.nav-profile { min-width:76px !important; }
  .myrion-reference .xz-side-message { display:none !important; }
  .myrion-reference .xz-hero { padding:56px 52px 12px !important; }
}
@media (max-width:1024px) {
  .myrion-reference .xz-universes { width:min(700px,calc(100% - 34px)) !important; }
  .myrion-reference .xz-universe-grid { gap:24px !important; }
  .myrion-reference .xz-universe-card--featured { transform:none; }
}
@media (max-width:900px) {
  .myrion-header__inner.header-container { grid-template-columns:1fr auto !important; }
  .myrion-nav.navigation { display:none !important; }
  .myrion-brand__copy strong { font-size:23px !important; }
  .myrion-actions.navigation { justify-self:end; }
  .myrion-language.lang-select { width:64px !important;padding:0 8px !important; }
  .myrion-language__code { display:none; }
}
@media (max-width:720px) {
  .myrion-header .header-wrapper { clip-path:polygon(0 0,100% 0,100% 88%,96% 100%,4% 100%,0 88%); }
  .myrion-header__inner.header-container { width:calc(100% - 18px) !important; padding:5px 0 8px !important; }
  .myrion-brand__sigil { width:38px !important;height:46px !important; }
  .myrion-brand__copy strong { font-size:20px !important;letter-spacing:.08em !important; }
  .myrion-brand__copy small { font-size:7px !important;letter-spacing:.12em !important; }
  .myrion-balance.nav-profile,.myrion-account-link.nav-profile,.myrion-notifications.notification-button { display:none !important; }
  .myrion-reference .xz-hero { min-height:290px !important;padding:54px 22px 10px !important; }
  .myrion-reference .xz-hero h1 { margin-top:20px !important; }
  .myrion-reference .xz-hero__subtitle { letter-spacing:.31em !important; }
  .myrion-reference .xz-universes { width:min(390px,calc(100% - 28px)) !important;padding-bottom:40px !important; }
  .myrion-reference .xz-universe-grid { gap:26px !important; }
  .xz-reference-message { display:none !important; }
}
@media (max-width:430px) {
  .myrion-brand__copy small { display:none; }
  .myrion-brand__copy strong { font-size:18px !important; }
  .myrion-reference .xz-hero { padding-top:44px !important;min-height:270px !important; }
  .xz-hero__reference-emblem { width:26px !important;height:31px !important; }
  .myrion-reference .xz-hero__eyebrow { font-size:7px !important;letter-spacing:.23em !important; }
  .myrion-reference .xz-hero__meta { font-size:7px !important;letter-spacing:.20em !important; }
  .myrion-reference .xz-hero h1 { font-size:clamp(34px,11vw,45px) !important; }
  .myrion-reference .xz-hero__divider { width:82vw !important; }
}
@media (max-width:390px) {
  .myrion-language.lang-select { width:54px !important; }
  .myrion-reference .xz-universes { width:calc(100% - 22px) !important; }
  .myrion-reference .xz-universe-card__name { font-size:29px !important; }
}
@media (max-width:360px) {
  .myrion-brand__sigil { width:34px !important;height:42px !important; }
  .myrion-brand__copy strong { font-size:16px !important; }
  .myrion-reference .xz-hero h1 { font-size:34px !important; }
  .myrion-reference .xz-hero__subtitle { font-size:8px !important;letter-spacing:.24em !important; }
}

@media (prefers-reduced-motion:reduce) {
  .myrion-reference .xz-infernal__scene { transform:none !important; }
  .myrion-reference .xz-universe-card,
  .myrion-reference .xz-enter { transition:none !important; }
}