/* Víctor SEO WEB Widgets 2.0 · vs2-video.css · generado por tools/css2.py a partir de web/assets/css/site.css. No editar a mano. */

.vs2 .vs-video{margin: 0;}
.vs2 .vs-video__frame{position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--vs-r-lg); background: linear-gradient(160deg, #EEF0F6, #DDE2EC); box-shadow: 0 40px 80px -48px rgba(14, 27, 51, .55), 0 0 0 1px var(--vs-line);}
.vs2 .vs-video__fallback{position: absolute; inset: 0; display: grid; place-items: center; padding: 6%;}
.vs2 .vs-video__browser{display: grid; gap: 12%; width: 74%; height: 76%; padding: 0 0 6%; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px -30px rgba(14, 27, 51, .5); overflow: hidden; align-content: start; justify-items: center;}
.vs2 .vs-video__bar{display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 16px; background: #F2F4F8;}
.vs2 .vs-video__bar i{width: 9px; height: 9px; border-radius: 50%; background: #CDD2DD;}
.vs2 .vs-video__bar b{margin-left: 10px; font-size: .75rem; font-weight: 500; color: var(--vs-slate);}
.vs2 .vs-video__search{display: inline-flex; align-items: center; gap: 10px; margin-top: 14%; padding: 12px 22px; border: 1px solid var(--vs-line); border-radius: 99px; font-size: clamp(.8125rem, .7rem + .5vw, 1.0625rem); color: var(--vs-ink); box-shadow: 0 6px 18px -10px rgba(14, 27, 51, .3);}
.vs2 .vs-video__search svg{width: 18px; height: 18px; fill: none; stroke: var(--vs-slate); stroke-width: 2;}
.vs2 .vs-video__poster{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--vs-ease);}
.vs2 .vs-video__frame:hover .vs-video__poster{transform: scale(1.02);}
.vs2 .vs-video__play{position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 0; border: 0; border-radius: 50%; background: var(--vs-brand); color: #fff; cursor: pointer; box-shadow: 0 18px 40px -12px rgba(91, 61, 245, .7); transition: transform .25s var(--vs-ease), background-color .2s;}
.vs2 .vs-video__play::before{content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(91, 61, 245, .55); animation: vs-ripple 2.4s ease-out infinite;}
.vs2 .vs-video__play:hover{transform: scale(1.06); background: var(--vs-brand-dark);}
.vs2 .vs-video__play-ico svg{display: block; width: 32px; height: 32px; margin-left: 4px; fill: currentColor;}
.vs2 .vs-video__media{position: absolute; inset: 0; width: 100%; height: 100%; background: #000;}
.vs2 .vs-video.is-playing .vs-video__play, .vs2 .vs-video.is-playing .vs-video__poster{display: none;}
@media (max-width: 639px){.vs2 .vs-video__frame{aspect-ratio: 4 / 3; border-radius: var(--vs-r);}.vs2 .vs-video__play{width: 72px; height: 72px; margin: -36px 0 0 -36px;}.vs2 .vs-video__play-ico svg{width: 26px; height: 26px;}}
@media (prefers-reduced-motion: reduce){.vs2 .vs-video__play::before{animation: none !important;}}
/* Móvil: mientras se reproduce, el marco pasa a 16:9 (el vídeo es 16:9 y así no quedan franjas negras).
   La portada sigue en 4:3, como en el diseño. */
@media (max-width: 639px){ .vs2 .vs-video.is-playing .vs-video__frame{ aspect-ratio: 16 / 9; } }