/* perguntas — o que perguntam para ela (agente 4) */
.fq-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;
  grid-template-areas:"topo lista" "fecho lista";column-gap:clamp(32px,6vw,104px);align-items:start}
.fq-topo{grid-area:topo}
.fq-lista{grid-area:lista}
.fq-fecho{grid-area:fecho}
.fq-topo .wf-titulo{font-size:clamp(2.2rem,1.2rem + 2.6vw,3.9rem)}
.fq-intro{max-width:24em}

/* o fio do dia como eixo das perguntas */
.fq-lista{list-style:none;margin:0;padding:0;position:relative}
.fq-lista::before{content:"";position:absolute;left:3px;top:var(--fq-ini,34px);bottom:34px;width:1px;opacity:.45;
  background:repeating-linear-gradient(180deg, rgb(var(--tinta-rgb)) 0 5px, transparent 5px 9px)}
/* o trecho já lido vira linha cheia, como a régua do dia */
.fq-lista::after{content:"";position:absolute;left:3px;top:var(--fq-ini,34px);width:1px;height:var(--fq-lido,0px);background:rgb(var(--tinta-rgb) / .8);
  transition:height 1s var(--ease)}
.js .fq-lista::before{clip-path:inset(0 0 100% 0);transition:clip-path 2s cubic-bezier(.45,.05,.25,1)}
.js .fq-lista.fq-visto::before{clip-path:inset(0 0 0 0)}
.fq-item{position:relative}
.fq-p{margin:0;font:inherit}
.fq-botao{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:7px minmax(0,1fr) 28px;align-items:center;
  column-gap:clamp(18px,2.4vw,32px);min-height:72px;padding:20px 0;
  font-family:var(--sans);font-weight:500;font-size:clamp(1.08rem,1rem + .35vw,1.3rem);line-height:1.35;color:rgb(var(--tinta-rgb))}
.fq-botao span{transition:color .3s}
.fq-botao:hover span{color:var(--acento)}
.fq-botao:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.fq-ponto{position:relative;z-index:1;width:7px;height:7px;border-radius:50%;border:1px solid currentColor;background:var(--c0);transition:background .5s var(--ease)}
.fq-item.fq-lido .fq-ponto{background:currentColor}
.fq-sinal{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid rgb(var(--tinta-rgb) / .3);justify-self:end}
.fq-sinal::before,.fq-sinal::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:currentColor;translate:-50% -50%;
  transition:rotate .5s var(--ease)}
.fq-sinal::after{rotate:90deg}
.fq-botao[aria-expanded="true"] .fq-sinal::after{rotate:0deg}

/* resposta: abre devagar */
.fq-r{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s var(--ease)}
.js .fq-botao[aria-expanded="false"] + .fq-r,.js .fq-p:has(.fq-botao[aria-expanded="false"]) + .fq-r{grid-template-rows:0fr}
.fq-dentro{overflow:hidden;padding-left:calc(7px + clamp(18px,2.4vw,32px))}
.fq-voz{margin:4px 0 0;max-width:38rem}
.fq-voz p{margin:0;font-family:var(--serifa);font-size:clamp(1.5rem,1.1rem + 1.3vw,2.35rem);line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
.fq-voz-2{margin-top:.8em}
.fq-voz-2 p{font-size:clamp(1.2rem,1rem + .6vw,1.55rem);line-height:1.3;color:rgb(var(--tinta-rgb) / .85)}
.fq-quem{margin:1.1em 0 34px;font-size:var(--t-rot);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:rgb(var(--suave-rgb))}
.fq-mais{margin-top:-14px}
.fq-mais,.fq-dado{margin:0 0 34px;max-width:32em;color:rgb(var(--tinta-rgb) / .88)}
.fq-dado{font-family:var(--serifa);font-size:clamp(1.3rem,1.05rem + .8vw,1.8rem);line-height:1.3;max-width:24em}
.fq-item + .fq-item{border-top:1px solid rgb(var(--tinta-rgb) / .12)}

.fq-fecho{margin-top:clamp(36px,6vh,72px);padding-top:clamp(28px,4vh,40px);border-top:1px solid rgb(var(--tinta-rgb) / .14);max-width:26em;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fq-fecho-p{margin:0;font-family:var(--serifa);font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem)}

@media (max-width:899px){
  .fq-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"topo" "lista" "fecho";grid-template-rows:auto}
  .fq-topo{margin-bottom:24px}
  .fq-fecho{border-top:0;padding-top:0;padding-left:calc(7px + 18px)}
}
@media (prefers-reduced-motion:reduce){
  .fq-r,.fq-sinal::before,.fq-sinal::after,.fq-ponto,.fq-lista::after{transition:none}
  .js .fq-lista::before{clip-path:none}
}