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();
+})();

web/site-v2.css

@@ -210,9 +210,14 @@ section+section{border-top:0}
 .req{position:static;padding:8px 0 0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
 .reqcab{margin:0;font-size:13px;font-weight:400;color:var(--fraco)}
 .req details,.req details:first-of-type{border:0}
+.reqLinks{display:contents}
+.reqLinks button{padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--laranja-escuro);cursor:pointer}
+.reqLinks button:hover{text-decoration:underline}
+.reqLinks button.on{font-weight:700;color:var(--preto);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--laranja)}
+/* The links above open and close the answers; a closed one is not shown. */
+.req details:not([open]){display:none}
 .req summary{display:inline;padding:0;font-size:13px;font-weight:500;color:var(--laranja-escuro)}
 .req summary::before{display:none}
-.req summary:hover{text-decoration:underline}
 .req details[open]{order:1;flex-basis:100%;padding:14px 16px 4px;border-radius:12px;background:var(--cinza)}
 .req details[open] summary{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:var(--preto);text-decoration:none}
 .req li{font-size:13px}