/* ==========================================================================
   SELLO BONO VIAJE - Insignia superpuesta en el hero de la home de hotel
   Se carga condicionalmente desde el propio call-template XSL (no en
   theme-config), solo cuando la subseccion del CMS tiene el sello activo.

   Escala responsive medida en vivo (getBoundingClientRect) contra la mascara
   de reservas (#searchFormSec) y el claim (#caption): el sello vive en la
   franja SUPERIOR del hero, asi que con ~260px despeja ambos con holgura en
   desktop y movil; solo el rango tablet (768-991px, hero de proporcion mas
   baja donde el claim sube) necesita bajar a 200px. Origen del PNG: 396x396
   (no escalar por encima). El texto del sello debe quedar legible.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Base = Desktop 992px - 1920px
   ---------------------------------------------------------------------------- */

#innerBanner .bono-viaje-badge-wrap {
	position: absolute;
	z-index: 3;
	top: 110px;
	right: 24px;
	pointer-events: none;
}

#innerBanner .bono-viaje-badge {
	display: block;
	width: 260px; /* legible y despeja mascara/claim (medido: 1366x768 y 1440x900) */
	line-height: 0;
	pointer-events: auto;
	transition: transform 0.3s ease;
}

#innerBanner .bono-viaje-badge img {
	display: block;
	width: 100%;
	height: auto;
	/* Sombra que respeta la forma del PNG transparente: separa el sello de fondos claros del hero */
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

#innerBanner a.bono-viaje-badge:hover,
#innerBanner a.bono-viaje-badge:focus-visible {
	transform: scale(1.05);
}

/* ----------------------------------------------------------------------------
   Desktop Grande (>1920px): mas espacio, sello algo mayor (sin pasar de 396)
   ---------------------------------------------------------------------------- */

@media (min-width: 1921px) {
	#innerBanner .bono-viaje-badge-wrap {
		top: 130px;
		right: 40px;
	}

	#innerBanner .bono-viaje-badge {
		width: 320px;
	}
}

/* ----------------------------------------------------------------------------
   Tablet y Movil (<992px): sello a la esquina superior, mas pegado al borde
   ---------------------------------------------------------------------------- */

@media (max-width: 991px) {
	#innerBanner .bono-viaje-badge-wrap {
		top: 80px;
		left: 50%;
		right: auto;
		transform: translateX(-50%); /* centrado horizontal en movil */
	}

	#innerBanner .bono-viaje-badge {
		width: 260px; /* movil: legible y sin overflow (medido: 390x844, 118px al claim) */
	}
}

/* ----------------------------------------------------------------------------
   Tablet (768px - 991px): el hero usa proporcion mas baja y el claim sube;
   260px lo rozaria, se baja a 200px (medido: 991x900 gap 33px, 768x1024 gap 41px)
   ---------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {
	#innerBanner .bono-viaje-badge {
		width: 200px;
	}
}

/* Reduced motion: sin transform de hover para usuarios sensibles al movimiento */
@media (prefers-reduced-motion: reduce) {
	#innerBanner a.bono-viaje-badge:hover,
	#innerBanner a.bono-viaje-badge:focus-visible {
		transform: none;
	}
}