/* Portado de la maqueta ac-mezcla (paleta menta) una sola vez (78bbddd); desde entonces se edita aquí. */
/* Las preguntas: una sola hoja de papel, con el título impreso arriba y cada pregunta separada por un filete. Cada una
   es un <details> de verdad: se abre con el ratón, el dedo, Intro o Espacio, y el lector dice si está abierta. Donde
   el navegador sabe animar la altura (::details-content con interpolate-size), se despliega en 240 ms; donde no, se
   abre sin transición. */

.listachan .preguntas-hoja {
  padding: 22px 8px 8px; border-radius: var(--radio-papel);
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-mesa);
}
.listachan .preguntas-titulo { padding: 0 12px 10px; }
.listachan .preguntas-lista { display: grid; }

.listachan .pregunta { border-top: 1px solid rgb(var(--sombra) / .16); }

.listachan .pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 60px; padding: 12px 6px 12px 12px; border-radius: var(--radio-papel);
  font: 700 18px/1.3 var(--letra); cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.listachan .pregunta summary::-webkit-details-marker { display: none; }
.listachan .pregunta summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }
.listachan .pregunta-texto { min-width: 0; }
.listachan .pregunta-icono {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--papel-2); color: var(--tinta);
  transition: rotate 240ms var(--ease-out), scale 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.listachan .pregunta-icono .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.listachan .pregunta[open] .pregunta-icono { rotate: 45deg; background: var(--acento); color: var(--acento-texto); }
.listachan .pregunta summary:active .pregunta-icono { scale: .9; }
@media (hover: hover) and (pointer: fine) {
  .listachan .pregunta summary:hover .pregunta-icono { background: var(--tinta); color: var(--papel); }
  .listachan .pregunta[open] summary:hover .pregunta-icono { background: var(--acento-borde); color: var(--acento-texto); }
}

.listachan .respuesta { padding: 0 12px 20px; }
.listachan .respuesta p { max-width: 58ch; font-size: 17px; line-height: 1.5; }
.listachan .respuesta .enlace { display: inline; min-height: 0; }

.listachan .pregunta::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete;
}
.listachan .pregunta[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .listachan .pregunta::details-content { transition: none; }
}

@media (min-width: 1100px) {
  .listachan .preguntas-hoja { padding: 28px 16px 12px; }
}