/* Desplegable con la misma estética que "Sobre el proyecto" y "Decisiones de diseño" de las páginas de proyecto:
   panel de vidrio, título en itálica pesada y flecha que gira al abrir. Se usa en juegos y herramientas.
   Uso: <details class="dsp"><summary><span class="dsp-t">Título</span></summary>…</details>  (todos tienen el mismo tamaño; dsp-s es equivalente) */
.dsp{padding:clamp(14px,1.7vw,20px) clamp(18px,2.2vw,26px);border-radius:22px;background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.42);box-shadow:0 20px 50px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.45);color:#fff;text-align:left}
.dsp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;-webkit-tap-highlight-color:transparent}
.dsp>summary::-webkit-details-marker{display:none}
.dsp>summary::after{content:"";flex:none;width:11px;height:11px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.dsp[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.dsp>summary:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:8px}
.dsp[open]>summary{margin-bottom:clamp(10px,1.4vw,14px)}
.dsp[open]>:not(summary){animation:dsp .35s ease both}
.dsp[hidden]{display:none}
.dsp .dsp-t{margin:0;font-family:var(--fh,"articulat-cf",sans-serif);font-weight:900;font-style:italic;font-size:clamp(17px,1.5vw,21px);line-height:1.1;letter-spacing:0;text-align:left}
@keyframes dsp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* todos los desplegables (juegos y herramientas) comparten el mismo tamaño, el de "¿Cómo funciona?" de la calculadora; dsp-s queda como sinónimo */

/* herramientas */
.f-herramientas .dsp{margin-top:clamp(12px,1.6vw,18px)}
.f-herramientas .dsp>p{margin:0}
.f-herramientas .dsp .cp-fuentes-in{padding:0}
.f-herramientas .dsp .cp-aviso{max-width:none}
.f-herramientas .cp-top>div:first-child{flex:1 1 min(100%,420px);max-width:60ch}

/* juegos: dentro de la columna de reglas (centrada), el panel va alineado a la izquierda */
.inicio-reglas .dsp{margin:0 0 22px;text-align:left}
.inicio-reglas .dsp p{max-width:none!important;margin:0!important;text-align:left!important}
.inicio-reglas .dsp p+p,.inicio-reglas .dsp p+.how-to{margin-top:12px!important}
.inicio-reglas .dsp .how-to{max-width:none!important;margin:0!important;padding:0!important;text-align:left!important}

@media(prefers-reduced-motion:reduce){.dsp[open]>:not(summary){animation:none}.dsp>summary::after{transition:none}}

/* ---- Jerarquía del texto dentro de los desplegables (para leerlo en diagonal) ----
   dsp-lead = la idea principal en una línea · dsp-l = pasos o puntos (ol numerada / ul con punto)
   <b> al inicio de cada paso = acción o etiqueta · <strong> = palabra clave dentro de la frase */
.dsp .dsp-lead{margin:0!important;font-family:var(--f);font-size:clamp(17px,1.5vw,20px)!important;line-height:1.4!important;font-weight:600;font-style:normal;color:#fff!important;max-width:none!important;text-align:left!important}
.dsp .dsp-p{font-family:var(--f);font-size:clamp(15px,1.25vw,17px)!important;line-height:1.55!important;font-weight:400;font-style:normal;color:rgba(255,255,255,.88)!important;max-width:62ch;text-align:left}
.dsp .dsp-lead+.dsp-p,.dsp .dsp-p+.dsp-p{margin-top:12px!important}
.dsp strong{font-weight:800;color:#fff}
.dsp-l{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px;counter-reset:dsp}
.dsp-lead+.dsp-l{margin-top:16px}
.dsp-l li{position:relative;padding-left:40px;counter-increment:dsp;font-family:var(--f);font-size:clamp(15px,1.25vw,17px);line-height:1.5;font-weight:400;color:rgba(255,255,255,.88);text-align:left;max-width:62ch}
ol.dsp-l li::before{content:counter(dsp);position:absolute;left:0;top:-.05em;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);color:#fff;font-family:var(--fh,"articulat-cf",sans-serif);font-weight:900;font-style:italic;font-size:13px;line-height:1}
ul.dsp-l li::before{content:"";position:absolute;left:10px;top:.62em;width:8px;height:8px;border-radius:50%;background:#fff}
.dsp-l li>b:first-child{font-family:var(--fh,"articulat-cf",sans-serif);font-weight:900;font-style:italic;color:#fff}
@media(max-width:560px){.dsp-l li{padding-left:36px}}