/* on · Onde ela atende */
.on-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.on-intro { margin: 0; }

.on-trilha { position: relative; margin-top: clamp(48px, 7vw, 96px); }
.on-caminho { left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }
.on-caminho path { stroke: var(--framboesa); stroke-width: 4.5; stroke-dasharray: 1 1; opacity: .85; }
.on-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); position: relative; z-index: 1; }
.on-passo { position: relative; }
.on-passo:nth-child(1) { margin-top: 180px; }
.on-passo:nth-child(2) { margin-top: 120px; }
.on-passo:nth-child(3) { margin-top: 60px; }
.on-foto { position: relative; margin: 0; padding: 10px 10px 12px; background: #fff; transform: rotate(var(--rot, 0deg));
  box-shadow: 0 1px 1px rgb(60 30 40 / .06), 0 18px 36px -16px rgb(70 40 50 / .38); }
.on-foto img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.on-pilha { position: relative; }
.on-foto-atras { position: absolute; inset: 0; z-index: -1; transform: rotate(-7deg) translate(-14%, 4%); }
.on-leg { margin: 18px 0 0; font-family: var(--f-titulo); font-variation-settings: "INFM" 60, "BNCE" 20; font-weight: 500; font-size: 1.08rem; line-height: 1.35; color: var(--tinta); position: relative; background: var(--papel); padding: 4px 8px 4px 0; width: fit-content; max-width: 100%; }
.on-leg b { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; margin-right: 8px; border-radius: 50%; background: var(--manteiga); color: var(--tinta); font-weight: 700; }
.on-roda13 { width: 30%; left: 32%; top: 41%; transform: translate(-50%, -50%); }
.on-roda13 path { stroke-width: 5; }

.on-base { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(64px, 8vw, 120px); align-items: stretch; }
.on-end { font-style: normal; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta-2); }
.on-end p { margin: 0 0 14px; }
.on-end-nome { font-family: var(--f-titulo); font-weight: 700; font-size: 1.4rem; line-height: 1.2; color: var(--tinta); }
.on-13 { color: var(--tinta); font-weight: 500; }
.on-hora { font-weight: 450; color: var(--tinta); }
.on-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.on-mapa { position: relative; min-height: 340px; border-radius: 28px; overflow: hidden; background: var(--creme); border: 1.5px dashed color-mix(in oklab, var(--lilas) 50%, transparent); }
.on-mapa-btn { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; cursor: pointer; text-align: center;
  font-family: var(--f-texto); font-weight: 500; font-size: 1.08rem; color: var(--tinta); }
.on-mapa-btn svg { width: 40px; height: 40px; fill: var(--framboesa-escura); }
.on-mapa-btn small { font-size: var(--t-mini); color: var(--tinta-2); font-weight: 400; }
.on-mapa-btn:focus-visible { outline: 3px solid var(--lilas); outline-offset: -6px; border-radius: 28px; }
.on-mapa-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .on-topo, .on-base { grid-template-columns: 1fr; }
  .on-passos { grid-template-columns: 1fr; gap: 40px; }
  .on-passo, .on-passo:nth-child(n) { margin-top: 0; width: 62%; }
  .on-passo:nth-child(even) { margin-left: auto; }
  .on-mapa { min-height: 300px; }
}
.on-t13 { position: relative; display: inline-block; }
.on-roda-t { width: 1.75em; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-6deg); }
.on-roda-t path { stroke-width: 4; }
.on-mapa { background:
  repeating-linear-gradient(28deg, transparent 0 46px, color-mix(in oklab, var(--lilas) 14%, transparent) 46px 49px),
  repeating-linear-gradient(-62deg, transparent 0 74px, color-mix(in oklab, var(--manteiga-viva) 30%, transparent) 74px 80px), var(--creme); }
.on-mapa-btn span { background: var(--papel); padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 20px -12px rgb(70 40 50 / .4); min-height: 48px; display: inline-flex; align-items: center; }
.on-mapa-btn small { background: var(--creme); padding: 2px 8px; border-radius: 6px; }