/**
 * Logo 3D para Blocksy — estilos del frontend.
 *
 * No hay ninguna regla que afecte al logotipo ni a su contenedor: el visor es
 * una capa independiente que el JavaScript coloca encima con medidas en píxeles.
 * Así el encabezado conserva exactamente el mismo aspecto que sin el plugin.
 */

.l3db-viewer {
	position: absolute;
	z-index: 1;
	display: block;
	opacity: 0;
	background-color: transparent;
	/* Sin esto, girar el modelo dispara el arrastre nativo del navegador (el
	   fantasma del enlace) y el gesto se siente pegajoso. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	--poster-color: transparent;
	--progress-bar-color: transparent;
	--progress-mask: transparent;
	transition: opacity 0.35s ease;
}

.l3db-viewer.is-l3db-loaded {
	opacity: 1;
}

/* Sin controles el visor es decorativo y no debe robarle el clic al enlace. */
.l3db-viewer.l3db-inert {
	pointer-events: none;
}

/* Con los controles activos, el cursor anuncia que el modelo se puede girar. */
.l3db-viewer[camera-controls] {
	cursor: grab;
}

.l3db-viewer[camera-controls]:active {
	cursor: grabbing;
}

/* Ya sustituido: la imagen se oculta pero sigue reservando su espacio, de modo
   que la maquetación del encabezado no se mueve. */
img.l3db-swapped {
	visibility: hidden;
}

/* Mientras el modelo aún no ha aparecido, la imagen tampoco debe poder
   arrastrarse: el gesto empezaría antes de que el visor tome el control. */
img.l3db-logo {
	-webkit-user-drag: none;
}

.l3db-badge {
	position: absolute;
	z-index: 2;
	padding: 2px 6px;
	border: 0;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.65 );
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	cursor: pointer;
}

@media ( prefers-reduced-motion: reduce ) {
	.l3db-viewer {
		transition: none;
	}
}