/* Bleand Notes — floating note on luiguibleand.com (horizontal card, soft motion). Red & black, white card. */
.bn-float{position:fixed;left:24px;bottom:24px;z-index:170;width:min(400px,calc(100vw - 48px));font-family:'Outfit',sans-serif;
  opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .7s cubic-bezier(.38,1,.68,1),transform .7s cubic-bezier(.38,1,.68,1),visibility 0s linear .7s;pointer-events:none}
.bn-float.is-in{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}   /* hidden = out of the Tab order and screen readers too */
.bn-float .bn-float-inner{animation:bn-drift 7s ease-in-out infinite}
.bn-float .bn-card{--bn-u:.86px}
.bn-float .bn-card:hover{border-color:var(--bn-line-strong)}
.bn-float .bn-close{position:absolute;top:-11px;right:-11px;z-index:3;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:#161616;color:#fff;font:400 15px/1 'Outfit',sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bn-float .bn-close:hover,.bn-float .bn-close:focus-visible{background:#a3161d;border-color:#a3161d}
.bn-float .bn-close:focus-visible{outline:1px solid #a3161d;outline-offset:3px}
.bn-float .bn-tag{position:absolute;left:14px;top:-11px;z-index:3;padding:3px 8px;border-radius:2px;background:#161616;color:#bcbcbc;border:1px solid #2a2a2a;font:400 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
/* minimised: a small stone tile holding the final logo file, whole and unaltered (contain, no filter); dragged like the card */
.bn-icon{position:fixed;left:24px;bottom:24px;z-index:170;box-sizing:border-box;width:52px;height:52px;margin:0;padding:5px;border-radius:10px;
  background:#d8d3ca;border:1px solid #bfb8ad;box-shadow:0 12px 34px rgba(0,0,0,.55);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;visibility:hidden;opacity:0;transform:scale(.72);
  transition:opacity .35s cubic-bezier(.38,1,.68,1),transform .35s cubic-bezier(.38,1,.68,1),visibility 0s linear .35s,border-color .3s ease}
.bn-icon img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.bn-icon.is-on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.bn-icon:not(.is-on){pointer-events:none}   /* fading out: no longer clickable */
.bn-icon:hover{border-color:#8f877b}
.bn-icon.is-drag{cursor:grabbing;border-color:#a3161d}
.bn-icon:focus-visible{outline:2px solid #a3161d;outline-offset:3px}
.bn-float.is-missing,.bn-icon.is-missing{display:none!important}   /* no translation for the site language → no note */
@keyframes bn-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* phones: compact card (3 lines) above the back-to-top control, full width with 12px margins; "Leer nota" expands it */
.bn-more{display:none}
@media (max-width:600px){
  .bn-float{left:12px;right:12px;bottom:72px;width:auto}
  .bn-float .bn-card{--bn-u:.74px}
  .bn-float.is-compact .bn-card{padding:calc(11 * var(--bn-u)) calc(18 * var(--bn-u)) calc(35 * var(--bn-u))}
  .bn-float.is-compact .bn-head{padding-bottom:calc(6 * var(--bn-u))}
  .bn-float.is-compact .bn-logo{height:calc(34 * var(--bn-u))}
  .bn-float.is-compact .bn-text{margin:calc(8 * var(--bn-u)) 0 0;font-size:calc(22 * var(--bn-u));line-height:1.3;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .bn-float.is-compact .bn-card:lang(zh) .bn-text{font-size:calc(20 * var(--bn-u));line-height:1.55}
  .bn-float.is-compact .bn-more{bottom:6px;padding:4px 9px;font-size:9.5px}
  .bn-float.is-compact .bn-foot{display:none}
  .bn-float:not(.is-compact) .bn-card{max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);overflow:auto}
  .bn-float:not(.is-compact) .bn-card{padding-bottom:calc(58 * var(--bn-u))}   /* expanded: room for “Menos” under the Roman date */
  .bn-float .bn-close{right:8px}   /* phones: close sits on the top edge, inset — nothing hangs past the screen margin */
  .bn-more{display:block;position:absolute;right:14px;bottom:10px;z-index:3;padding:6px 10px;border:1px solid #bfb8ad;border-radius:2px;background:#cfc9bf;color:#151412;
    font:600 10px/1 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .bn-more:focus-visible{outline:1px solid #a3161d;outline-offset:2px}
  .bn-icon{left:12px;bottom:72px;width:46px;height:46px;padding:4px;border-radius:9px}
}
@media (prefers-reduced-motion:reduce){.bn-float{transition:opacity .2s linear,visibility 0s linear .2s;transform:none}.bn-float .bn-float-inner{animation:none}
  .bn-icon{transform:none;transition:opacity .2s linear,visibility 0s linear .2s}}

/* drag */
.bn-float{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.bn-float.is-drag{cursor:grabbing;transition:opacity .7s cubic-bezier(.38,1,.68,1)}
.bn-float.is-drag .bn-float-inner{animation-play-state:paused}
.bn-float.is-drag .bn-card{border-color:#a3161d}
.bn-float:focus-visible{outline:1px solid #a3161d;outline-offset:4px;border-radius:14px}
@media (min-width:601px){.bn-float .bn-card{--bn-u:.8px}}