/* Player do vídeo do Leo — capa leve + vídeo só baixa no clique.
   Desktop/paisagem = 16:9 · celular em pé = 1:1 (corte centralizado nele). */
.vleo{position:relative;aspect-ratio:16/9;border-radius:var(--r,18px);overflow:hidden;background:#101010;border:1px solid var(--line-dk,#2A2A2A);box-shadow:var(--shadow,0 30px 70px -40px rgba(13,13,13,.55));cursor:pointer}
.vleo picture,.vleo img,.vleo video{position:absolute;inset:0;width:100%;height:100%;display:block}
.vleo img{object-fit:cover}
.vleo video{object-fit:contain;background:#000}
.vleo.on{cursor:default}
.vleo-play{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border:0;border-radius:999px;background:rgba(13,13,13,.78);color:#fff;font:600 14px/1 Inter,system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .2s,background .2s}
.vleo-ico{width:42px;height:42px;border-radius:50%;background:var(--green,#1DB954);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(29,185,84,.55);animation:vleoPulse 2.2s ease-out infinite}
.vleo-ico svg{margin-left:2px}
.vleo:hover .vleo-play{transform:scale(1.04);background:rgba(13,13,13,.9)}
.vleo-play:focus-visible{outline:2px solid var(--green,#1DB954);outline-offset:3px}
@keyframes vleoPulse{0%{box-shadow:0 0 0 0 rgba(29,185,84,.55)}70%{box-shadow:0 0 0 14px rgba(29,185,84,0)}100%{box-shadow:0 0 0 0 rgba(29,185,84,0)}}
@media (max-width:920px) and (orientation:portrait){
  .vleo{aspect-ratio:1/1;box-shadow:0 16px 40px -22px rgba(13,13,13,.45)}
  .vleo.wide{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){.vleo-ico{animation:none}.vleo-play{transition:none}}
/* Desktop: player maior (pedido Victor 21/09) — coluna do vídeo ganha espaço e o H1 encolhe um pouco p/ não quebrar em linhas demais */
@media (min-width:921px){
  .hero-grid:has(.vleo){grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4vw,52px)}
  .hero-grid:has(.vleo) h1{font-size:clamp(36px,4.5vw,58px)}
  /* alinhado ao topo do texto: com H1 longo (1B) o vídeo não pode cair pra fora da 1ª tela do notebook */
  .hero-grid:has(.vleo) .hero-media{align-self:start;margin-top:6px}
}