/**
 * Campo de glifos. El color de la marca es `color` y el del acento es
 * --ccpw-glyph-accent: ambos heredan de Global Styles si el proyecto no los fija.
 */
.ccpw-glyph-field {
	--ccpw-glyph-accent: var(--e-global-color-primary, currentColor);
	--ccpw-glyph-offset: var(--ccpw-space-3, 24px);
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
	color: var(--e-global-color-text, currentColor);
	pointer-events: none;
}

.ccpw-glyph-field__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Como fondo: ocupa el contenedor padre y queda detrás del contenido. */
.elementor-widget.elementor-widget-ccpw-glyph-field.ccpw-glyph-field--fill-yes {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

.elementor-widget-ccpw-glyph-field.ccpw-glyph-field--fill-yes .ccpw-glyph-field {
	height: 100%;
}

.ccpw-glyph-field__readout {
	position: absolute;
	margin: 0;
	font: 400 11px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: currentColor;
	opacity: .85;
}

.ccpw-glyph-field__readout b {
	font-weight: 500;
	opacity: 1;
}

.ccpw-glyph-field--readout-bottom-right .ccpw-glyph-field__readout { right: var(--ccpw-glyph-offset); bottom: var(--ccpw-glyph-offset); text-align: right; }
.ccpw-glyph-field--readout-bottom-left .ccpw-glyph-field__readout { left: var(--ccpw-glyph-offset); bottom: var(--ccpw-glyph-offset); text-align: left; }
.ccpw-glyph-field--readout-top-right .ccpw-glyph-field__readout { right: var(--ccpw-glyph-offset); top: var(--ccpw-glyph-offset); text-align: right; }
.ccpw-glyph-field--readout-top-left .ccpw-glyph-field__readout { left: var(--ccpw-glyph-offset); top: var(--ccpw-glyph-offset); text-align: left; }

@media (max-width: 767px) {
	.ccpw-glyph-field__readout { display: none; }
}