/* Seção 6 — O caminho: os degraus do hero viram o passo a passo */
.caminho { --degrau: clamp(2.6rem, 5vw, 4.6rem); --vao: clamp(.8rem, 1.6vw, 1.6rem); --num: clamp(4rem, 8vw, 7.5rem); overflow: hidden; }
.caminho-fundo { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(44% 50% at 92% 8%, var(--ceu), transparent 72%),
    radial-gradient(40% 44% at 66% 34%, var(--lilas-ceu), transparent 72%),
    radial-gradient(40% 44% at 12% 80%, var(--luz), transparent 72%),
    linear-gradient(180deg in oklch, oklch(0.93 0.03 60), oklch(0.925 0.035 20)); }
.caminho-dentro { position: relative; }
.caminho-abre { max-width: 34rem; position: absolute; top: 0; left: 0; }
.caminho-abre .h2 { margin-top: .8rem; }
.caminho-sub { margin-top: 1rem; max-width: 25rem; color: var(--tinta-2); }
.caminho-balao { position: absolute; right: 4%; top: -1.5rem; width: clamp(3rem, 5vw, 4.6rem); filter: drop-shadow(0 12px 12px rgba(80,50,20,.18)); animation: flutua 13s ease-in-out infinite alternate; }
.caminho-lista { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--vao); align-items: start; padding-top: clamp(4rem, 9vw, 7rem); }
.caminho-lista li { margin-top: calc((4 - var(--n)) * var(--degrau)); position: relative; }
.caminho-lista li:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + var(--vao) / 2 - 2.5px); top: calc(var(--num) * .8 + 10px - var(--degrau)); width: 5px; height: calc(var(--degrau) + 5px); border-radius: 3px; background: linear-gradient(180deg, var(--ouro-claro), #a67c2e); }
.caminho-lista li:first-child .num { color: var(--madeira); }
.caminho-lista .num { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: var(--num); line-height: .8; color: var(--tinta); }
.caminho-lista .prateleira { margin: 10px calc(var(--vao) / -2) 0; border-radius: 0; }
.caminho-lista li:first-child .prateleira { margin-left: 0; border-radius: 3px 0 0 3px; } .caminho-lista li:last-child .prateleira { margin-right: 0; }
.caminho-lista .h3 { margin-top: 1.1rem; font-size: clamp(1.1rem, 1.45vw, 1.35rem); }
.caminho-lista p { margin-top: .5rem; font-size: .94rem; line-height: 1.5; color: #3d2c1f; }
.caminho-lista .botao { margin-top: 1rem; font-size: .92rem; padding: .75rem 1.15rem; }
.caminho-lista .dela { font-family: var(--f-titulo); font-size: 1.05rem; line-height: 1.3; color: var(--tinta); margin-top: .5rem; }
.caminho-foto { position: absolute; right: 0; bottom: 0; margin: 0; display: flex; align-items: flex-end; gap: 1.2rem; width: calc(40% - var(--vao)); }
.caminho-foto figcaption { flex: 1; font-family: var(--f-titulo); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.25; text-align: right; padding-bottom: 1rem; }
.caminho-foto .casinha { width: 46%; flex: none; rotate: 2.5deg; } .caminho-foto .moldura { aspect-ratio: 1 / 1; } .caminho-foto img { object-position: 0 50%; }
@media (max-width: 900px) {
  .caminho-abre { position: static; }
  .caminho-balao { right: 0; top: -2.4rem; width: 2.6rem; }
  .caminho-lista li::after { display: none; }
  .caminho-foto { position: static; width: auto; margin-top: 2.2rem; } .caminho-foto figcaption { text-align: left; } .caminho-foto .casinha { width: 38%; }
  .caminho-lista { grid-template-columns: 1fr; padding-top: 2rem; gap: 1.8rem; }
  .caminho-lista li { margin-top: 0; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; }
  .caminho-lista .num { font-size: 4.2rem; grid-row: 1 / 5; }
  .caminho-lista .prateleira, .caminho-lista li:first-child .prateleira, .caminho-lista li:last-child .prateleira { grid-column: 1 / 3; grid-row: 5; margin: 1rem 0 0; border-radius: 3px; }
  .caminho-lista li { grid-template-columns: 3.8rem 1fr; }
  .caminho-lista .botao { justify-self: start; }
  .caminho-lista .h3 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .caminho-balao { animation: none; } }