/* ═══════════════════════════════════════════════
   Banne Frontend CSS
   Imagen lateral derecha + fade-in desde derecha
═══════════════════════════════════════════════ */

/* ── Wrapper ── */
#banne-wrapper {
	position: fixed;
	right: 0;
	top: calc(50% + 100px);
	transform: translateY(-50%) translateX(100%);
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	/* Fade-in slide desde la derecha */
	opacity: 0;
	animation: banneSlideIn .7s cubic-bezier(.25, .46, .45, .94) .4s forwards;
	will-change: transform, opacity;
}

/* Estado: cerrado (JS agrega esta clase) */
#banne-wrapper.banne-hidden {
	display: none !important;
}

/* ── Keyframes ── */
@keyframes banneSlideIn {
	0% {
		opacity: 0;
		transform: translateY(-50%) translateX(100%);
	}
	100% {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

/* ── Imagen ── */
#banne-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px 0 0 12px;
	box-shadow: -6px 0 30px rgba(0, 0, 0, .18);
	object-fit: cover;
}

/* ── Botón cerrar ── */
#banne-close {
	position: absolute;
	top: 8px;
	left: -36px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, transform .2s;
	z-index: 2147483647;
}

#banne-close:hover {
	background: rgba(0, 0, 0, .8);
	transform: scale(1.1);
}

/* ── Responsive ── */

/* Tablet: imagen más angosta */
@media (max-width: 1024px) {
	#banne-wrapper {
		max-width: 140px !important;
	}
}

/* Móvil: ocultar banner lateral */
@media (max-width: 768px) {
	#banne-wrapper {
		display: none !important;
	}
}