.dvv{--anil:#2F4AC9;--chrome:#0C0E16;font-family:"Jost","Helvetica Neue",Arial,sans-serif;max-width:900px;margin:0 auto}
.dvv *{box-sizing:border-box}
.dvv-caja{position:relative;background:var(--chrome);border-radius:16px;overflow:hidden;aspect-ratio:16/9;width:100%;user-select:none;-webkit-user-select:none}
.dvv-caja video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.dvv-poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .35s}
.dvv-caja.jugando .dvv-poster{opacity:0;pointer-events:none}
.dvv-cargando{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s}
.dvv-caja.esperando .dvv-cargando{opacity:1}
.dvv-aro{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:dvvgiro .9s linear infinite}
@keyframes dvvgiro{to{transform:rotate(360deg)}}
.dvv-central{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;padding:0}
.dvv-central span{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .18s}
.dvv-central:hover span{transform:scale(1.07)}
.dvv-central svg{width:30px;height:30px;fill:var(--chrome);margin-left:4px}
.dvv-caja.jugando .dvv-central{display:none}
.dvv-zona{position:absolute;top:0;bottom:64px;width:32%;background:transparent;border:0;cursor:pointer}
.dvv-izq{left:0}.dvv-der{right:0}
.dvv-salto{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:13px;font-weight:500;background:rgba(0,0,0,.55);border-radius:99px;padding:8px 14px;opacity:0;transition:opacity .25s;pointer-events:none}
.dvv-s-izq{left:8%}.dvv-s-der{right:8%}
.dvv-salto.on{opacity:1}
.dvv-barra{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(8,10,18,.88));opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.dvv-caja.mostrar .dvv-barra,.dvv-caja:not(.jugando) .dvv-barra,.dvv-caja:focus-within .dvv-barra{opacity:1;transform:none}
.dvv-caja:not(.jugando) .dvv-barra{background:linear-gradient(transparent,rgba(8,10,18,.6))}
.dvv-linea{position:relative;height:28px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px}
.dvv-pista{position:relative;height:4px;width:100%;border-radius:99px;background:rgba(255,255,255,.26);overflow:hidden;transition:height .15s}
.dvv-linea:hover .dvv-pista{height:7px}
.dvv-buffer{position:absolute;inset:0 auto 0 0;background:rgba(255,255,255,.34);width:0}
.dvv-visto{position:absolute;inset:0 auto 0 0;background:var(--anil);width:0}
.dvv-bolita{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%) scale(0);transition:transform .15s;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.dvv-linea:hover .dvv-bolita{transform:translate(-50%,-50%) scale(1)}
.dvv-previa{position:absolute;bottom:26px;transform:translateX(-50%);background:#000;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.85);opacity:0;transition:opacity .15s;pointer-events:none;width:148px}
.dvv-previa img{display:block;width:100%;height:auto}
.dvv-previa b{display:block;text-align:center;font-size:11.5px;font-weight:500;color:#fff;background:rgba(0,0,0,.85);padding:3px 0;font-variant-numeric:tabular-nums}
.dvv-linea:hover .dvv-previa.on{opacity:1}
.dvv-mandos{display:flex;align-items:center;gap:4px;color:#fff}
.dvv-b{appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;padding:9px;border-radius:9px;display:grid;place-items:center;transition:background .15s;font-family:inherit;font-size:13px;font-weight:500;line-height:1}
.dvv-b:hover{background:rgba(255,255,255,.16)}
.dvv-b svg{width:21px;height:21px;fill:currentColor;display:block}
.dvv-bvel{width:auto;padding:9px 11px}
.dvv-reloj{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.02em;padding:0 8px;white-space:nowrap}
.dvv-reloj i{opacity:.62;font-style:normal}
.dvv-hueco{flex:1}
.dvv-vol{display:flex;align-items:center;gap:2px}
.dvv-vol input{width:0;opacity:0;transition:width .2s,opacity .2s;accent-color:#fff;cursor:pointer}
.dvv-vol:hover input,.dvv-vol:focus-within input{width:74px;opacity:1}
.dvv-menu{position:relative}
.dvv-lista{position:absolute;bottom:46px;right:0;background:rgba(14,16,24,.97);border-radius:11px;padding:6px;min-width:132px;display:none;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:3}
.dvv-lista.on{display:block}
.dvv-lista button{display:flex;justify-content:space-between;gap:12px;width:100%;background:transparent;border:0;color:#fff;font-family:inherit;font-size:13.5px;padding:9px 11px;border-radius:7px;cursor:pointer;text-align:left}
.dvv-lista button:hover{background:rgba(255,255,255,.14)}
.dvv-lista button[aria-checked="true"]::after{content:"✓";color:#8DA0FF}
.dvv-lista .dvv-tit{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:7px 11px 4px}
.dvv-seguir{position:absolute;left:14px;right:14px;bottom:78px;background:rgba(14,16,24,.95);border-radius:12px;padding:13px 15px;display:none;align-items:center;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:4}
.dvv-seguir.on{display:flex}
.dvv-seguir p{margin:0;color:#fff;font-size:14px;flex:1;line-height:1.35}
.dvv-seguir b{font-weight:500}
.dvv-seguir button{border:0;border-radius:99px;padding:9px 16px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.dvv-si{background:var(--anil);color:#fff}
.dvv-no{background:transparent;color:rgba(255,255,255,.75);padding:9px 6px}
.dvv :focus-visible{outline:2.5px solid #8DA0FF;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dvv *{transition:none!important;animation:none!important}}

.dvv-aviso{position:absolute;inset:auto 10% 50% 10%;transform:translateY(50%);margin:0;color:#fff;font-size:15px;line-height:1.5;text-align:center;background:rgba(10,12,20,.9);border-radius:12px;padding:20px 24px}

.dvv-atajos{position:absolute;inset:0;z-index:7;background:rgba(7,9,15,.95);color:#fff;padding:22px 26px;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dvv-atajos-t{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.dvv-atajos dl{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:0;max-width:440px;width:100%;font-size:13.5px}
.dvv-atajos dt,.dvv-atajos dd{margin:0;padding:0;line-height:1.45}
.dvv-atajos dt{font-weight:500;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.dvv-atajos dd{color:rgba(255,255,255,.66)}
.dvv-atajos-x{margin:20px 0 0;background:#fff;color:#0C0E16;border:0;border-radius:99px;padding:9px 22px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer}
@media (max-height:420px){.dvv-atajos dl{font-size:12px;gap:3px 16px}.dvv-atajos-x{margin-top:12px}}

/* ---------------------------------------------------------- ventanita
   Cuando el vídeo se va de la pantalla mientras suena, se queda en una
   esquina. La caja de arriba conserva su sitio, así que la página no pega
   ningún salto al volver. */
.dvv-mini-x{position:absolute;top:8px;right:8px;z-index:5;display:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(10,12,20,.72);color:#fff;cursor:pointer;padding:0;place-items:center}
.dvv-mini-x svg{width:20px;height:20px;fill:currentColor}
.dvv.mini .dvv-mini-x{display:grid}
.dvv.mini .dvv-caja{position:fixed;right:20px;bottom:20px;z-index:9990;width:min(360px,44vw);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.45);animation:dvvasoma .24s ease-out}
@keyframes dvvasoma{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dvv.mini .dvv-central span{width:54px;height:54px}
.dvv.mini .dvv-barra{padding:24px 9px 8px}
.dvv.mini .dvv-vol,.dvv.mini .dvv-menu,.dvv.mini .dvv-bpip,.dvv.mini .dvv-previa{display:none}
.dvv.mini .dvv-reloj{font-size:11.5px;padding:0 5px}
.dvv.mini .dvv-b{padding:7px}
.dvv.mini .dvv-b svg{width:18px;height:18px}
.dvv.mini .dvv-zona{bottom:52px}
@media (max-width:700px){
 .dvv.mini .dvv-caja{right:10px;bottom:10px;width:min(280px,64vw)}
 .dvv.mini .dvv-salto{display:none}
}

/* Por debajo de 420 px no caben los siete mandos: se van los prescindibles
   antes de que el de pantalla completa quede cortado por el borde. */
@media (max-width:420px){
 .dvv-bpip{display:none}
 .dvv-vol{display:none}
 .dvv-reloj{font-size:12px;padding:0 4px}
}