/* ==========================================================
   Barber Host · Reproductor de videos (modal)
   ========================================================== */

.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(5,5,4,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.modal__box{position:relative;width:min(960px,100%);display:grid;gap:12px;transform:translateY(16px) scale(.98);transition:transform .45s var(--ease)}
.modal.open .modal__box{transform:none}
.modal__box.is-vertical{width:min(400px,100%)}
.modal__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.modal__box.is-vertical .modal__frame{aspect-ratio:auto;height:min(78vh,720px)}
.modal__frame iframe,.modal__frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal__frame video{object-fit:contain;background:#000}
.modal__bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal__title{font:400 20px/1.1 var(--f-display);text-transform:uppercase;color:var(--bone);min-width:0}
.modal__ext{flex:none;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);text-decoration:none}
.modal__close{position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--ink-2);color:var(--bone);font-size:22px;line-height:1;cursor:pointer;transition:border-color .3s,transform .3s}
.modal__close:hover{border-color:var(--yellow);transform:rotate(90deg)}
body.modal-open{overflow:hidden}
@media (max-width:560px){.modal{padding:12px}.modal__close{top:-50px}.modal__title{font-size:17px}}
@media (prefers-reduced-motion:reduce){.modal,.modal__box{transition:none}}

/* aviso cuando YouTube no puede reproducir (página abierta con doble clic) */
.modal__note{position:absolute;inset:0;display:grid;place-items:end start;padding:24px;background-size:cover;background-position:center}
.modal__note::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,8,.35),rgba(10,10,8,.9))}
.modal__note p{position:relative;max-width:46ch;color:var(--bone);font-size:14px;line-height:1.5}
.modal__note b{display:block;color:var(--yellow);font:400 22px/1.1 var(--f-display);text-transform:uppercase;margin-bottom:6px}