/* ===== Globo del video (solo móvil) =====
   Miniatura flotante 16:9 arriba a la derecha, visible durante todo el scroll. En el hero va
   a tamaño completo con su etiqueta; al bajar se encoge, pierde la etiqueta y se vuelve más
   tenue (video-bubble.js escribe --vb-fade de 0 a 1). Se oculta mientras el video real se
   reproduce o está en pantalla. En tablet y desktop no existe. */
.video-bubble{ display:none; }

@media (max-width:640px){
  .video-bubble{
    --vb-fade:0;
    position:fixed; z-index:20;
    right:calc(.875rem + env(safe-area-inset-right)); top:calc(.75rem + 3px + env(safe-area-inset-top));
    display:flex; flex-direction:column; align-items:flex-end; gap:7px;
    margin:0; padding:0; border:0; background:none; cursor:pointer; text-align:right;
    font:inherit; color:var(--ink); -webkit-tap-highlight-color:transparent;
    opacity:0; pointer-events:none;
    transition:opacity .28s ease;
    /* arrastre (video-bubble.js): desplazamiento respecto a la esquina. touch-action:none: un gesto que
       empieza sobre el globo mueve el globo, nunca hace scroll. Sin callout de iOS al mantener pulsado. */
    transform:translate(var(--vb-x,0px), var(--vb-y,0px));
    touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  /* al apoyar el dedo se levanta al instante; al mover, más aún y sin etiqueta */
  .video-bubble.is-pressed .video-bubble-frame{
    transform:scale(1.04);
    box-shadow:0 2px 4px rgba(20,20,19,.08), 0 26px 52px -20px rgba(20,20,19,.6);
  }
  .video-bubble.is-dragging{ opacity:1 !important; z-index:21; }
  .video-bubble.is-dragging .video-bubble-frame{
    transform:scale(1.08);
    box-shadow:0 2px 4px rgba(20,20,19,.08), 0 30px 60px -20px rgba(20,20,19,.65);
  }
  .video-bubble.is-dragging .video-bubble-label{ opacity:0; }
  .video-bubble.is-ready{ opacity:calc(1 - .4 * var(--vb-fade)); pointer-events:auto; }
  .video-bubble.is-hidden{ opacity:0 !important; pointer-events:none !important; }
  .video-bubble-inner{
    display:flex; flex-direction:column; align-items:flex-end; gap:7px;
    transform:translateY(-10px) scale(.94); transform-origin:100% 0;
    transition:transform .6s var(--ease);
  }
  .video-bubble.is-ready .video-bubble-inner{ transform:scale(calc(1 - .32 * var(--vb-fade))); transition:transform .25s var(--ease); }

  .video-bubble-frame{
    position:relative; display:block; width:148px; aspect-ratio:16/9; overflow:hidden;
    border-radius:12px; border:1px solid rgba(20,20,19,.18); background:#141413;
    box-shadow:0 1px 2px rgba(20,20,19,.06), 0 22px 44px -22px rgba(20,20,19,.55);
    transition:transform .25s var(--ease);
  }
  /* la miniatura no recibe el toque: así el navegador no la trata como "imagen" al mantener pulsado */
  .video-bubble-frame img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; -webkit-touch-callout:none; }
  .video-bubble-play{
    position:absolute; left:50%; top:50%; width:38px; height:38px; margin:-19px 0 0 -19px;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
    background:rgba(250,249,245,.94); color:var(--ink);
    box-shadow:0 6px 18px -6px rgba(20,20,19,.6);
  }
  .video-bubble-play svg{ width:17px; height:17px; fill:currentColor; margin-left:2px; }
  .video-bubble-label{
    display:inline-block; padding:5px 10px; white-space:nowrap;
    background:var(--white); border:1px solid var(--line); border-radius:var(--pill);
    box-shadow:0 8px 20px -14px rgba(20,20,19,.4);
    font-size:.7rem; line-height:1.3; letter-spacing:.005em; color:var(--ink);
    opacity:calc(1 - 2.5 * var(--vb-fade));   /* la etiqueta se va primero, en el primer 40 % del recorrido */
    transition:opacity .2s ease;
  }
  .video-bubble:active:not(.is-pressed):not(.is-dragging) .video-bubble-frame{ transform:scale(.97); }
  .video-bubble:focus-visible{ outline:none; }
  .video-bubble:focus-visible .video-bubble-frame{ outline:2px solid var(--ink); outline-offset:3px; }
}
@media (prefers-reduced-motion:reduce){
  .video-bubble, .video-bubble-inner, .video-bubble-frame, .video-bubble-label{ transition:none; }
}