/* ============ Cubo ProSpaces ============ */
.cps-wrap,
.cps-wrap *,
.cps-wrap *::before,
.cps-wrap *::after { box-sizing: border-box; }

.cps-wrap {
	width: 100%;
	margin: 0 auto;
	padding: 28px clamp(8px, 5vw, 48px) 8px;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.cps-wrap:focus-visible {
	outline: 2px dashed rgba(var(--cps-rgb, 225, 15, 17), .8);
	outline-offset: 4px;
}

/* Contenedor de medidas: todo el cubo se dimensiona con cqw a partir del ancho/alto/profundidad del admin */
/* Medidas en px sin unidad: --cps-wn/hn/dn = ancho, alto, profundidad; --cps-vw/vh = tamaño total visible.
   --cps-u = cuánto mide 1px "virtual" dentro del contenedor (todo escala con el ancho disponible). */
.cps-stage {
	container-type: inline-size;
	width: min(100%, calc(var(--cps-vw, 600) * 1px));
	margin: 0 auto;
	--cps-u: calc(100cqw / var(--cps-vw, 600));
	--cps-w: calc(var(--cps-u) * var(--cps-wn, 600));
	--cps-h: calc(var(--cps-u) * var(--cps-hn, 363));
	--cps-d: calc(var(--cps-u) * var(--cps-dn, 360));
}

.cps-scene {
	position: relative;
	width: 100%;
	aspect-ratio: var(--cps-vw, 600) / var(--cps-vh, 363);
	perspective: calc(var(--cps-w) * 2.4);
	perspective-origin: 50% -30%;
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}
.cps-wrap.is-dragging .cps-scene { cursor: grabbing; }
.cps-scene img,
.cps-scene a { -webkit-user-drag: none; }

.cps-cube {
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--cps-w);
	height: var(--cps-h);
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--cps-d) / -2)) rotateY(var(--cps-rot, 0deg));
	transition: transform .7s cubic-bezier(.22, .8, .24, 1);
	will-change: transform;
}
.cps-wrap.is-dragging .cps-cube { transition: none; }

/* ---- Perspectiva Skew: proyección oblicua (sin perspectiva cónica) ----
   La profundidad (eje Z) se desplaza hacia arriba-derecha según --cps-skx / --cps-sky. */
.cps-skew .cps-scene { perspective: none; }
.cps-skew .cps-cube {
	transform:
		matrix3d(1, 0, 0, 0,  0, 1, 0, 0,  var(--cps-skx, -.95), var(--cps-sky, .31), 1, 0,  0, 0, 0, 1)
		translateZ(calc(var(--cps-d) / -2))
		rotateY(var(--cps-rot, 0deg));
}

/* ---- Paneles ---- */
.cps-face,
.cps-cap,
.cps-wire-face { position: absolute; }

.cps-face,
.cps-cap {
	background: rgba(var(--cps-rgb, 225, 15, 17), var(--cps-alpha, .9));
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Posición / tamaño de cada cara */
.cps-front, .cps-back {
	left: 0; top: 0; width: 100%; height: 100%;
}
.cps-left, .cps-right {
	top: 0; height: 100%;
	width: var(--cps-d);
	left: calc((100% - var(--cps-d)) / 2);
}
.cps-top, .cps-bottom {
	left: 0; width: 100%;
	height: var(--cps-d);
	top: calc((100% - var(--cps-d)) / 2);
}

/* Transformaciones 3D (--off = separación para las líneas del wireframe) */
.cps-wire-face { --off: 1px; }
.cps-front  { transform: translateZ(calc(var(--cps-d) / 2 + var(--off, 0px))); }
.cps-back   { transform: rotateY(180deg) translateZ(calc(var(--cps-d) / 2 + var(--off, 0px))); }
.cps-right  { transform: rotateY(90deg)  translateZ(calc(var(--cps-w) / 2 + var(--off, 0px))); }
.cps-left   { transform: rotateY(-90deg) translateZ(calc(var(--cps-w) / 2 + var(--off, 0px))); }
.cps-top    { transform: rotateX(90deg)  translateZ(calc(var(--cps-h) / 2 + var(--off, 0px))); }
.cps-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cps-h) / 2 + var(--off, 0px))); }

/* Hover: otro color y otra opacidad en la cara bajo el mouse */
.cps-face { transition: background-color .25s ease; }
@media (hover: hover) {
	.cps-wrap:not(.is-dragging) .cps-face:hover {
		background: rgba(var(--cps-hover-rgb, 163, 11, 13), var(--cps-hover-alpha, 1));
	}
}

/* Contenido */
.cps-face[data-href] { cursor: pointer; }
.cps-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6%;
	overflow: hidden;
	color: var(--cps-text, #fff);
	font-size: clamp(14px, 3.2cqw, 32px);
	line-height: 1.25;
}
.cps-content > * { max-width: 100%; }
.cps-content h1, .cps-content h2, .cps-content h3,
.cps-content h4, .cps-content p { color: inherit; margin: 0 0 .4em; }
.cps-content a { color: inherit; }
.cps-content img { max-width: 100%; height: auto; }

/* Wireframe */
.cps-wire-face {
	border: 2px solid var(--cps-wire, #fff);
	box-shadow: 0 0 10px var(--cps-wire, #fff), inset 0 0 10px var(--cps-wire, #fff);
	pointer-events: none;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

/* Controles */
.cps-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 22px;
}
.cps-wrap .cps-btn {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--cps-rgb, 225, 15, 17));
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: transform .2s ease;
}
.cps-wrap .cps-btn:hover { transform: scale(1.1); }
.cps-wrap .cps-btn:focus-visible,
.cps-wrap .cps-dot:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.cps-dots { display: flex; gap: 10px; }
.cps-wrap .cps-dot {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgb(var(--cps-rgb, 225, 15, 17));
	background: transparent;
	cursor: pointer;
	box-shadow: none;
	transition: background .2s ease, transform .2s ease;
}
.cps-wrap .cps-dot.is-active {
	background: rgb(var(--cps-rgb, 225, 15, 17));
	transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
	.cps-cube { transition-duration: .01s; }
}