/* 7 · Perguntas (prefixo pe-): acordeão em que o item aberto se enche */
.pe-grade{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);grid-template-rows:auto 1fr;column-gap:clamp(36px,6vw,110px);align-items:start}
.pe-cabeca{grid-column:1;grid-row:1}
.pe-lista{grid-column:2;grid-row:1/3}
.pe-apoio{margin-top:22px}
.pe-acoes{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* o pé da coluna, nivelado com o fim da lista: a prova de que ela responde antes */
.pe-prova{grid-column:1;grid-row:2;align-self:end;margin-top:56px;padding-top:26px;max-width:40ch;background:repeating-linear-gradient(90deg, rgba(13,50,70,.3) 0 1px, transparent 1px 12px) 0 0/100% 7px no-repeat, repeating-linear-gradient(90deg, rgba(13,50,70,.3) 0 1px, transparent 1px 60px) 0 0/100% 12px no-repeat}
.pe-prova .wf-citacao{font-size:clamp(16px,1.2vw,18.5px)}

/* a lista é a proveta: seis segmentos de vidro, um por pergunta */
.pe-lista{position:relative}
.pe-item{position:relative;padding-left:46px}
.pe-item::after{content:"";position:absolute;left:32px;right:0;bottom:0;height:1px;background:rgba(13,50,70,.16)}
.pe-item:first-child::before{content:"";position:absolute;left:32px;right:0;top:0;height:1px;background:rgba(13,50,70,.16)}
.pe-tubo{position:absolute;left:0;top:0;bottom:0;width:16px;background:var(--vidro);box-shadow:inset 1px 0 0 rgba(13,50,70,.22), inset -1px 0 0 rgba(13,50,70,.22), inset 0 -1px 0 rgba(13,50,70,.14);overflow:hidden}
.pe-item:first-child .pe-tubo{border-radius:6px 6px 0 0;box-shadow:inset 0 0 0 1px rgba(13,50,70,.22), inset 0 2px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(13,50,70,.14)}
.pe-item:last-child .pe-tubo{border-radius:0 0 8px 8px;box-shadow:inset 0 0 0 1px rgba(13,50,70,.22)}
/* graduação com o ritmo do hero: curto a cada 6, médio a cada 30, longo a cada 60 */
.pe-tubo::before{content:"";position:absolute;right:1px;top:0;bottom:0;width:9px;z-index:1;background:
  repeating-linear-gradient(180deg, rgba(13,50,70,.5) 0 1px, transparent 1px 60px) right 0 top 0/9px 100% no-repeat,
  repeating-linear-gradient(180deg, rgba(13,50,70,.42) 0 1px, transparent 1px 30px) right 0 top 0/6px 100% no-repeat,
  repeating-linear-gradient(180deg, rgba(13,50,70,.3) 0 1px, transparent 1px 6px) right 0 top 0/3.5px 100% no-repeat}
.pe-tubo::after{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:2px;border-radius:2px;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.25));z-index:2}
.pe-liq{position:absolute;left:2px;right:2px;bottom:1px;height:0;background:var(--liquido);transition:height 1.6s cubic-bezier(.3,.8,.2,1)}
.pe-item:last-child .pe-liq{bottom:2px;border-radius:0 0 6px 6px}
.pe-menisco{position:absolute;left:-1px;right:-1px;top:-3px;height:6px;border-radius:50%;background:color-mix(in oklch, var(--ameixa-clara) 75%, white);opacity:0;transition:opacity .4s}
.pe-aberto .pe-liq{height:calc(100% - 3px)}
.pe-aberto .pe-menisco{opacity:.95;transition-delay:.2s}
.pe-espera .pe-liq{height:0}
.pe-espera .pe-menisco{opacity:0}

/* a pergunta é o botão inteiro */
.pe-q{margin:0;font-size:inherit}
.pe-btn{display:grid;grid-template-columns:auto 1fr auto;column-gap:18px;align-items:baseline;width:100%;min-height:48px;text-align:left;padding:24px 2px 24px 0;border-radius:6px}
.pe-n{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--ameixa);translate:0 -2px}
.pe-txt{font-family:var(--serifa);font-weight:400;font-size:clamp(19px,1.5vw,24px);line-height:1.25;color:var(--petroleo);transition:color .3s}
.pe-btn:hover .pe-txt{color:var(--ameixa)}
.pe-mais{position:relative;width:28px;height:28px;align-self:center;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(13,50,70,.28);transition:rotate .5s var(--curva), background .4s, box-shadow .4s}
.pe-mais::before,.pe-mais::after{content:"";position:absolute;background:var(--petroleo);left:50%;top:50%;transition:background .4s}
.pe-mais::before{width:12px;height:1px;translate:-50% -50%}
.pe-mais::after{width:1px;height:12px;translate:-50% -50%}
.pe-btn:hover .pe-mais{box-shadow:inset 0 0 0 1px var(--ameixa)}
.pe-aberto .pe-mais{rotate:45deg;background:var(--ameixa);box-shadow:inset 0 0 0 1px var(--ameixa)}
.pe-aberto .pe-mais::before,.pe-aberto .pe-mais::after{background:var(--papel)}
.pe-aberto .pe-txt{color:var(--ameixa)}

/* painel com altura animada */
.pe-painel{overflow:hidden;transition:height .7s var(--curva)}
.pe-painel[hidden]{display:none}
.pe-resp{padding:2px 0 32px 47px;display:grid;gap:18px}
.pe-resp .wf-texto{max-width:52ch}
.pe-resp > .wf-texto:first-child{color:var(--tinta);font-weight:500}
.pe-voz{margin:0;padding-left:18px;border-left:1px solid var(--ameixa-clara)}
.pe-voz .wf-citacao{font-size:clamp(16.5px,1.25vw,19.5px);max-width:58ch}
.pe-nota{margin-top:-4px}
.pe-nota a{border-bottom:1px solid var(--ameixa-clara);color:var(--petroleo)}

/* entrada escalonada dos itens, como as marcas do hero */
.pe-lista.wf-entra .pe-item{opacity:0;translate:0 12px;transition:opacity .8s var(--curva), translate .8s var(--curva)}
.pe-lista.wf-visivel .pe-item{opacity:1;translate:0 0}
.pe-item:nth-child(2){transition-delay:.1s}.pe-item:nth-child(3){transition-delay:.2s}.pe-item:nth-child(4){transition-delay:.3s}.pe-item:nth-child(5){transition-delay:.4s}.pe-item:nth-child(6){transition-delay:.5s}

@media (max-width:980px){
  .pe-grade{grid-template-columns:1fr;grid-template-rows:none;row-gap:40px}
  .pe-cabeca,.pe-lista,.pe-prova{grid-column:1;grid-row:auto}
  .pe-prova{margin-top:4px;align-self:start}
}
@media (max-width:760px){
  .pe-item{padding-left:30px}
  .pe-item::after,.pe-item:first-child::before{left:22px}
  .pe-tubo{width:12px}
  .pe-tubo::before{width:7px;background-size:7px 100%,5px 100%,3px 100%}
  .pe-tubo::after{left:2px}
  .pe-btn{column-gap:12px;padding:18px 0}
  .pe-txt{font-size:19px}
  .pe-mais{width:26px;height:26px}
  .pe-resp{padding:0 0 26px 0;gap:14px}
  .pe-voz{padding-left:14px}
}