/* ===== pf · VEIO 09 · Perguntas — placa grafite; a pergunta aberta vira placa de mármore claro ===== */
.pf{interpolate-size:allow-keywords}
.pf-dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem, 1rem + 5vw, 7rem);align-items:start}
.pf-topo{position:sticky;top:calc(var(--b-topo-h) + 2rem)}
.pf-lead{margin:1.6rem 0 0}
.pf-conta{margin:2.2rem 0 0;padding-top:1.2rem;border-top:1px solid rgba(243,193,178,.16);font-family:var(--b-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--b-cinza-texto);max-width:24rem}
.pf-mais{margin:2.4rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem}
.pf-mais p{margin:0;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:1.3rem;color:var(--b-creme)}

/* a lista corre ao longo de um veio; cada pergunta é um nó */
.pf-lista{position:relative;padding-left:2.6rem}
.pf-veio{position:absolute;left:0;top:0;width:1.4rem;height:100%}
/* a luz do veio desce até a pergunta aberta */
.js .pf-lista::before{content:"";position:absolute;z-index:1;left:calc(.7rem - 1px);top:0;width:2px;height:var(--pf-y,0px);pointer-events:none;border-radius:2px;
  background:linear-gradient(rgba(253,227,226,0), var(--b-rose-claro));box-shadow:0 0 10px 1px rgba(253,227,226,.45);transition:height .9s var(--b-ease)}
.pf-item{position:relative;border-top:1px solid rgba(243,193,178,.16);color:var(--b-creme);transition:background-color .6s var(--b-ease), color .6s var(--b-ease)}
.pf-item:last-of-type{border-bottom:1px solid rgba(243,193,178,.16)}
.pf-item::before{content:"";position:absolute;left:calc(-2.6rem + .7rem - .3rem);top:2.4rem;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--b-grafite-1);border:1px solid var(--b-rose);transition:background .5s, box-shadow .5s}
.pf-item[open]::before{background:var(--b-rose-claro);box-shadow:0 0 0 .35rem rgba(243,193,178,.16), 0 0 18px 4px rgba(253,227,226,.45)}
.pf-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.4rem 1fr auto;gap:1rem;align-items:center;
  min-height:4.8rem;padding:1.15rem 1.4rem 1.15rem 1.2rem}
.pf-item summary::-webkit-details-marker{display:none}
.pf-num{font-family:var(--b-mono);font-size:.75rem;letter-spacing:.14em;color:var(--b-rose)}
.pf-q{font-family:var(--b-serifa);font-weight:300;font-size:clamp(1.2rem, 1rem + .75vw, 1.7rem);line-height:1.2;transition:transform .5s var(--b-ease)}
.pf-item summary:hover .pf-q{transform:translateX(.25rem)}
.pf-sinal{position:relative;width:2rem;height:2rem;border:1px solid rgba(243,193,178,.4);border-radius:50%;transition:border-color .5s, background .5s}
.pf-sinal::before,.pf-sinal::after{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.pf-sinal::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--b-ease)}
.pf-item summary:hover .pf-sinal{background:rgba(243,193,178,.12)}
.pf-item:not([open]) summary:hover{background:rgba(243,193,178,.05)}
.pf-curta{display:block;margin-bottom:.55rem;font-style:normal;font-weight:300;font-size:1.22em;line-height:1.3;color:var(--wf-tinta)}

/* aberta: a pedra inverte */
.pf-item[open]{background:var(--wf-marfim);color:var(--wf-tinta);border-color:transparent}
.pf-item[open]+.pf-item{border-top-color:transparent}
.pf-item[open]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(rgba(246,240,235,.72), rgba(246,240,235,.86)), url("../img/marmore-claro-b.webp") center/cover}
.pf-item>*{position:relative;z-index:1}
.pf-item[open] .pf-num{color:var(--wf-terracota)}
.pf-item[open] .pf-sinal{border-color:rgba(42,33,36,.35)}
.pf-item[open] .pf-sinal::after{transform:translate(-50%,-50%) rotate(0)}
.pf-item::details-content{block-size:0;overflow:clip;transition:block-size .6s var(--b-ease), content-visibility .6s allow-discrete}
.pf-item[open]::details-content{block-size:auto}

.pf-r{padding:0 1.6rem 2rem calc(1.2rem + 2.4rem + 1rem)}
.pf-cita{margin:0;padding-left:1.1rem;border-left:1px solid var(--wf-terracota)}
.pf-cita p{margin:0;max-width:38rem;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:clamp(1.1rem, 1rem + .4vw, 1.32rem);line-height:1.5;color:var(--wf-tinta)}
.pf-cita footer{margin-top:.8rem;font-family:var(--b-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wf-tinta-suave)}
.pf-r>p{margin:0;max-width:38rem;font-size:var(--t-lead);line-height:1.55;color:var(--wf-tinta)}
.pf-r>*+*{margin-top:1rem}
.pf-acao .wf-link{color:var(--wf-terracota);font-weight:500}
.pf-locais{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.pf-locais p{margin:0;font-size:var(--t-texto);line-height:1.6;color:var(--wf-tinta-suave)}
.pf-locais strong{display:inline-block;margin-bottom:.2rem;font-family:var(--b-serifa);font-weight:300;font-size:1.3rem;color:var(--wf-tinta)}
.pf-item summary:focus-visible{outline:2px solid var(--b-rose);outline-offset:-4px}
.pf-item[open] summary:focus-visible{outline-color:var(--wf-terracota)}

@media (max-width:900px){
  .pf-dentro{grid-template-columns:1fr}
  .pf-topo{display:contents}
  .pf-topo>*{grid-column:1}
  .pf-dentro{row-gap:0}
  .pf-lista{order:2;margin-top:2.6rem}
  .pf-mais{order:3;margin-top:3rem}
}
@media (max-width:560px){
  .pf-lista{padding-left:1.6rem}
  .pf-veio{left:-.35rem}
  .js .pf-lista::before{left:calc(.35rem - 1px)}
  .pf-item::before{left:calc(-1.6rem + .35rem - .3rem);top:2.1rem}
  .pf-item summary{grid-template-columns:1fr auto;gap:.9rem;padding:1rem .9rem}
  .pf-num{display:none}
  .pf-r{padding:0 .9rem 1.6rem}
  .pf-cita{padding-left:.85rem}
  .pf-cita footer{font-size:.75rem}
  .pf-locais{grid-template-columns:1fr}
}