/* Página del video de Libreta: el video ocupa toda la pantalla, sobre el papel del anotador */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #F8E480;
  background-image: repeating-linear-gradient(180deg, transparent 0 52px, #A9C3E6 52px 54px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.marco { position: relative; width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; }
video { width: 100%; height: 100%; object-fit: contain; background: transparent; display: block; }
/* Botón para activar el sonido (los navegadores solo dejan arrancar el video sin sonido) */
.sonido {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  border: 0; border-radius: 999px; padding: 16px 28px; cursor: pointer;
  background: #141F44; color: #fff; font-size: 18px; font-weight: 700;
  box-shadow: 0 10px 28px rgba(20,31,68,0.35); display: flex; align-items: center; gap: 10px;
}
.sonido[hidden] { display: none; }