/* Peças do artigo "Era da Imaginação" (escada das três eras, 29/10/2026).
   Carrega depois de /artigos/shared/artigos.css e só usa os papéis da marca,
   então o tema escuro vale sozinho.

   A escada: três degraus empilhados, cada era por cima da anterior, a da
   Imaginação laranja no topo. Sem JavaScript, ela aparece montada. Com
   JavaScript, o artigo.js põe .vivo (degraus escondidos um pouco abaixo) e
   .on quando a peça entra na tela: os degraus sobem de baixo para cima e o
   laranja chega por último e acende. O movimento NÃO depende de
   prefers-reduced-motion: com "reduzir movimento" ligado (o Windows do Gui),
   roda uma versão suave, só opacidade e deslocamento curto. */

.escada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 44px 52px; }
.escada ol { display: contents; }
.escada-nota {
  grid-area: 1 / 1 / 2 / 3; align-self: center; padding: 0 40px 24px 0;
  font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.18; letter-spacing: -.018em;
  color: var(--text); text-wrap: balance;
}
.degrau {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 24px 26px 26px; border: 1px solid var(--line-2); background: var(--cartao); color: var(--text);
}
/* Cada degrau ocupa da sua coluna até a direita; o texto fica na primeira coluna dele. */
.degrau-1 { grid-area: 3 / 1 / 4 / 4; padding-right: calc(200% / 3 + 26px); border-radius: 22px 0 22px 22px; }
.degrau-2 { grid-area: 2 / 2 / 3 / 4; padding-right: calc(50% + 26px); border-bottom: 0; border-radius: 22px 0 0 0; }
.degrau-3 {
  grid-area: 1 / 3 / 2 / 4; border-color: var(--accent); border-bottom: 0; border-radius: 22px 22px 0 0;
  background: var(--accent); color: var(--sobre-acc);
}
.degrau .kicker { color: var(--accent-texto); font-weight: 700; }
.degrau h3 { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(23px, 2.3vw, 30px); line-height: 1; letter-spacing: -.025em; color: inherit; }
.degrau-ex { font-size: 15px; line-height: 1.45; color: var(--muted); }
.degrau dl { display: grid; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.degrau dl div { display: grid; align-content: start; gap: 1px; }
.degrau dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.degrau dd { margin: 0; font-family: var(--display); font-weight: 700; font-stretch: 94%; font-size: 18px; line-height: 1.2; color: var(--text); }
.degrau-3 .kicker, .degrau-3 .degrau-ex, .degrau-3 dt { color: #4a1c05; }
.degrau-3 dd { color: var(--sobre-acc); }
.degrau-3 dl { border-top-color: rgb(74 28 5 / 28%); }

/* ---------- Movimento (só com JavaScript) ---------- */
.escada.vivo .degrau { opacity: 0; translate: 0 56px; }
.escada.vivo .escada-nota { opacity: 0; translate: 0 12px; }
/* Antes de chegar, o degrau de cima é um cartão comum: só acende quando pousa. */
.escada.vivo:not(.acesa) .degrau-3 { border-color: var(--line-2); background: var(--cartao); color: var(--text); }
.escada.vivo:not(.acesa) .degrau-3 :is(.kicker) { color: var(--accent-texto); }
.escada.vivo:not(.acesa) .degrau-3 :is(.degrau-ex, dt) { color: var(--muted); }
.escada.vivo:not(.acesa) .degrau-3 dd { color: var(--text); }
.escada.vivo:not(.acesa) .degrau-3 dl { border-top-color: var(--line); }

.escada.vivo .degrau, .escada.vivo .escada-nota {
  transition: opacity .7s ease-out, translate .8s cubic-bezier(.2, .9, .25, 1.12), background-color .5s, border-color .5s, color .5s, box-shadow .6s;
}
.escada.vivo .degrau :is(.kicker, .degrau-ex, dt, dd), .escada.vivo .degrau dl { transition: color .5s, border-color .5s; }
.escada.vivo.on .degrau, .escada.vivo.on .escada-nota { opacity: 1; translate: 0 0; }
.escada.vivo.on .degrau-1 { transition-delay: .05s; }
.escada.vivo.on .degrau-2 { transition-delay: .45s; }
.escada.vivo.on .degrau-3 { transition-delay: .95s; translate: 0 0; }
.escada.vivo .degrau-3 { translate: 0 90px; }
.escada.vivo.on .escada-nota { transition-delay: 1.6s; }
/* O laranja pousa e acende, com um halo que se abre uma vez. */
.escada.vivo.acesa .degrau-3 { transition-delay: 0s; animation: escada-halo 1.4s ease-out 1; }
@keyframes escada-halo {
  0% { box-shadow: 0 0 0 0 rgb(255 106 31 / 55%), 0 26px 40px -24px var(--sombra); }
  100% { box-shadow: 0 0 0 26px rgb(255 106 31 / 0%), 0 26px 40px -24px var(--sombra); }
}
.escada.acesa .degrau-3 { box-shadow: 0 26px 40px -24px var(--sombra); }

/* Reduzir movimento: a mesma ordem, de baixo para cima, sem salto e sem halo.
   Só opacidade, deslocamento curto e o laranja acendendo. */
@media (prefers-reduced-motion: reduce) {
  .escada.vivo .degrau, .escada.vivo .degrau-3 { translate: 0 14px; }
  .escada.vivo .escada-nota { translate: none; }
  .escada.vivo .degrau, .escada.vivo .escada-nota { transition: opacity .9s ease-out, translate .9s ease-out, background-color .7s, border-color .7s, color .7s; }
  .escada.vivo.on .degrau-2 { transition-delay: .5s; }
  .escada.vivo.on .degrau-3 { transition-delay: 1s; }
  .escada.vivo.acesa .degrau-3 { animation: none; }
}

/* Entre 701 e 1040 px a escada cabe na coluna de leitura. */
@media (max-width: 1040px) {
  .texto > .escada { max-width: var(--col); }
  .degrau { padding: 20px 18px 22px; }
  .degrau-1 { padding-right: calc(200% / 3 + 18px); }
  .degrau-2 { padding-right: calc(50% + 18px); }
  .degrau dd { font-size: 16px; }
}

/* No celular os degraus empilham e cada um recua um pouco: a escada sobe para a direita. */
@media (max-width: 700px) {
  .escada { grid-template-columns: minmax(0, 1fr); margin-block: 36px 44px; }
  .escada-nota { grid-area: 1 / 1; padding: 0 0 18px; font-size: 21px; }
  .degrau { padding: 18px 20px 20px; }
  .degrau-1 { grid-area: 4 / 1; padding-right: 20px; border-radius: 0 0 20px 20px; }
  .degrau-2 { grid-area: 3 / 1; margin-left: 18px; padding-right: 20px; border-bottom: 0; border-radius: 0; }
  .degrau-3 { grid-area: 2 / 1; margin-left: 36px; border-radius: 20px 20px 0 0; }
  .degrau h3 { font-size: 24px; }
  .degrau dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .degrau dd { font-size: 16px; }
}

/* ---------- As peças do modelo novo do artigo (Gui, 30/10/2026) ---------- */
/* O índice sem caixa. */
.capa-indice { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* A definição: uma folha escura, reta. */
.definicao { box-shadow: 0 30px 50px -34px var(--sombra); }
/* O pedido do fim: a faixa laranja reta, com o raio saindo da borda (marca.css). */
.palestra-cta { position: relative; isolation: isolate; margin-block: 56px 40px; padding: clamp(64px, 7vw, 96px) 0; border: 0; border-radius: 0; background: none; color: var(--sobre-acc); }
.palestra-cta .kicker, .palestra-cta p, .palestra-cta h2 { color: var(--sobre-acc); }
.palestra-cta .button { border-color: var(--sobre-acc); background: var(--sobre-acc); color: #f1ece2; }
.palestra-cta .button:hover { border-color: var(--sobre-acc); background: transparent; color: var(--sobre-acc); }