.video-page .fas, .video-page .far, .video-page .fab, body[data-area="videos"] .fas, body[data-area="videos"] .far, body[data-area="videos"] .fab { display: inline-block; width: 1em; min-width: 1em; line-height: 1; text-align: center; }
.video-main, .video-shell, .video-card, .video-cover { min-width: 0; }
.video-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #152544, #3157d5); }
.video-cover-image, .video-cover-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-cover-media { background: #101a2d; pointer-events: none; }
.video-cover-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0713261a 25%, #071326b8 100%); }
.video-cover-label, .video-cover-quality { position: absolute; z-index: 2; top: 13px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; font-size: .63rem; font-weight: 900; }
.video-cover-label { left: 14px; color: #fff; background: #16284dcc; }
.video-cover-quality { right: 14px; color: #17345a; background: #c9f5e4; }
.video-cover-label i, .video-cover-quality i { width: 1em; min-width: 1em; text-align: center; }
.video-play-button { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 62px; height: 62px; transform: translate(-50%, -50%); border: 5px solid #ffffffe6; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #3157d5, #7651c9); box-shadow: 0 12px 25px #0a173b66; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.video-play-button:hover, .video-play-button:focus-visible { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.08); outline: none; }
.video-play-button i { margin-left: 3px; font-size: 1.2rem; }
.btn-watch { color: #fff !important; background: linear-gradient(135deg, #3157d5, #2543aa); box-shadow: 0 9px 20px #3157d53b; border: 0; cursor: pointer; }
.btn-watch:hover { color: #fff !important; }
.video-player-panel { scroll-margin-top: 18px; padding: 24px; margin: 0 0 24px; border: 1px solid #cbd9f7; border-radius: 24px; background: linear-gradient(145deg, #f8fbff, #eef3ff); box-shadow: var(--shadow); }
.video-player-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.video-player-head .hero-badge { margin: 0 0 8px; color: #3157d5; background: #e7edff; border-color: #d3defd; }
.video-player-head h2 { margin: 0 0 4px; color: var(--text); font: 800 1.25rem/1.25 "Manrope", sans-serif; }
.video-player-head p { margin: 0; color: var(--muted); font-size: .78rem; }
.video-player-close { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; border-radius: 10px; color: #536078; background: #e5ebf6; font: inherit; font-size: .72rem; font-weight: 900; cursor: pointer; }
.video-player-stage { position: relative; width: 100%; max-width: 940px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #091326; box-shadow: 0 12px 26px #172b501f; }
.video-player-stage iframe, .video-player-stage video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #091326; }
.video-player-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 940px; margin: 12px auto 0; color: #63718a; font-size: .72rem; }
.video-player-tools span { display: inline-flex; align-items: center; gap: 5px; }
.video-player-tools span i { color: #3157d5; }
.video-player-tools button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #cbd7f3; border-radius: 9px; color: #3157d5; background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.video-player-panel[hidden] { display: none; }
@media (max-width: 640px) { .video-main { width: 100%; padding: 25px 12px 120px; } .video-shell { width: 100%; max-width: none; } .video-cover { aspect-ratio: 16 / 10; } .video-player-panel { padding: 17px; border-radius: 20px; } .video-player-head { flex-direction: column; } .video-player-close { align-self: flex-start; } .video-player-tools { align-items: flex-start; flex-direction: column; } .video-actions > * { flex: 1 1 145px; } }

/* v4.1: la tarjeta solo muestra una portada; el único reproductor real se crea al tocar "Ver video". */
.video-cover-hosted { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; color: #fff; text-align: center; background: radial-gradient(circle at 50% 35%, #4876d5 0, #1a315b 52%, #0b162b 100%); }
.video-cover-hosted::before, .video-cover-hosted::after { position: absolute; border: 1px solid #ffffff2b; border-radius: 50%; content: ''; pointer-events: none; }
.video-cover-hosted::before { width: 180px; height: 180px; }
.video-cover-hosted::after { width: 290px; height: 290px; }
.video-cover-hosted-orbit { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #ffffff52; border-radius: 20px; color: #fff; background: #ffffff1c; box-shadow: 0 12px 24px #07132655; font-size: 1.35rem; }
.video-cover-hosted strong, .video-cover-hosted small { position: relative; z-index: 1; }
.video-cover-hosted strong { font: 800 .9rem 'Manrope', sans-serif; }
.video-cover-hosted small { color: #dce7ff; font-size: .68rem; }
.video-player-stage > iframe, .video-player-stage > video { max-width: 100%; max-height: 100%; }