/*
 * MYRION — capa de fidelidad visual contra la referencia aprobada.
 *
 * Se carga al final del stack para neutralizar estilos cyan/legacy sin tocar
 * contratos de autenticación, IDs, rutas, Web Push ni datos dinámicos.
 */
:root {
  --my99-red: #ff2635;
  --my99-red-hot: #ff3a48;
  --my99-red-deep: #a30b15;
  --my99-blood: #66070c;
  --my99-black: #020203;
  --my99-metal-0: #09090b;
  --my99-metal-1: #111216;
  --my99-metal-2: #222329;
  --my99-silver: #d2d2d6;
  --my99-text: #f3f3f5;
  --my99-muted: #9d969a;
}

html, body {
  background: var(--my99-black) !important;
  color: var(--my99-text) !important;
}

/* -------------------------------------------------------------------------
   HEADER — geometría larga, oscura y metálica de la referencia.
   ------------------------------------------------------------------------- */
.header.myrion-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1500 !important;
  min-height: 94px !important;
  height: 94px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,38,53,.72) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(31,27,29,.995) 0%, rgba(13,11,13,.995) 48%, rgba(4,4,5,.998) 100%),
    repeating-linear-gradient(103deg, rgba(255,255,255,.022) 0 1px, transparent 1px 6px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,38,53,.25),
    0 10px 32px rgba(0,0,0,.74),
    0 2px 15px rgba(255,18,32,.16) !important;
}
.header.myrion-header::before {
  content: "";
  position: absolute;
  inset: 6px 18px 7px;
  pointer-events: none;
  clip-path: polygon(1.7% 0, 98.3% 0, 100% 36%, 99% 100%, 1% 100%, 0 36%);
  border: 1px solid rgba(148,136,140,.34);
  background: linear-gradient(90deg, rgba(255,38,53,.02), transparent 16% 84%, rgba(255,38,53,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.header.myrion-header::after {
  left: 2.8% !important;
  right: 2.8% !important;
  bottom: -2px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(255,38,53,.42) 8%, var(--my99-red) 36% 64%, rgba(255,38,53,.42) 92%, transparent) !important;
  box-shadow: 0 0 10px rgba(255,38,53,.55) !important;
}
.myrion-header .header-wrapper {
  min-height: 94px !important;
  height: 94px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.header-container.myrion-header__inner {
  box-sizing: border-box !important;
  width: min(1536px, calc(100% - 56px)) !important;
  max-width: 1536px !important;
  min-height: 94px !important;
  height: 94px !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: minmax(320px, .95fr) minmax(430px, 1.2fr) minmax(360px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Marca: emblema oficial + wordmark plateado, sin cyan. */
.logo.myrion-brand,
.myrion-brand.logo {
  width: auto !important;
  height: 74px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  gap: 13px !important;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
}
.myrion-brand__sigil {
  width: 68px !important;
  height: 72px !important;
  flex: 0 0 68px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
}
.myrion-brand__sigil::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px 5px !important;
  border: 0 !important;
  clip-path: none !important;
  background: radial-gradient(circle, rgba(255,31,44,.30), transparent 67%) !important;
  filter: blur(9px) !important;
}
.myrion-brand__sigil img {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.12)) drop-shadow(0 0 11px rgba(255,24,38,.58)) !important;
}
.myrion-brand__copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.myrion-brand__copy strong {
  margin: 0 !important;
  color: transparent !important;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important;
  font-size: clamp(27px, 2.2vw, 38px) !important;
  font-weight: 700 !important;
  line-height: .96 !important;
  letter-spacing: .075em !important;
  background: linear-gradient(180deg, #fff 0%, #ebe7e8 27%, #a7a2a5 49%, #f7f4f5 67%, #777277 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
.myrion-brand__copy small {
  margin-top: 7px !important;
  color: #beb7ba !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .34em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Navegación: panel activo rojo como en el mockup. */
.navigation.nav-left.myrion-nav,
.myrion-nav.navigation {
  width: 100% !important;
  max-width: 560px !important;
  height: 58px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  background: linear-gradient(180deg, rgba(9,8,9,.55), rgba(2,2,3,.28)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), inset 0 -1px rgba(255,38,53,.08) !important;
}
.myrion-nav__item.nav-item,
a.myrion-nav__item {
  position: relative !important;
  min-width: 142px !important;
  height: 58px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-right: 1px solid rgba(150,142,145,.19) !important;
  border-radius: 0 !important;
  color: #e8e5e6 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-shadow: none !important;
}
.myrion-nav__item.nav-item i,
a.myrion-nav__item i {
  width: 19px !important;
  color: #e5e1e2 !important;
  font-size: 16px !important;
  filter: none !important;
}
.myrion-nav__item.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(9% 0,100% 0,100% 100%,9% 100%,0 50%);
  background: linear-gradient(180deg, rgba(255,38,53,.18), rgba(103,4,12,.09));
  transition: opacity .18s ease;
}
.myrion-nav__item.nav-item::after {
  left: 22px !important;
  right: 22px !important;
  bottom: 4px !important;
  height: 2px !important;
  background: var(--my99-red) !important;
  box-shadow: 0 0 8px rgba(255,38,53,.78), 0 0 18px rgba(255,38,53,.28) !important;
}
.myrion-nav__item.nav-item:hover,
.myrion-nav__item.nav-item.active {
  color: #fff !important;
  background: transparent !important;
}
.myrion-nav__item.nav-item:hover::before,
.myrion-nav__item.nav-item.active::before { opacity: 1; }
.myrion-nav__item.nav-item:hover i,
.myrion-nav__item.nav-item.active i {
  color: var(--my99-red-hot) !important;
  filter: drop-shadow(0 0 6px rgba(255,38,53,.58)) !important;
}

/* Acciones derechas: gris/blanco/rojo; se sobreescribe cualquier legado cyan. */
.navigation.nav-right.myrion-actions {
  min-width: 0 !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  color: #eee !important;
}
.myrion-actions .nav-item,
.myrion-language,
.myrion-balance,
.myrion-account-link,
.myrion-notifications {
  color: #efedef !important;
  border-color: rgba(180,170,174,.16) !important;
  background: linear-gradient(180deg, rgba(22,20,22,.54), rgba(5,5,6,.22)) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.myrion-language,
.myrion-balance,
.myrion-account-link,
.myrion-notifications {
  box-sizing: border-box !important;
  height: 58px !important;
  min-height: 58px !important;
  border-width: 0 1px 0 0 !important;
  border-style: solid !important;
  border-radius: 0 !important;
}
.myrion-language { min-width: 98px !important; justify-content: center !important; gap: 8px !important; }
.myrion-balance { min-width: 94px !important; padding: 0 16px !important; }
.myrion-account-link { min-width: 126px !important; padding: 0 15px !important; }
.myrion-notifications { width: 60px !important; min-width: 60px !important; }
.myrion-actions i { color: #dedadc !important; }
.myrion-actions a:hover,
.myrion-actions button:hover,
.myrion-language:hover {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255,38,53,.10), rgba(70,5,10,.05)) !important;
  box-shadow: inset 0 -2px var(--my99-red) !important;
}
.myrion-actions a:hover i,
.myrion-actions button:hover i { color: var(--my99-red-hot) !important; }
.notification-counter,
.notification-badge {
  background: #e91827 !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(255,38,53,.62) !important;
}
.myrion-popover,
.lang-select-list,
.account-options,
.notification-dropdown {
  border: 1px solid rgba(255,38,53,.28) !important;
  background: rgba(6,6,8,.985) !important;
  color: #e9e6e7 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.78), 0 0 18px rgba(255,38,53,.07) !important;
}

/* -------------------------------------------------------------------------
   ESCENA — reforzar planeta/eclipse incluso si el asset del hosting es oscuro.
   La UI sigue fuera de la imagen. El planeta sintético actúa como composición
   ambiental y no contiene texto ni controles.
   ------------------------------------------------------------------------- */
.xz-infernal.myrion-reference {
  min-height: calc(100vh - 94px) !important;
  background: #020203 !important;
}
.myrion-reference .xz-infernal__scene {
  inset: 0 !important;
  background-size: cover !important;
  background-position: 50% 33% !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: brightness(1.16) contrast(1.12) saturate(1.18) !important;
}
.myrion-reference .xz-infernal__ambient {
  z-index: -3 !important;
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 39% 39% at 50% 23%, rgba(255,64,73,.12) 0%, rgba(255,23,36,.06) 35%, transparent 57%),
    radial-gradient(ellipse 66% 58% at 50% 22%, transparent 0 44%, rgba(255,16,31,.11) 45%, rgba(80,0,7,.12) 48%, transparent 55%),
    radial-gradient(ellipse at 50% 30%, transparent 0 28%, rgba(0,0,0,.05) 52%, rgba(0,0,0,.20) 80%, rgba(0,0,0,.36) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 57%, rgba(0,0,0,.22) 100%) !important;
}
.myrion-reference .xz-infernal__ambient::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(760px, 55vw);
  aspect-ratio: 1;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 36%, rgba(35,5,8,.36), rgba(8,4,6,.92) 52%, #010102 72%),
    radial-gradient(circle at 50% 50%, #130308, #010102 72%);
  box-shadow:
    0 -8px 13px rgba(255,95,100,.72),
    0 -19px 42px rgba(255,32,45,.54),
    0 -38px 90px rgba(181,5,21,.38),
    inset 0 16px 28px rgba(255,38,53,.08),
    inset 0 -80px 100px rgba(0,0,0,.75);
  opacity: .74;
  mix-blend-mode: screen;
  pointer-events: none;
}
.myrion-reference .xz-infernal__ambient::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 31%;
  pointer-events: none;
  opacity: .7;
  background:
    linear-gradient(174deg, transparent 0 51%, rgba(255,38,53,.09) 52%, transparent 52.5%),
    linear-gradient(186deg, transparent 0 56%, rgba(255,38,53,.07) 56.4%, transparent 57%),
    linear-gradient(180deg, transparent, rgba(2,2,3,.12) 30%, rgba(2,2,3,.74));
}

/* Hero central: jerarquía y ritmo del mockup. */
.myrion-reference .xz-hero {
  box-sizing: border-box !important;
  width: min(1320px, calc(100% - 80px)) !important;
  max-width: 1320px !important;
  min-height: 314px !important;
  margin: 0 auto !important;
  padding: 44px 0 12px !important;
  text-align: center !important;
}
.myrion-reference .xz-hero__reference-emblem {
  width: 32px !important;
  height: 39px !important;
  margin: 0 auto 8px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(255,38,53,.52)) !important;
}
.myrion-reference .xz-hero__eyebrow {
  margin: 0 !important;
  color: var(--my99-red-hot) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .36em !important;
  text-transform: uppercase !important;
}
.myrion-reference .xz-hero__meta {
  margin: 8px 0 0 !important;
  color: #d0cacc !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .34em !important;
}
.myrion-reference .xz-hero h1 {
  width: auto !important;
  max-width: 960px !important;
  margin: 27px auto 0 !important;
  color: #f4f2f2 !important;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important;
  font-size: clamp(48px, 4.75vw, 72px) !important;
  font-weight: 600 !important;
  line-height: 1.03 !important;
  letter-spacing: -.022em !important;
  text-shadow: 0 4px 6px rgba(0,0,0,.96), 0 1px 0 #fff, 0 0 2px rgba(255,255,255,.18) !important;
}
.myrion-reference .xz-hero__divider {
  width: min(570px, 61vw) !important;
  margin: 8px auto 7px !important;
}
.myrion-reference .xz-hero__divider::before,
.myrion-reference .xz-hero__divider::after {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--my99-red)) !important;
  box-shadow: 0 0 7px rgba(255,38,53,.44) !important;
}
.myrion-reference .xz-hero__divider::after {
  background: linear-gradient(90deg, var(--my99-red), transparent) !important;
}
.myrion-reference .xz-hero__divider img {
  width: 25px !important;
  height: 31px !important;
  object-fit: contain !important;
}
.myrion-reference .xz-hero__subtitle {
  margin: 0 !important;
  color: #dad5d7 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .56em !important;
}
.xz-side-message {
  max-width: 160px !important;
  color: #c7c1c4 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
}
.xz-side-message::after,
.xz-reference-message::after {
  background: var(--my99-red) !important;
  box-shadow: 0 0 6px rgba(255,38,53,.32) !important;
}
.xz-reference-message {
  color: var(--my99-red-hot) !important;
  font-size: 9px !important;
  line-height: 1.8 !important;
  letter-spacing: .30em !important;
}

/* Cards: proporciones, doble metal y CTA recortada. */
.myrion-reference .xz-universes {
  width: min(956px, calc(100% - 60px)) !important;
  margin: -6px auto 0 !important;
  padding: 0 0 38px !important;
}
.myrion-reference .xz-universe-grid {
  gap: 26px !important;
  grid-template-columns: repeat(3, minmax(0, 294px)) !important;
  justify-content: center !important;
  align-items: end !important;
}
.myrion-reference .xz-universe-card {
  position: relative !important;
  width: 294px !important;
  min-height: 306px !important;
  overflow: visible !important;
  border: 1px solid rgba(167,153,158,.68) !important;
  border-radius: 0 !important;
  clip-path: polygon(7% 0, 93% 0, 100% 7%, 100% 93%, 93% 100%, 7% 100%, 0 93%, 0 7%) !important;
  background: linear-gradient(180deg, rgba(11,10,12,.97), rgba(3,3,4,.995)) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.74),
    0 0 0 3px rgba(20,19,22,.96),
    0 0 0 4px rgba(93,82,87,.54),
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -13px 26px rgba(0,0,0,.64),
    0 0 15px rgba(255,38,53,.12) !important;
}
.myrion-reference .xz-universe-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 24 !important;
  left: 18% !important;
  right: 18% !important;
  top: -4px !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, rgba(255,38,53,.55), #ff3946, rgba(255,38,53,.55), transparent) !important;
  box-shadow: 0 0 8px rgba(255,38,53,.65) !important;
}
.myrion-reference .xz-universe-card::after {
  inset: 5px !important;
  border: 1px solid rgba(230,220,223,.09) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 14% 86%, rgba(255,255,255,.025)) !important;
}
.myrion-reference .xz-universe-card--featured { transform: translateY(-5px) !important; }
.myrion-reference .xz-universe-card__image {
  height: 205px !important;
  min-height: 205px !important;
  background-color: #07070a !important;
  background-size: cover !important;
  background-position: center !important;
}
.myrion-reference .xz-universe-card__shade {
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0 49%, rgba(0,0,0,.34) 71%, rgba(0,0,0,.92) 100%) !important;
}
.myrion-reference .xz-universe-card__identity {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  text-align: center !important;
}
.myrion-reference .xz-universe-card__name {
  color: #f5f1f2 !important;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important;
  font-size: 31px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-shadow: 0 3px 4px rgba(0,0,0,.98) !important;
}
.myrion-reference .xz-universe-card__subtitle {
  margin-top: 7px !important;
  color: #d1c8ca !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
}
.myrion-reference .xz-universe-card__body {
  min-height: 88px !important;
  padding: 8px 16px 17px !important;
  background: linear-gradient(180deg, rgba(8,7,9,.96), rgba(2,2,3,.995)) !important;
}
.myrion-reference .xz-enter {
  position: relative !important;
  min-height: 40px !important;
  margin: 4px 0 0 !important;
  padding: 0 13px 0 18px !important;
  border: 1px solid rgba(255,38,53,.79) !important;
  border-radius: 0 !important;
  clip-path: polygon(7% 0,100% 0,100% 100%,7% 100%,0 50%) !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(76,8,14,.43), rgba(17,3,5,.86)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 0 14px rgba(255,38,53,.05), 0 0 8px rgba(255,38,53,.09) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.myrion-reference .xz-enter:hover {
  border-color: #ff4652 !important;
  background: linear-gradient(180deg, rgba(135,10,22,.54), rgba(37,3,8,.92)) !important;
  box-shadow: inset 0 0 18px rgba(255,38,53,.10), 0 0 13px rgba(255,38,53,.24) !important;
}
.myrion-reference .xz-enter__arrow {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-left: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 22px !important;
}
.myrion-reference .xz-universe-card__sigil {
  width: 20px !important;
  height: 24px !important;
  bottom: -13px !important;
  filter: drop-shadow(0 0 6px rgba(255,38,53,.52)) !important;
}

/* Empty state: integrado; desaparece el gran rectángulo observado en producción. */
.myrion-reference .xz-empty {
  grid-column: 1 / -1 !important;
  width: min(420px, calc(100vw - 40px)) !important;
  min-height: 0 !important;
  margin: 36px auto 70px !important;
  padding: 23px 26px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,38,53,.18) !important;
  border-bottom: 1px solid rgba(255,38,53,.12) !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(61,5,10,.19), rgba(2,2,3,.20) 58%, transparent 78%) !important;
  box-shadow: none !important;
  text-align: center !important;
}
.myrion-reference .xz-empty img {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 10px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(255,38,53,.42)) !important;
}
.myrion-reference .xz-empty h3 {
  margin: 0 !important;
  color: #f2edef !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 22px !important;
}
.myrion-reference .xz-empty p {
  margin: 7px 0 0 !important;
  color: #aaa1a4 !important;
  font-size: 12px !important;
}

/* Footer bajo y segmentado como la referencia. */
.footer {
  position: relative !important;
  min-height: 142px !important;
  border-top: 1px solid rgba(158,146,151,.34) !important;
  background: linear-gradient(180deg, rgba(19,17,19,.995), rgba(5,5,6,.999) 54%, #020203 100%) !important;
  color: #bdb6b9 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 -5px 26px rgba(0,0,0,.45) !important;
}
.footer a { color: #aaa3a6 !important; text-decoration: none !important; }
.footer a:hover { color: #fff !important; text-shadow: 0 0 7px rgba(255,38,53,.25) !important; }
.footer .footer-container {
  width: min(1360px, calc(100% - 60px)) !important;
  max-width: 1360px !important;
  min-height: 112px !important;
  margin: 0 auto !important;
  padding: 19px 0 14px !important;
}

/* -------------------------------------------------------------------------
   AUTH / MODALES / WEB PUSH — misma identidad, misma lógica.
   ------------------------------------------------------------------------- */
.sample-modal,
.loginRegisterContainer,
.loginForm,
.form-area,
.modal-content {
  color: #e9e5e6 !important;
}
.loginRegisterContainer,
.modal-content,
.xerzio-consent-card {
  border: 1px solid rgba(255,38,53,.34) !important;
  border-radius: 3px !important;
  background: linear-gradient(145deg, rgba(17,15,18,.985), rgba(3,3,4,.995)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.76), 0 0 22px rgba(255,38,53,.09) !important;
}
.loginRegisterContainer::before,
.xerzio-consent-card::before {
  background: linear-gradient(90deg, transparent, var(--my99-red), var(--my99-red-hot), transparent) !important;
  box-shadow: 0 0 12px rgba(255,38,53,.48) !important;
}
.form-area input,
.form-area select,
.form-area textarea,
.myrion-public-content input,
.myrion-public-content select,
.myrion-public-content textarea {
  border: 1px solid rgba(170,159,164,.22) !important;
  border-radius: 2px !important;
  background: rgba(3,3,5,.86) !important;
  color: #f2edef !important;
  caret-color: var(--my99-red-hot) !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.32) !important;
}
.form-area input:focus,
.form-area select:focus,
.form-area textarea:focus,
.myrion-public-content input:focus,
.myrion-public-content select:focus,
.myrion-public-content textarea:focus {
  outline: none !important;
  border-color: rgba(255,38,53,.72) !important;
  box-shadow: 0 0 0 2px rgba(255,38,53,.08), inset 0 1px 8px rgba(0,0,0,.32) !important;
}
.btnSubmit,
.btnConnect,
.xerzio-consent-button.primary {
  border: 1px solid rgba(255,38,53,.68) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #8c0c17, #3d050a) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 0 12px rgba(255,38,53,.13) !important;
}
.btnSubmit:hover,
.btnConnect:hover,
.xerzio-consent-button.primary:hover {
  border-color: #ff4c58 !important;
  background: linear-gradient(180deg, #b40d1c, #55060d) !important;
}
.btnBottom,
.xerzio-help-text,
.xerzio-consent-copy,
.xerzio-consent-points li { color: #aaa2a5 !important; }
.xerzio-consent-icon {
  border: 1px solid rgba(255,38,53,.35) !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #9f0c18, #41050b) !important;
  box-shadow: 0 0 18px rgba(255,38,53,.18) !important;
}
.xerzio-consent-points i { color: var(--my99-red-hot) !important; }
.xerzio-consent-button.secondary {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.035) !important;
  color: #bbb4b7 !important;
}
.xerzio-toast {
  border-color: rgba(255,38,53,.28) !important;
  background: rgba(8,7,9,.97) !important;
  color: #f0ecee !important;
}

/* -------------------------------------------------------------------------
   RESPONSIVE — conservar composición sin comprimir los contratos legacy.
   ------------------------------------------------------------------------- */
@media (max-width: 1366px) {
  .header-container.myrion-header__inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: minmax(245px,.9fr) minmax(400px,1.2fr) minmax(315px,1fr) !important;
    gap: 8px !important;
  }
  .myrion-brand__sigil { width: 56px !important; height: 62px !important; flex-basis: 56px !important; }
  .myrion-brand__copy strong { font-size: 28px !important; }
  .myrion-nav__item.nav-item { min-width: 122px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .myrion-reference .xz-hero { padding-top: 31px !important; min-height: 275px !important; }
  .myrion-reference .xz-hero h1 { font-size: clamp(43px,4.3vw,60px) !important; margin-top: 20px !important; }
}
@media (max-width: 1100px) {
  .header.myrion-header { height: auto !important; min-height: 88px !important; }
  .myrion-header .header-wrapper { height: auto !important; min-height: 88px !important; }
  .header-container.myrion-header__inner {
    height: auto !important;
    min-height: 88px !important;
    grid-template-columns: minmax(235px,1fr) auto !important;
    grid-template-areas: "brand actions" "nav nav" !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .myrion-brand { grid-area: brand !important; }
  .myrion-actions { grid-area: actions !important; }
  .myrion-nav { grid-area: nav !important; max-width: 100% !important; height: 46px !important; }
  .myrion-nav__item.nav-item { height: 46px !important; min-width: 130px !important; }
  .myrion-reference .xz-universe-grid { grid-template-columns: repeat(2, minmax(0,294px)) !important; }
  .myrion-reference .xz-universes { width: min(630px, calc(100% - 32px)) !important; }
}
@media (max-width: 720px) {
  .header-container.myrion-header__inner {
    width: calc(100% - 14px) !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "brand actions" !important;
  }
  .myrion-brand__sigil { width: 47px !important; height: 52px !important; flex-basis: 47px !important; }
  .myrion-brand__copy strong { font-size: 23px !important; letter-spacing: .05em !important; }
  .myrion-brand__copy small { font-size: 7px !important; letter-spacing: .21em !important; }
  .navigation.nav-left.myrion-nav { display: none !important; }
  .myrion-actions > :not(.myrion-mobile-trigger):not(.myrion-notifications):not(.myrion-account-link) { display: none !important; }
  .myrion-reference .xz-hero {
    width: calc(100% - 28px) !important;
    min-height: 272px !important;
    padding-top: 42px !important;
  }
  .myrion-reference .xz-hero h1 { font-size: clamp(37px,11vw,52px) !important; }
  .xz-side-message,
  .xz-reference-message { display: none !important; }
  .myrion-reference .xz-infernal__ambient::before {
    width: min(520px, 116vw);
    top: 28px;
    opacity: .55;
  }
  .myrion-reference .xz-universe-grid { grid-template-columns: 1fr !important; }
  .myrion-reference .xz-universes { width: min(330px, calc(100% - 28px)) !important; }
  .myrion-reference .xz-universe-card { width: 100% !important; }
  .footer .footer-container { width: calc(100% - 32px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .myrion-reference .xz-infernal__particles,
  .myrion-reference .xz-infernal__embers,
  .myrion-reference .xz-infernal__cursor { display: none !important; }
  .myrion-reference .xz-infernal__scene { transform: none !important; }
}