/* acordeon-faq — preguntas frecuentes que se abren y cierran.
   Portado del `frequently-asked-questions-accordion` / `faqs-with-dashed-lines`.

   Va sobre <details>/<summary> NATIVOS. Eso significa: funciona sin una línea de
   JavaScript, con teclado, con lector de pantalla, y el navegador puede
   encontrar texto dentro aunque esté cerrado. Reimplementarlo con divs y JS
   —que es lo que hace la mitad de las plantillas— es peor en todo. */
[data-lui~="faq"]{
  --lui-sep:1px;
  border-top:var(--lui-sep) solid var(--lui-linea,#e6e6e0);
}

[data-lui~="faq"] details{
  border-bottom:var(--lui-sep) solid var(--lui-linea,#e6e6e0);
}

[data-lui~="faq"] summary{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.25rem 0;
  cursor:pointer;
  font-weight:600;line-height:1.45;
  list-style:none;                 /* quita el triangulito por defecto */
  transition:color .2s;
}
[data-lui~="faq"] summary::-webkit-details-marker{display:none}
[data-lui~="faq"] summary:hover{color:var(--lui-acento,#c8a24a)}
[data-lui~="faq"] summary:focus-visible{
  outline:2px solid var(--lui-acento,#c8a24a);outline-offset:3px;border-radius:4px;
}

/* Signo + que gira a × al abrir. */
[data-lui~="faq"] summary::after{
  content:"";
  flex:0 0 auto;margin-left:auto;
  width:1rem;height:1rem;margin-top:.35rem;
  background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transition:rotate .3s cubic-bezier(.16,1,.3,1),opacity .3s;
  opacity:.55;
}
[data-lui~="faq"] details[open] summary::after{rotate:135deg;opacity:1}

[data-lui~="faq"] .lui-resp{
  padding:0 0 1.4rem;
  max-width:64ch;
  color:var(--lui-atenuado,#75756c);
  line-height:1.7;
}

/* Apertura suave donde se pueda (Chrome/Safari recientes). Donde no, abre de
   golpe: sigue funcionando perfectamente, sólo sin animación. */
@supports (interpolate-size: allow-keywords){
  [data-lui~="faq"] details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .35s cubic-bezier(.16,1,.3,1),content-visibility .35s allow-discrete;
  }
  [data-lui~="faq"] details[open]::details-content{block-size:auto}
}

@media (prefers-reduced-motion:reduce){
  [data-lui~="faq"] summary::after{transition:none}
  @supports (interpolate-size: allow-keywords){
    [data-lui~="faq"] details::details-content{transition:none}
  }
}