		legend { font-weight:600; color:#333; padding:0 6px; font-size: 0.8rem; font-family: 'Inter'; text-align: justify;}

		.progress {
			width: 100%;
			height: 8px;
			background: #ccc;        /* fundo da barra */
			border-radius: 4px;
			overflow: hidden;
			margin: 10px 0 20px 0;   /* espaçamento */
		}

		.progress-bar {
			height: 100%;
			width: 0;                /* será controlada via style ou JS */
			background: #6699ff;     /* cor de preenchimento */
			transition: width 0.3s;  /* suaviza a animação */
		}

		.step { display:none; }
		.step.active { display:block; }
		.steps-progress { height:6px; background:#eee; border-radius:999px; margin:12px 0 20px; overflow:hidden; }
		.steps-progress > div { height:100%; width:0%; background:#008069; transition:width .25s; }
		.steps-nav { display:flex; gap:8px; margin-top:16px; }
		.steps-nav button { padding:10px 14px; border:0; border-radius:10px; background:#008069; color:#fff; cursor:pointer; }
		.steps-nav button[disabled] { opacity:.5; cursor:not-allowed; }
		.btn-steps{
		  padding:10px 14px; border:0; border-radius:10px; 
		  background:#6699ff; color:#fff; cursor:pointer;
		}
		.hint { font-size:.85rem; color:#666; margin-top:4px; }
		
		/* Adições para o modal - inicio */
			/* overlay */
			.mx-modal-backdrop {
			  position: fixed; inset: 0;
			  background: rgba(0,0,0,.35);
			  display: none;           /* começa oculto */
			  align-items: center; justify-content: center;
			  z-index: 99999;          /* bem alto */
			}

			/* caixinha */
			.mx-modal {
			  background: #fff; color: #333;
			  border-radius: 12px; padding: 16px 18px;
			  min-width: 280px; max-width: 92vw;
			  box-shadow: 0 10px 30px rgba(0,0,0,.15);
			  font-family: inherit;
			}

			/* corpo (ícone + textos) */
			.mx-modal-body {
			  display: flex; align-items: center; gap: 12px;
			}

			/* spinner */
			.mx-spinner {
			  width: 28px; height: 28px; border-radius: 50%;
			  border: 3px solid #e6ebff; border-top-color: #6699ff;
			  animation: mx-spin 0.8s linear infinite;
			}

			@keyframes mx-spin { to { transform: rotate(360deg); } }

			/* utilitário de exibição */
			.mx-show { display: flex !important; }
		/* Adições para o modal - final */










/* MOBILE – tirar margens/paddings e deixar full width */
@media (max-width: 768px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

}
