/* Intro aislada: no cambia los estilos ni el contenido de la página. */
#ciclope-welcome {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: #03121c;
  color: #fff;
  overflow: hidden;
}
#ciclope-welcome::backdrop { background: #03121c; }
#ciclope-welcome video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ciclope-welcome .welcome-volume {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 188px;
  box-sizing: border-box;
  padding: 16px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #07171ecc;
  border: 1px solid #a2e9ed30;
  border-radius: 28px;
}
#ciclope-welcome input {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 32px;
  height: 116px;
  min-height: 0;
  margin: 0;
  accent-color: #8bdfe2;
  cursor: pointer;
}
#ciclope-welcome button {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
}
#ciclope-welcome svg { width: 23px; height: 23px; }
#ciclope-welcome [hidden] { display: none; }
#ciclope-welcome :focus-visible { outline: 2px solid #8bdfe2; outline-offset: 3px; }
html.ciclope-welcome-open { overflow: hidden; }
/* La pieza vertical está pendiente: conservar el encuadre completo en teléfonos. */
@media (orientation: portrait) {
  #ciclope-welcome video { object-fit: contain; }
  #ciclope-welcome .welcome-volume {
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: none;
  }
}