/* Perguntas (prefixo pe-): acordeão em que a pergunta aberta se adianta das outras, como o dente do leque. */
.pe-secao{background:var(--marfim); overflow:hidden; --pe-marca:4.4rem; --pe-x:1.35rem}
.pe-secao .wf-malha i:nth-child(1){left:-22%; top:-36%; width:72vmax; height:72vmax;
  background:radial-gradient(closest-side, #fbf8f1, #fbf8f100);
  background:radial-gradient(closest-side in oklch, oklch(.981 .011 90), oklch(.981 .011 90 / 0))}
.pe-secao .wf-malha i:nth-child(2){right:-24%; bottom:-44%; width:76vmax; height:76vmax;
  background:radial-gradient(closest-side, #e6d8c0, #e6d8c000);
  background:radial-gradient(closest-side in oklch, oklch(.885 .034 86), oklch(.885 .034 86 / 0))}
.pe-secao .wf-malha i:nth-child(3){right:4%; top:-30%; width:48vmax; height:48vmax; opacity:.7;
  background:radial-gradient(closest-side, #e3e9ec, #e3e9ec00);
  background:radial-gradient(closest-side in oklch, oklch(.925 .009 228), oklch(.925 .009 228 / 0))}

.pe-grade{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:var(--e5) var(--e6); align-items:start}
.pe-cabeca{position:sticky; top:var(--e4)}
.pe-cabeca .wf-apoio{margin-top:var(--e3); max-width:27em}
.pe-acao{margin-top:var(--e4)}
.pe-nota{margin-top:var(--e2); font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}

/* a lista */
.pe-lista{display:flex; flex-direction:column; position:relative}
.pe-lista::before{content:""; position:absolute; z-index:0; left:calc(var(--pe-x) + .8rem); top:1.6rem; bottom:1.6rem; width:1px; background:linear-gradient(180deg, transparent, var(--aco) 8%, var(--aco) 92%, transparent); opacity:.55; pointer-events:none}
.pe-item{z-index:0}
.pe-item{position:relative; border-top:1px solid var(--fio); border-radius:var(--raio); opacity:0; transform:translateY(14px);
  transition:transform .55s var(--curva), background .55s var(--curva), box-shadow .55s var(--curva), opacity .55s var(--curva), border-color .4s}
.wf-rev.visto .pe-item{opacity:1; transform:none; transition-delay:calc(var(--k) * 70ms)}
.pe-secao:not(.pe-js) .pe-item{opacity:1; transform:none}
.pe-item:last-child{border-bottom:1px solid var(--fio)}
.pe-item[open]{background:var(--luz); border-top-color:transparent; z-index:1;
  box-shadow:0 18px 30px -18px rgb(37 47 60 / .5), 0 0 0 1px rgb(37 47 60 / .07)}
.pe-item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:var(--raio) 0 0 var(--raio); background:var(--tom); opacity:0; transition:opacity .45s var(--curva)}
.pe-item[open]::before{opacity:1}
.wf-rev.visto .pe-item[open]{transform:translateY(-3px); transition-delay:0s}
.pe-item[open] + .pe-item{border-top-color:transparent}
.pe-item[open]:last-child{border-bottom-color:transparent}
.pe-lista:has(.pe-item[open]) .pe-item:not([open]) .pe-pergunta{opacity:.7}
.pe-lista:has(.pe-item[open]) .pe-item:not([open]):hover .pe-pergunta{opacity:1}
@media (hover:hover){.pe-item:not([open]):hover .pe-mini{transform:translateY(-2px)}}

.pe-pergunta{list-style:none; cursor:pointer; display:grid; grid-template-columns:var(--pe-marca) minmax(0, 1fr) auto; gap:var(--e3); align-items:center; padding:1.3rem var(--pe-x); transition:opacity .45s var(--curva); -webkit-tap-highlight-color:transparent}
.pe-pergunta::-webkit-details-marker{display:none}
.pe-pergunta::marker{content:""}
.pe-pergunta:focus-visible{outline:2px solid var(--tinta); outline-offset:-2px; border-radius:var(--raio)}
.pe-marca{display:flex; align-items:flex-end; gap:.65rem}
.pe-mini{width:1.65rem; height:auto; overflow:visible; filter:drop-shadow(0 3px 3px rgb(37 47 60 / .22)); transition:transform .5s var(--curva), filter .5s var(--curva)}
.pe-mini use{fill:var(--tom)}
.pe-item[open] .pe-mini{transform:translateY(-4px); filter:drop-shadow(0 7px 6px rgb(37 47 60 / .26))}
.pe-num{font-family:var(--f-titulo); font-size:.95rem; letter-spacing:.06em; color:var(--aco); line-height:1; padding-bottom:.15rem; transition:color .4s}
.pe-item[open] .pe-num{color:var(--tinta-2)}
.pe-pergunta h3{font-size:clamp(1.2rem, 1.05rem + .5vw, 1.5rem); line-height:1.25; text-wrap:balance}
.pe-mais{position:relative; width:1rem; height:1rem; color:var(--tinta-2)}
.pe-mais::before,.pe-mais::after{content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background:currentColor; transform:translateY(-50%); transition:transform .5s var(--curva)}
.pe-mais::after{transform:translateY(-50%) rotate(90deg)}
.pe-item[open] .pe-mais::after{transform:translateY(-50%) rotate(0deg)}

.pe-resposta{padding:0 var(--pe-x) 1.6rem calc(var(--pe-x) + var(--pe-marca) + var(--e3))}
.pe-texto{max-width:34em; color:var(--tinta); text-wrap:pretty}
.pe-texto b{font-family:var(--f-titulo); font-weight:400; font-size:1.18em}
.pe-fonte{margin-top:.7rem; font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}
.pe-texto .wf-link{margin-top:var(--e2)}
/* o texto da resposta entra depois da altura, não "estala" */
.pe-js .pe-texto{opacity:0; transform:translateY(6px); transition:opacity .5s var(--curva) .12s, transform .5s var(--curva) .12s}
.pe-js .pe-item[open] .pe-texto{opacity:1; transform:none}
/* as outras recuam: dente e pergunta mais baixos */
.pe-lista:has(.pe-item[open]) .pe-item:not([open]) .pe-mini{transform:translateY(2px); filter:drop-shadow(0 2px 2px rgb(37 47 60 / .16))}
.pe-js .pe-item{overflow:hidden}

/* ───────── celular ───────── */
@media (max-width:1000px){
  .pe-grade{grid-template-columns:1fr; gap:var(--e4)}
  .pe-cabeca{position:static}
}
@media (max-width:860px){
  .pe-secao{--pe-marca:1.5rem; --pe-x:.9rem}
  .pe-num{display:none}
  .pe-lista::before{left:calc(var(--pe-x) + .65rem)}
  .pe-cabeca .wf-apoio{margin-top:var(--e2)}
  .pe-acao{margin-top:var(--e3)}
  .pe-acao .wf-botao{width:100%; justify-content:center}
  .pe-pergunta{gap:.9rem; padding:1.1rem var(--pe-x)}
  .pe-mais{width:.85rem; height:.85rem}
  .pe-marca{gap:.45rem}
  .pe-mini{width:1.35rem}
  .pe-num{font-size:.85rem}
  .pe-pergunta h3{font-size:1.15rem}
  .pe-resposta{padding:0 var(--pe-x) 1.3rem calc(var(--pe-x) + var(--pe-marca) + .9rem)}
}
@media (max-width:420px){
  .pe-resposta{padding-left:var(--pe-x)}
}
