:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#17233c;background:#eaf4fc}*{box-sizing:border-box}body{min-height:100vh;margin:0;background-color:#07111f;background-image:linear-gradient(90deg,#03091212 0%,#03091226 44%,#03091273 100%),url('/assets/roadmap-adventure-bg-v1.webp');background-position:left top;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}a{text-decoration:none}.road-nav{position:relative;z-index:20;height:72px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;gap:34px;background:#fffffff2;border-top:7px solid #252c3a;box-shadow:0 3px 18px #2749691f;backdrop-filter:blur(16px)}.road-brand{display:flex;flex-direction:column;color:#182747}.road-brand b{font-size:17px;letter-spacing:.18em}.road-brand small{font-size:7px;letter-spacing:.28em;color:#74839a}.road-nav nav{display:flex;gap:27px;margin:auto}.road-nav nav a{position:relative;padding-top:21px;color:#233652;font-size:11px;font-weight:800;text-transform:uppercase}.road-nav nav a:before{position:absolute;top:0;left:50%;transform:translateX(-50%);color:#67aee3;font-size:14px}.road-nav nav a:nth-child(1):before{content:'◇'}.road-nav nav a:nth-child(2):before{content:'☆'}.road-nav nav a:nth-child(3):before{content:'▣'}.road-nav nav a:nth-child(4):before{content:'▤'}.road-nav nav a:nth-child(5):before{content:'○'}.road-nav nav a:hover,.road-nav nav a.active{color:#176cc0}.road-account{padding:9px 17px;border-radius:99px;background:linear-gradient(135deg,#f45e79,#e43b5d);box-shadow:0 5px 15px #e036563f;color:#fff;font-size:10px;font-weight:850}.road-world{min-height:calc(100vh - 72px);padding:122px 18px 45px}.road-portal{position:relative;width:min(820px,100%);margin:auto;border:13px solid #fffffff5;border-radius:23px;background:#fff;box-shadow:0 25px 70px #2858833d}.road-progress{position:absolute;z-index:3;left:4%;right:4%;top:-81px;display:flex;justify-content:space-around;align-items:end}.road-avatar{display:grid;place-items:center;gap:3px;color:#40526c;font-size:9px;font-weight:850}.road-avatar i{display:grid;width:37px;height:50px;place-items:center;border:3px solid #fff;border-radius:20px 20px 13px 13px;background:linear-gradient(#f7bed7,#9175c9);box-shadow:0 5px 13px #446b9533;color:#fff;font-style:normal}.road-avatar--launch i{background:linear-gradient(#65d5ce,#3489c6)}.road-avatar--update i{background:linear-gradient(#f4be6b,#d77a55)}.road-hero{position:relative;min-height:205px;overflow:hidden;border:1px solid #ffffff70;background:radial-gradient(circle at 18% -20%,#ffe8d6b8,transparent 43%),linear-gradient(120deg,#dc927c 0%,#b47f9a 43%,#7c80ad 72%,#6478aa 100%);box-shadow:inset 0 1px 0 #ffffffbf,inset 0 -1px 0 #ffffff2e,0 16px 38px #6c4e7130;backdrop-filter:blur(18px) saturate(135%)}.road-hero:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(112deg,#ffffff30 0%,transparent 32%,#ffffff14 62%,transparent 100%)}.road-hero__art{position:absolute;inset:0 50% 0 0;background:url('/assets/roadmap-banner-warrior-v1.webp') 58% center/cover}.road-hero__art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 44%,#b47f9af5 100%)}.road-hero__copy{position:relative;z-index:2;margin-left:48%;padding:47px 35px 24px;color:#fff}.road-hero__copy small{font-size:9px;letter-spacing:.17em}.road-hero h1{margin:7px 0 5px;font-size:clamp(26px,3.4vw,39px);line-height:1.02}.road-hero p{margin:0;color:#fff4f1;font-size:10px}.road-content{padding:28px 24px 8px}.road-content__heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.road-content__heading>div,.road-bottom header{display:flex;align-items:center;gap:8px}.road-content h2,.road-bottom h2{margin:0;font:900 19px Georgia,serif}.road-content__heading span,.road-bottom header span{color:#38a6dc}.road-content__heading p{margin:0;color:#8a98aa;font-size:10px}.road-timeline{display:grid;grid-template-columns:1fr 1fr;gap:10px}.road-step{position:relative;display:grid;grid-template-columns:42px 58px 1fr;align-items:center;min-height:108px;overflow:hidden;border:1px solid #d9e5f0;border-radius:9px;background:linear-gradient(135deg,#f8fbfe,#eef5fb);box-shadow:0 5px 14px #325b7d14}.road-step__number{align-self:stretch;display:grid;place-items:center;background:#2866c5;color:#fff;font-size:14px;font-weight:900}.road-step__date{text-align:center}.road-step__date b,.road-step__date span{display:block}.road-step__date b{font-size:17px;color:#285a9c}.road-step__date span{font-size:9px;color:#7a8a9e}.road-step__copy{padding:13px 9px}.road-step__copy small{color:#df6077;font-size:8px;font-weight:850;text-transform:uppercase}.road-step h3{margin:3px 0;font-size:13px;line-height:1.12;text-transform:uppercase}.road-step p{margin:0;color:#75869a;font-size:9px;line-height:1.4}.road-step__status{position:absolute;right:7px;top:6px;padding:2px 5px;border-radius:9px;background:#dcecff;color:#3d73ad;font-size:6px;font-weight:900}.road-step--launch{border-color:#73c9dd}.road-step--launch .road-step__number{background:#22a7c7}.road-step--update .road-step__number{background:#e47c72}.road-step--future{opacity:.78}.road-step--future .road-step__number{background:#8d84bb}.road-bottom{display:grid;grid-template-columns:1.12fr .88fr;gap:20px;padding:25px 24px 22px}.road-bottom header{margin-bottom:12px}.road-bottom h2{font-size:17px}.road-notices ul{margin:0;padding:0;list-style:none}.road-notices li{display:grid;grid-template-columns:49px 1fr auto;align-items:center;gap:8px;min-height:33px;border-bottom:1px solid #e6edf4;font-size:9px}.road-notices li>span{padding:3px;border:1px solid #68add7;border-radius:9px;color:#4384ad;text-align:center;font-size:7px;font-weight:800}.road-notices p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.road-notices time{color:#98a5b4;font-size:7px}.road-guide>div{min-height:125px;padding:19px 21px;border-radius:8px;background:linear-gradient(135deg,#25b6d2,#2372cb);color:#fff}.road-guide small{font-size:7px;letter-spacing:.15em}.road-guide h3{margin:5px 0;font-size:18px;line-height:1.05}.road-guide p{margin:5px 0;color:#d9f5ff;font-size:9px}.road-guide a{color:#fff;font-size:8px;font-weight:850}.road-note{text-align:center;color:#50647d;font-size:9px;font-weight:700}@media(max-width:820px){.road-nav nav a:not(.active){display:none}.road-world{padding-top:100px}.road-progress{top:-70px}.road-portal{border-width:8px}.road-timeline{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.road-hero__art{background-image:url('/assets/roadmap-banner-warrior-v1.webp')}}@media(max-width:560px){.road-nav{padding:0 13px;gap:12px}.road-brand small{display:none}.road-nav nav{margin-left:auto;margin-right:0}.road-account{padding:8px 10px}.road-world{padding:88px 8px 30px;background-position:center top}.road-progress{display:none}.road-hero{padding-top:35px}.road-hero__art{inset:0;opacity:.35}.road-hero__art:after{background:#9b7892a8}.road-hero__copy{margin:0;padding:54px 22px 25px}.road-content{padding:24px 13px 5px}.road-content__heading{display:block}.road-content__heading p{margin-top:4px}.road-step{grid-template-columns:38px 52px 1fr}.road-step__status{display:none}.road-bottom{grid-template-columns:1fr;padding:20px 13px}.road-notices li{grid-template-columns:44px 1fr}.road-notices time{display:none}}

/* Personalización del banner y colores de las etapas */
.road-hero__art {
  background-image: url("/assets/roadmap-banner-warrior-v1.webp");
}

.road-step {
  opacity: 1;
  border-color: var(--stage-border);
  background: linear-gradient(135deg, #ffffff 0%, var(--stage-soft) 100%);
  box-shadow: 0 8px 22px var(--stage-shadow);
}

.road-step .road-step__number {
  background: linear-gradient(180deg, var(--stage-light), var(--stage-color));
}

.road-step__date b { color: var(--stage-color); }
.road-step .road-step__copy small { color: var(--stage-color); }
.road-step__status { color: var(--stage-color); background: var(--stage-soft); }

.road-step:nth-child(1) { --stage-color:#279db5; --stage-light:#55bfd0; --stage-soft:#e4f7fa; --stage-border:#72cada; --stage-shadow:#279db526; }
.road-step:nth-child(2) { --stage-color:#d96f69; --stage-light:#ed948b; --stage-soft:#fff0ed; --stage-border:#efaaa4; --stage-shadow:#d96f6926; }
.road-step:nth-child(3) { --stage-color:#ce9148; --stage-light:#e7b66f; --stage-soft:#fff6e8; --stage-border:#edc58b; --stage-shadow:#ce914826; }
.road-step:nth-child(4) { --stage-color:#bc6f91; --stage-light:#d596b2; --stage-soft:#fceef5; --stage-border:#dfa9c1; --stage-shadow:#bc6f9126; }
.road-step:nth-child(5) { --stage-color:#867db8; --stage-light:#aaa2d2; --stage-soft:#f2f0fb; --stage-border:#bbb5dc; --stage-shadow:#867db826; }
.road-step:nth-child(6) { --stage-color:#5e72a9; --stage-light:#8496c6; --stage-soft:#edf1fa; --stage-border:#a2afd2; --stage-shadow:#5e72a926; }

/* Navegación persistente del Road Map */
.road-nav {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
}

/* Esquinas redondeadas del banner principal */
.road-hero { border-radius: 18px; }

/* Fusion continua entre la ilustracion y el Liquid Glass del banner */
.road-hero__art {
  inset: 0 28% 0 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.96) 57%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.28) 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.96) 57%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.28) 88%, transparent 100%);
}
.road-hero__art::after {
  background: linear-gradient(90deg, transparent 38%, rgba(180,127,154,.10) 61%, rgba(180,127,154,.30) 100%);
}
@media (max-width:560px) {
  .road-hero__art {
    inset: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .road-hero__art::after { background: rgba(155,120,146,.66); }
}

/* Primer hito visual: lanzamiento de octubre */
.road-timeline .road-step { min-height: 0; aspect-ratio: 16 / 9; }
.road-step--visual {
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #1a2030;
}
.road-step--visual .road-step__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.road-step.road-step--visual.tw-road-stage-glass::before {
  z-index: 1;
  background: linear-gradient(118deg, rgba(255,255,255,.18), transparent 34%, rgba(255,255,255,.08) 68%, transparent);
}
.road-step--visual > :not(.road-step__image) { display:none; }
.road-step.road-step--visual.tw-road-stage-glass::after {
  content: attr(data-stage-date);
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: rgba(10,18,31,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 14px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font: 850 8px/1 Inter, sans-serif;
  letter-spacing: .08em;
}
@media (max-width:560px) {
  .road-step--visual { aspect-ratio: 16 / 9; }
}

/* Hito de octubre: dos escenas dentro de un solo rectangulo */
.road-timeline .road-step:first-child.road-step--visual {
  grid-column: 1 / -1;
  aspect-ratio: 3.5 / 1;
}
@media (max-width:560px) {
  .road-timeline .road-step:first-child.road-step--visual {
    grid-column: auto;
    aspect-ratio: 3.5 / 1;
  }
}

/* Todos los hitos con imagen usan el formato panoramico combinado */
.road-timeline .road-step.road-step--visual {
  grid-column: 1 / -1;
  aspect-ratio: 3.5 / 1;
}
.road-timeline .road-step:nth-child(2):not(.road-step--visual) {
  grid-column: 1 / -1;
  min-height: 108px;
  aspect-ratio: auto;
}
@media (max-width:560px) {
  .road-timeline .road-step.road-step--visual {
    grid-column: auto;
    aspect-ratio: 3.5 / 1;
  }
  .road-timeline .road-step:nth-child(2):not(.road-step--visual) {
    grid-column: auto;
  }
}