/* ================================================================== fondo */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #1b1758, #080723 70%); }
.bg-photo {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06) translate(0, 0);
  transition: opacity 2.6s ease;
  will-change: opacity, transform;
}
.bg-photo.is-on { opacity: 1; }
/* El acercamiento sigue mientras la foto se desvanece, así no salta de tamaño al cambiar de imagen */
.bg-photo.is-moving { animation: kenburns 26s linear forwards; }
@keyframes kenburns { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.18) translate(var(--dx, 2%), var(--dy, -2%)); } }
.bg-shade {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 7, 35, 0.55) 0%, rgba(8, 7, 35, 0.35) 30%, rgba(8, 7, 35, 0.78) 72%, rgba(8, 7, 35, 0.95) 100%),
    radial-gradient(90% 60% at 20% 10%, rgba(124, 92, 255, 0.28), transparent 60%),
    radial-gradient(80% 60% at 90% 90%, rgba(108, 157, 255, 0.22), transparent 60%);
  transition: background 0.8s ease;
}
html:not([data-view="inicio"]) .bg-shade { background: linear-gradient(180deg, rgba(8, 7, 35, 0.82), rgba(8, 7, 35, 0.92) 60%, rgba(8, 7, 35, 0.97)), radial-gradient(90% 60% at 20% 10%, rgba(124, 92, 255, 0.28), transparent 60%); }
.bg-wind { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.bg-wind.is-ready { opacity: 1; }
.fx-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.5) 100%); }

.cursor-glow { position: fixed; left: 0; top: 0; z-index: 1; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(159, 211, 255, 0.022), rgba(124, 92, 255, 0.012) 45%, transparent 70%); opacity: 0; transition: opacity 0.5s; }
.cursor-glow.on { opacity: 1; }

/* ================================================================== pantalla de carga */
.boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #241e6e, #080723 72%); transition: opacity 0.7s ease, visibility 0.7s; }
.boot__clouds { position: absolute; inset: 0; pointer-events: none; }
.boot__clouds span { position: absolute; width: 70vw; height: 38vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent); filter: blur(18px); animation: boot-cloud 6s ease-in-out infinite alternate; }
.boot__clouds span:nth-child(1) { left: -30vw; top: -10vw; }
.boot__clouds span:nth-child(2) { right: -30vw; top: 10vw; animation-delay: -2s; }
.boot__clouds span:nth-child(3) { left: -20vw; bottom: -15vw; animation-delay: -4s; }
.boot__clouds span:nth-child(4) { right: -25vw; bottom: -10vw; animation-delay: -1s; }
@keyframes boot-cloud { to { transform: translateX(6vw) translateY(-2vw) scale(1.06); } }
.boot__inner { position: relative; display: grid; justify-items: center; gap: 22px; width: min(560px, 100% - 48px); }
.boot__logo { width: 100%; filter: drop-shadow(0 18px 40px rgba(124, 92, 255, 0.55)); animation: float 4s ease-in-out infinite; }
.boot__text { font: 500 1.05rem/1 var(--font-display); color: #fff; letter-spacing: 0.04em; }
.boot__dots span { animation: blink 1.2s infinite; }
.boot__dots span:nth-child(2) { animation-delay: 0.2s; }
.boot__dots span:nth-child(3) { animation-delay: 0.4s; }
.boot__bar { width: min(320px, 80%); height: 10px; padding: 2px; border: 2px solid #fff; background: rgba(0, 0, 0, 0.3); }
.boot__bar span { display: block; height: 100%; background: var(--grad); transform-origin: left; animation: boot-bar 1.4s var(--ease) both; }
@keyframes boot-bar { from { transform: scaleX(0); } }
.boot--quick .boot__bar, .boot--quick .boot__text { display: none; }
.boot--out { opacity: 0; visibility: hidden; pointer-events: none; }
.boot--out .boot__clouds span:nth-child(odd) { transform: translateX(-60vw); transition: transform 0.8s ease-in; }
.boot--out .boot__clouds span:nth-child(even) { transform: translateX(60vw); transition: transform 0.8s ease-in; }
.boot--out .boot__inner { transform: scale(1.08); filter: blur(8px); opacity: 0; transition: 0.6s ease; }

.preview-bar { position: fixed; left: 50%; bottom: 16px; z-index: 90; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; background: rgba(22, 19, 64, 0.95); border: 1px solid var(--sky); box-shadow: var(--glow-sky); font: 800 0.78rem/1.3 var(--font-ui); }
.preview-bar .i { color: var(--sky); }

/* ================================================================== cabecera */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; border-bottom: 1px solid transparent; transition: border-color 0.35s; }
.header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(9, 8, 32, 0.94); opacity: 0; transition: opacity 0.3s; }
.header.is-scrolled, .is-menu-open .header { border-bottom-color: var(--line); }
.header.is-scrolled::before, .is-menu-open .header::before { opacity: 1; }
.header__inner { width: min(1320px, 100% - 28px); margin-inline: auto; display: flex; align-items: center; gap: 14px; }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; flex: none; }
.brand-wrap { display: flex; align-items: center; gap: 14px; flex: none; }
.brand__logo { height: 26px; width: auto; filter: drop-shadow(0 3px 8px rgba(124, 92, 255, 0.35)); transition: transform 0.3s var(--ease); }
.brand:hover .brand__logo { transform: translateY(-1px); }
.brand__ed { font: 600 0.62rem/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky); padding-left: 2px; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 13px; font: 800 0.86rem/1 var(--font-ui); text-decoration: none; color: var(--text-2); transition: color 0.25s, background 0.25s; }
.nav__link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: #fff; }
.nav__badge { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; background: var(--grad-strong); color: #fff; font: 800 0.65rem/1 var(--font-ui); }
.header__right { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
/* Las redes del host van pegadas al logo, separadas por una línea */
.header__socials:empty { display: none; }
.header__socials { display: flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.header__socials .social-btn { width: 34px; height: 34px; }
.header__socials .social-btn .i { width: 16px; height: 16px; }
.social-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text-2); transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.25s var(--ease); }
.social-btn .i { width: 18px; height: 18px; }
.social-btn:hover { color: #fff; border-color: rgba(159, 211, 255, 0.55); background: rgba(108, 157, 255, 0.12); }
.social-btn--twitch:hover { border-color: #a970ff; background: rgba(145, 70, 255, 0.2); }
.social-btn--lg { width: 48px; height: 48px; }
.social-btn--lg .i { width: 22px; height: 22px; }
.nav-launcher { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); font: 800 0.84rem/1 var(--font-ui); text-decoration: none; color: #fff; transition: 0.25s; }
.nav-launcher .i { width: 16px; height: 16px; color: var(--sky); }
.nav-launcher:hover, .nav-launcher.is-active { border-color: var(--sky); background: rgba(108, 157, 255, 0.12); }

/* Botón grande de la IP, con rayas que se mueven como el de descargar del portafolio */
.ip-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(100deg, #6d4dff 0%, #7f6dff 30%, #5f86ff 65%, #7cc4ff 100%);
  color: #fff; text-align: left;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.ip-btn::before { content: ''; position: absolute; top: 0; bottom: 0; left: -42px; right: 0; z-index: -1; background: repeating-linear-gradient(115deg, transparent 0 16px, rgba(255, 255, 255, 0.09) 16px 32px); animation: stripes 1.3s linear infinite; }
@keyframes stripes { to { transform: translateX(35.31px); } }
.ip-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ip-btn__icon { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.28); }
.ip-btn__icon .i { width: 18px; height: 18px; }
.ip-btn__text { display: grid; gap: 3px; }
.ip-btn__text strong { font: 700 1rem/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.ip-btn__text small { display: inline-flex; align-items: center; gap: 6px; font: 700 0.7rem/1 var(--font-ui); opacity: 0.95; white-space: nowrap; }
.ip-btn__text small .live-dot { width: 7px; height: 7px; }

.menu-toggle { display: none; width: 46px; height: 46px; place-items: center; border: 1px solid var(--line-strong); background: rgba(10, 9, 34, 0.6); }
.menu-toggle__bars { display: grid; gap: 5px; width: 20px; }
.menu-toggle__bars span { display: block; height: 2px; background: #fff; transition: transform 0.35s var(--ease), opacity 0.25s, width 0.3s; }
.menu-toggle__bars span:nth-child(3) { width: 60%; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header-h) + 20px) 24px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; background: radial-gradient(120% 70% at 100% 0%, rgba(124, 92, 255, 0.34), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(108, 157, 255, 0.26), transparent 60%), rgba(7, 6, 26, 0.97); opacity: 0; transition: opacity 0.35s ease; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__nav { display: grid; }
.mobile-menu__link { display: flex; align-items: baseline; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); font: 600 clamp(1.9rem, 9vw, 2.8rem)/1 var(--font-display); text-decoration: none; color: var(--text); opacity: 0; transform: translateX(-24px); transition: opacity 0.4s, transform 0.5s var(--ease), color 0.2s; }
.mobile-menu__link small { font: 600 0.8rem/1 var(--font-mono); color: var(--sky); }
.mobile-menu__link.is-active span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mobile-menu__link .i { margin-left: auto; align-self: center; width: 26px; height: 26px; color: var(--sky); }
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.04s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.08s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.12s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.16s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(6) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(7) { transition-delay: 0.24s; }
.mobile-menu__foot { display: grid; gap: 16px; margin-top: 24px; }
.mobile-menu__socials { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ================================================================== vistas y transición */
.main { position: relative; z-index: 2; outline: none; min-height: 100vh; }
.view { display: none; }
.view.is-active { display: block; animation: view-in 0.25s ease-out both; }
@keyframes view-in { from { opacity: 0; } }
.transition-fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.transition-fx .gust { position: absolute; left: 0; width: var(--w, 40%); height: var(--h, 2px); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), rgba(201, 232, 255, 0.4), transparent); opacity: 0; transform: translateX(-120%); }
.transition-fx.is-on .gust { animation: gust 0.7s cubic-bezier(0.5, 0, 0.3, 1) var(--d, 0ms) both; }
@keyframes gust { 0% { opacity: 0; transform: translateX(-120%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%); } }
.transition-fx .gust-cloud { position: absolute; top: 20%; left: 0; width: 70vw; height: 60vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent); filter: blur(20px); opacity: 0; transform: translateX(-100%); }
.transition-fx.is-on .gust-cloud { animation: gust-cloud 0.75s ease both; }
@keyframes gust-cloud { 0% { opacity: 0; transform: translateX(-80%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(140%); } }

.grad-text { background: linear-gradient(100deg, #fff 30%, #d6ccff 55%, #9fd3ff 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }


/* ================================================================== portada */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: calc(var(--header-h) + 30px) 0 110px; }
.hero__inner { width: min(1100px, 100% - 32px); margin-inline: auto; display: grid; justify-items: center; gap: 18px; text-align: center; }
.hero__logo { width: min(980px, 100%); }
.hero__logo img { width: 100%; filter: drop-shadow(0 24px 50px rgba(9, 8, 40, 0.8)) drop-shadow(0 0 40px rgba(124, 92, 255, 0.35)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-0.4deg); } }
.hero__lema { font: 700 clamp(1.2rem, 2.6vw, 1.7rem)/1.2 var(--font-display); color: #fff; text-shadow: 0 4px 20px rgba(9, 8, 40, 0.8); letter-spacing: 0.02em; }
.hero__text { max-width: 62ch; color: #e6e7ff; text-shadow: 0 2px 12px rgba(9, 8, 40, 0.9); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.hero__copy .mono { font-size: 0.92rem; }
.status-card { margin-top: 10px; display: grid; justify-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--line-strong); background: rgba(9, 8, 32, 0.82); min-width: min(440px, 100%); }
.status-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-weight: 700; color: var(--text-2); }
.status-card__row b { color: #fff; font-size: 1.15rem; }
.status-card__hint { font-size: 0.86rem; color: var(--muted); }
.status-card__hint a { color: var(--sky); }
.heads { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.head { position: relative; width: 40px; height: 40px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.18); background: #1a1750; display: grid; place-items: center; transition: transform 0.25s var(--ease), border-color 0.25s; }
.head img { width: 100%; height: 100%; image-rendering: pixelated; }
.head:hover { transform: translateY(-3px) scale(1.06); border-color: var(--sky); }
.head--more { font: 800 0.78rem/1 var(--font-ui); color: var(--text-2); }
.heads--sm .head { width: 34px; height: 34px; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; color: var(--muted); text-decoration: none; font: 700 0.72rem/1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; }
.hero__scroll .i { color: var(--sky); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

.section { padding-top: clamp(56px, 9vw, 110px); scroll-margin-top: calc(var(--header-h) + 8px); }
.section-head { display: grid; justify-items: start; gap: 10px; margin-bottom: clamp(24px, 4vw, 38px); }
.section-title { font: 700 clamp(2rem, 4.6vw, 3.2rem)/1.02 var(--font-display); letter-spacing: 0.01em; }
.section-more { display: flex; justify-content: center; margin-top: 26px; }
.kicker__num .i { width: 14px; height: 14px; vertical-align: -2px; }

.season { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(25, 22, 72, 0.82), rgba(12, 11, 40, 0.88)); }
.season__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.season__title { margin-top: 8px; font: 700 clamp(1.8rem, 4vw, 2.6rem)/1 var(--font-display); }
.season__counts { display: flex; flex-wrap: wrap; gap: 8px; }
.season__counts span { padding: 8px 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-size: 0.86rem; color: var(--text-2); }
.season__counts b { color: #fff; font-size: 1.05rem; }
.season__bar { position: relative; height: 16px; margin: 34px 0 30px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--line); }
.season__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grad); transition: width 1.2s var(--ease); }
.season__fill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 10px, rgba(255, 255, 255, 0.18) 10px 20px); animation: stripes 1.3s linear infinite; }
.season__mark { position: absolute; top: -24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
.season__mark i { width: 2px; height: 14px; background: var(--line-strong); }
.season__mark small { position: absolute; top: 44px; font: 700 0.68rem/1 var(--font-ui); color: var(--muted); white-space: nowrap; letter-spacing: 0.06em; text-transform: uppercase; }
.season__pin { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #1d1a55; border: 2px solid var(--lavender); }
.season__pin.is-done { background: #fff; border-color: #fff; }
.season__next { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--grad-soft); text-decoration: none; transition: transform 0.3s var(--ease), border-color 0.3s; }
.season__next:hover { transform: translateY(-2px); border-color: var(--sky); }
.season__next > span:nth-child(2) { flex: 1; display: grid; gap: 4px; }
.season__next small { font: 700 0.76rem/1.2 var(--font-ui); color: var(--sky); letter-spacing: 0.04em; }
.season__next strong { font: 600 1.15rem/1.2 var(--font-display); }
.season__next-icon { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); }
.season__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.84rem; color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.feature { position: relative; overflow: hidden; display: grid; align-content: start; gap: 10px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(26, 23, 74, 0.78), rgba(12, 11, 40, 0.82)); text-decoration: none; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.4s; }
.feature:hover { border-color: rgba(159, 211, 255, 0.45); background: linear-gradient(160deg, rgba(30, 27, 84, 0.84), rgba(14, 13, 46, 0.86)); }
.feature__icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--grad-soft); color: #fff; }
.feature__icon .i { width: 24px; height: 24px; }
.feature strong { font: 600 1.25rem/1.15 var(--font-display); }
.feature > span:not(.feature__icon):not(.feature__go) { color: var(--text-2); font-size: 0.93rem; }
.feature__go { position: absolute; right: 18px; top: 22px; color: var(--sky); transition: transform 0.3s var(--ease); }
.feature:hover .feature__go { transform: translateX(4px); }
.feature--static .feature__go { display: none; }

.steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.step-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 20px; border: 1px solid var(--line); background: rgba(14, 13, 44, 0.75); }
.step-card__num { position: absolute; right: 16px; top: 10px; font: 700 2.8rem/1 var(--font-display); color: rgba(255, 255, 255, 0.08); }
.step-card__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--grad-strong); color: #fff; }
.step-card strong { font: 600 1.15rem/1.2 var(--font-display); }
.step-card .md { font-size: 0.92rem; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.news-card, .ncard { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); background: linear-gradient(170deg, rgba(25, 22, 70, 0.85), rgba(11, 10, 36, 0.9)); text-decoration: none; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.4s; }
.news-card:hover, .ncard:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 26px 60px -28px color-mix(in srgb, var(--c) 70%, transparent); }
.news-card__media, .ncard__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #120f3a), #0c0b2a); }
.news-card__media img, .ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.news-card:hover img, .ncard:hover img { transform: scale(1.05); }
.news-card__ph, .ncard__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.5); }
.news-card__ph .i, .ncard__ph .i { width: 54px; height: 54px; }
.news-card__body, .ncard__body { display: grid; gap: 8px; padding: 16px 18px 20px; }
.news-card__meta, .ncard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.cat-chip { padding: 4px 10px; background: color-mix(in srgb, var(--c, #9d7bff) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c, #9d7bff) 50%, transparent); color: #fff; font: 800 0.72rem/1.2 var(--font-ui); }
.news-card__title, .ncard__title { font: 600 1.3rem/1.15 var(--font-display); color: #fff; }
.news-card__text, .ncard__text { font-size: 0.92rem; color: var(--text-2); }

.timeline { position: relative; display: grid; gap: 12px; padding-left: 8px; }
.timeline::before { content: ''; position: absolute; left: 28px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--purple-2), var(--sky)); opacity: 0.4; }
.timeline__item { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 12px 16px 12px 0; }
.timeline__dot { position: relative; z-index: 1; width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); background: #15124a; color: var(--muted); }
.timeline__item.is-done .timeline__dot { background: var(--grad-strong); color: #fff; border-color: transparent; }
.timeline__item.is-next .timeline__dot { color: #fff; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(159, 211, 255, 0.18); }
.timeline__item > div { display: grid; gap: 3px; padding: 4px 0; }
.timeline__day { font: 800 0.72rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }
.timeline__item strong { font: 600 1.12rem/1.2 var(--font-display); }
.timeline__item p { font-size: 0.9rem; color: var(--text-2); }
.timeline__item:not(.is-done):not(.is-next) { opacity: 0.75; }

.host-viciont { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.host-card, .viciont-card { position: relative; overflow: hidden; display: grid; align-content: start; gap: 14px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line-strong); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease), box-shadow 0.4s, border-color 0.3s; }
.host-card { background: radial-gradient(120% 90% at 0% 0%, rgba(145, 70, 255, 0.35), transparent 60%), linear-gradient(170deg, rgba(24, 20, 66, 0.92), rgba(12, 11, 38, 0.95)); }
.host-card__title, .viciont-card__title { font: 700 clamp(1.7rem, 3.2vw, 2.4rem)/1.05 var(--font-display); }
.host-card p { color: var(--text-2); }
.twitch-btn { justify-self: start; background: linear-gradient(100deg, #772ce8, #9146ff); }
.host-card__socials { display: flex; flex-wrap: wrap; gap: 8px; }
.viciont-card { text-decoration: none; background: radial-gradient(110% 90% at 100% 0%, rgba(236, 72, 153, 0.28), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(139, 92, 246, 0.35), transparent 60%), linear-gradient(170deg, rgba(26, 12, 46, 0.95), rgba(10, 5, 22, 0.96)); border-color: rgba(214, 160, 255, 0.35); }
.viciont-card:hover { box-shadow: 0 30px 70px -30px rgba(236, 72, 153, 0.6); border-color: rgba(236, 72, 153, 0.6); }
.viciont-card__emblem { position: absolute; right: -30px; bottom: -40px; width: 230px; opacity: 0.18; filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.6)); transition: transform 0.6s var(--ease), opacity 0.4s; }
.viciont-card:hover .viciont-card__emblem { transform: rotate(-6deg) scale(1.05); opacity: 0.32; }
.viciont-card .kicker { color: #f0abfc; }
.viciont-card__title span { background: linear-gradient(100deg, #a855f7, #ec4899 60%, #ff2bd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.viciont-card .md { color: #e9ddff; }
.viciont-card__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #f9a8d4; }

/* ================================================================== páginas */
.page { min-height: 100vh; padding: calc(var(--header-h) + clamp(32px, 6vw, 60px)) 0 clamp(64px, 9vw, 110px); }
.page-head { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(26px, 4vw, 40px); }
.crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 0.8rem/1 var(--font-mono); color: var(--muted); }
.crumbs i { font-style: normal; opacity: 0.5; }
.crumbs .is-last { color: var(--sky); }
.crumbs--back a { display: inline-flex; align-items: center; gap: 8px; color: var(--sky); text-decoration: none; font-weight: 700; }
.crumbs--back { margin-bottom: 18px; }
.page-title { display: flex; align-items: center; gap: 14px; font: 700 clamp(2.6rem, 8vw, 5.2rem)/0.95 var(--font-display); letter-spacing: 0.01em; filter: drop-shadow(0 6px 30px rgba(124, 92, 255, 0.35)); overflow-wrap: anywhere; }
.page-title__icon { width: clamp(46px, 6vw, 64px); height: clamp(46px, 6vw, 64px); display: grid; place-items: center; background: var(--grad-strong); color: #fff; flex: none; filter: none; }
.page-title__icon .i { width: 55%; height: 55%; }
.page-intro { max-width: 70ch; font-size: clamp(1rem, 0.5vw + 0.88rem, 1.12rem); }
.sync-line { display: flex; flex-wrap: wrap; gap: 8px; }
.pill.is-live { border-color: rgba(143, 240, 184, 0.5); color: #d6ffe8; }
.container--narrow { width: min(860px, 100% - 32px); }
.hint { display: flex; align-items: center; gap: 8px; margin: 10px 0 18px; font-size: 0.86rem; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.link-btn { padding: 0; border: 0; background: none; color: var(--sky); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: 800 0.72rem/1 var(--font-ui); white-space: nowrap; }
.state .i { width: 13px; height: 13px; }
.state--on { background: rgba(143, 240, 184, 0.14); border: 1px solid rgba(143, 240, 184, 0.45); color: #d6ffe8; }
.state--on .live-dot { width: 7px; height: 7px; }
.state--off { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--muted); }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); background: rgba(9, 8, 32, 0.6); }
.seg__btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 0; background: transparent; color: var(--text-2); font: 800 0.84rem/1 var(--font-ui); transition: 0.25s; }
.seg__btn .i { width: 16px; height: 16px; }
.seg__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.seg__btn.is-active { background: var(--grad-strong); color: #fff; box-shadow: 0 8px 20px -10px rgba(124, 92, 255, 0.9); }
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search > .i { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search .input { padding-left: 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--text-2); font: 800 0.8rem/1 var(--font-ui); transition: 0.25s; }
.chip-btn small { padding: 2px 7px; background: rgba(255, 255, 255, 0.08); font-size: 0.7rem; }
.chip-btn:hover { color: #fff; border-color: var(--sky); }
.chip-btn.is-active { background: var(--grad-strong); border-color: transparent; color: #fff; }
.tag--xs { padding: 3px 6px; font-size: 0.64rem; }
.tag--lock { color: var(--warn); border-color: rgba(255, 210, 122, 0.4); }
.tag .i { width: 12px; height: 12px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.pager__link { display: grid; justify-items: start; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(14, 13, 44, 0.75); text-decoration: none; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.pager__link small { display: inline-flex; align-items: center; gap: 8px; font: 700 0.74rem/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pager__link strong { font: 600 1.2rem/1.15 var(--font-display); }
.pager__link--next { justify-items: end; text-align: right; }
.pager__link:hover { transform: translateY(-3px); border-color: rgba(159, 211, 255, 0.55); box-shadow: 0 16px 40px -20px rgba(108, 157, 255, 0.6); }

.panel { padding: clamp(18px, 2.5vw, 26px); border: 1px solid var(--line); background: rgba(14, 13, 44, 0.78); }
.panel__title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 600 1.3rem/1.1 var(--font-display); }
.panel__title .i { color: var(--sky); }
.panel__title--mt { margin-top: 24px; }
.bar { height: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--grad); transition: width 1s var(--ease); }

/* ================================================================== guía */
.guide { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
.guide-side { position: sticky; top: calc(var(--header-h) + 14px); display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 28px); }
/* min-height: 0 deja que la lista se encoja y haga scroll dentro de la barra en vez de salirse por abajo */
.guide-panel { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.guide-picker { display: none; }
.guide-search { position: relative; display: flex; align-items: center; }
.guide-search > .i { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--muted); }
.guide-search .input { padding-left: 40px; }
.guide-nav { display: grid; align-content: start; gap: 4px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); background: rgba(12, 11, 40, 0.78); scrollbar-width: thin; }
.guide-nav__link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; text-decoration: none; color: var(--text-2); transition: background 0.2s, color 0.2s; }
.guide-nav__link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.guide-nav__link.is-active { background: var(--grad-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.guide-nav__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: var(--sky); }
.guide-nav__link.is-active .guide-nav__icon { background: var(--grad-strong); color: #fff; }
.guide-nav__text { display: grid; gap: 2px; min-width: 0; }
.guide-nav__text strong { font: 800 0.9rem/1.2 var(--font-ui); }
.guide-nav__text small { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-nav__empty { padding: 12px; font-size: 0.86rem; color: var(--muted); }
.guide-body { min-width: 0; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); background: rgba(12, 11, 40, 0.82); scroll-margin-top: calc(var(--header-h) + 14px); }
.guide-body__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.guide-body__icon { width: 56px; height: 56px; flex: none; display: grid; place-items: center; background: var(--grad-strong); color: #fff; box-shadow: 0 12px 30px -12px rgba(124, 92, 255, 0.9); }
.guide-body__icon .i { width: 26px; height: 26px; }
.guide-body__title { font: 700 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--font-display); }
.guide-body__lead { font-size: 1.08rem; color: #fff; margin-bottom: 16px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding: 12px; border: 1px dashed var(--line-strong); }
.toc a { padding: 6px 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.82rem; font-weight: 700; color: var(--text-2); text-decoration: none; }
.toc a:hover { color: #fff; background: rgba(108, 157, 255, 0.16); }
.guide-md { font-size: 1.01rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 28px; }
.shot { display: grid; gap: 10px; }
.shot__btn { position: relative; display: block; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); background: #0d0b2e; cursor: zoom-in; aspect-ratio: 16 / 10; }
.shot__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.shot__btn:hover img { transform: scale(1.04); }
.shot__zoom { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(8, 7, 28, 0.7); color: #fff; }
.shot__ph { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 16 / 10; border: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 12px, transparent 12px 24px); color: var(--muted); text-align: center; padding: 12px; }
.shot__ph .i { width: 36px; height: 36px; color: var(--lavender); }
.shot__ph small { font-size: 0.75rem; }
.shot figcaption { display: grid; gap: 3px; font-size: 0.88rem; color: var(--text-2); }
.shot figcaption strong { color: #fff; }
.zoom-view { margin: 0; }
.zoom-view img { width: 100%; }
.zoom-view figcaption { padding: 12px 18px; color: var(--text-2); }

/* ================================================================== componentes dentro de los textos */
.md-block { margin: 1.2em 0; }
.mission-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--mc, #c9a7eb) 50%, transparent); background: color-mix(in srgb, var(--mc, #c9a7eb) 14%, transparent); color: #fff; text-decoration: none; font-size: 0.9em; font-weight: 700; vertical-align: middle; }
.mission-chip b { color: var(--mc2, #f7b8d2); }
.mission-chip--normal { --mc: var(--m-normal); --mc2: var(--m-normal-2); }
.mission-chip--extra { --mc: var(--m-extra); --mc2: var(--m-extra-2); }
.mission-chip--trabajo { --mc: var(--m-trabajo); --mc2: var(--m-trabajo-2); }
.mission-chip:hover { filter: brightness(1.15); }
.day-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; background: rgba(159, 211, 255, 0.14); border: 1px solid rgba(159, 211, 255, 0.35); color: #e1f2ff; font-weight: 800; font-size: 0.86em; }
.day-chip .i { width: 13px; height: 13px; }
.i--inline { width: 1.05em; height: 1.05em; vertical-align: -0.15em; display: inline; }
.cost-item { display: inline-flex; align-items: center; gap: 8px; }
.rarity { font-weight: 800; }
.rarity--comun { color: #fff; }
.rarity--poco-comun { color: #ffff55; }
.rarity--raro { color: #55ffff; }
.rarity--epico { color: #ff55ff; }

.recipes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.recipe-card { display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--line); background: rgba(12, 11, 40, 0.8); scroll-margin-top: calc(var(--header-h) + 20px); }
.recipe-card__head { display: flex; align-items: center; gap: 12px; }
.recipe-card__head h3 { font: 600 1.08rem/1.15 var(--font-display); }
.recipe-card__head p { font-size: 0.82rem; color: var(--muted); }
.recipe-card .mc-panel { justify-self: start; max-width: 100%; overflow-x: auto; }


/* Trabajos y habilidades */
.jobs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.jobs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.job { padding: 16px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, rgba(12, 11, 40, 0.85)), rgba(12, 11, 40, 0.85)); }
.job__head { display: flex; gap: 12px; align-items: flex-start; }
.job__head h3 { font: 600 1.15rem/1.1 var(--font-display); color: var(--c); }
.job__head p { font-size: 0.86rem; color: var(--text-2); }
.job__xp { margin-top: 10px; display: grid; gap: 4px; padding-left: 18px; font-size: 0.84rem; color: var(--text-2); }
.job__xp li::marker { color: var(--c); }
.job__pace { margin-top: 10px; font-size: 0.8rem; color: var(--muted); }
.job__pace b { color: var(--c); }
.jobs__note { margin-top: 10px; font-size: 0.92rem; }
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.skill { padding: 16px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, rgba(12, 11, 40, 0.85)), rgba(12, 11, 40, 0.85)); }
.skill__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.skill__icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--c); color: #120f3a; }
.skill__head h3 { font: 600 1.25rem/1 var(--font-display); }
.skill__levels { display: grid; gap: 6px; }
.skill__levels li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--text-2); }
.skill__lvl { width: 24px; height: 24px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font: 700 0.78rem/1 var(--font-display); color: var(--c); }
.skills__costs { grid-column: 1 / -1; }

/* Rangos */
.ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.rank { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: rgba(12, 11, 40, 0.8); }
.rank__tag { padding: 5px 9px; background: rgba(0, 0, 0, 0.45); font: 700 0.9rem/1 var(--font-display); white-space: nowrap; }
.rank__img { height: 30px; width: auto; max-width: 140px; flex: none; object-fit: contain; image-rendering: pixelated; }
.rank-tag__img { height: 20px; width: auto; image-rendering: pixelated; vertical-align: middle; }
.rank strong { font: 800 0.95rem/1.2 var(--font-ui); }
.rank p { font-size: 0.82rem; color: var(--text-2); }
.rank-tag { display: inline-flex; padding: 4px 8px; background: rgba(0, 0, 0, 0.45); font: 700 0.8rem/1 var(--font-display); }
.rank-tag--img { padding: 0; background: none; }

/* Menú /menu */
.gui-mock { display: grid; gap: 10px; justify-items: center; margin: 0; }
.gui-mock__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 46px)); gap: 3px; padding: 12px; background: #c6c6c6; box-shadow: inset 4px 4px 0 #fff, inset -4px -4px 0 #555, 0 0 0 3px #000; }
.gui-cell { position: relative; aspect-ratio: 1; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.gui-cell.is-zone { background: color-mix(in srgb, var(--c) 70%, #8b8b8b); }
.gui-cell__label { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 4px 6px; background: rgba(16, 0, 16, 0.85); color: #fff; font: 600 0.72rem/1 var(--font-display); white-space: nowrap; }
.gui-cell__label .i { width: 14px; height: 14px; color: var(--c); }
.gui-mock figcaption { font-size: 0.84rem; color: var(--muted); text-align: center; }

.items-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.items-grid__cell { width: 56px; height: 56px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }

/* Mobs: la imagen va en un rectángulo arriba de la tarjeta, así el render del mob se ve entero */
.mobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.mob { display: flex; flex-direction: column; min-width: 0; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--c) 10%, rgba(12, 11, 40, 0.88)), rgba(12, 11, 40, 0.9)); }
.mob__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--c) 25%, transparent); background: radial-gradient(70% 80% at 50% 100%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 24px), rgba(5, 4, 20, 0.55); color: var(--c); }
.mob__img { width: 100%; height: 100%; object-fit: contain; padding: 10px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.mob__media > .i { width: 54px; height: 54px; opacity: 0.7; }
.mob__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; padding: 14px 16px 16px; }
.mob__body h4 { font: 600 1.2rem/1.1 var(--font-display); color: var(--c); overflow-wrap: anywhere; }
.mob__meta { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.mob__body p { font-size: 0.86rem; color: var(--text-2); line-height: 1.55; overflow-wrap: anywhere; }

/* Tarjetas de IP */
.ip-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ip-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line-strong); background: rgba(9, 8, 32, 0.7); }
.ip-card__head { display: flex; align-items: center; gap: 12px; }
.ip-card__head strong { display: block; font: 600 1.15rem/1.1 var(--font-display); }
.ip-card__head small { color: var(--muted); font-size: 0.8rem; }
.ip-card__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--grad-strong); color: #fff; }
.ip-card__icon--bedrock { background: linear-gradient(120deg, #2d8f5a, #59c06a); }
.ip-card__value, .ip-card__port { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, 0.3); color: #fff; text-align: left; transition: border-color 0.2s, background 0.2s; }
.ip-card__value .mono { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.ip-card__value:hover, .ip-card__port:hover { border-color: var(--sky); background: rgba(108, 157, 255, 0.12); }
.ip-card__port { padding: 9px 14px; }
.ip-card__port span:first-child { color: var(--muted); font-size: 0.82rem; font-weight: 800; }
.ip-cards__status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9rem; color: var(--text-2); }

.ip-modal { display: grid; gap: 18px; padding: 26px clamp(18px, 4vw, 30px) 28px; }
.ip-modal__head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ip-modal__head img { width: min(340px, 80%); filter: drop-shadow(0 10px 24px rgba(124, 92, 255, 0.5)); }
.ip-modal__title { font: 700 2rem/1 var(--font-display); }
.ip-modal__text { color: var(--text-2); font-size: 0.94rem; }
.ip-modal__launcher { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line-strong); background: var(--grad-soft); text-decoration: none; transition: border-color 0.2s, transform 0.3s var(--ease); }
.ip-modal__launcher:hover { border-color: var(--sky); transform: translateY(-2px); }
.ip-modal__launcher img { width: 48px; height: 48px; }
.ip-modal__launcher span { flex: 1; display: grid; gap: 2px; }
.ip-modal__launcher small { color: var(--text-2); font-size: 0.82rem; }

/* ================================================================== misiones */
.mtoolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; position: sticky; top: calc(var(--header-h) + 6px); z-index: 5; padding: 10px; border: 1px solid var(--line); background: rgba(10, 9, 34, 0.96); }
.mtoolbar__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mtoolbar__filters .search { width: min(260px, 100%); }
.mtoolbar__filters .select { width: auto; min-width: 150px; }
.msec { margin-bottom: 42px; }
.msec__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.msec__title { display: flex; align-items: center; gap: 10px; font: 700 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-display); }
.msec__dot { width: 14px; height: 14px; background: var(--t1); box-shadow: 0 0 14px var(--t1); }
.msec__head p { max-width: 70ch; margin-top: 6px; color: var(--text-2); font-size: 0.92rem; }
.msec__count { font-size: 0.9rem; color: var(--muted); }
.msec__count b { color: #fff; font-size: 1.2rem; }
.msec__empty { color: var(--muted); }
.msec--normal, .mcard--normal, .mission-modal--normal { --t1: var(--m-normal); --t2: var(--m-normal-2); }
.msec--extra, .mcard--extra, .mission-modal--extra { --t1: var(--m-extra); --t2: var(--m-extra-2); }
.msec--trabajo, .mcard--trabajo, .mission-modal--trabajo { --t1: var(--m-trabajo); --t2: var(--m-trabajo-2); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.mcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; min-height: 172px; border: 1px solid color-mix(in srgb, var(--t1) 35%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--t1) 16%, rgba(13, 12, 42, 0.9)), rgba(10, 9, 34, 0.92)); color: var(--text); text-align: left; transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s; }
.mcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--t1), var(--t2)); }
.mcard:hover { transform: translateY(-2px); border-color: var(--t1); }
.mcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcard__tag { font: 700 0.95rem/1 var(--font-display); color: var(--t2); }
.mcard__diff { padding: 4px 8px; font: 800 0.68rem/1 var(--font-ui); color: #120f2a; }
.mcard__diff--facil { background: var(--d-facil); }
.mcard__diff--media { background: var(--d-media); }
.mcard__diff--dificil { background: var(--d-dificil); }
.mcard__diff--muy_dificil { background: var(--d-muy_dificil); color: #fff; }
.mcard__lock { color: var(--muted); }
.mcard__name { font: 600 1.18rem/1.15 var(--font-display); color: #fff; }
.mcard__desc { font-size: 0.84rem; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mcard__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.mcard__coins { display: inline-flex; align-items: center; gap: 4px; font: 700 0.95rem/1 var(--font-display); color: #ffd27a; }
.mcard__job { padding: 3px 7px; background: rgba(255, 255, 255, 0.06); }
.mcard__done, .mcard__day { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.mcard__done { color: #bff5d2; }
.mcard__done .i, .mcard__day .i { width: 13px; height: 13px; }
.mcard.is-locked { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 10px, transparent 10px 20px), rgba(10, 9, 32, 0.9); border-color: var(--line); }
.mcard.is-locked::before { background: rgba(255, 255, 255, 0.12); }
.mcard.is-locked .mcard__name { color: var(--text-2); }
.mcard.is-locked .mcard__tag { color: var(--muted); }
.mnotes { margin-top: 20px; padding: 18px; border: 1px dashed var(--line-strong); }

.mission-modal { display: grid; gap: 18px; padding: 26px clamp(18px, 4vw, 30px) 26px; }
.mission-modal__head { display: grid; gap: 10px; padding-right: 40px; }
.mission-modal__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mtype { padding: 5px 10px; background: color-mix(in srgb, var(--t1) 25%, transparent); border: 1px solid color-mix(in srgb, var(--t1) 55%, transparent); color: #fff; font: 800 0.74rem/1 var(--font-ui); }
.mission-modal__title { font: 700 clamp(1.8rem, 4vw, 2.5rem)/1.02 var(--font-display); color: var(--t2); }
.mission-modal__meta { font-size: 0.86rem; color: var(--muted); }
.mission-modal__desc { font-size: 1.05rem; color: #fff; }
.mlabel { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 800 0.74rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }
.mobjs ul { display: grid; gap: 6px; }
.mobjs li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-size: 0.92rem; }
.mobjs li b { margin-left: auto; font: 700 1rem/1 var(--font-display); color: var(--t2); }
.mobjs__check { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--t1); }
.mobjs__check .i { width: 14px; height: 14px; }
.mreward { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.mreward__list { display: grid; gap: 8px; }
.mreward__row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: rgba(255, 255, 255, 0.04); font-size: 0.92rem; }
.mreward__row b { color: #ffd27a; }
.mreward__chest .mc-panel { padding: 10px; gap: 8px; }
.mreward--extra { grid-template-columns: auto 1fr; align-items: center; padding: 14px; background: rgba(158, 216, 245, 0.08); border: 1px solid rgba(158, 216, 245, 0.3); }
.mreward--extra strong { font: 700 1.3rem/1 var(--font-display); color: #ffd27a; }
.mreward--extra p { font-size: 0.88rem; color: var(--text-2); }
.mreward__how { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 0.88rem; color: var(--text-2); }
.mreward__how .i { margin-top: 3px; color: var(--sky); }
.mission-modal__cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--muted); }
.mission-modal__locked { display: grid; justify-items: center; gap: 8px; padding: 30px 10px; text-align: center; }
.mission-modal__locked > .i { width: 46px; height: 46px; color: var(--lavender); }
.mwho { display: grid; gap: 10px; }
.mwho__title, .mwho__empty { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-2); }
.mwho .heads { justify-content: flex-start; }

/* ================================================================== jugabilidad */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; width: 100%; }
.stage-pill { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, rgba(12, 11, 40, 0.85)), rgba(12, 11, 40, 0.88)); text-decoration: none; transition: transform 0.3s var(--ease), border-color 0.3s; }
.stage-pill:hover { transform: translateY(-3px); border-color: var(--c); }
.stage-pill.is-on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 14px 34px -18px var(--c); }
.stage-pill__day { font: 800 0.72rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.stage-pill strong { font: 600 1.15rem/1.1 var(--font-display); }
.stage-pill .state { justify-self: start; }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; padding: 6px; border: 1px solid var(--line); background: rgba(9, 8, 32, 0.95); position: sticky; top: calc(var(--header-h) + 6px); z-index: 5; }
.subtabs__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; text-decoration: none; color: var(--text-2); font: 800 0.88rem/1 var(--font-ui); transition: 0.25s; }
.subtabs__link .i { width: 17px; height: 17px; }
.subtabs__link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.subtabs__link.is-active { color: #fff; background: var(--grad-strong); box-shadow: 0 8px 22px -10px rgba(124, 92, 255, 0.9); }
.bigcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-bottom: 28px; }
.bigcard { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--c) 12%, rgba(14, 13, 44, 0.88)), rgba(10, 9, 34, 0.9)); text-decoration: none; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.4s; }
.bigcard:hover { border-color: var(--c); }
.bigcard.is-active { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 20px 50px -24px var(--c); }
.bigcard__media { position: relative; height: 120px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); }
.bigcard__media img:not(.mc-item__img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bigcard__icon { width: 64px; height: 64px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 30%, rgba(0, 0, 0, 0.3)); color: #fff; }
.bigcard__icon .i { width: 32px; height: 32px; }
.bigcard__body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.bigcard__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.bigcard__body strong { font: 600 1.25rem/1.1 var(--font-display); }
.bigcard__body > span:last-child { font-size: 0.86rem; color: var(--text-2); }
.detail { padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); background: rgba(12, 11, 40, 0.84); scroll-margin-top: calc(var(--header-h) + 80px); }
.detail__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 14px; }
.detail__icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--c); color: #120f3a; box-shadow: 0 12px 30px -12px var(--c); }
.detail__icon .i { width: 28px; height: 28px; }
.detail__head > div:nth-child(2) { flex: 1; min-width: 200px; }
.detail__title { font: 700 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--font-display); }
.detail__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.detail__lead { font-size: 1.06rem; color: #fff; margin-bottom: 14px; }
.rgroup { margin-bottom: 32px; }
.rgroup__title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; font: 700 1.5rem/1.1 var(--font-display); }
.items-toolbar { display: grid; gap: 12px; margin-bottom: 8px; }
.items-toolbar .search { max-width: 380px; }
.igroup { margin-bottom: 28px; }
.igroup__title { margin-bottom: 12px; font: 700 1.35rem/1 var(--font-display); }
.igroup__title small { font: 700 0.8rem/1 var(--font-ui); color: var(--muted); }
.icards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.icard { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); background: rgba(12, 11, 40, 0.8); color: var(--text); text-align: left; transition: border-color 0.2s, transform 0.25s var(--ease), background 0.2s; }
.icard:hover { border-color: var(--sky); background: rgba(108, 157, 255, 0.1); transform: translateY(-2px); }
.icard__name { font: 600 0.95rem/1.2 var(--font-display); }
.item-modal { display: grid; gap: 14px; padding: 26px clamp(18px, 4vw, 30px); }
.item-modal__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; padding-right: 40px; }
.item-modal__icon { width: 104px; height: 104px; display: grid; place-items: center; background: #8b8b8b; box-shadow: inset 4px 4px 0 #373737, inset -4px -4px 0 #fff; }
.item-modal__desc { font-size: 0.95rem; color: var(--text-2); }
.item-modal__desc b { color: #fff; }
.item-modal__block { display: grid; gap: 4px; }
.item-modal__list { display: grid; gap: 6px; padding-left: 18px; font-size: 0.92rem; color: var(--text-2); }
.recipes-grid--modal { grid-template-columns: 1fr; }

/* ================================================================== jugadores */
.ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ptile { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); background: rgba(12, 11, 40, 0.82); }
.ptile__icon { width: 38px; height: 38px; display: grid; place-items: center; background: var(--grad-soft); color: var(--sky); }
.ptile__num { font: 700 1.9rem/1 var(--font-display); color: #fff; }
.ptile__label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.board { padding: 16px; border: 1px solid var(--line); background: rgba(12, 11, 40, 0.82); }
.board__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 1.1rem/1 var(--font-display); }
.board__title .i { color: var(--sky); }
.board__list { display: grid; gap: 4px; }
.board__list a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; text-decoration: none; transition: background 0.2s; }
.board__list a:hover { background: rgba(255, 255, 255, 0.05); }
.board__list img { width: 28px; height: 28px; image-rendering: pixelated; }
.board__name { flex: 1; font-weight: 800; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; }
.board__list b { font: 700 0.95rem/1 var(--font-display); color: #ffd27a; }
.board__pos { width: 24px; height: 24px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); font: 700 0.8rem/1 var(--font-display); }
.board__pos--1 { background: linear-gradient(135deg, #ffe08a, #f5b94a); color: #3b2500; }
.board__pos--2 { background: linear-gradient(135deg, #f0f3ff, #b7bfd9); color: #222; }
.board__pos--3 { background: linear-gradient(135deg, #f3c39a, #c98552); color: #2c1400; }
.board__empty { font-size: 0.86rem; color: var(--muted); }
.ptoolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.ptoolbar .search { flex: 1; min-width: 220px; }
.ptoolbar .select { width: auto; min-width: 170px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.pcard { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--line); background: rgba(12, 11, 40, 0.82); text-decoration: none; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.4s; }
.pcard:hover { border-color: rgba(159, 211, 255, 0.55); box-shadow: 0 20px 44px -24px rgba(108, 157, 255, 0.7); }
.pcard.is-online { border-color: rgba(143, 240, 184, 0.4); }
.pcard__head { position: relative; width: 64px; height: 64px; flex: none; }
.pcard__head img { width: 100%; height: 100%; image-rendering: pixelated; }
.pcard__dot { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); border: 3px solid #0f0d36; box-shadow: 0 0 10px var(--ok); }
.pcard__body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pcard__name { font: 600 1.15rem/1.1 var(--font-display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: var(--text-2); font-weight: 700; }
.pcard__stats span { display: inline-flex; align-items: center; gap: 4px; }
.pcard__stats .i { width: 14px; height: 14px; color: var(--sky); }
.pcard__job { font-size: 0.78rem; color: var(--lavender); font-weight: 700; }
.nodata { display: grid; justify-items: center; gap: 12px; padding: clamp(28px, 6vw, 56px) 20px; border: 1px dashed var(--line-strong); background: rgba(12, 11, 40, 0.75); text-align: center; }
.nodata__icon { width: 72px; height: 72px; display: grid; place-items: center; background: var(--grad-strong); color: #fff; overflow: hidden; }
.nodata__icon .i { width: 34px; height: 34px; }
.nodata__icon img { width: 100%; image-rendering: pixelated; }
.nodata h2 { font: 700 1.7rem/1.1 var(--font-display); }
.nodata p { max-width: 60ch; color: var(--text-2); }
.nodata__online { display: inline-flex; align-items: center; gap: 8px; }
.profile { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: center; padding: clamp(18px, 3vw, 30px); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), rgba(12, 11, 40, 0.86); margin-bottom: 18px; }
.profile__skin { display: grid; place-items: center; min-height: 260px; background: radial-gradient(circle at 50% 80%, rgba(159, 211, 255, 0.18), transparent 65%); }
.profile__skin img { max-height: 300px; image-rendering: pixelated; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6)); animation: float 5s ease-in-out infinite; }
.profile__main { display: grid; gap: 14px; min-width: 0; }
.profile__top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.profile__name { font: 700 clamp(2.2rem, 6vw, 3.6rem)/1 var(--font-display); overflow-wrap: anywhere; }
.profile__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.profile__note { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.profile-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; gap: 14px; align-items: start; }
.mmap { margin-bottom: 18px; }
.mmap__head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-2); }
.mmap__head strong { color: #fff; }
.mmap .bar span { background: linear-gradient(90deg, var(--t1), var(--t2)); }
.mmap--normal { --t1: var(--m-normal); --t2: var(--m-normal-2); }
.mmap--extra { --t1: var(--m-extra); --t2: var(--m-extra-2); }
.mmap--trabajo { --t1: var(--m-trabajo); --t2: var(--m-trabajo-2); }
.mmap__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 3px; margin-top: 10px; }
.mmap__cell { display: grid; place-items: center; height: 26px; background: rgba(255, 255, 255, 0.04); font: 600 0.66rem/1 var(--font-display); color: var(--muted); text-decoration: none; transition: transform 0.2s; }
.mmap__cell:hover { transform: scale(1.15); }
.mmap__cell.is-open { background: rgba(255, 255, 255, 0.1); color: var(--text-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 50%, transparent); }
.mmap__cell.is-done { background: var(--t1); color: #160f30; font-weight: 700; }
.pjobs { display: grid; gap: 10px; }
.pjob { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); }
.pjob.is-active { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); }
.pjob__body { flex: 1; display: grid; gap: 6px; }
.pjob__top { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.pjob__lvl { margin-left: auto; font: 600 0.9rem/1 var(--font-display); color: var(--c); }
.pjob .bar span { background: var(--c); }
.pskills { display: grid; gap: 10px; }
.pskill { display: flex; align-items: center; gap: 12px; }
.pskill > div { flex: 1; display: grid; gap: 5px; }
.pskill__icon { width: 34px; height: 34px; display: grid; place-items: center; background: var(--c); color: #120f3a; }
.pskill b { font: 600 1rem/1 var(--font-display); color: var(--c); }
.pips { display: flex; gap: 4px; }
.pip { flex: 1; height: 7px; background: rgba(255, 255, 255, 0.08); }
.pip.is-on { background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.pstats { display: grid; gap: 4px; }
.pstats li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); font-size: 0.9rem; color: var(--text-2); }
.pstats li span { display: inline-flex; align-items: center; gap: 8px; }
.pstats li .i { color: var(--sky); width: 16px; height: 16px; }
.pstats li b { font: 600 1rem/1 var(--font-display); color: #fff; }

/* ================================================================== anuncios */
.ncard--big { flex-direction: row; margin-bottom: 18px; }
.ncard--big .ncard__media { flex: 1.2; aspect-ratio: auto; min-height: 280px; }
.ncard--big .ncard__body { flex: 1; align-content: center; padding: clamp(18px, 3vw, 32px); }
.ncard--big .ncard__title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.ncard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 800; color: var(--sky); font-size: 0.88rem; }
.article { display: grid; gap: 22px; }
.article__head { display: grid; gap: 12px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--muted); }
.article__title { font: 700 clamp(2.2rem, 6vw, 3.8rem)/1.02 var(--font-display); }
.article__lead { font-size: 1.15rem; color: #fff; }
.article__by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-2); }
.article__by img { image-rendering: pixelated; }
.article__by .btn { margin-left: auto; }
.article__cover { margin: 0; }
.article__cover img { width: 100%; border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85); }
.article__md { font-size: 1.05rem; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); background: rgba(12, 11, 40, 0.84); }

/* ================================================================== launcher */
.launcher { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.launcher__card { display: grid; gap: 18px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line-strong); background: radial-gradient(100% 90% at 100% 0%, rgba(236, 72, 153, 0.18), transparent 60%), rgba(12, 11, 40, 0.86); }
.launcher__app { display: flex; align-items: center; gap: 16px; }
.launcher__icon { width: 80px; height: 80px; box-shadow: 0 14px 34px -12px rgba(236, 72, 153, 0.85), 0 0 0 1px var(--line-strong); }
.launcher__name { font: 700 clamp(1.5rem, 3vw, 2rem)/1 var(--font-display); }
.launcher__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font: 600 0.82rem/1.2 var(--font-mono); color: #f0abfc; }
.dl-btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(100deg, #7c3aed 0%, #a855f7 35%, #ec4899 75%, #ff2bd6 100%); color: #fff; text-decoration: none; box-shadow: 0 20px 44px -18px rgba(236, 72, 153, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.14) inset; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.dl-btn::before { content: ''; position: absolute; top: 0; bottom: 0; left: -42px; right: 0; z-index: -1; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, 0.08) 18px 36px); animation: stripes2 1.25s linear infinite; }
@keyframes stripes2 { to { transform: translateX(39.72px); } }
.dl-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -16px rgba(255, 43, 214, 1); }
.dl-btn__icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); }
.dl-btn__icon .i { width: 24px; height: 24px; }
.dl-btn__text { flex: 1; display: grid; gap: 3px; }
.dl-btn__text strong { font: 700 1.4rem/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.dl-btn__text small { font: 600 0.8rem/1.3 var(--font-ui); opacity: 0.92; }
.launcher__steps { display: grid; gap: 10px; }
.launcher__steps li { display: flex; gap: 12px; align-items: flex-start; }
.launcher__steps li > span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: var(--grad-strong); font: 700 0.9rem/1 var(--font-display); }
.launcher__steps .md { font-size: 0.93rem; }
.launcher__alt { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; color: var(--muted); }
.launcher__alt .i { margin-top: 3px; }
.launcher__shots { display: grid; gap: 14px; }
.launcher__shots img { border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -34px rgba(236, 72, 153, 0.6); }
.launcher__shots img:nth-child(2) { width: 82%; justify-self: end; margin-top: -60px; position: relative; }

/* ================================================================== pie */
.footer { position: relative; z-index: 2; overflow: hidden; margin-top: 60px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 7, 30, 0.6), rgba(5, 4, 18, 0.97) 35%); }
.footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--grad); box-shadow: 0 0 24px rgba(159, 211, 255, 0.8); }
.footer__wordmark { position: absolute; left: 50%; bottom: -0.12em; transform: translateX(-50%); font: 700 clamp(4.5rem, 17vw, 15rem)/0.8 var(--font-display); white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(196, 186, 255, 0.1); pointer-events: none; user-select: none; }
.viciont-band { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; margin-top: 40px; padding: 20px 24px; border: 1px solid rgba(214, 160, 255, 0.4); background: radial-gradient(120% 140% at 0% 50%, rgba(168, 85, 247, 0.35), transparent 60%), radial-gradient(90% 120% at 100% 50%, rgba(236, 72, 153, 0.28), transparent 60%), rgba(18, 8, 32, 0.92); text-decoration: none; box-shadow: 0 20px 60px -30px rgba(236, 72, 153, 0.7); transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s; }
.viciont-band:hover { transform: translateY(-3px); border-color: rgba(236, 72, 153, 0.7); box-shadow: 0 26px 70px -28px rgba(236, 72, 153, 0.9); }
.viciont-band__emblem { width: 76px; flex: none; filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.8)); transition: transform 0.4s var(--ease); }
.viciont-band:hover .viciont-band__emblem { transform: rotate(-8deg) scale(1.06); }
.viciont-band__text { flex: 1; display: grid; gap: 3px; }
.viciont-band__text small { font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #f0abfc; }
.viciont-band__text strong { font: 700 clamp(1.6rem, 3.6vw, 2.4rem)/1 var(--font-display); letter-spacing: 0.04em; background: linear-gradient(100deg, #fff 20%, #f5d0fe 50%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.viciont-band__text span { font-size: 0.9rem; color: #e9ddff; }
.viciont-band__go { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(100deg, #a855f7, #ec4899); color: #fff; font-weight: 800; font-size: 0.86rem; white-space: nowrap; }
.footer__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding: clamp(40px, 6vw, 60px) 0 36px; }
.footer__brand { display: grid; align-content: start; gap: 16px; }
.footer__logo { width: 220px; filter: drop-shadow(0 8px 20px rgba(124, 92, 255, 0.5)); }
.footer__desc { max-width: 40ch; font-size: 0.93rem; color: var(--text-2); }
.footer__socials { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 800 0.76rem/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.footer__title::before { content: ''; width: 14px; height: 2px; background: var(--grad); }
.footer__col ul { display: grid; gap: 9px; list-style: none; padding: 0; }
.footer__col a, .footer__link { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font-size: 0.93rem; text-decoration: none; color: var(--text-2); text-align: left; transition: color 0.2s, padding 0.2s; overflow-wrap: anywhere; }
.footer__col a .i { width: 15px; height: 15px; color: var(--sky); }
.footer__col a:hover, .footer__link:hover { color: #fff; padding-left: 4px; }
.footer__link .mono { color: var(--sky-2); }
.footer__muted { font-size: 0.88rem; color: var(--muted); }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 20px 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }
.footer__credit { color: var(--text-2); }
.footer__credit strong:last-child { color: #f0abfc; }
.credit { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.to-top { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: #fff; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.to-top:hover { background: var(--grad-strong); border-color: transparent; transform: translateY(-3px); }
.noscript { position: relative; z-index: 5; display: grid; gap: 8px; padding: 120px 24px; text-align: center; }

/* ================================================================== esquinas pixeladas */
/* Las cajas de la web pierden el pixel de cada esquina (la regla está en base.css) */
.status-card, .season, .season__next, .feature, .step-card, .news-card, .ncard, .host-card, .viciont-card, .viciont-band, .panel, .pager__link,
.guide-nav, .guide-body, .guide-picker, .toc, .recipe-card, .job, .skill, .rank, .mob, .ip-card, .ip-modal__launcher, .mtoolbar, .msec__dot, .mcard,
.mnotes, .mreward--extra, .stage-pill, .subtabs, .bigcard, .detail, .icard, .item-modal__icon, .ptile, .board, .pcard, .profile, .nodata, .article__md,
.launcher__card, .dl-btn, .ip-btn, .gui-mock__grid, .shot__btn, .shot__ph, .seg, .boot__bar, .preview-bar {
  --n: var(--notch);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.nav-launcher, .social-btn, .menu-toggle, .seg__btn, .subtabs__link, .guide-nav__link, .ip-card__value, .ip-card__port, .to-top, .cat-chip, .mission-chip, .mtype, .mcard__diff, .guide-picker__all, .ip-btn__icon, .dl-btn__icon {
  --n: var(--notch-sm);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.ip-btn:focus-visible, .nav-launcher:focus-visible, .social-btn:focus-visible, .guide-nav__link:focus-visible, .subtabs__link:focus-visible, .seg__btn:focus-visible, .mcard:focus-visible, .icard:focus-visible, .pcard:focus-visible, .feature:focus-visible, .news-card:focus-visible, .bigcard:focus-visible, .stage-pill:focus-visible, .pager__link:focus-visible, .guide-picker:focus-visible, .to-top:focus-visible { outline-offset: -4px; }

/* ================================================================== responsive */
@media (max-width: 1320px) {
  .nav__link { padding-inline: 10px; }
}
@media (max-width: 1120px) {
  .nav { display: none; }
  .menu-toggle { display: grid; }
  .header__right { margin-left: auto; }
  .guide { grid-template-columns: 1fr; }
  .guide-side { position: static; max-height: none; gap: 10px; }
  .guide-picker { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); background: rgba(12, 11, 40, 0.86); color: #fff; text-align: left; cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s; }
  .guide-picker:hover, .guide-side.is-open .guide-picker { border-color: rgba(159, 211, 255, 0.55); box-shadow: 0 14px 34px -20px rgba(108, 157, 255, 0.8); }
  .guide-picker__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--grad-strong); color: #fff; }
  .guide-picker__text { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .guide-picker__text small { font: 800 0.66rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .guide-picker__text strong { font: 800 0.98rem/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .guide-picker__all { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; background: rgba(159, 211, 255, 0.12); color: var(--sky-2); font: 800 0.76rem/1 var(--font-ui); white-space: nowrap; }
  .guide-picker__all .i { width: 15px; height: 15px; }
  .guide-picker__all .i:last-child { transition: transform 0.3s var(--ease); }
  .guide-side.is-open .guide-picker__all .i:last-child { transform: rotate(180deg); }
  .guide-panel { display: none; }
  .guide-side.is-open .guide-panel { display: flex; animation: guide-drop 0.28s var(--ease); }
  .guide-nav { max-height: min(62vh, 560px); }
  @keyframes guide-drop { from { opacity: 0; transform: translateY(-6px); } }
  .launcher { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .profile-grid > :first-child { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .host-viciont { grid-template-columns: 1fr; }
  .ptiles, .profile__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boards { grid-template-columns: 1fr; }
  .mreward { grid-template-columns: 1fr; }
  .mreward__chest { overflow-x: auto; }
  .ip-cards { grid-template-columns: 1fr; }
  .ncard--big { flex-direction: column; }
  .ncard--big .ncard__media { min-height: 200px; }
  .profile { grid-template-columns: 1fr; text-align: center; }
  .profile__top, .profile__tags { justify-content: center; }
  .profile__skin { min-height: 200px; }
  .mtoolbar { position: static; }
}
@media (max-width: 680px) {
  :root { --header-h: 64px; }
  .header__socials { display: none; }
  .brand__logo { height: 21px; }
  .brand__ed { font-size: 0.55rem; }
  .nav-launcher { display: none; }
  .ip-btn { padding: 6px 10px 6px 6px; }
  .ip-btn__icon { width: 30px; height: 30px; }
  .ip-btn__text strong { font-size: 0.82rem; }
  .ip-btn__text small { font-size: 0.62rem; }
  .hero { padding-bottom: 96px; }
  .hero__cta { display: grid; width: 100%; }
  .hero__cta .btn { width: 100%; }
  .status-card { min-width: 0; width: 100%; }
  .profile-grid { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager > span:empty { display: none; }
  .pager__link--next { justify-items: start; text-align: left; }
  .viciont-band { flex-wrap: wrap; justify-content: center; text-align: center; }
  .viciont-band__go { width: 100%; justify-content: center; }
  .footer__bottom { flex-direction: column; align-items: flex-start; padding-right: 56px; }
  .to-top { position: absolute; right: 0; top: 18px; }
  .mc-panel { padding: 10px; }
  .mc-recipe { --slot: 38px !important; }
  .mc-chest__grid { --slot: 30px; }
  .mreward__chest .mc-panel { --slot: 30px !important; }
  .gui-mock__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; }
  .gui-cell__label b { display: none; }
  .launcher__shots img:nth-child(2) { margin-top: -30px; }
  .subtabs__link span { display: none; }
  .subtabs__link { padding: 10px 12px; }
}
@media (max-width: 560px) {
  /* En pantallas angostas las etiquetas de fase se alternan arriba y abajo de la barra para no pisarse */
  .season__bar { margin-top: 48px; }
  .season__mark--alt small { top: -16px; }
}
@media (max-width: 420px) {
  .ip-btn__text small { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .seg__btn span { display: none; }
  .guide-picker__all .i:first-child { display: none; }
  .guide-body { padding: 18px 14px; }
}
@media (max-width: 359px) {
  .brand__ed { display: none; }
  .guide-picker__icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-photo.is-moving, .guide-side.is-open .guide-panel, .hero__logo img, .boot__logo, .ip-btn::before, .dl-btn::before, .season__fill::after, .profile__skin img { animation: none !important; }
}