/* Seasonal ambiance — overlays never steal clicks.
   Solo acentos scoped: NUNCA background/opacidad en body ni #fnc-navegation
   (rompe el muro). Todo vive en esta hoja, no en el tema. */

#fl-seasonal-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2147483000;
}

/* Ribete bajo el header. Desktop: margen logo (~12%). Móvil: casi al borde (~2%). */
.fl-seasonal-ledge {
	--fl-ledge-design-start: 12;
	--fl-ledge-start: 12;
	position: fixed;
	left: 0;
	width: 100%;
	height: 1.35rem;
	margin: 0;
	padding: 0;
	pointer-events: none;
	z-index: 1000001;
	line-height: 0;
	overflow: visible;
}

@media (max-width: 768px) {
	.fl-seasonal-ledge {
		--fl-ledge-start: 2;
	}

	.fl-seasonal-ledge--ice .fl-seasonal-ledge__svg {
		width: 112%;
		margin-left: -6%;
	}
}

/* Remapeo horizontal: slots diseñados desde 12% → start actual (desktop/móvil) */
.fl-seasonal-ledge__pumpkin,
.fl-seasonal-ledge__picado,
.fl-seasonal-ledge__skull,
.fl-seasonal-ledge__star,
.fl-seasonal-ledge__spark,
.fl-seasonal-ledge__fw,
.fl-seasonal-ledge__heart,
.fl-seasonal-ledge__petal,
.fl-seasonal-ledge__flower,
.fl-seasonal-ledge__balloon,
.fl-seasonal-ledge__gift,
.fl-seasonal-ledge__anni-spark {
	left: calc(
		(
			var(--fl-ledge-start)
			+ (var(--fl-x) - var(--fl-ledge-design-start))
				* (100 - var(--fl-ledge-start))
				/ (100 - var(--fl-ledge-design-start))
		) * 1%
	);
}

.fl-seasonal-ledge--halloween {
	height: 2.1rem;
}

.fl-seasonal-ledge--muertos {
	height: 2.55rem;
}

.fl-seasonal-ledge--ano-nuevo {
	height: 2.35rem;
}

.fl-seasonal-ledge--valentin {
	height: 2.0rem;
}

.fl-seasonal-ledge--pascua {
	height: 2.25rem;
}

.fl-seasonal-ledge--aniversario {
	height: 2.5rem;
}

.fl-seasonal-ledge__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge--ice .fl-seasonal-ledge__svg {
	filter: drop-shadow(0 2px 4px rgba(30, 60, 90, 0.14));
	transform: scaleY(var(--fl-ledge-size, 1));
	transform-origin: top center;
}

.fl-seasonal-ledge__pumpkins {
	position: relative;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__pumpkin {
	position: absolute;
	bottom: 0;
	width: 1.55rem;
	height: 1.4rem;
	transform: translateX(-50%) scale(calc(var(--fl-pk-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: bottom center;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
	opacity: 0.92;
	pointer-events: none;
}

.fl-seasonal-ledge__pumpkin-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fl-seasonal-ledge__muertos {
	position: relative;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__picado-row,
.fl-seasonal-ledge__skulls-row {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__picado {
	position: absolute;
	top: 0;
	width: 1.15rem;
	height: 1.55rem;
	transform: translateX(-50%) scale(calc(var(--fl-pp-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: top center;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
	opacity: 0.94;
	pointer-events: none;
}

.fl-seasonal-ledge__picado-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fl-seasonal-ledge__skull {
	position: absolute;
	bottom: 0;
	width: 1.35rem;
	height: 1.4rem;
	transform: translateX(-50%) scale(calc(var(--fl-sk-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: bottom center;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
	opacity: 0.95;
	pointer-events: none;
}

.fl-seasonal-ledge__skull-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fl-seasonal-ledge__ano-nuevo {
	position: relative;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__stars-row,
.fl-seasonal-ledge__sparks-row,
.fl-seasonal-ledge__fw-row {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__star {
	position: absolute;
	bottom: 0.15rem;
	width: 1.15rem;
	height: 1.15rem;
	transform: translateX(-50%) scale(calc(var(--fl-st-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: bottom center;
	filter: drop-shadow(0 0 4px rgba(255, 215, 106, 0.45));
	opacity: 0.92;
	pointer-events: none;
}

.fl-seasonal-ledge__spark {
	position: absolute;
	top: 0.1rem;
	width: 0.7rem;
	height: 0.7rem;
	transform: translateX(-50%) scale(calc(var(--fl-sp-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: center;
	filter: drop-shadow(0 0 3px rgba(232, 238, 248, 0.5));
	opacity: 0.85;
	pointer-events: none;
}

.fl-seasonal-ledge__fw {
	position: absolute;
	bottom: 0;
	width: 1.7rem;
	height: 1.7rem;
	transform: translateX(-50%) scale(calc(var(--fl-fw-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: bottom center;
	filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.4));
	opacity: 0.95;
	pointer-events: none;
}

.fl-seasonal-ledge__star-svg,
.fl-seasonal-ledge__spark-svg,
.fl-seasonal-ledge__fw-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fl-seasonal-ledge__valentin {
	position: relative;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__heart {
	position: absolute;
	bottom: 0;
	width: 1.25rem;
	height: 1.15rem;
	transform: translateX(-50%) scale(calc(var(--fl-ht-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: bottom center;
	filter: drop-shadow(0 2px 3px rgba(180, 40, 80, 0.35));
	opacity: 0.94;
	pointer-events: none;
}

.fl-seasonal-ledge__heart-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fl-seasonal-ledge__pascua {
	position: relative;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__petals-row,
.fl-seasonal-ledge__flowers-row {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__petal {
	position: absolute;
	top: 0.15rem;
	width: 0.7rem;
	height: 0.95rem;
	transform: translateX(-50%) rotate(-18deg) scale(calc(var(--fl-pt-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: center;
	filter: drop-shadow(0 1px 2px rgba(80, 40, 60, 0.2));
	opacity: 0.88;
	pointer-events: none;
}

.fl-seasonal-ledge__flower {
	position: absolute;
	bottom: 0;
	width: 1.35rem;
	height: 1.35rem;
	transform: translateX(-50%) scale(calc(var(--fl-fl-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: bottom center;
	filter: drop-shadow(0 2px 3px rgba(60, 80, 50, 0.25));
	opacity: 0.94;
	pointer-events: none;
}

.fl-seasonal-ledge__petal-svg,
.fl-seasonal-ledge__flower-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fl-seasonal-ledge__aniversario {
	position: relative;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__balloons-row,
.fl-seasonal-ledge__gifts-row,
.fl-seasonal-ledge__anni-sparks-row {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}

.fl-seasonal-ledge__balloon {
	position: absolute;
	top: 0;
	width: 1.05rem;
	height: 1.5rem;
	transform: translateX(-50%) scale(calc(var(--fl-bl-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: top center;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
	opacity: 0.94;
	pointer-events: none;
}

.fl-seasonal-ledge__gift {
	position: absolute;
	bottom: 0;
	width: 1.2rem;
	height: 1.1rem;
	transform: translateX(-50%) scale(calc(var(--fl-gf-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: bottom center;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
	opacity: 0.94;
	pointer-events: none;
}

.fl-seasonal-ledge__anni-spark {
	position: absolute;
	top: 0.35rem;
	width: 0.65rem;
	height: 0.65rem;
	transform: translateX(-50%) scale(calc(var(--fl-as-scale, 1) * var(--fl-ledge-size, 1)));
	transform-origin: center;
	filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.45));
	opacity: 0.85;
	pointer-events: none;
}

.fl-seasonal-ledge__balloon-svg,
.fl-seasonal-ledge__gift-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Tokens por preset */
body.fl-seasonal {
	--fl-seasonal-accent: #7dd3fc;
	--fl-seasonal-glow: rgba(125, 211, 252, 0.22);
}

body.fl-seasonal--halloween {
	--fl-seasonal-accent: #ff7a18;
	--fl-seasonal-glow: rgba(255, 122, 24, 0.2);
}

body.fl-seasonal--muertos {
	--fl-seasonal-accent: #e91e8c;
	--fl-seasonal-glow: rgba(155, 89, 182, 0.28);
}

body.fl-seasonal--navidad {
	--fl-seasonal-accent: #e8f4ff;
	--fl-seasonal-glow: rgba(56, 189, 248, 0.28);
}

body.fl-seasonal--ano-nuevo {
	--fl-seasonal-accent: #ffd76a;
	--fl-seasonal-glow: rgba(255, 215, 106, 0.25);
}

body.fl-seasonal--valentin {
	--fl-seasonal-accent: #ff6b8a;
	--fl-seasonal-glow: rgba(255, 107, 138, 0.22);
}

body.fl-seasonal--pascua {
	--fl-seasonal-accent: #9ae6b4;
	--fl-seasonal-glow: rgba(154, 230, 180, 0.22);
}

body.fl-seasonal--aniversario {
	--fl-seasonal-accent: #7dd3fc;
	--fl-seasonal-glow: rgba(125, 211, 252, 0.22);
}

.fl-seasonal-toggle {
	position: fixed;
	right: 8px;
	bottom: 8px;
	z-index: 2147483646;
	isolation: isolate;
	border: 0;
	border-radius: 4px;
	padding: 2px 5px;
	min-width: 0;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.28);
	color: rgba(255, 255, 255, 0.45);
	box-shadow: none;
	backdrop-filter: none;
	opacity: 0.55;
	pointer-events: auto;
}

.fl-seasonal-toggle:hover,
.fl-seasonal-toggle:focus-visible {
	opacity: 0.9;
	color: rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.45);
}

.fl-seasonal-toggle[data-state='off'] {
	opacity: 0.35;
	color: rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	#fl-seasonal-canvas {
		display: none !important;
	}
}