/* JEM Builder - Frontend */

[data-jem-animation]:not(.jem-animate-in) {
	opacity: 0;
}

[data-jem-animation="fade-in"]:not(.jem-animate-in) { opacity: 0; }
[data-jem-animation="slide-up"]:not(.jem-animate-in) { opacity: 0; transform: translateY(30px); }
[data-jem-animation="slide-left"]:not(.jem-animate-in) { opacity: 0; transform: translateX(-30px); }
[data-jem-animation="zoom-in"]:not(.jem-animate-in) { opacity: 0; transform: scale(0.92); }

[data-jem-animation] {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.jem-animate-in {
	opacity: 1 !important;
	transform: none !important;
}

/* Aspect-ratio fijo para embeds (evita saltos de layout, ej. iframes de video) */
.jem-embed-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.jem-embed-wrapper iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Spacing responsive por breakpoint (CORREGIDO) ──
   Antes estas reglas estaban vacías y usaban un selector de atributo
   que ningún widget llegó a renderizar — el padding/margin de Tablet y
   Móvil se guardaba en el panel pero nunca se aplicaba de verdad. Ahora
   sí sobreescribe el padding/margin en cada punto de corte, usando las
   mismas variables CSS que cada widget ya trae puestas (--jem-pad-t,
   --jem-pad-m, --jem-mar-t, --jem-mar-m). Mismos puntos de corte que el
   resto del plugin: Tablet ≤782px, Móvil ≤480px. */
@media (max-width: 782px) {
	.jem-widget {
		padding: var(--jem-pad-t) !important;
		margin: var(--jem-mar-t) !important;
	}
}
@media (max-width: 480px) {
	.jem-widget {
		padding: var(--jem-pad-m) !important;
		margin: var(--jem-mar-m) !important;
	}
}

/* ── Tamaño de fuente responsive (Encabezado y Texto) ── */
@media (max-width: 782px) {
	.jem-widget-heading, .jem-widget-text {
		font-size: var(--jem-fs-t) !important;
	}
}
@media (max-width: 480px) {
	.jem-widget-heading, .jem-widget-text {
		font-size: var(--jem-fs-m) !important;
	}
}

/* ── Altura responsive del Espaciador (antes usaba 1024/600 y repetía
   un <style> por instancia — ahora estandarizado, una sola vez aquí) ── */
@media (max-width: 782px) {
	.jem-widget-spacer { height: var(--jem-h-t) !important; }
}
@media (max-width: 480px) {
	.jem-widget-spacer { height: var(--jem-h-m) !important; }
}

/* ── Ocultar por dispositivo ──
   Mismos puntos de corte que usa el resto del plugin: Escritorio ≥783px,
   Tablet 481-782px, Móvil ≤480px. */
@media (min-width: 783px) {
	.jem-hide-desktop { display: none !important; }
}
@media (max-width: 782px) and (min-width: 481px) {
	.jem-hide-tablet { display: none !important; }
}
@media (max-width: 480px) {
	.jem-hide-mobile { display: none !important; }
}