/* pr · O processo — a pedra bruta que ganha um corte a cada etapa */
.pr-secao { --pr-p: 1; --pr-barra: 0px; padding-bottom: clamp(4rem, 8vw, 7.5rem); }

/* ───────── cabeça: o título desce em degraus ───────── */
.pr-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.pr-cabeca > * { grid-column: 1 / -1; }
.pr-titulo { margin-top: clamp(1.25rem, 2.4vw, 2.25rem); font-size: clamp(3rem, 9.4vw, 9rem); line-height: .93; text-wrap: nowrap; }
.pr-titulo span { display: block; }
.pr-titulo span:nth-child(2) { margin-left: 1.04em; }
.pr-titulo span:nth-child(3) { margin-left: 2.08em; }
/* a abertura é o quarto degrau */
.pr-abre { grid-column: 6 / -1; margin-top: clamp(2rem, 3.6vw, 3.5rem); padding-top: 1.4rem; border-top: 1px solid var(--fio); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.pr-abre-fala { margin: 0; }
.pr-abre-fala .wf-fala { font-size: clamp(1.5rem, 2.1vw, 2rem); }

/* ───────── corpo: palco preso + etapas ───────── */
.pr-corpo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 6.5rem); margin-top: clamp(3rem, 7vw, 6.5rem); }
.pr-palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: 1fr auto; align-content: center; padding-block: clamp(1.5rem, 5vh, 3.5rem); }
.pr-cena { position: relative; min-height: 0; display: grid; place-items: center; }
.pr-giro { position: relative; z-index: 1; height: min(100%, 50vw, 50rem); aspect-ratio: 1000 / 1160; transform: rotate(calc(var(--pr-p) * 37deg)); filter: drop-shadow(0 28px 40px rgb(120 78 62 / .24)); will-change: transform; }
.pr-pedra { display: block; width: 100%; height: 100%; overflow: visible; }

/* a pedra, estado final (sem script, é assim que ela aparece) */
.pr-base { stroke: var(--aresta); stroke-width: 1.1; stroke-opacity: .92; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pr-pav line { stroke: var(--aresta); stroke-width: .8; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.pr-pav polygon { stroke: var(--aresta); stroke-width: .8; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.pr-cinta { fill: none; stroke: var(--rosa); stroke-opacity: .7; stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .8s var(--suave); }
.pr-luz { fill: #fffaf2; opacity: 0; transition: opacity 1.8s ease-in-out; }
.pr-f { transition: opacity .9s var(--suave) calc(var(--i) * 70ms + .25s); }
.pr-fosco { fill: #d9b8a6; opacity: 0; transition: opacity .9s var(--suave); }
.pr-nucleo { opacity: 0; transition: opacity .9s var(--suave); }
.pr-nucleo polygon, .pr-lasca polygon { stroke: rgb(126 74 68 / .13); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pr-nucleo .pr-pinta { stroke: none; }
.pr-risco { fill: none; stroke: var(--aresta); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .9s var(--suave), opacity .5s; }
.pr-lasca { transform-box: fill-box; transform-origin: center; opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); transition: transform 1.2s var(--suave) calc(var(--i) * 90ms), opacity .8s ease calc(var(--i) * 90ms); }

/* etapa 1: bruta */
.pr-secao[data-pr-passo="1"] .pr-lasca,
.pr-secao[data-pr-passo="2"] .pr-lasca-b { opacity: 1; transform: none; }
.pr-secao:is([data-pr-passo="1"], [data-pr-passo="2"]) .pr-nucleo { opacity: 1; }
.pr-secao:is([data-pr-passo="1"], [data-pr-passo="2"]) .pr-f { opacity: 0; transition-delay: 0s; }
.pr-secao:is([data-pr-passo="1"], [data-pr-passo="2"]) .pr-cinta { opacity: 0; }
/* etapa 2: os riscos do plano */
.pr-secao:is([data-pr-passo="2"], [data-pr-passo="3"]) .pr-risco { stroke-dashoffset: 0; opacity: .85; transition-delay: calc(var(--j) * 38ms + .3s); }
/* etapa 3: a coroa cortada, a mesa ainda fosca */
.pr-secao:is([data-pr-passo="1"], [data-pr-passo="2"], [data-pr-passo="3"]) .pr-fosco { opacity: 1; }
.pr-secao[data-pr-passo="3"] :is(.pr-f1, .pr-mesa) { opacity: 0; transition-delay: 0s; }
/* etapa 4: a faceta de aço recebe a luz */
.pr-secao[data-pr-passo="4"] .pr-aco .pr-luz { opacity: .6; transition-delay: 1.2s; }

/* etapa 4: a luz anda um detalhe por vez, como no hero */
.pr-f.pr-acesa .pr-luz { opacity: .6; }
.pr-mesa.pr-acesa .pr-luz { opacity: .4; }
/* a malha que vive dentro da pedra lapidada */
.pr-brilho { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; clip-path: polygon(35% 13.45%, 65% 13.45%, 81.8% 27.93%, 81.8% 72.07%, 65% 86.55%, 35% 86.55%, 18.2% 72.07%, 18.2% 27.93%); transition: opacity 1.4s ease .6s; }
.pr-brilho i { position: absolute; border-radius: 50%; }
.pr-brilho i:nth-child(1) { width: 62%; aspect-ratio: 1; left: 2%; top: 4%; background: radial-gradient(closest-side in oklab, rgb(255 252 246 / .95), rgb(255 252 246 / .4) 50%, rgb(255 252 246 / 0)); animation: pr-vaga-a 22s ease-in-out infinite alternate; }
.pr-brilho i:nth-child(2) { width: 66%; aspect-ratio: 1; right: -2%; bottom: 4%; background: radial-gradient(closest-side in oklch, rgb(150 84 74 / .75), rgb(150 84 74 / .3) 55%, rgb(150 84 74 / 0)); animation: pr-vaga-b 29s ease-in-out infinite alternate; }
@keyframes pr-vaga-a { to { transform: translate3d(34%, 60%, 0) scale(1.15); } }
@keyframes pr-vaga-b { to { transform: translate3d(-36%, -58%, 0) scale(.9); } }
.pr-secao:is([data-pr-passo="1"], [data-pr-passo="2"], [data-pr-passo="3"]) .pr-brilho { opacity: 0; transition-delay: 0s; }
.pr-secao:is([data-pr-passo="1"], [data-pr-passo="2"], [data-pr-passo="3"], .pr-fora) .pr-brilho i { animation-play-state: paused; }

/* o algarismo da etapa, atrás da pedra */
.pr-algarismo { position: absolute; right: 0; top: -1.5vh; display: grid; font-family: var(--f-titulo); font-size: min(38vh, 19vw, 22rem); line-height: .8; color: var(--pedra-2); }
.pr-algarismo span { grid-area: 1 / 1; justify-self: end; opacity: 0; transform: translateY(6%); transition: opacity .9s var(--suave), transform 1.1s var(--suave); }
.pr-algarismo span:nth-child(4) { opacity: 1; transform: none; }
.pr-secao[data-pr-passo] .pr-algarismo span { opacity: 0; transform: translateY(6%); }
.pr-secao[data-pr-passo="1"] .pr-algarismo span:nth-child(1),
.pr-secao[data-pr-passo="2"] .pr-algarismo span:nth-child(2),
.pr-secao[data-pr-passo="3"] .pr-algarismo span:nth-child(3),
.pr-secao[data-pr-passo="4"] .pr-algarismo span:nth-child(4) { opacity: 1; transform: none; }

/* legenda da pedra */
.pr-legenda { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--fio); }
.pr-conta { font-size: var(--t-mini); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-texto); white-space: nowrap; }
.pr-conta b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.pr-estado { display: grid; font-family: var(--f-titulo); font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.1; color: var(--tinta); justify-self: end; text-align: right; }
.pr-estado span { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--suave), transform .6s var(--suave); }
.pr-estado span:nth-child(4) { opacity: 1; transform: none; }
.pr-secao[data-pr-passo] .pr-estado span { opacity: 0; transform: translateY(8px); }
.pr-secao[data-pr-passo="1"] .pr-estado span:nth-child(1),
.pr-secao[data-pr-passo="2"] .pr-estado span:nth-child(2),
.pr-secao[data-pr-passo="3"] .pr-estado span:nth-child(3),
.pr-secao[data-pr-passo="4"] .pr-estado span:nth-child(4) { opacity: 1; transform: none; }
.pr-trilho { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pr-trilho i { height: 3px; background: var(--rosa); transition: opacity .6s var(--suave); }
.pr-secao[data-pr-passo="1"] .pr-trilho i:nth-child(n+2),
.pr-secao[data-pr-passo="2"] .pr-trilho i:nth-child(n+3),
.pr-secao[data-pr-passo="3"] .pr-trilho i:nth-child(n+4) { opacity: .22; }

/* ───────── etapas ───────── */
.pr-etapas { padding-block: 22vh 34vh; }
.pr-etapa { position: relative; min-height: 60vh; padding-top: 1.4rem; border-top: 1px solid var(--fio); }
.pr-etapa + .pr-etapa { margin-top: 6vh; }
.pr-etapa::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--tinta); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--suave); }
.pr-num { display: flex; align-items: center; gap: .8rem; font-size: var(--t-mini); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-texto); }
.pr-num span { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; font-weight: 600; letter-spacing: .04em; color: var(--tinta); background: var(--pedra-3); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transition: background-color .7s var(--suave), color .7s var(--suave); }
.pr-nome { margin-top: clamp(1rem, 2vw, 1.75rem); font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.01em; color: var(--tinta); transition: color .9s var(--suave); }
.pr-secao[data-pr-passo] .pr-etapa:not(.pr-ativa) .pr-nome { color: var(--rosa-texto); }
.pr-etapa > .wf-texto { margin-top: 1.2rem; font-size: clamp(1.125rem, 1.36vw, 1.3125rem); }
.pr-etapa > .pr-nota { margin-top: .8rem; padding-left: 1rem; border-left: 1px solid var(--rosa); color: var(--tinta); }
.pr-dela { margin: 1.75rem 0 0; }
.pr-dela .wf-fala { font-size: clamp(1.55rem, 2.3vw, 2.25rem); line-height: 1.14; max-width: 17em; text-wrap: balance; }
.pr-frio { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem; align-items: end; margin-top: 1.75rem; }
.pr-frio .pr-dela { margin: 0; }
.pr-foto { --c: 20px; aspect-ratio: 9 / 11; }
.pr-foto img { filter: saturate(.82) sepia(.14) contrast(1.02); }

/* a etapa que está na linha de leitura */
.pr-etapa.pr-ativa::before { transform: scaleX(1); }
.pr-etapa.pr-ativa .pr-num span { background: var(--tinta); color: var(--papel); }
.pr-etapa-frio.pr-ativa .pr-num span { background: var(--aco); color: var(--tinta); }

/* ───────── fecho ───────── */
.pr-fecho { margin: clamp(1rem, 4vw, 4rem) 0 0; padding-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--fio); }
.pr-fecho blockquote { margin: 0; }
.pr-fecho-fala { font-size: clamp(1.9rem, 4.6vw, 4.4rem); line-height: 1.05; letter-spacing: -.008em; max-width: 19em; text-wrap: balance; }
.pr-fecho-fala em { font-style: normal; color: var(--rosa-texto); }
.pr-fecho-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(1.4rem, 2.6vw, 2.4rem); }
.pr-fecho-pe .wf-autoria { margin-top: 0; }
.pr-elo { color: var(--tinta); background-size: calc(100% - 1.7rem) 1px; }
.pr-elo svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .45s var(--suave); }
.pr-elo:hover svg { transform: translateX(5px); }

/* ───────── telas médias ───────── */
@media (max-width: 1100px) {
  .pr-abre { grid-column: 3 / -1; }
}

/* ───────── celular e tablet em pé: a pedra presa no alto, as etapas passam por baixo ───────── */
@media (max-width: 900px) {
  .pr-titulo span:nth-child(2) { margin-left: .5em; }
  .pr-titulo span:nth-child(3) { margin-left: 1em; }
  .pr-titulo { font-size: clamp(2.85rem, 13.2vw, 6rem); }
  .pr-abre { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 1.75rem; }
  .pr-algarismo, .pr-brilho { display: none; }
  .pr-corpo { display: block; margin-top: 2.5rem; }
  .pr-palco { z-index: 2; height: auto; margin-inline: calc(var(--margem) * -1); padding: .6rem var(--margem); grid-template-rows: none; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; column-gap: 1.1rem; background: var(--papel); border-block: 1px solid var(--fio); }
  .pr-cena { height: 6.6rem; }
  .pr-giro { height: 100%; filter: none; }
  .pr-legenda { padding-top: 0; border-top: 0; grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .pr-estado { justify-self: start; text-align: left; font-size: 1.6rem; }
  .pr-trilho { margin-top: .35rem; }
  .pr-etapas { padding-block: 0 1rem; }
  .pr-frio .pr-dela .wf-fala { font-size: 1.4rem; }
  .pr-etapa { min-height: 0; padding-block: 2.4rem 3.2rem; border-top: 0; }
  .pr-etapa + .pr-etapa { margin-top: 0; border-top: 1px solid var(--fio); }
  .pr-etapa::before { top: -1px; }
  .pr-etapa:first-child::before { display: none; }
  .pr-nome { font-size: clamp(2.5rem, 11.5vw, 4.5rem); }
  .pr-frio { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 1.1rem; }
  .pr-fecho { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-giro { transform: rotate(37deg); }
}