/* Perguntas — prefixo pe-. A lista pende do fio; a pergunta aberta tinge de vinho o seu trecho do fio. */
.pe-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:start}
.pe-lado{position:sticky;top:clamp(2rem,12vh,7rem)}
.pe-titulo{max-width:9.5em}
.pe-sub{margin-top:clamp(1.2rem,2vw,1.7rem);font-size:var(--t-texto);line-height:1.6;color:var(--tinta-suave);max-width:21rem}
.pe-outra{display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(2rem,3.6vw,3.2rem);padding-top:1.3rem;border-top:1px solid var(--fio);max-width:21rem;font-size:.9375rem;color:var(--tinta-apagada)}
.pe-outra .wf-link{gap:.55rem;font-family:var(--serifa);font-size:clamp(1.25rem,1.7vw,1.5rem);text-decoration:none;color:var(--vinho)}
.pe-outra .wf-link svg{transition:transform .45s var(--suave)}
@media (hover:hover){.pe-outra .wf-link:hover svg{transform:translateX(.3rem)}}

/* a lista e o fio */
.pe-lista{--pe-rec:clamp(1.5rem,3vw,2.75rem);--pe-pad:clamp(1.35rem,2.4vw,2rem);position:relative;padding-left:var(--pe-rec)}
.pe-fio{position:absolute;left:3px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom in oklab,var(--fio),var(--fio) 82%,rgb(35 39 46 / 0));transform-origin:top}
.wf-js .pe-fio[data-entra]{opacity:1;transform:scaleY(0);transition:transform 1.8s var(--lento)}
.wf-js .pe-fio[data-entra].wf-visto{transform:none}

.pe-item{position:relative;border-bottom:1px solid var(--fio)}
.pe-item:first-of-type{border-top:1px solid var(--fio)}
/* o fio fica vinho do ponto da pergunta aberta até o fim da resposta: a resposta pende do ponto */
.pe-q::after,.pe-r::before{content:"";position:absolute;left:calc(var(--pe-rec) * -1 + 3px);width:1px;background:var(--vinho);transform:scaleY(0);transform-origin:top}
.pe-q::after{top:50%;bottom:0;transition:transform .2s var(--suave)}
.pe-r::before{top:0;bottom:-1px;transition:transform .35s var(--suave)}
.pe-aberta .pe-q::after{transform:none;transition:transform .3s linear}
.pe-aberta .pe-r::before{transform:none;transition:transform .8s var(--suave) .28s}

/* as outras recuam um tom enquanto há uma aberta, como as frases do começo da página */
.pe-txt{transition:color .6s var(--suave)}
.pe-lista:has(.pe-aberta) .pe-item:not(.pe-aberta) .pe-txt{color:var(--tinta-apagada)}
.pe-lista:has(.pe-aberta) .pe-item:not(.pe-aberta) .pe-bt:focus-visible .pe-txt{color:var(--tinta)}

.pe-q{position:relative;font:inherit}
/* o ponto no fio, na altura da pergunta */
.pe-q::before{content:"";position:absolute;z-index:1;left:calc(var(--pe-rec) * -1);top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--parede-3);box-shadow:0 0 0 5px var(--papel);transition:background .5s var(--suave),transform .5s var(--suave)}
.pe-aberta .pe-q::before{background:var(--vinho);transform:scale(1.3)}

.pe-bt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.9rem,1.8vw,1.6rem);width:100%;min-height:64px;padding:var(--pe-pad) 0;text-align:left;color:var(--tinta);-webkit-tap-highlight-color:transparent}
.pe-bt:focus-visible{outline:2px solid var(--vinho);outline-offset:-2px;border-radius:8px}
.pe-num{font-size:.875rem;font-weight:500;letter-spacing:.06em;color:var(--tinta-apagada);font-variant-numeric:tabular-nums;transition:color .4s}
.pe-txt{font-family:var(--serifa);font-size:clamp(1.3rem,2.15vw,1.95rem);line-height:1.12;letter-spacing:-.008em;text-wrap:balance}
.pe-aberta .pe-num{color:var(--vinho)}
@media (hover:hover){.pe-lista .pe-item .pe-bt:hover .pe-txt{color:var(--vinho)}.pe-bt:hover .pe-sinal{border-color:var(--vinho)}}

/* sinal: mais que vira menos */
.pe-sinal{position:relative;flex:none;width:48px;height:48px;border:1px solid var(--fio);border-radius:50%;transition:border-color .4s,background .4s}
.pe-sinal::before,.pe-sinal::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor;transition:transform .6s var(--suave)}
.pe-sinal::after{transform:rotate(90deg)}
.pe-aberta .pe-sinal{background:var(--vinho);border-color:var(--vinho);color:var(--papel)}
.pe-aberta .pe-sinal::after{transform:rotate(0deg)}

/* resposta: abre pela altura, sem pulo */
.pe-r{position:relative;display:grid;grid-template-rows:1fr}
.pe-r-dentro{min-height:0;overflow:hidden}
/* as transições só valem depois que o estado inicial foi posto (.pe-pronta), para nada se mexer na carga */
.pe-pronta .pe-r{transition:grid-template-rows .7s var(--suave),visibility 0s 0s}
.wf-js .pe-item:not(.pe-aberta) .pe-r{grid-template-rows:0fr;visibility:hidden}
.pe-pronta .pe-item:not(.pe-aberta) .pe-r{transition:grid-template-rows .55s var(--suave),visibility 0s .55s}
.pe-r-corpo{--pe-recuo:calc(1.35rem + clamp(.9rem,1.8vw,1.6rem));padding:.2rem clamp(0rem,5vw,4.5rem) clamp(1.9rem,3.2vw,2.8rem) var(--pe-recuo);display:grid;gap:1.05rem;font-size:var(--t-texto);line-height:1.6;color:var(--tinta-suave);max-width:46rem}
.pe-pronta .pe-r-corpo{transition:opacity .6s var(--suave) .12s,transform .7s var(--suave) .08s}
.wf-js .pe-item:not(.pe-aberta) .pe-r-corpo{opacity:0;transform:translateY(-.5rem);transition-delay:0s}

/* a frase dele: serifa itálica vinho, com a aspa pendurada para fora da coluna */
.pe-dele{font-family:var(--serifa);font-style:italic;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.2;color:var(--vinho);text-wrap:pretty;margin:.15rem 0}
.pe-dele p{text-indent:-.44em}
.pe-quem{font-size:.875rem;color:var(--tinta-suave)}
.pe-quem::before{content:"";display:inline-block;width:1.6rem;height:1px;background:currentColor;vertical-align:middle;margin-right:.6rem;opacity:.6}
.pe-sim{font-family:var(--serifa);font-style:italic;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:.95;color:var(--vinho)}

.pe-docs{display:grid;counter-reset:pe-doc}
.pe-docs li{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:.3rem 1.5rem;padding:1rem 0;border-top:1px solid var(--fio)}
.pe-docs li:last-child{border-bottom:1px solid var(--fio)}
.pe-docs strong{font-weight:600;color:var(--tinta);font-size:.9375rem;line-height:1.4;padding-top:.15rem}
.pe-docs span{font-family:var(--serifa);font-style:italic;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.32;color:var(--vinho);text-indent:-.44em}

.pe-nota{margin:clamp(1.6rem,3vw,2.4rem) 0 0 calc(1.35rem + clamp(.9rem,1.8vw,1.6rem));font-size:.875rem;line-height:1.55;color:var(--tinta-apagada);max-width:34rem}

@media (max-width:900px){
  .pe-grade{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .pe-lado{display:contents}
  .pe-titulo{max-width:none}
  .pe-sub{max-width:30rem}
  .pe-outra{order:3;margin-top:0;max-width:none}
  .pe-lista{--pe-rec:1.35rem;--pe-pad:1.2rem}
  .pe-bt{grid-template-columns:minmax(0,1fr) auto;gap:.9rem}
  .pe-num{display:none}
  .pe-txt{font-size:clamp(1.3rem,5.6vw,1.6rem)}
  .pe-r-dentro{margin-left:-.9rem;padding-left:.9rem}
  .pe-r-corpo{padding:0 0 1.8rem .1rem}
  .pe-nota{margin-left:0}
  .pe-dele{font-size:clamp(1.3rem,5.4vw,1.6rem)}
  .pe-docs li{grid-template-columns:minmax(0,1fr)}
}