/* ===========================================================================
   Vibilog · «la pieza». Brand motion signature, approved by Alberto
   (27-sep-2026): «lo que me ha encantado es el logo y esa animación de conexión».

   What it is: a white tile holding the V of the logo split in its two halves
   (dark left stroke, blue right stroke). When Vibilog acts, the halves close
   with a precise click and the tile's edge flashes blue; the visible
   consequence (data crossing it, a page being cleaned, a note rising out of
   it) does the rest. Data «connects» by passing behind the tile: it goes in on
   one side and comes out on the other.

   Markup:
     <span class="vb-piece"><svg class="vb-mark" viewBox="0 0 32 32">
       <path class="vb-l" d="M4 6h6.4l6.1 15.2-2.9 6.3z"/>
       <path class="vb-r" d="M28 6h-6.4l-4.2 10.6 3.1 7.7z"/></svg><b>vibilog</b></span>
     (<b> only when the tile is large enough to read it; the symbol stands alone.)

   The click, as keyframes (T = the moment it closes, in % of the clip):
     halves   0%,T-1.8% translateX(∓5px), cubic-bezier(.45,0,.9,.35)
              T  translateX(±.35px), cubic-bezier(.2,0,.2,1)   (a hair of overshoot)
              T+.7%,100% none
     edge     T-.2% inset .25cqw #c9d7f5 → T+.4% inset .4cqw #2453ec → T+4.5% back
   Rules: one protagonist appearance per film; the click never changes, the
   consequence does. Base style = closed and at rest (the result frame).
   =========================================================================== */
.vb-piece{position:absolute;display:grid;place-items:center;align-content:center;gap:.7cqw;aspect-ratio:1;background:#fff;border-radius:1.9cqw;box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}
.vb-piece>*{position:static!important}
.vb-mark{display:block;width:46%;height:auto;overflow:visible}
.vb-l{fill:#17202b}
.vb-r{fill:#244ce8}
.vb-piece b{display:block;font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;font-weight:800;font-size:1.8cqw;letter-spacing:-.03em;line-height:1;color:#17202b;white-space:nowrap}