/* AJUSTE #3: restaura a composição do mockup e limita as correções à seção Stages, sobrepondo a antiga régua em blocos. Editado em 08/10/2026 23:10 GMT-3, autorizado por Mateus. */
#stages {
  --pano-vermelho: url("../img/estandarte-vermelho.webp");
  --pano-bege: url("../img/estandarte-bege.webp");
  --castelo: url("../img/castelo-cerco.webp");
  --castelo-cel: url("../img/castelo-cerco-celular.webp");
  background-color: var(--iron-950);
  background-image: radial-gradient(38% 30% at 50% 14%,rgba(11,10,9,.7),transparent 75%),linear-gradient(180deg,rgba(11,10,9,.45) 0%,rgba(11,10,9,.6) 30%,rgba(11,10,9,.93) 58%,var(--iron-950) 72%),var(--castelo);
  background-size: 100% 100%,100% 100%,100% auto;
  background-position: center,center,top center;
  background-repeat: no-repeat;
  padding-block: clamp(40px,6vw,64px);
  overflow: hidden;
}
#stages .l2-heading { margin-bottom: var(--space-5); }
#stages .l2-heading__title { font-size: clamp(1.7rem,3.2vw,2.4rem); }
#stages .estandartes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: var(--space-5) var(--space-3);
  grid-template-columns: repeat(2,minmax(0,1fr));
  max-width: 880px;
}
#stages .st { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
#stages .st__botao {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: var(--space-2) var(--space-3) var(--space-3);
  cursor: pointer; color: inherit; font: inherit; position: relative;
  width: 100%; max-width: 160px; min-width: 44px; min-height: 44px; filter: none;
  touch-action: manipulation;
}
#stages .st__botao::after {
  content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px;
  background: var(--gold-400); transform: scaleX(0); transition: transform .25s ease;
}
#stages .st__botao[aria-selected="true"]::after { transform: scaleX(1); }
#stages .st__botao:hover .st__nome { color: var(--gold-200); }
#stages .st__botao:focus-visible,
#stages .sd:focus-visible { outline: 2px solid #ffe4a4; outline-offset: -3px; box-shadow: inset 0 0 0 4px #0b0a09; }
#stages .st__pano {
  display: block; position: relative; width: min(92px,60%); aspect-ratio: 420/621;
  margin-bottom: var(--space-2); transform-origin: 50% 0;
  animation: stages-balanca 7s ease-in-out infinite;
  background: var(--pano-bege) center/contain no-repeat;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.65)) brightness(.82);
}
#stages .st:nth-child(2) .st__pano { animation-delay: -1.8s; }
#stages .st:nth-child(3) .st__pano { animation-delay: -3.4s; }
#stages .st:nth-child(4) .st__pano { animation-delay: -5s; }
#stages .st:nth-child(5) .st__pano { animation-delay: -2.6s; }
#stages .st--atual .st__pano { background-image: var(--pano-vermelho); filter: drop-shadow(0 12px 16px rgba(0,0,0,.65)); }
#stages .st--atual .st__pano::before {
  content: ""; position: absolute; inset: 10% -35% -5%; z-index: -1; filter: blur(6px);
  background: radial-gradient(closest-side,rgba(226,105,31,.35),transparent);
}
#stages .st__estado {
  font: var(--type-eyebrow); font-size: 12px; line-height: 1.3;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--stone-400); background: none; padding: 0;
}
#stages .st--atual .st__estado { color: var(--ember-400); background: none; }
#stages .st__nome { display: flex; align-items: baseline; gap: .4em; font: 700 .95rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--stone-100); }
#stages .st__romano { font: 700 1.35rem/1 var(--font-display); color: var(--stone-300); }
#stages .st--atual .st__romano { color: var(--gold-300); text-shadow: 0 0 14px rgba(223,190,82,.35); }
/* AJUSTE #3: a régua é uma linha com cinco marcos; a navegação continua nos estandartes acessíveis. */
#stages .regua { display: flex; align-items: flex-end; gap: var(--space-3); margin: var(--space-6) auto 0; padding: 0 5px 0 0; max-width: 880px; }
#stages .regua__trilho { flex: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); height: auto; overflow: visible; }
#stages .regua__trecho {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 0 0 10px; border: 0; border-bottom: 2px solid var(--iron-600);
  background: none; color: inherit; cursor: default; min-height: 0; min-width: 0;
  font: inherit; box-shadow: none;
}
#stages .regua__trecho--cheio { border-bottom-color: var(--gold-500); background: none; box-shadow: 0 8px 12px -10px rgba(223,190,82,.7); }
#stages .regua__trecho::after { content: ""; position: absolute; right: -5px; bottom: -6px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--iron-600); }
#stages .regua__trecho--cheio::after { background: var(--gold-400); }
#stages .regua__faixa { position: static; display: block; transform: none; font: 600 clamp(10px,1.2vw,12px)/1.3 var(--font-label); letter-spacing: var(--ls-label); color: var(--stone-300); white-space: nowrap; }
#stages .regua__trecho--cheio .regua__faixa { color: var(--gold-300); }
/* AJUSTE #3: cada painel separa as faixas de EXP/SP das novidades; os Stages sem novidades mantêm apenas as rates. */
#stages .stages-detalhe { max-width: 880px; margin: calc(var(--space-6) + 6px) auto 0; }
#stages .sd {
  display: grid; gap: var(--space-4); grid-template-columns: minmax(0,1fr);
  padding: 0; background: none; clip-path: none; box-shadow: none;
  animation: stages-surge .25s ease; scroll-margin-top: 110px;
}
#stages .sd[hidden] { display: none; }
#stages .sd__bloco { min-width: 0; padding: var(--space-4) var(--space-5); background: rgba(18,17,16,.72); clip-path: var(--clip-chamfer-all); box-shadow: inset 0 0 0 1px var(--border-hairline); }
#stages .sd__titulo { display: block; margin-bottom: var(--space-3); text-align: center; font: var(--type-eyebrow); font-size: 14px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent-quiet); }
#stages .sd__lista { margin: 0; display: grid; gap: var(--space-2); }
#stages .sd__linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-quiet); }
#stages .sd__linha:last-child { border-bottom: 0; padding-bottom: 0; }
#stages .sd__linha dt { font: var(--type-body-sm); color: var(--stone-300); }
#stages .sd__linha dd { margin: 0; font: 600 .95rem/1.2 var(--font-label); letter-spacing: .03em; color: var(--gold-200); text-align: right; white-space: nowrap; }
#stages .sd__novas { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font: var(--type-body-sm); color: var(--stone-300); }
#stages .sd__novas li { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-quiet); }
#stages .sd__novas li:last-child { border-bottom: 0; padding-bottom: 0; }
#stages .stages-nota { margin: var(--space-4) auto 0; text-align: center; font: var(--type-body-sm); font-size: 14px; line-height: 1.6; color: #b9b0a2; max-width: 880px; }
@keyframes stages-balanca { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
@keyframes stages-surge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (min-width: 760px) {
  #stages .estandartes { grid-template-columns: repeat(5,minmax(0,1fr)); }
  #stages .sd { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #stages .sd--solo { grid-template-columns: minmax(0,1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 759px) {
  #stages { background-image: radial-gradient(60% 24% at 50% 12%,rgba(11,10,9,.75),transparent 80%),linear-gradient(180deg,rgba(11,10,9,.2) 0%,rgba(11,10,9,.9) 40%,var(--iron-950) 55%),var(--castelo-cel); }
  #stages .estandartes .st:last-child { grid-column: 1/-1; }
}
@media (prefers-reduced-motion: reduce) {
  #stages .st__pano, #stages .sd { animation: none; }
  #stages .st__botao::after { transition: none; }
}

/* AJUSTE #5: até 640 px, o Stage aberto ocupa o topo e os quatro restantes mantêm uma única linha; editado em 09/10/2026 10:55 GMT-3, autorizado por Mateus. */
@media (max-width: 640px) {
  #stages .estandartes {
    --stage-pano-atual: clamp(150px, 42vw, 180px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px clamp(4px, 1.5vw, 8px);
    max-width: 480px;
  }
  #stages .estandartes .st,
  #stages .estandartes .st:last-child {
    order: 1;
    grid-column: auto;
  }
  /* AJUSTE #5: só o estado configurado define a posição; aria-selected continua exclusivo do painel consultado. */
  #stages .estandartes .st.st--atual {
    order: 0;
    grid-column: 1 / -1;
  }
  #stages .st__botao {
    width: 100%;
    max-width: none;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 0 10px;
    gap: 4px;
  }
  #stages .st__pano {
    width: calc(var(--stage-pano-atual) / 3);
    margin-bottom: 4px;
  }
  #stages .st__estado {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  #stages .st__nome {
    font-size: 11px;
    line-height: 1.3;
    gap: .25em;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  #stages .st__romano { font-size: 15px; }
  #stages .st--atual .st__botao { width: min(100%, 240px); }
  #stages .st--atual .st__pano {
    width: var(--stage-pano-atual);
    margin-bottom: 8px;
  }
  #stages .st--atual .st__estado { font-size: 12px; }
  #stages .st--atual .st__nome { font-size: 16px; }
  #stages .st--atual .st__romano { font-size: 22px; }
}