/* 06 · perguntas — a fita é a espinha; cada pergunta sai dela num nó, e o nó da pergunta aberta acende */
.pe-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"topo lista" "lado lista";column-gap:clamp(40px,7vw,120px);row-gap:40px}
.pe-topo{grid-area:topo}.pe-lista{grid-area:lista}.pe-lado{grid-area:lado;align-self:end;display:grid;gap:26px;justify-items:start}
.pe-topo{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pe-topo .wf-titulo{margin-top:4px}
.pe-topo .wf-texto{max-width:26em}
.pe-outra{display:grid;gap:2px;justify-items:start}
/* o número da pergunta aberta, em mel que se apaga para baixo */
.pe-num{display:flex;align-items:baseline;gap:18px;font-family:var(--f-titulo);font-weight:500;font-size:clamp(7rem,12.5vw,12.5rem);line-height:.8;letter-spacing:-.05em;color:transparent;user-select:none}
.pe-num span{display:block;background:linear-gradient(180deg in oklab,rgb(243 220 174/.62),rgb(217 168 102/.3) 45%,rgb(217 168 102/.03) 92%);-webkit-background-clip:text;background-clip:text}
.pe-num.pe-troca span{animation:pe-troca .9s var(--suave)}
@keyframes pe-troca{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.pe-num i{font-family:var(--f-mono);font-style:normal;font-weight:300;font-size:var(--t-mono);letter-spacing:.06em;line-height:1;color:var(--creme-3)}

.pe-lista{position:relative;padding-left:56px}
.pe-trilho{position:absolute;left:-30px;top:-44px;bottom:-44px;width:120px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 56px),transparent)}
.pe-fita{position:absolute;left:0;top:0;width:100%;height:2400px}

/* a linha de cada pergunta nasce na fita */
.pe-item{position:relative}
.pe-item::before,.pe-item::after{content:"";position:absolute;left:-40px;right:0;top:0;height:1px;background:var(--fio)}
.pe-item::after{background:linear-gradient(90deg in oklab,rgb(243 220 174/.9),rgb(217 168 102/.5) 38%,rgb(217 168 102/.12) 80%,transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--suave)}
.pe-item.pe-aberta::after{transform:none}
.pe-q{margin:0;font:inherit}
.pe-q button{appearance:none;border:0;background:none;margin:0;width:100%;display:grid;grid-template-columns:2.9rem minmax(0,1fr) 28px;align-items:baseline;padding:27px 0 25px;min-height:78px;
  font-family:var(--f-titulo);font-weight:500;font-size:clamp(1.2rem,1.55vw,1.56rem);line-height:1.18;letter-spacing:-.02em;color:var(--creme);text-align:left;cursor:pointer;transition:color .5s var(--suave)}
.pe-q button:focus-visible{outline:2px solid var(--mel-claro);outline-offset:5px;border-radius:4px}
.pe-tel{white-space:nowrap}
.pe-n{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:300;letter-spacing:.06em;color:var(--mel-claro)}
.pe-sinal{position:relative;width:15px;height:15px;justify-self:end;align-self:center}
.pe-sinal::before,.pe-sinal::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--mel-claro);transition:transform .6s var(--suave)}
.pe-sinal::after{transform:rotate(90deg)}
.pe-aberta .pe-sinal::after{transform:rotate(0)}
.pe-aberta .pe-q button,.pe-q button:hover{color:var(--mel-luz)}
.pe-p{transition:transform .5s var(--suave)}
@media (hover:hover){.pe-item:not(.pe-aberta) .pe-q button:hover .pe-p{transform:translateX(5px)}}

.pe-r{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s var(--suave),visibility 0s}
.pe-r-miolo{overflow:hidden;min-height:0;padding:0 28px 0 2.9rem;display:grid;gap:12px;align-content:start}
.pe-r-miolo>:first-child{margin-top:2px}
.pe-r-miolo>:last-child{margin-bottom:38px}
.pe-vivo .pe-item:not(.pe-aberta) .pe-r{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .7s var(--suave),visibility 0s .7s}
.pe-r blockquote,.pe-dela{font-size:var(--t-texto);line-height:1.6;color:var(--creme-2);max-width:33em;text-wrap:pretty}
.pe-r blockquote{text-indent:-.44em}
.pe-vivo .pe-r-miolo>*{transition:opacity .7s var(--suave),transform .7s var(--suave)}
.pe-vivo .pe-item:not(.pe-aberta) .pe-r-miolo>*{opacity:0;transform:translate3d(0,10px,0);transition-duration:.25s}
.pe-vivo .pe-aberta .pe-r-miolo>:nth-child(1){transition-delay:.12s}.pe-vivo .pe-aberta .pe-r-miolo>:nth-child(2){transition-delay:.2s}.pe-vivo .pe-aberta .pe-r-miolo>:nth-child(3){transition-delay:.28s}.pe-vivo .pe-aberta .pe-r-miolo>:nth-child(4){transition-delay:.36s}.pe-vivo .pe-aberta .pe-r-miolo>:nth-child(5){transition-delay:.44s}
.pe-r .pe-forte{font-size:var(--t-grande);line-height:1.28;letter-spacing:-.015em;color:var(--creme);margin-block:4px 2px}
.pe-ass{margin-top:6px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mel-claro)}
.pe-botao{justify-self:start;margin-top:10px}

@media (max-width:900px){
  .pe-grade{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"topo" "lista" "lado";row-gap:48px}
  .pe-num{display:none}
  .pe-lista{padding-left:40px}
  .pe-trilho{left:calc(var(--margem)*-1);width:90px}
  .pe-item::before,.pe-item::after{left:-28px}
  .pe-q button{grid-template-columns:minmax(0,1fr) 24px;padding:23px 0 21px;min-height:68px;font-size:1.22rem}
  .pe-n{display:none}
  .pe-r-miolo{padding:0 4px 0 0}
  .pe-r blockquote{text-indent:0}
  .pe-ass{font-size:.875rem}
  .pe-botao{justify-self:stretch}
}