/* Player de vídeo (o mesmo do curso do Personagem Pro), com as cores do Modelo Viral */
.vp{--navy:var(--plum);--coral:var(--violet);--butter:var(--lime);--pop-lg:0 10px 0 var(--plum);--spring:cubic-bezier(.34,1.56,.64,1);position:relative;background:#000;border-radius:18px;overflow:hidden}
.vp video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.vp{outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;color:#fff}
.vp:focus-visible{box-shadow:0 0 0 4px var(--coral),var(--pop-lg)}
.vp video{cursor:pointer}
.vp.is-idle,.vp.is-idle video{cursor:none}
.vp svg{width:22px;height:22px;fill:currentColor}
.vp path.vp-st{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vp svg.skip text,.vp svg text{font:800 7.5px var(--f-body);fill:currentColor}
.vp__shade{position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,rgba(13,11,38,.85),transparent);pointer-events:none;transition:opacity .3s}
.vp__big{position:absolute;left:50%;top:50%;width:clamp(64px,9vw,92px);height:clamp(64px,9vw,92px);margin:calc(clamp(64px,9vw,92px) / -2) 0 0 calc(clamp(64px,9vw,92px) / -2);border-radius:50%;border:3px solid var(--navy);background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 5px 0 var(--navy);transition:transform .25s var(--spring),opacity .25s;z-index:2}
.vp__big svg{width:42%;height:42%;margin-left:8%}
.vp__big:hover{transform:scale(1.07)}
.vp[data-state="playing"] .vp__big{opacity:0;transform:scale(.6);pointer-events:none}
.vp__spin{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:var(--butter);animation:spin .8s linear infinite;z-index:2;pointer-events:none}
.vp__flash{position:absolute;left:50%;top:18%;transform:translate(-50%,8px);background:rgba(13,11,38,.82);color:#fff;font-weight:800;font-size:15px;padding:8px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.2);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:3;white-space:nowrap}
.vp__flash.on{opacity:1;transform:translate(-50%,0)}
.vp__msg{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;padding:20px;background:rgba(20,18,58,.9);color:#fff;font-weight:700}

/* Barra de controles */
.vp__bar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 clamp(10px,2vw,18px) clamp(6px,1.2vw,12px);transition:opacity .3s,transform .3s}
.vp.is-idle .vp__bar,.vp.is-idle .vp__shade{opacity:0;transform:translateY(8px);pointer-events:none}
.vp__row{display:flex;align-items:center;gap:clamp(2px,.8vw,8px)}
.vp__grow{flex:1}
.vp__btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:#fff;flex:none;transition:background .15s,transform .15s}
.vp__btn:hover{background:rgba(255,255,255,.14)}
.vp__btn:active{transform:scale(.92)}
.vp__btn:focus-visible{outline:3px solid var(--butter);outline-offset:0}
.vp__play svg{width:26px;height:26px}
.vp__time{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 6px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.vp__volwrap{display:flex;align-items:center}
.vp__vol{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--butter) var(--v,100%),rgba(255,255,255,.3) var(--v,100%));transition:width .25s,opacity .25s,margin .25s;cursor:pointer}
.vp__volwrap:hover .vp__vol,.vp__vol:focus-visible{width:84px;opacity:1;margin:0 8px 0 2px}
.vp__vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--navy)}
.vp__vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--navy)}
.vp__speedbtn{width:auto;min-width:44px;padding:0 10px;font-weight:800;font-size:14px}
.vp__speed{position:relative}
.vp__menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:150px;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:16px;box-shadow:var(--pop-sm);padding:6px}
.vp__menu p{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 10px 4px}
.vp__menu button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:8px 10px;font-weight:700;color:var(--navy)}
.vp__menu button:hover{background:var(--cream)}
.vp__menu button[aria-checked="true"]{background:var(--butter)}

/* Barra de progresso */
.vp__seek{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none;margin-bottom:2px}
.vp__seek:focus-visible{outline:none}
.vp__seek:focus-visible .vp__thumb{box-shadow:0 0 0 4px rgba(255,201,60,.6)}
.vp__track{position:relative;width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden;transition:height .15s}
.vp__seek:hover .vp__track{height:9px}
.vp__buf{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,255,255,.45)}
.vp__played{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--coral),var(--butter))}
.vp__thumb{position:absolute;left:0;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:3px solid var(--navy);transform:scale(.85);transition:transform .15s}
.vp__seek:hover .vp__thumb{transform:scale(1.1)}
.vp__tip{position:absolute;bottom:26px;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:12px;font-weight:800;padding:4px 8px;border-radius:8px;pointer-events:none;white-space:nowrap}

/* Fim da aula */
.vp__end{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:20px;background:rgba(20,18,58,.86)}
.vp__end b{font-size:clamp(24px,3.5vw,38px);font-weight:800}
.vp__end p{color:#E6E2FF;font-weight:600;max-width:46ch}
.vp__endbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.vp__end .btn{font-size:15px;padding:10px 20px}

/* Toque duplo nas laterais (celular) */
.vp__tap{position:absolute;top:0;bottom:0;width:34%;z-index:1;display:grid;place-items:center;pointer-events:none;opacity:0}
.vp__tap--l{left:0;border-radius:0 50% 50% 0;background:radial-gradient(circle at 0 50%,rgba(255,255,255,.18),transparent 70%)}
.vp__tap--r{right:0;border-radius:50% 0 0 50%;background:radial-gradient(circle at 100% 50%,rgba(255,255,255,.18),transparent 70%)}
.vp__tap span{font-weight:800;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vp__tap.on{animation:tapflash .6s ease-out}
@keyframes tapflash{0%{opacity:1}100%{opacity:0}}

/* Tela cheia */
.vp:fullscreen{border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;width:100%;height:100%}
.vp:-webkit-full-screen{border:0;border-radius:0;width:100%;height:100%}
.vp:fullscreen video{object-fit:contain}

@media (max-width:560px){
  .vp__btn{width:36px;height:36px}
  .vp__volwrap .vp__vol{display:none}
  .vp__time{font-size:12px;padding:0 2px}
}
@media (pointer:coarse){
  .vp__volwrap .vp__vol{display:none}
}

/* Barra do Modelo Viral: play e volume à esquerda; velocidade e tela cheia à direita (mais a linha de progresso) */
.vp__bar{container-type:inline-size}
.vp__row>.vp__btn[aria-label^="Voltar"],.vp__row>.vp__btn[aria-label^="Avançar"],.vp__time{display:none!important}
.vp__row{display:flex;align-items:center;gap:6px}
.vp__volwrap{display:flex!important;align-items:center;gap:2px}
.vp__grow{flex:1}
.vp__speed{display:block!important}
.vp__row .vp__btn{width:38px;height:38px;flex:none}
.vp__speedbtn{min-width:40px;font-weight:800}
.vp__volwrap .vp__vol{display:block!important;width:70px}
@container (max-width:300px){ .vp__volwrap .vp__vol{display:none!important} }
.vp__bar{padding-left:10px!important;padding-right:10px!important}
.vp__row{gap:4px!important}
/* Alinhamento: os ícones das pontas começam/terminam junto com a linha de progresso */
.vp__row{margin:0 -7px!important;width:auto!important}
.vp__row .vp__btn{width:36px!important;height:36px!important;padding:0!important;display:grid!important;place-items:center}
.vp__row .vp__btn svg{width:22px;height:22px}
.vp__speedbtn{width:auto!important;min-width:36px;padding:0 4px!important;font-size:14px}