/* 07 · Perguntas (clara) · prefixo pe- */
.pe-sec{--pe-ouro:linear-gradient(105deg,#8a6a22 0%,#d6b35c 14%,#f4e8bd 24%,#b98f38 36%,#7c5c1c 48%,#e3c777 60%,#f6ecc8 68%,#c9a24a 80%,#8a6a22 100%);--pe-linha:rgba(109,79,23,.26)}
.pe-dentro{display:flex;flex-direction:column}
.pe-lado{display:contents}
.pe-cabeca{order:0;position:relative}
.pe-lista{order:1;margin-top:clamp(2rem,5vw,3rem)}
.pe-fim{order:2;margin-top:clamp(2.6rem,7vw,4rem)}

/* o ponto de interrogação em metal espelhado: a letra desta parede */
.pe-peca{position:absolute;right:0;top:-.6rem}
.pe-peca[data-wf].wf-visto{clip-path:none}
.pe-letreiro{display:block;font-family:var(--wf-f-titulo);font-size:clamp(5.4rem,26vw,7rem);line-height:1;padding:0 .06em .08em;user-select:none;
  filter:drop-shadow(.012em .022em .014em rgba(59,43,32,.38)) drop-shadow(.05em .09em .09em rgba(59,43,32,.14))}
.pe-legenda{display:none}

/* ---------- a lista ---------- */
.pe-item{border-top:1px solid var(--pe-linha);position:relative}
.pe-item:last-child{border-bottom:1px solid var(--pe-linha)}
.pe-q{margin:0;font-weight:400}
.pe-bt{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1.7rem minmax(0,1fr) auto;align-items:center;width:100%;min-height:64px;padding:1.05rem 0;
  font-family:var(--wf-f-texto);font-size:clamp(1.12rem,1rem + .7vw,1.5rem);font-weight:400;line-height:1.28;letter-spacing:-.012em;color:var(--wf-cafe);-webkit-tap-highlight-color:transparent}
.pe-rot{text-wrap:balance;padding-right:1rem}
.pe-ponto{width:.56rem;height:.56rem;border-radius:50%;background:var(--pe-ouro) calc(var(--wf-reflexo)*100%) 0/260% 100%;box-shadow:.05rem .08rem .12rem rgba(59,43,32,.35)}
.pe-sinal{display:none}
.pe-resp{padding:0 0 0 1.7rem;color:var(--wf-cafe);max-width:38em;position:relative}
.pe-resp>p{margin:0 0 1rem;text-wrap:pretty}
.pe-resp>:last-child{margin-bottom:1.7rem}
.pe-fala{margin:0 0 1.1rem}
.pe-fala p{font-size:1.06em;line-height:1.5;color:var(--wf-cafe)}
.pe-resp>.pe-fala:first-of-type p{font-size:var(--wf-t-lead);font-weight:300;line-height:1.42}
.pe-fala cite{color:var(--wf-cafe-suave)}
.pe-fala cite::before{content:"";display:inline-block;width:1.1rem;height:1px;margin-right:.6rem;vertical-align:.3em;background:var(--wf-ouro-fundo)}
.pe-link{font-size:var(--wf-t-mini);font-weight:500;letter-spacing:.02em;border-bottom:0;text-decoration:underline 1px var(--wf-ouro-fundo);text-underline-offset:.4em}
.pe-resp>p:has(.pe-link){margin-top:-.4rem;margin-bottom:.9rem}
.pe-link::after{content:"→";margin-left:.6em;color:var(--wf-ouro-tinta);transition:transform .4s var(--wf-ease)}
.pe-link:hover::after{transform:translateX(.3em)}
/* o fio de ouro que acompanha a resposta aberta */
.pe-resp::before{content:"";position:absolute;left:.25rem;top:-.9rem;bottom:1.7rem;width:1px;background:linear-gradient(180deg,var(--wf-ouro-fundo),var(--wf-ouro) 40%,rgba(138,106,34,.15))}

/* com JS: abre e fecha. Sem JS, todas as respostas ficam à vista */
.pe-vivo .pe-bt{cursor:pointer}
.pe-vivo .pe-rot{transition:color .4s,transform .5s var(--wf-ease)}
.pe-vivo .pe-aberta .pe-rot{color:var(--wf-ouro-tinta)}
.pe-vivo .pe-bt:focus-visible{outline:2px solid var(--wf-ouro-fundo);outline-offset:2px}
.pe-vivo .pe-ponto{background:transparent;box-shadow:inset 0 0 0 1px var(--wf-ouro-fundo);transition:transform .5s var(--wf-ease),box-shadow .3s}
.pe-vivo .pe-aberta .pe-ponto{background:var(--pe-ouro) calc(var(--wf-reflexo)*100%) 0/260% 100%;box-shadow:.05rem .08rem .12rem rgba(59,43,32,.35);transform:scale(1.25)}
.pe-vivo .pe-sinal{display:block;width:.9rem;height:.9rem;position:relative;margin-right:.15rem}
.pe-vivo .pe-sinal::before,.pe-vivo .pe-sinal::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--wf-ouro-tinta);transition:transform .5s var(--wf-ease)}
.pe-vivo .pe-sinal::after{transform:rotate(90deg)}
.pe-vivo .pe-aberta .pe-sinal::after{transform:rotate(0)}
.pe-vivo .pe-painel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--wf-ease),visibility 0s .55s}
.pe-vivo .pe-resp{overflow:hidden;overflow:clip;overflow-clip-margin:1rem;min-height:0;opacity:0;transition:opacity .4s var(--wf-ease)}
.pe-vivo .pe-aberta .pe-painel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--wf-ease),visibility 0s}
.pe-vivo .pe-aberta .pe-resp{opacity:1;transition-delay:.12s}
.pe-vivo .pe-resp::before{transform:scaleY(0);transform-origin:50% 0;transition:transform .8s var(--wf-ease) .1s}
.pe-vivo .pe-aberta .pe-resp::before{transform:scaleY(1)}
.pe-vivo .pe-item::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--pe-ouro) calc(var(--wf-reflexo)*100%) 0/260% 100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--wf-ease)}
.pe-vivo .pe-item.pe-aberta::after{transform:scaleX(1)}
@media (hover:hover){.pe-vivo .pe-bt:hover .pe-ponto{transform:scale(1.25)}.pe-vivo .pe-item:not(.pe-aberta) .pe-bt:hover .pe-rot{transform:translateX(.4rem)}.pe-vivo .pe-item:not(.pe-aberta) .pe-bt:hover .pe-sinal::before{transform:rotate(90deg)}.pe-vivo .pe-item:not(.pe-aberta) .pe-bt:hover .pe-sinal::after{transform:rotate(180deg)}}

/* ---------- fecho ---------- */
.pe-fim-fio{width:min(100%,16rem);margin-bottom:1.4rem}
.pe-fim-titulo{margin:0;font-family:var(--wf-f-titulo);font-weight:400;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);letter-spacing:.05em;text-transform:uppercase;line-height:1.25}
.pe-fim-texto{margin:.7rem 0 1.4rem;color:var(--wf-cafe-suave);max-width:24em}

@media (min-width:900px){
  .pe-dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,7vw,7.5rem);align-items:start}
  .pe-lado{display:flex;flex-direction:column;position:sticky;top:clamp(2rem,8vh,5rem)}
  .pe-peca{position:static;display:flex;align-items:flex-end;gap:clamp(1.2rem,2.4vw,2.4rem);margin-top:clamp(1.4rem,3vw,2.6rem)}
  .pe-letreiro{font-size:clamp(13rem,24vw,21.5rem);line-height:.84;margin-left:-.07em;padding-bottom:.02em}
  .pe-legenda{display:block;margin:0 0 1.2rem;padding-top:.8rem;border-top:1px solid var(--wf-ouro-fundo);max-width:12.5rem;font-size:var(--wf-t-mini);line-height:1.5;color:var(--wf-cafe-suave)}
  .pe-legenda b{display:block;margin-bottom:.3rem;font-family:var(--wf-f-titulo);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-cafe)}
  .pe-lista{margin-top:.3rem}
  .pe-fim{margin-top:clamp(1.6rem,3vw,2.8rem)}
  .pe-bt{grid-template-columns:2.2rem minmax(0,1fr) auto;min-height:76px;padding:1.3rem 0}
  .pe-resp{padding-left:2.2rem}
  .pe-resp::before{left:.26rem}
}
@media (prefers-reduced-motion:reduce){
  .pe-sec *,.pe-sec *::before,.pe-sec *::after{transition-duration:.01ms!important;transition-delay:0s!important}
}