/* ============================================
   DIBO dibo-faq — estilos de item del acordeón
   (.faq-item, .faq-q-text, .faq-answer y su contenido),
   compartidos entre como-funciona.html y el desplegable
   de ayuda contextual del registro (index-registro.html).

   El chrome de la página FAQ (.faq-hero, .faq-toc, .faq-sub,
   .faq-bloque, .faq-see-also, etc.) NO vive aquí — sigue en
   el <style> de como-funciona.html.

   Todas las variables (--bg-card, --border, --radius-md,
   --shadow-card, --pale, --text, --bg-subtle, --gd, --text2,
   --border2) vienen de css/tokens.css y se auto-tematizan
   para los tres modos (wellness, Boli, Carbon).
   ============================================ */

.faq-item{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.faq-item[open]{
  border-color:var(--pale);
}
.faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  font-size:15px;
  font-weight:500;
  color:var(--text);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition: background .12s;
}
.faq-item > summary:hover{ background:var(--bg-subtle); }
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::before{
  content:'+';
  flex-shrink:0;
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  font-weight:400;
  color:var(--gd);
  transition: transform .2s;
}
.faq-item[open] > summary::before{
  content:'−';
  transform:none;
}
.faq-item[open] > summary{
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
}
.faq-q-text{ flex:1; }

.faq-answer{
  padding:.9rem 1rem 1.05rem;
  color:var(--text2);
  font-size:14.5px;
  line-height:1.6;
}
.faq-answer > *:first-child{ margin-top:0; }
.faq-answer > *:last-child{ margin-bottom:0; }
.faq-answer p{ margin:0 0 .75rem; }
.faq-answer ul{ margin:.4rem 0 .75rem; padding-left:1.25rem; }
.faq-answer ul li{ margin-bottom:.35rem; }
.faq-answer strong{ color:var(--text); font-weight:600; }
.faq-answer .faq-trap{
  margin-top:.85rem;
  padding:.65rem .8rem;
  background:var(--bg-subtle);
  border-left:3px solid var(--border2);
  border-radius:5px;
  font-size:13.5px;
  color:var(--text2);
}