/* ============================================================
   VÍDEO DO HERO
   Celular / tela estreita: cartão no fluxo, logo abaixo dos botões.
   Tela larga (≥ 1100px): janela flutuante fixa à direita do título,
   que some suavemente conforme a página rola (hero-video.js).
   ============================================================ */
.hvid{
  display:block;
  width:min(82vw, 360px);
  margin:clamp(36px, 8vw, 52px) auto 0;
}
.hvid__frame{
  position:relative;
  aspect-ratio:9 / 16;
  padding:2px;
  border-radius:24px;
  background:linear-gradient(140deg, var(--azul-hi) 0%, var(--azul) 45%, var(--laranja) 100%);
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 0 60px rgba(58,155,239,.18);
}
.hvid__tela{
  position:relative;
  width:100%;height:100%;
  border-radius:22px;
  overflow:hidden;
  background:var(--ink);
}
.hvid__video{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}

/* botões redondos sobre o vídeo */
.hvid__btn{
  position:absolute;
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:rgba(13,19,25,.68);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.hvid__btn:hover{background:rgba(13,19,25,.9);transform:scale(1.06)}
.hvid__btn:focus-visible{outline:2px solid var(--azul-hi);outline-offset:2px}
.hvid__btn svg{width:20px;height:20px;display:block}
.hvid__som{right:12px;bottom:12px}
.hvid__fechar{right:12px;top:12px;display:none}

/* ícone do som: mostra um ou outro conforme o estado */
.hvid__som .ic-on{display:none}
.hvid.com-som .hvid__som .ic-on{display:block}
.hvid.com-som .hvid__som .ic-off{display:none}

/* ---------- tela larga: janela flutuante ---------- */
@media (min-width:1100px){
  .hvid{
    position:fixed;
    z-index:40;                         /* abaixo da nav (60) */
    top:calc(72px + clamp(24px, 4vh, 48px));
    right:max(var(--gut), calc((100vw - var(--max-larga)) / 2 + var(--gut)));
    height:min(calc(100vh - 72px - 2 * clamp(24px, 4vh, 48px)), 760px, calc(32vw * 16 / 9));
    width:auto;
    aspect-ratio:9 / 16;
    margin:0;
    will-change:opacity, transform;
    /* suaviza os "degraus" da rodinha do mouse */
    transition:opacity .28s ease-out, transform .28s ease-out, visibility 0s linear 0s;
  }
  .hvid__frame{
    height:100%;
    animation:hvidEntra .9s cubic-bezier(.22,.61,.36,1) .45s both;
  }
  .hvid__fechar{display:grid}

  /* depois de rolar além do hero */
  .hvid.is-oculto{
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease-out, transform .28s ease-out, visibility 0s linear .28s;
  }
  /* fechado pelo visitante */
  .hvid.is-fechado{display:none}
}

@keyframes hvidEntra{
  from{opacity:0;transform:translate3d(40px, 24px, 0) scale(.96)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .hvid, .hvid__frame{animation:none !important;transition:none !important}
}