fix: keep every Dúvidas link in its row, one answer open at a time

Opening a question moved its link out of the row into the answer, and only
that heading closed it again. The four questions are now a row of links
that always stays: the open one is highlighted, its answer shows below,
another link switches to its answer and the same link closes it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/site-flow.js

@@ -184,3 +184,29 @@ $('bPagar').addEventListener('click',()=>{
   else alert('O pedido online está indisponível no momento. Tente novamente em instantes.');
 });
 pintaEntrega();
+
+// Dúvidas: every question stays in the row of links; one answer is open at a
+// time, below the row, and its own link closes it again.
+(function(){
+  const req=$('req'); if(!req) return;
+  const itens=[...req.querySelectorAll('details')];
+  const barra=document.createElement('div'); barra.className='reqLinks';
+  const botoes=itens.map(d=>{
+    const b=document.createElement('button');
+    b.type='button'; b.textContent=d.querySelector('summary').textContent.trim();
+    b.addEventListener('click',()=>{
+      const abrir=!d.open;
+      itens.forEach(x=>{ x.open=false; });
+      d.open=abrir;
+    });
+    return b;
+  });
+  const pinta=()=>botoes.forEach((b,i)=>{
+    b.setAttribute('aria-expanded',String(itens[i].open));
+    b.classList.toggle('on',itens[i].open);
+  });
+  itens.forEach(d=>d.addEventListener('toggle',pinta));
+  barra.append(...botoes);
+  req.querySelector('.reqcab').after(barra);
+  pinta();
+})();