/* ==========================================================================
   ventana.css — página que se abre en la ventana flotante del reproductor.

   Sin barra, sin cabecera y sin pie: la ventana es el video. Sólo quedan dos
   cosas flotando encima, que aparecen al pasar el ratón: la X para cerrar y
   una marca discreta. Así se ve como un reproductor y no como una página.
   ========================================================================== */

html, body.ventana{height:100%;}
body.ventana{
  margin:0;min-height:100%;overflow:hidden;
  background:#000;color:#fff;
  /* El video ocupa la ventana y se centra; las franjas negras las pone el
     propio tamaño de la ventana, no un contenedor. */
  display:grid;place-items:center;
}

/* --- el video, a toda la ventana ------------------------------------------ */
.ventana__marco{
  position:relative;
  width:100%;height:100%;
  display:grid;place-items:center;
  background:#000;
}
.ventana__marco .reproductor__video{
  width:100%;height:100%;object-fit:contain;display:block;
  position:relative;z-index:1;
}

/* Portada y botón de play mientras no arranca. */
.ventana__marco .reproductor__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:0;background:#000;
}
.ventana__marco .reproductor__velo{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.15),rgba(0,0,0,.55));
}
.ventana__marco .reproductor__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(56px,10vmin,90px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(10,6,30,.5);backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.9);color:#fff;
  transition:var(--transicion);
}
.ventana__marco .reproductor__play:hover{
  background:var(--amarillo);color:var(--tinta);border-color:transparent;
  transform:translate(-50%,-50%) scale(1.08);
}
.ventana__marco .reproductor__play svg{width:38%;height:38%;margin-left:9%;}

/* El atributo hidden se anula si la regla fija «display»: se declara aparte. */
.ventana__marco .reproductor__play[hidden]{display:none;}
.ventana__marco .reproductor__poster[hidden]{display:none;}

/* Cuando el video ya corre, la portada y el play desaparecen. */
.ventana__marco.is-reproduciendo .reproductor__poster,
.ventana__marco.is-reproduciendo .reproductor__velo,
.ventana__marco.is-reproduciendo .reproductor__play{display:none;}

/* --- los mandos flotantes -------------------------------------------------- */
.ventana__cerrar{
  position:fixed;top:10px;right:10px;z-index:20;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(8,5,24,.6);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;
  opacity:0;transition:opacity var(--transicion),background var(--transicion);
}
.ventana__cerrar svg{width:14px;height:14px;}
.ventana__cerrar:hover{background:var(--rojo);border-color:transparent;}
.ventana__cerrar:focus-visible{opacity:1;outline:2px solid var(--amarillo);outline-offset:2px;}

.ventana__marca{
  position:fixed;left:12px;bottom:10px;z-index:20;
  display:block;opacity:0;transition:opacity var(--transicion);
  pointer-events:none;
}
.ventana__marca img{width:22px;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));}

/* Aparecen al pasar el ratón o al navegar con teclado. */
body.ventana:hover .ventana__cerrar,
body.ventana:hover .ventana__marca,
.ventana__cerrar:focus-visible,
.ventana__marca:focus-visible{opacity:1;}

/* En pantallas táctiles no hay «hover»: se dejan siempre visibles. */
@media (hover:none){
  .ventana__cerrar,.ventana__marca{opacity:1;}
}