/* ==========================================================================
   Roadmap do PW 1.2.6 (/roadmap), 2026-10-08 (cópia do roadmap.css do pw187, trocando o azul do 1.8.7 pelo vermelho do 1.2.6)
   Carregado só por application/views/roadmap.php. Linguagem visual do /about do pw144: fundo #0a070c,
   títulos serifados dourados, kicker com moldura, ornamento linha-losango-linha, anel que pulsa e selo
   dourado "Você está aqui". As etapas formam uma linha do tempo vertical: trilho no meio com cards
   alternados no desktop, trilho à esquerda no celular. O trilho percorrido (até o selo) é dourado e
   aceso; o caminho à frente é tracejado. O vermelho é a cor do 1.2.6 (a fênix do logo):
   aparece só na próxima atualização e nos brilhos de fundo. Página sem datas (só o marcador de cada ano), de propósito.
   Fontes (TLHeader, TL, Ellipsis...) vêm do CSS do tema T&L (statics/.../app.*.css), que não define fonte
   de corpo (o body cai em Times): aqui o texto corrido usa a TL do próprio tema.
   ========================================================================== */

.rdm {
    --rdm-bg: #0a070c;
    --rdm-gold: #c59768;
    --rdm-gold-hi: #fde6ca;
    --rdm-gold-mid: #e5b556;
    --rdm-red: #e8424f;
    --rdm-red-text: #ff9ba3;
    --rdm-ink: #fbf9f7;
    --rdm-serif: Ellipsis, JapanHeavy, TLHeader, Times, "Times New Roman", serif;
    --rdm-serif-light: Ellipsis, JapanLight, TL, Times, "Times New Roman", serif;
    position: relative;
    background: var(--rdm-bg);
    color: var(--rdm-ink);
    font-family: var(--rdm-serif-light);
    overflow-x: hidden;
}

/* ---------- Reveal on scroll (o estado inicial só vale com JS: .rdm-js entra pelo script da view) ---------- */
.rdm-js .rdm-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.rdm-js .rdm-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Peças comuns: kicker, ornamento, títulos ---------- */
.rdm-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .38em;
    text-indent: .38em;
    text-transform: uppercase;
    color: var(--rdm-gold-hi);
    padding: 7px 18px;
    border: 1px solid rgba(197, 151, 104, .5);
    background: rgba(10, 7, 12, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.rdm-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 20px auto;
}

.rdm-ornament span {
    display: block;
    height: 1px;
    width: min(150px, 26vw);
    background: linear-gradient(90deg, transparent, var(--rdm-gold));
}

.rdm-ornament span:last-child {
    background: linear-gradient(270deg, transparent, var(--rdm-gold));
}

.rdm-ornament i {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border: 1px solid var(--rdm-gold);
    transform: rotate(45deg);
    background: rgba(197, 151, 104, .25);
    box-shadow: 0 0 10px rgba(197, 151, 104, .7);
}

.rdm-title,
.rdm-h2 {
    font-family: var(--rdm-serif);
    font-weight: 400;
    text-transform: uppercase;
    background: linear-gradient(118.94deg, #fde6ca -6.67%, rgba(245, 225, 200, 0) 31.81%), linear-gradient(0deg, #c59768, #c59768), #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .85));
}

/* ---------- Hero ---------- */
.rdm-hero {
    --rdm-hero: var(--rdm-hero-desktop);
    position: relative;
    min-height: clamp(460px, 70vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 767px) {
    .rdm-hero {
        --rdm-hero: var(--rdm-hero-mobile);
    }
}

.rdm-hero-bg {
    position: absolute;
    inset: -8% 0;
    background-image: var(--rdm-hero);
    background-size: cover;
    background-position: center 30%;
    transform: scale(1.08);
    will-change: transform;
}

/* a arte tem o personagem no centro: véu mais denso no miolo, onde fica o texto */
.rdm-hero-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 46% 58% at center 48%, rgba(10, 7, 12, .66) 0%, rgba(10, 7, 12, .5) 60%, rgba(10, 7, 12, .85) 100%),
        linear-gradient(180deg, rgba(10, 7, 12, .7) 0%, rgba(10, 7, 12, 0) 22%, rgba(10, 7, 12, 0) 52%, #0a070c 96%);
}

.rdm-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 90px 20px 64px;
    max-width: 920px;
    animation: rdmHeroIn 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes rdmHeroIn {
    from {
        opacity: 0;
        transform: translateY(34px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rdm-logo {
    display: block;
    width: min(210px, 50vw);
    height: auto;
    margin: 0 auto 22px;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .8)) drop-shadow(0 0 28px rgba(232, 66, 79, .22));
}

.rdm-title {
    margin: 26px 0 0;
    font-size: clamp(2.1rem, 5.4vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -.01em;
}

.rdm-lead {
    max-width: 640px;
    margin: 6px auto 0;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.65;
    color: rgba(251, 249, 247, .9);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

.rdm-scrollcue {
    display: inline-block;
    margin-top: 38px;
    width: 30px;
    height: 48px;
    border: 1px solid rgba(197, 151, 104, .6);
    border-radius: 16px;
    position: relative;
}

.rdm-scrollcue span {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 5px;
    height: 9px;
    margin-left: -2.5px;
    border-radius: 3px;
    background: var(--rdm-gold-hi);
    animation: rdmCue 1.6s ease-in-out infinite;
}

@keyframes rdmCue {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* ---------- Seção da linha do tempo ---------- */
.rdm-tl-wrap {
    position: relative;
    padding: clamp(36px, 6vw, 70px) 20px clamp(80px, 10vw, 130px);
    overflow: hidden;
}

/* brilhos lentos ao fundo: dourado do tema e vermelho do 1.2.6 */
.rdm-tl-glow {
    position: absolute;
    inset: 0 -10%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 34% 22% at 16% 18%, rgba(197, 151, 104, .14), transparent 70%),
        radial-gradient(ellipse 30% 20% at 84% 42%, rgba(232, 66, 79, .10), transparent 70%),
        radial-gradient(ellipse 34% 22% at 22% 70%, rgba(232, 66, 79, .07), transparent 70%),
        radial-gradient(ellipse 36% 22% at 78% 88%, rgba(166, 107, 66, .13), transparent 70%);
    animation: rdmDrift 18s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes rdmDrift {
    from { transform: translate3d(-3%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 1%, 0) scale(1.06); }
}

/* brasas subindo */
.rdm-embers {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.rdm-embers i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffd29a;
    box-shadow: 0 0 6px 2px rgba(255, 166, 77, .5);
    opacity: 0;
    animation: rdmEmber 13s linear infinite;
}

.rdm-embers i:nth-child(1)  { left: 5%;  bottom: 4%;  animation-delay: 0s; }
.rdm-embers i:nth-child(2)  { left: 13%; bottom: 38%; animation-delay: -3s; animation-duration: 15s; }
.rdm-embers i:nth-child(3)  { left: 22%; bottom: 70%; animation-delay: -7s; }
.rdm-embers i:nth-child(4)  { left: 31%; bottom: 12%; animation-delay: -10s; animation-duration: 16s; }
.rdm-embers i:nth-child(5)  { left: 42%; bottom: 52%; animation-delay: -2s; width: 2px; height: 2px; }
.rdm-embers i:nth-child(6)  { left: 54%; bottom: 24%; animation-delay: -5s; animation-duration: 14s; }
.rdm-embers i:nth-child(7)  { left: 63%; bottom: 80%; animation-delay: -9s; width: 2px; height: 2px; }
.rdm-embers i:nth-child(8)  { left: 71%; bottom: 6%;  animation-delay: -12s; }
.rdm-embers i:nth-child(9)  { left: 79%; bottom: 46%; animation-delay: -4s; animation-duration: 17s; }
.rdm-embers i:nth-child(10) { left: 86%; bottom: 62%; animation-delay: -8s; width: 2px; height: 2px; }
.rdm-embers i:nth-child(11) { left: 93%; bottom: 18%; animation-delay: -6s; animation-duration: 15s; }
.rdm-embers i:nth-child(12) { left: 48%; bottom: 90%; animation-delay: -11s; }

@keyframes rdmEmber {
    0%   { opacity: 0; transform: translate3d(0, 0, 0); }
    12%  { opacity: .85; }
    70%  { opacity: .45; }
    100% { opacity: 0; transform: translate3d(36px, -560px, 0); }
}

.rdm-tl-inner {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
}

.rdm-head {
    text-align: center;
    margin-bottom: clamp(30px, 5vw, 52px);
}

.rdm-h2 {
    margin: 22px 0 0;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.1;
}

/* aviso de que a linha do tempo só mostra as grandes atualizações */
.rdm-tl-lead {
    max-width: 600px;
    margin: 18px auto 0;
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.6;
    color: rgba(251, 249, 247, .78);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

/* aviso de que tudo depende do feedback da comunidade */
.rdm-tl-feedback {
    max-width: 600px;
    margin: 12px auto 0;
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.6;
    color: var(--rdm-gold-hi);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

/* ---------- Linha do tempo ----------
   Cada <li> desenha o próprio pedaço do trilho: --top do topo até o centro do nó e --bottom do nó até o fim
   (o fim inclui o respiro até o próximo item), então o trilho fica contínuo com qualquer altura de card.
   --node-y = distância do topo do item até o centro do nó (medalhão ou anel). */
.rdm-tl {
    --medal: 68px;
    --mid: 124px;
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.rdm-tl > li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 30px;
}

.rdm-tl > li:last-child {
    padding-bottom: 0;
}

/* o item em si não desliza (o trilho desalinharia entre itens); só o card e o medalhão se movem */
.rdm-js .rdm-tl > li.rdm-reveal {
    transform: none;
}

.rdm-rail {
    position: absolute;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    transform-origin: top;
}

.rdm-rail--top {
    top: 0;
    height: var(--node-y);
}

.rdm-rail--bottom {
    top: var(--node-y);
    bottom: 0;
}

.rdm-tl > li:first-child .rdm-rail--top,
.rdm-tl > li:last-child .rdm-rail--bottom {
    display: none;
}

/* trilho já percorrido: dourado aceso */
.rdm-stage.is-done .rdm-rail,
.rdm-year.is-past .rdm-rail,
.rdm-now .rdm-rail--top {
    background: linear-gradient(180deg, var(--rdm-gold-hi), var(--rdm-gold));
    box-shadow: 0 0 10px rgba(229, 181, 86, .45);
}

/* caminho à frente: tracejado */
.rdm-stage.is-next .rdm-rail,
.rdm-stage.is-planned .rdm-rail,
.rdm-year.is-ahead .rdm-rail,
.rdm-now .rdm-rail--bottom {
    background: repeating-linear-gradient(180deg, rgba(197, 151, 104, .62) 0 7px, transparent 7px 13px);
}

.rdm-js .rdm-rail {
    transform: scaleY(0);
    transition: transform .9s cubic-bezier(.22, .61, .36, 1) .15s;
}

.rdm-js .is-in > .rdm-rail {
    transform: scaleY(1);
}

/* ----- Etapa ----- */
.rdm-stage {
    --node-y: calc(var(--medal) / 2);
    display: grid;
    grid-template-columns: 1fr var(--mid) 1fr;
    align-items: start;
}

/* medalhão em losango com o número da etapa (mesmo desenho dos passos do ciclo no /about do pw144) */
.rdm-medal {
    --medal-line: rgba(197, 151, 104, .7);
    --medal-glow: rgba(197, 151, 104, .18);
    --medal-ring: rgba(197, 151, 104, .28);
    --medal-fill: linear-gradient(160deg, rgba(32, 24, 40, .96), rgba(16, 12, 22, .98));
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--medal);
    height: var(--medal);
    font-family: var(--rdm-serif);
    font-size: calc(var(--medal) * .28);
    letter-spacing: .08em;
    color: rgba(253, 230, 202, .8);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

.rdm-medal::before {
    content: "";
    position: absolute;
    inset: calc(var(--medal) * .13);
    transform: rotate(45deg);
    border: 1px solid var(--medal-line);
    background: var(--medal-fill);
    box-shadow: 0 0 22px var(--medal-glow), inset 0 0 12px rgba(0, 0, 0, .6);
    z-index: -1;
}

.rdm-medal::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: rotate(45deg);
    border: 1px solid var(--medal-ring);
    z-index: -1;
}

/* seta para baixo no lugar do número da etapa (chevron em cor do status; o translateY compensa o peso visual) */
.rdm-medal-arrow {
    display: block;
    width: calc(var(--medal) * .17);
    height: calc(var(--medal) * .17);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-22%) rotate(45deg);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .9));
}

.rdm-stage.is-done .rdm-medal {
    --medal-line: var(--rdm-gold-hi);
    --medal-glow: rgba(229, 181, 86, .5);
    --medal-ring: rgba(253, 230, 202, .5);
    --medal-fill: linear-gradient(160deg, #6b4a2b, #2b1d13);
    color: var(--rdm-gold-hi);
}

.rdm-stage.is-next .rdm-medal {
    --medal-line: #ffb3b9;
    --medal-glow: rgba(232, 66, 79, .55);
    --medal-ring: rgba(232, 66, 79, .5);
    --medal-fill: linear-gradient(160deg, rgba(58, 20, 26, .97), rgba(26, 10, 14, .98));
    color: #ffecee;
}

.rdm-stage.is-next .rdm-medal::before {
    animation: rdmNextGlow 2.6s ease-in-out infinite;
}

@keyframes rdmNextGlow {
    0%, 100% { box-shadow: 0 0 14px rgba(232, 66, 79, .4), inset 0 0 12px rgba(0, 0, 0, .6); }
    50%      { box-shadow: 0 0 30px rgba(232, 66, 79, .8), inset 0 0 12px rgba(0, 0, 0, .6); }
}

.rdm-js .rdm-stage .rdm-medal {
    transform: scale(.6);
    opacity: 0;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1) .1s, opacity .5s ease .1s;
}

.rdm-js .rdm-stage.is-in .rdm-medal {
    transform: none;
    opacity: 1;
}

/* filete que liga o medalhão ao card (sai da ponta do losango interno) */
.rdm-link {
    position: absolute;
    top: calc(var(--node-y) - .5px);
    width: calc(var(--mid) / 2 - var(--medal) * .52);
    height: 1px;
    pointer-events: none;
}

.rdm-stage.side-left .rdm-link {
    right: calc(50% + var(--medal) * .52);
    background: linear-gradient(270deg, rgba(197, 151, 104, .95), rgba(197, 151, 104, .3));
}

.rdm-stage.side-right .rdm-link {
    left: calc(50% + var(--medal) * .52);
    background: linear-gradient(90deg, rgba(197, 151, 104, .95), rgba(197, 151, 104, .3));
}

.rdm-stage.is-next .rdm-link {
    background: rgba(232, 66, 79, .7);
}

/* card: o rótulo de status fica na altura do centro do medalhão */
.rdm-card {
    --status: rgba(251, 249, 247, .58);
    grid-row: 1;
    position: relative;
    margin-top: calc(var(--node-y) - 24px);
    padding: 16px 22px 20px;
    border: 1px solid rgba(197, 151, 104, .3);
    background: linear-gradient(160deg, rgba(32, 24, 40, .86), rgba(16, 12, 22, .9));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: border-color .35s ease, box-shadow .35s ease;
}

.rdm-stage.side-left .rdm-card {
    grid-column: 1;
}

.rdm-stage.side-right .rdm-card {
    grid-column: 3;
}

/* cantos dourados (mesma moldura do manifesto do /about do pw144) */
.rdm-card::before,
.rdm-card::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--rdm-gold);
    pointer-events: none;
}

.rdm-card::before {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0;
}

.rdm-card::after {
    bottom: -2px;
    right: -2px;
    border-left: 0;
    border-top: 0;
}

.rdm-card:hover {
    border-color: rgba(253, 230, 202, .6);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 0 26px rgba(197, 151, 104, .2);
}

.rdm-stage.is-done .rdm-card {
    --status: var(--rdm-gold-mid);
    border-color: rgba(229, 181, 86, .42);
}

.rdm-stage.is-next .rdm-card {
    --status: var(--rdm-red-text);
    border-color: rgba(232, 66, 79, .5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 28px rgba(232, 66, 79, .14);
}

.rdm-stage.is-next .rdm-card:hover {
    border-color: rgba(155, 226, 248, .8);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 0 30px rgba(232, 66, 79, .24);
}

.rdm-js .rdm-stage .rdm-card {
    transition: transform .7s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease;
}

.rdm-js .rdm-stage.side-left .rdm-card {
    transform: translateX(-34px);
}

.rdm-js .rdm-stage.side-right .rdm-card {
    transform: translateX(34px);
}

.rdm-js .rdm-stage.is-in .rdm-card {
    transform: none;
}

.rdm-card-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 10.5px;
    line-height: 16px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--status);
}

.rdm-card-status i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: var(--status);
    box-shadow: 0 0 8px var(--status);
}

.rdm-card-items {
    display: grid;
    gap: 9px;
    list-style: none;
    margin: 12px 0 0;
    padding: 13px 0 0;
    border-top: 1px solid rgba(197, 151, 104, .2);
}

.rdm-card-items li {
    position: relative;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

.rdm-card-items li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    transform: rotate(45deg);
    border: 1px solid var(--rdm-gold);
    background: rgba(197, 151, 104, .35);
}

.rdm-card-items li span {
    font-family: var(--rdm-serif);
    font-size: clamp(1.08rem, 1.55vw, 1.32rem);
    line-height: 1.25;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: linear-gradient(118.94deg, #fde6ca -6.67%, rgba(245, 225, 200, 0) 31.81%), linear-gradient(0deg, #c59768, #c59768), #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----- Marcador de ano: "2026" entre filetes com losango na ponta, em cima do trilho (o trilho para acima do ano
   e volta abaixo dele). Vem antes do primeiro item de cada ano; o nó "Você está aqui" conta no ano de hoje. ----- */
.rdm-year {
    --node-y: 22px;
    display: flex;
    justify-content: center;
}

.rdm-year-node {
    display: none;
}

.rdm-year-label {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 44px;
}

.rdm-year-label b {
    font-family: var(--rdm-serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    line-height: 1;
    letter-spacing: .14em;
    text-indent: .14em;
    background: linear-gradient(118.94deg, #fde6ca -6.67%, rgba(245, 225, 200, 0) 31.81%), linear-gradient(0deg, #c59768, #c59768), #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .85));
    white-space: nowrap;
}

/* "Fim de" / "Início de" antes do ano */
.rdm-year-label small {
    font-size: .46em;
    letter-spacing: .2em;
    text-transform: uppercase;
    vertical-align: middle;
}

.rdm-year-line {
    position: relative;
    display: block;
    width: clamp(60px, 14vw, 170px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rdm-gold));
    transform-origin: right center;
}

.rdm-year-line:last-child {
    background: linear-gradient(270deg, transparent, var(--rdm-gold));
    transform-origin: left center;
}

/* losango na ponta de dentro de cada filete */
.rdm-year-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    transform: rotate(45deg);
    border: 1px solid var(--rdm-gold);
    background: rgba(197, 151, 104, .35);
    box-shadow: 0 0 8px rgba(197, 151, 104, .6);
}

.rdm-year-line:last-child::after {
    right: auto;
    left: -4px;
}

.rdm-year .rdm-rail--top {
    display: none;
}

.rdm-year .rdm-rail--bottom {
    top: 44px;
}

.rdm-js .rdm-year-line {
    transform: scaleX(0);
    transition: transform .8s cubic-bezier(.22, .61, .36, 1) .2s;
}

.rdm-js .rdm-year.is-in .rdm-year-line {
    transform: none;
}

/* ----- Nó "Você está aqui": selo dourado com ponta sobre o anel que pulsa (igual à régua do /about do pw144) ----- */
.rdm-now {
    --node-y: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rdm-now-pill {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    height: 30px;
    margin-bottom: 16px;
    padding: 0 16px;
    border: 1px solid rgba(255, 236, 205, .7);
    background: linear-gradient(180deg, #fde6ca 0%, #e5b556 55%, #c59768 100%);
    color: #1a1510;
    font-family: var(--rdm-serif-light);
    font-size: 11px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: .2em;
    text-indent: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 20px rgba(229, 181, 86, .35);
}

.rdm-now-pill::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #c59768;
}

.rdm-now-ring {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--rdm-gold-hi);
    background: radial-gradient(circle, #fde6ca 0 4px, rgba(229, 181, 86, .3) 5px, rgba(10, 7, 12, .92) 72%);
    box-shadow: 0 0 18px rgba(229, 181, 86, .6), inset 0 0 10px rgba(229, 181, 86, .35);
}

.rdm-now-ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--rdm-gold-hi);
    opacity: 0;
    animation: rdmPulse 2.4s ease-out 1s infinite;
}

@keyframes rdmPulse {
    0%   { transform: scale(.7); opacity: .8; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* com JS: o anel nasce, depois o selo sobe e só então o pulso começa */
.rdm-js .rdm-now-ring {
    transform: scale(.4);
    opacity: 0;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1) .2s, opacity .4s ease .2s;
}

.rdm-js .rdm-now-ring::after {
    animation: none;
}

.rdm-js .rdm-now.is-in .rdm-now-ring {
    transform: none;
    opacity: 1;
}

.rdm-js .rdm-now.is-in .rdm-now-ring::after {
    animation: rdmPulse 2.4s ease-out 1.2s infinite;
}

.rdm-js .rdm-now-pill {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease .6s, transform .5s cubic-bezier(.22, .61, .36, 1) .6s;
}

.rdm-js .rdm-now.is-in .rdm-now-pill {
    opacity: 1;
    transform: none;
}

/* ---------- Rodapé da seção ---------- */
.rdm-foot {
    max-width: 680px;
    margin: clamp(36px, 5vw, 56px) auto 0;
    text-align: center;
}

.rdm-note {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(251, 249, 247, .62);
}

.rdm-btn,
.rdm-btn:visited {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid rgba(244, 210, 161, .65);
    background: linear-gradient(135deg, rgba(244, 210, 161, .95), rgba(166, 107, 66, .95));
    color: #1a120a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    transition: filter .2s ease, transform .2s ease;
}

.rdm-btn:hover,
.rdm-btn:focus-visible {
    color: #1a120a;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ---------- Celular e tablet: trilho à esquerda, cards à direita ---------- */
@media (max-width: 899px) {
    .rdm-tl {
        --mid: var(--medal);
    }

    .rdm-rail {
        left: calc(var(--medal) / 2);
    }

    .rdm-stage {
        grid-template-columns: var(--medal) 1fr;
        column-gap: 16px;
    }

    .rdm-medal {
        grid-column: 1;
    }

    .rdm-stage.side-left .rdm-card,
    .rdm-stage.side-right .rdm-card {
        grid-column: 2;
    }

    .rdm-stage.side-left .rdm-link,
    .rdm-stage.side-right .rdm-link {
        left: calc(var(--medal) * 1.02);
        right: auto;
        width: calc(16px - var(--medal) * .02);
        background: linear-gradient(90deg, rgba(197, 151, 104, .95), rgba(197, 151, 104, .3));
    }

    .rdm-stage.is-next .rdm-link {
        background: rgba(232, 66, 79, .7);
    }

    .rdm-js .rdm-stage.side-left .rdm-card,
    .rdm-js .rdm-stage.side-right .rdm-card {
        transform: translateX(24px);
    }

    .rdm-js .rdm-stage.is-in .rdm-card {
        transform: none;
    }

    /* nó "Você está aqui": anel no trilho e selo ao lado, com a ponta apontando para o anel */
    .rdm-now {
        --node-y: 16px;
        display: grid;
        grid-template-columns: var(--medal) 1fr;
        column-gap: 16px;
        align-items: center;
    }

    .rdm-now-ring {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }

    .rdm-now-pill {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        margin: 0 0 0 6px;
    }

    .rdm-now-pill::after {
        top: 50%;
        left: auto;
        right: 100%;
        margin: -6px 0 0;
        border-top-color: transparent;
        border-right-color: #e5b556;
    }

    .rdm-js .rdm-now-pill {
        transform: translateX(-8px);
    }

    .rdm-js .rdm-now.is-in .rdm-now-pill {
        transform: none;
    }

    /* marcador de ano: losango no trilho (cheio no ano já percorrido, vazado à frente) e o ano ao lado, com filete
       até a borda; aqui o trilho passa direto pelo losango */
    .rdm-year {
        display: grid;
        grid-template-columns: var(--medal) 1fr;
        column-gap: 16px;
        align-items: center;
    }

    .rdm-year .rdm-rail--top {
        display: block;
    }

    .rdm-year .rdm-rail--bottom {
        top: var(--node-y);
    }

    .rdm-year-node {
        display: block;
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        position: relative;
        z-index: 1;
        width: 14px;
        height: 14px;
        transform: rotate(45deg);
        border: 1px solid var(--rdm-gold-hi);
        background: linear-gradient(135deg, #fde6ca, #c59768);
        box-shadow: 0 0 12px rgba(229, 181, 86, .6);
    }

    .rdm-year.is-ahead .rdm-year-node {
        border-color: rgba(197, 151, 104, .8);
        background: #1a1416;
        box-shadow: 0 0 10px rgba(197, 151, 104, .3);
    }

    .rdm-year-label {
        grid-column: 2;
        grid-row: 1;
        gap: 14px;
    }

    .rdm-year-label b {
        font-size: 1.6rem;
    }

    .rdm-year-line:first-child {
        display: none;
    }

    .rdm-year-line:last-child {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 480px) {
    /* o losango externo do medalhão passa da coluna: 4px de folga para não encostar na borda da tela */
    .rdm-tl {
        --medal: 56px;
        padding-left: 4px;
    }

    .rdm-tl-wrap {
        padding-left: 14px;
        padding-right: 14px;
    }

    .rdm-card {
        padding: 14px 16px 16px;
    }

    .rdm-card-status {
        font-size: 9.5px;
        letter-spacing: .16em;
    }

    .rdm-now-pill {
        padding: 0 12px;
        font-size: 10px;
        letter-spacing: .16em;
        text-indent: .16em;
    }
}

/* ---------- Movimento reduzido: tudo visível e parado ---------- */
@media (prefers-reduced-motion: reduce) {
    .rdm-hero-content,
    .rdm-tl-glow,
    .rdm-scrollcue span,
    .rdm-stage.is-next .rdm-medal::before,
    .rdm-now-ring::after {
        animation: none;
    }

    .rdm-embers {
        display: none;
    }
}