/* KM 3 · Como funciona — a rota em serpentina, vista de cima, com cinco paradas. Prefixo cm- */
.cm { --cm-larg: 68px; --cm-asfalto: #16181d; }

.cm-topo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.cm-intro { margin: clamp(16px, 2vw, 24px) 0 0; color: var(--tinta); }

/* prazo: régua do tempo feita com os traços da faixa (5 para trás, 2 à frente) */
.cm-prazo { padding-bottom: 4px; }
.cm-prazo .rotulo { color: var(--d-faixa); }
.cm-regua { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; }
.cm-regua__tras, .cm-regua__frente { position: relative; display: flex; gap: 8px; padding-top: clamp(3.2rem, 5vw, 4.6rem); }
.cm-regua__tras { flex: 5; } .cm-regua__frente { flex: 2; }
.cm-regua b { position: absolute; top: 0; left: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--d-mono); font-weight: 700; font-size: clamp(3.2rem, 5vw, 4.6rem); line-height: .9; }
.cm-regua b small { font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cm-regua__tras b { color: var(--tinta); }
.cm-regua__frente b { color: var(--d-faixa); }
.cm-regua i { flex: 1; height: 8px; border-radius: 1px; }
.cm-regua__tras i { box-shadow: inset 0 0 0 2px rgb(243 238 230 / .75); }
.cm-regua__frente i { background: var(--d-faixa); }
.cm-regua__marco { position: relative; flex: none; width: 4px; height: 44px; margin-bottom: -18px; background: #f3eee6; border-radius: 1px; }
.cm-regua__marco em { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-family: var(--d-mono); font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cm-prazo__lista { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 10px; }
.cm-prazo__item { position: relative; padding-left: 34px; font-size: 1rem; line-height: 1.4; color: var(--tinta); }
.cm-prazo__item::before { content: ""; position: absolute; left: 0; top: .5em; width: 22px; height: 6px; border-radius: 1px; }
.cm-prazo__item--frente::before { background: var(--d-faixa); }
.cm-prazo__item--tras::before { box-shadow: inset 0 0 0 2px rgb(243 238 230 / .75); }
.cm-prazo__item strong { font-weight: 800; }
.cm-prazo__fonte { margin: 14px 0 0 34px; font-size: var(--t-mini); color: var(--tinta-2); }

/* rota */
.cm-rota { position: relative; margin-top: clamp(56px, 7vw, 104px); --cm-serp: 0; }
.cm-pista { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.cm-pista path { fill: none; }
.cm-pista__sombra { stroke: rgb(5 6 12 / .5); stroke-width: calc(var(--cm-larg) + 6px); filter: blur(14px); transform: translateY(14px); }
.cm-pista__asfalto { stroke: var(--cm-asfalto); stroke-width: var(--cm-larg); }
.cm-pista__bordo { stroke: rgb(243 238 230 / .55); stroke-width: calc(var(--cm-larg) - 10px); }
.cm-pista__miolo { stroke: var(--cm-asfalto); stroke-width: calc(var(--cm-larg) - 14px); }
.cm-pista__eixo { stroke: var(--d-faixa); stroke-width: 4; stroke-dasharray: 22 18; }
.cm-pista__capa { stroke: var(--cm-asfalto); stroke-width: 8; opacity: .8; }
.cm-pista__farol { fill: #fff3d6; filter: drop-shadow(0 0 10px #e0a83c) drop-shadow(0 0 22px #e0a83c); opacity: 0; transition: opacity .4s; }
.cm-pista__setas rect { fill: var(--d-faixa); }
.cm-pista__setas path { stroke: var(--cm-asfalto); stroke-width: 3; stroke-linecap: square; }
.cm-rota:not(.cm-viva) .cm-pista { display: none; }
.cm-sol { display: none; }

.cm-paradas { position: relative; z-index: 1; }
.cm-parada { padding-left: calc(var(--cm-larg) + 22px); padding-bottom: 48px; }
.cm-ponto { position: absolute; left: calc(var(--cm-larg) / 2 - 7px); width: 14px; height: 14px; margin-top: 18px; border-radius: 50%; background: var(--cm-asfalto); border: 2px solid rgb(243 238 230 / .6); transition: background .5s, border-color .5s, box-shadow .5s; }
.cm-passou .cm-ponto { background: var(--d-faixa); border-color: #fff3d6; box-shadow: 0 0 0 5px rgb(224 168 60 / .25), 0 0 22px 4px rgb(224 168 60 / .55); }

.cm-marco { display: inline-flex; flex-direction: column; align-items: center; margin: 0; min-width: 64px; padding: 8px 9px 3px; border: 2px solid #f3eee6; border-radius: 6px; background: var(--d-indigo); box-shadow: 0 0 0 3px var(--d-indigo), 0 14px 24px -14px rgb(0 0 0 / .6); font-family: var(--d-mono); text-transform: uppercase; line-height: 1; color: #f3eee6; opacity: .72; transition: opacity .5s; }
.cm-marco small { font-size: var(--t-mini); letter-spacing: .08em; font-weight: 600; }
.cm-marco b { font-size: 2.5rem; font-weight: 700; margin-top: 3px; }
.cm-passou .cm-marco { opacity: 1; }
.cm-nome { font-size: clamp(1.45rem, 1.9vw, 1.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.008em; margin-top: 18px; text-wrap: balance; }
.cm-texto { margin: 10px 0 0; font-size: var(--d-corpo); line-height: 1.5; color: var(--tinta); max-width: 28em; }
.cm-texto--mais { color: var(--tinta-2); margin-top: 14px; }
.cm-docs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cm-docs li { font-family: var(--d-mono); font-size: var(--t-mini); font-weight: 600; padding: 9px 12px 7px; border-radius: 6px; background: #f3eee6; color: var(--d-tinta); line-height: 1.1; }
.cm-docs--mais li { background: transparent; color: var(--tinta); border: 1px dashed rgb(243 238 230 / .5); font-weight: 400; }
.cm-canais { margin: 16px 0 0; display: grid; gap: 2px; font-size: var(--t-mini); max-width: 26em; }
.cm-canais div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; min-height: 48px; border-top: 1px solid var(--linha); }
.cm-canais div:last-child { border-bottom: 1px solid var(--linha); }
.cm-canais dt { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--acento); }
.cm-canais a { display: inline-flex; align-items: center; min-height: 48px; text-underline-offset: .3em; }

.cm-fim { position: relative; z-index: 1; margin-top: 64px; padding: clamp(20px, 2.2vw, 30px); border: 2px solid #f3eee6; border-radius: var(--raio); background: var(--d-indigo); box-shadow: 0 0 0 3px var(--d-indigo), 0 26px 50px -22px rgb(5 6 12 / .7); color: #f3eee6; }
.cm-fim__rotulo { margin: 0 0 10px; font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--d-pessego); }
.cm-fim__frase { margin: 0 0 20px; font-size: clamp(1.5rem, 2.5vw, 2.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.cm-fim .d-botao { width: 100%; }

@media (max-width: 999px) {
  .cm { --cm-larg: 40px; }
  .cm-topo { grid-template-columns: 1fr; }
  .cm-rota { margin-inline: -8px; }
  .cm-parada { padding: 0 0 0 calc(var(--cm-larg) + 18px); }
  .cm-parada + .cm-parada { margin-top: 88px; }
  .cm-parada:nth-child(even) { padding: 0 calc(var(--cm-larg) + 18px) 0 8px; }
  .cm-parada:nth-child(even) .cm-ponto { left: auto; right: calc(var(--cm-larg) / 2 - 7px); }
  .cm-fim { margin-left: calc(var(--cm-larg) + 18px); margin-right: 8px; }
  .cm-pista { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px); mask-image: linear-gradient(to bottom, transparent 0, #000 60px); }
}

/* desktop: serpentina */
@media (min-width: 1000px) {
  .cm-rota { --cm-serp: 1; }
  .cm-sol { display: block; position: absolute; z-index: 0; right: calc(var(--d-margem) * -1 - 420px); top: calc(var(--cm-yc, 80%) - 420px); width: 840px; height: 840px; border-radius: 50%;
    background: radial-gradient(circle, rgb(243 204 146 / .42) 0, rgb(232 184 119 / .22) 28%, rgb(201 138 43 / .08) 52%, rgb(201 138 43 / 0) 70%); }
  .cm-paradas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; }
  .cm-parada { position: relative; padding: calc(var(--cm-larg) + 28px) 0 0; }
  .cm-ponto { left: 25px; top: calc(var(--cm-larg) / 2 - 7px); margin: 0; }
  .cm-parada::before { content: ""; position: absolute; left: 31px; top: calc(var(--cm-larg) / 2 + 7px); width: 2px; height: calc(var(--cm-larg) / 2 + 21px); background: rgb(243 238 230 / .6); }
  .cm-parada--1 { grid-area: 1 / 1 / auto / span 4; }
  .cm-parada--2 { grid-area: 1 / 6 / auto / span 5; }
  .cm-parada--3 { grid-area: 2 / 7 / auto / span 4; }
  .cm-parada--4 { grid-area: 2 / 3 / auto / span 4; }
  .cm-parada--5 { grid-area: 3 / 2 / auto / span 4; padding-bottom: 20px; }
  .cm-fim { position: absolute; right: 0; top: calc(var(--cm-yc, 80%) + var(--cm-larg) / 2 + 44px); width: 40%; margin: 0; }
  .cm-fim::before, .cm-fim::after { content: ""; position: absolute; bottom: calc(100% + 5px); width: 4px; height: 42px; background: rgb(243 238 230 / .6); }
  .cm-fim::before { left: 44px; } .cm-fim::after { right: 44px; }
}