/* Guía inicial: estilos limitados a la nueva página. */
.starter-hero .story-subtitle strong { color: var(--gold-light); }
.starter-route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 36px 0 0; padding: 0; }
.starter-route li { padding: 15px 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(10, 4, 20, .6); font-size: .8rem; }
.starter-route span { display: block; color: var(--gold-light); font-size: 1.3rem; font-family: 'Cinzel', serif; margin-bottom: 5px; }
.starter-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 48px; padding-top: 58px; padding-bottom: 64px; }
.starter-sidebar nav { position: sticky; top: 110px; display: grid; gap: 5px; padding: 20px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-1); }
.starter-sidebar a { padding: 9px 6px; color: var(--text-dim); font-size: .85rem; border-radius: 5px; }
.starter-sidebar a:hover, .starter-sidebar a:focus-visible { color: var(--gold-light); background: var(--card-bg); }
.starter-section { margin-bottom: 52px; scroll-margin-top: 120px; }
.starter-section h2 { margin-bottom: 18px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.starter-section p { color: var(--text-dim); margin-bottom: 16px; }
.starter-section strong { color: var(--text); }
.starter-section p a, .starter-steps a, .starter-text-link { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.starter-text-link { display: inline-block; margin-top: 12px; }
.starter-steps { padding-left: 25px; color: var(--text-dim); }
.starter-steps li { padding-left: 5px; margin: 16px 0; }
.starter-steps li::marker { color: var(--gold); font-weight: bold; }
.starter-tip { border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--card-bg); padding: 20px 24px; margin-top: 24px; }
.starter-tip strong { color: var(--gold-light); }
.starter-tip p { margin: 7px 0 0; }
.starter-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.starter-controls { width: 100%; border-collapse: collapse; font-size: .9rem; }
.starter-controls caption { text-align: left; padding: 16px; color: var(--gold-light); background: var(--bg-1); font-weight: 600; }
.starter-controls th, .starter-controls td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.starter-controls thead { color: var(--text-dim); }
.starter-controls tbody th { font-weight: 500; }
.starter-controls tr:last-child td, .starter-controls tr:last-child th { border-bottom: 0; }
.starter-controls kbd { display: inline-block; min-width: 25px; padding: 2px 6px; margin: 2px 1px; border: 1px solid rgba(181, 124, 232, .4); border-bottom-width: 3px; border-radius: 5px; color: var(--text); background: var(--bg-2); font: inherit; font-size: .8rem; text-align: center; }
.starter-advice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.starter-advice-grid article { border: 1px solid var(--border); border-radius: 12px; padding: 24px; background: var(--card-bg); }
.starter-advice-grid h3 { color: var(--gold-light); }
.starter-advice-grid p { margin-bottom: 0; font-size: .92rem; }
.starter-milestone { position: relative; overflow: hidden; padding: 32px; border: 1px solid rgba(245, 185, 66, .5); border-radius: 16px; background: linear-gradient(130deg, #2b1544, #1a0a26); }
.starter-milestone > :not(.starter-level) { position: relative; z-index: 1; }
.starter-milestone p { max-width: 620px; }
.starter-level { position: absolute; right: 10px; top: -50px; color: rgba(245, 185, 66, .07); font: 900 260px/1.3 'Cinzel', serif; pointer-events: none; }
.starter-city-grid { display: grid; gap: 18px; margin: 24px 0 12px; }
.starter-city { position: relative; padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(110deg, var(--bg-2), var(--bg-1)); }
.starter-city h3 { font-size: 1.6rem; color: var(--gold-light); }
.starter-city .eyebrow { padding-right: 30px; }
.starter-city-symbol { position: absolute; right: 25px; top: 20px; font-size: 2.4rem; color: var(--gold); opacity: .7; }
.starter-city-valdren { border-color: rgba(196, 151, 126, .45); }
.starter-city-lytharia { border-color: rgba(124, 171, 232, .45); }
.starter-city .starter-city-identity { margin: 0; color: var(--gold-light); font-size: .8rem; letter-spacing: .03em; }
.starter-faq details { border-bottom: 1px solid var(--border); padding: 18px 0; }
.starter-faq summary { cursor: pointer; color: var(--text); font-weight: 600; padding: 4px 0; }
.starter-faq details p { margin: 14px 0 0; }
.starter-next { padding: 34px 0; text-align: center; border-top: 1px solid var(--border); }
.starter-next h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); }
.starter-next .hero-actions { flex-wrap: wrap; }
.starter-content a:focus-visible, .starter-sidebar a:focus-visible, .starter-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 960px) {
  .starter-layout { grid-template-columns: 1fr; gap: 28px; }
  .starter-sidebar nav { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
  .starter-sidebar .eyebrow { width: 100%; }
}
@media (max-width: 560px) {
  .starter-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter-advice-grid { grid-template-columns: 1fr; }
  .starter-milestone, .starter-city { padding: 24px 20px; }
  .starter-controls th, .starter-controls td { padding: 12px 10px; }
  .starter-controls { font-size: .8rem; }
  .starter-city-symbol { right: 18px; font-size: 1.8rem; }
}