/**
 * Estilos CSS para efectos de Figma en bloques de Gutenberg
 * Estos estilos se aplican automáticamente a los bloques importados de Figma
 *
 * @package MadridCrece
 */

/* Aplicar efectos a bloques con clase mc-figma-* */
.mc-figma-container,
.wp-block-group.mc-figma-FRAME,
.wp-block-group.mc-figma-GROUP,
.wp-block-group.mc-figma-COMPONENT {
	position: relative;
	box-sizing: border-box;
}

/* Efectos de sombra aplicados automáticamente */
.mc-figma-shadow-drop {
	filter: drop-shadow(var(--mc-shadow-x, 0px) var(--mc-shadow-y, 4px) var(--mc-shadow-blur, 8px) var(--mc-shadow-color, rgba(0, 0, 0, 0.1)));
}

.mc-figma-shadow-inner {
	box-shadow: inset var(--mc-shadow-x, 0px) var(--mc-shadow-y, 4px) var(--mc-shadow-blur, 8px) var(--mc-shadow-color, rgba(0, 0, 0, 0.1));
}

/* Efectos de blur */
.mc-figma-blur-layer {
	filter: blur(var(--mc-blur-radius, 5px));
}

.mc-figma-blur-background {
	backdrop-filter: blur(var(--mc-blur-radius, 5px));
}

/* Texto con efectos */
.mc-figma-text {
	margin: 0;
	padding: 0;
}

/* Imágenes con efectos */
.mc-figma-image {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Asegurar que los efectos se apliquen correctamente */
[class*="mc-figma-"] {
	position: relative;
}

/* Preservar efectos en bloques de grupo */
.wp-block-group[class*="mc-figma-"] {
	position: relative;
}

/* Aplicar efectos a párrafos y headings */
.wp-block-paragraph.mc-figma-text,
.wp-block-heading.mc-figma-text {
	position: relative;
}