/* El «bocadillo» de Presales (2026-11-04, `static/presales-tip.js`): la
 * misma piel que el globo de la «i» (`.hint-pop`), con un título, el texto y
 * la fuente. */
.ps-tip {
  position: fixed; left: 0; top: 0; z-index: 300;
  width: max-content; max-width: min(44ch, calc(100vw - 16px));
  display: grid; gap: 3px;
  padding: var(--s2) var(--s3);
  background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
  color: var(--text); font-size: var(--size-xs); font-weight: 400; line-height: 1.45;
  letter-spacing: normal; text-transform: none; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity .1s ease;
  pointer-events: none;
}
.ps-tip.on { opacity: 1; visibility: visible; }
.ps-tip-t { font-size: var(--size-sm); font-weight: 600; color: var(--text); }
.ps-tip-x { color: var(--text-muted); }
.ps-tip-src { color: var(--text-faint); font-size: var(--size-2xs); border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }
[data-tip] { cursor: help; }
a[data-tip], button[data-tip], [data-tip] a { cursor: pointer; }
[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .ps-tip { transition: none; } }