:root {
			--widthMessage: 450px; /* Tamaño máximo en PC */
		}

		/* Ajuste para móviles */
		@media (max-width: 600px) {
			:root {
				--widthMessage: 90vw; /* 90% del ancho real en móvil */
			}
			
			#mensajePub {
				top: 40% !important; /* Un poco más arriba para que quepa todo */
			}
		}

		@keyframes slideInFromLeft {		
			0% {
				transform: translate(-200%, -50%); /* Empieza fuera de la pantalla a la izquierda */
				opacity: 0;
			}
			100% {
				transform: translate(-50%, -50%); /* Termina en su posición normal */
				opacity: 1;
			}		
		}

		@keyframes slideOutFromLeft {
			0% {
				transform: translate(-50%, -50%); /* Empieza en posición normal */
				opacity: 1;
			}
			100% {
				transform: translate(-200%, -50%); /* Termina en su posición inicial */
				opacity: 0;
			}
		}

		#mensajePub {
			width: var(--widthMessage);
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 9999;
			display: none;
		}

		/* Encabezado Rojo */
		.mensaje-top {
			display: flex;
			justify-content: space-between; /* Separa reloj de la X */
			align-items: center;           /* Centra verticalmente ambos */
			background: #c90202;
			padding: 5px 15px;
			/* border: 1px solid #babebe;
			box-sizing: border-box; */
		}

		.content-img {
			width: 100%;
			max-width: var(--widthMessage);
			max-height: none;
			/* aspect-ratio: 16 / 9; */
			overflow: hidden;  /* Evita que nada sobresalga */
			background-color: #FFFFFF;
			display: block;
			/* justify-content: center; /* Centrado horizontal */
		}
		.content-img video {
			width: 100%;
			height: 100%;
			object-fit: cover; /* Aquí está el truco mágico */
		}

		/* La imagen o video */
		.anuncio-img {
			height: auto;
			width: 100%;
			display: block;
			object-fit: cover;
		}

		/* Contenedor del Reloj */
		.base-timer {
			position: relative;
			width: 50px;  /* Tamaño fijo para que no se deforme */
			height: 50px;
		}

		/* Removes SVG styling that would hide the time label */
		.base-timer__circle {
			fill: none;
			stroke: none;
		}

		/* The SVG path that displays the timer's progress */
		.base-timer__path-elapsed {
			stroke-width: 3px;
			/* stroke: #bebaba; */
			stroke: #FFFFFF;
		}

		.base-timer__label {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: white;
			font-weight: bold;
			font-family: Arial, sans-serif;
			margin: 0;
		}
		
		.base-timer__svg {
			width: 100%;
			height: 100%;
			display: block; /* Evita espacios extra debajo del SVG */
		}

		/* Contenedor de la X */
		.base-close {
			display: flex;
			align-items: center;
		}

		.base-close i {
			font-size: 30px; /* X más grande para poder tocarla fácil con el dedo */
			color: white;
		}

		/* Clase que activará la animación */
		.mensaje-animado {
			animation: slideInFromLeft 0.5s ease-out forwards; /* Aplica la animación */
			opacity: 0; /* Inicialmente oculto */
		}

		/* Clase que desactivará la animación */
		.mensaje-animado-back {
			animation: slideOutFromLeft 1.5s ease-out forwards; /* Aplica la animación */
			opacity: 1; /* Inicialmente a la vista */
		}