/* preguntas.css · v8.5 · la sección #preguntas: un acordeón con details/summary que abre y cierra sin JS.
   Solo selectores de #preguntas. Los componentes compartidos (.kicker .lead .como .enlace .personaje .globo
   [data-entra]) son de base.css y acá no se redefinen. Sin vh. Escala de la biblia §4: 12 · 16 · 17 · 22 px. */
#preguntas .cuerpo{display:grid;gap:40px 64px;align-items:start}
@media(min-width:861px){
  #preguntas .cuerpo{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  /* la cabeza se queda quieta mientras pasa la lista; el alto de la barra de arriba lo da --nav */
  #preguntas .cabeza{position:sticky;top:calc(var(--nav) + 48px)}
}
#preguntas .cabeza .lead{margin-bottom:0}
#preguntas .cabeza .personaje{display:none;margin-top:104px}
@media(min-width:861px){#preguntas .cabeza .personaje{display:inline-block}}
#preguntas .personaje img{display:block;width:120px;height:auto;opacity:.9;filter:drop-shadow(0 0 24px rgba(127,227,220,.22))}

/* la lista: líneas de 1 px, sin tarjetas (la jerarquía es por valor, no por cajas) */
#preguntas .lista{border-top:1px solid var(--marco)}
#preguntas details{border-bottom:1px solid var(--marco)}
#preguntas summary{display:grid;grid-template-columns:28px minmax(0,1fr) 12px;gap:0 16px;align-items:baseline;
  padding:20px 0;cursor:pointer;list-style:none;font:500 17px/1.35 var(--f-titulo);color:var(--tinta);
  -webkit-tap-highlight-color:transparent}
#preguntas summary::-webkit-details-marker{display:none}
#preguntas summary .n{font:500 12px/1 var(--f-titulo);letter-spacing:.14em;color:var(--tinta-2);font-variant-numeric:tabular-nums}
#preguntas summary .q{text-wrap:pretty}
#preguntas summary::after{content:'';align-self:center;width:8px;height:8px;margin-left:2px;
  border-right:1.5px solid var(--tinta-2);border-bottom:1.5px solid var(--tinta-2);
  transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--cromo),border-color .2s var(--cromo)}
#preguntas details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media(hover:hover) and (pointer:fine){#preguntas summary:hover::after{border-color:var(--tinta)}}
#preguntas details>p{margin:0;padding:0 8px 24px 44px;font-size:16px;line-height:1.55;color:var(--tinta-2);max-width:62ch}
@media(min-width:861px){#preguntas summary{padding:20px 0;font-size:22px;line-height:1.25}#preguntas details>p{font-size:17px}}
#preguntas .como{margin:32px 0 0}
@media(min-width:861px){#preguntas .como{grid-column:2}}

/* abrir con altura animada donde el navegador sabe (Chrome 131+); en los demás abre de una. El reduced-motion de
   base.css (*, ::before, ::after) NO alcanza a ::details-content: se apaga aquí */
@supports (interpolate-size:allow-keywords){
  #preguntas{interpolate-size:allow-keywords}
  #preguntas details::details-content{block-size:0;overflow-y:clip;
    transition:block-size .32s var(--orbe),content-visibility .32s allow-discrete}
  #preguntas details[open]::details-content{block-size:auto}
  @media(prefers-reduced-motion:reduce){#preguntas details::details-content{transition:none}}
}