/* Guías con voz en una ventana (<dialog>, 21/10/2026). Antes eran dos bloques fijos con 11 botones de capítulo
   y alargaban la página casi dos pantallas en el teléfono. Los controles del video son los nativos. */
.guia{width:min(980px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;
  border:1px solid rgba(217,200,255,.22);border-radius:24px;background:#0b0f2a;color:var(--texto);
  box-shadow:0 40px 120px rgba(0,0,0,.6);overflow:auto;overscroll-behavior:contain}
.guia::backdrop{background:rgba(4,6,20,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html.guia-abierta{overflow:hidden}
.guia-caja{display:grid;gap:14px;padding:18px 20px 20px}
.guia-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.guia-cab .cejilla{margin:0 0 6px}
.guia-cab h3{font-size:clamp(1.3rem,1rem + 1vw,1.8rem);letter-spacing:-.02em;line-height:1.15}
.guia-cerrar{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;border:1px solid var(--borde-2);background:rgba(255,255,255,.05);color:var(--texto);cursor:pointer}
.guia-cerrar:hover{background:rgba(255,255,255,.1)}
.guia-cerrar .ico{width:22px;height:22px;transform:rotate(45deg)}
.guia .sx-video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;background:#07071a;border:1px solid rgba(196,173,226,.16)}
.guia video::cue{font:600 18px/1.35 "Figtree",sans-serif;color:#fff;background:rgba(0,0,0,.74)}
/* teléfono: el subtítulo va debajo del video, a 15 px (js/tour.js esconde la pista dentro del video) */
.guia-subtitulo{display:none;min-height:3.3em;margin:0;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.5);
  color:#fff;font-size:15px;font-weight:600;line-height:1.45;text-align:center}
.guia-sub-propio .guia-subtitulo{display:block}
.guia-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.guia .tour-estado{margin:0;color:var(--lila);font-size:14px}
.tour-transcripcion{color:var(--gris);font-size:14px}
.tour-transcripcion summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:revert}
.tour-transcripcion ol{padding-left:20px;margin:0;list-style:decimal;line-height:1.65}
.tour-transcripcion li+li{margin-top:6px}
@media (max-width:640px){
  /* en el teléfono, una hoja que sube desde abajo, con el video a todo lo ancho */
  .guia{width:100vw;max-width:100vw;max-height:100svh;margin:auto 0 0;border-width:1px 0 0;border-radius:22px 22px 0 0}
  .guia-caja{padding:14px 16px calc(20px + env(safe-area-inset-bottom));gap:12px}
  .guia .sx-video{border-radius:12px}
  .guia-pie .btn-sec{width:100%}
}