/*
 * Mapa Numerologico: direcao cosmica, por decisao do dono do site em 08/11/2026.
 *
 * ESCOPO: todo seletor vive sob .mn-cosmos, e os assets so entram em /mapa-numerologico/.
 * Dupla protecao de proposito: o resto do site mantem o design Marinho e Dourado ativo.
 *
 * Mantido do design do site: tipografia Cormorant Garamond e Figtree, coluna de leitura de
 * 680px, dourado restrito a numeral e filete, contraste minimo de 4.5:1, pouca animacao.
 * O ceu estrelado e CSS puro: nenhuma imagem, nenhuma foto de banco, nenhum peso extra.
 */

body.mn-cosmos {
	--mn-fundo: #0B1026;
	--mn-fundo-roxo: #1A1033;
	--mn-superficie: rgba(255, 255, 255, 0.045);
	--mn-filete: rgba(176, 138, 74, 0.32);
	--mn-texto: #FAF8F3;
	--mn-suave: #AEB6D4;
	--mn-ouro: #B08A4A;
	--mn-acao: #2A3B74;
	--mn-acao-hover: #35498C;
	--mn-erro: #F0A6AE;
	--mn-coluna: 680px;
	--mn-raio: 6px;

	position: relative;
	isolation: isolate;
	background-color: var(--mn-fundo);
	color: var(--mn-texto);
	font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 18px;
	line-height: 1.65;
	overflow-x: hidden;
}

/* Poeira cosmica: tres camadas de pontos em escalas diferentes, sem imagem. */
body.mn-cosmos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		radial-gradient(1px 1px at 12% 18%, rgba(250, 248, 243, 0.85) 50%, transparent 50%),
		radial-gradient(1px 1px at 72% 8%, rgba(250, 248, 243, 0.6) 50%, transparent 50%),
		radial-gradient(2px 2px at 38% 62%, rgba(176, 138, 74, 0.55) 50%, transparent 50%),
		radial-gradient(1px 1px at 88% 44%, rgba(250, 248, 243, 0.5) 50%, transparent 50%),
		radial-gradient(1px 1px at 24% 84%, rgba(250, 248, 243, 0.45) 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 58% 32%, rgba(250, 248, 243, 0.4) 50%, transparent 50%);
	background-size: 520px 520px, 380px 380px, 700px 700px, 460px 460px, 610px 610px, 300px 300px;
	opacity: 0.9;
}

/* Nebulosa: dois halos muito difusos, sem brilho duro e sem neon. */
body.mn-cosmos::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 45% at 18% 12%, rgba(46, 27, 71, 0.55), transparent 70%),
		radial-gradient(50% 40% at 82% 78%, rgba(27, 42, 85, 0.5), transparent 72%);
	pointer-events: none;
}

body.mn-cosmos > * { position: relative; z-index: 1; }

.mn-cosmos .mn-area {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.mn-cosmos .mn-coluna { max-width: var(--mn-coluna); margin: 0 auto; }

.mn-cosmos h1,
.mn-cosmos h2,
.mn-cosmos h3,
.mn-cosmos .mn-numeral {
	font-family: "Cormorant Garamond", Georgia, serif;
	line-height: 1.12;
	margin: 0 0 16px;
	font-weight: 600;
}

/*
 * Cor de titulo. O kit do Elementor define cor para h2 e h3 com a mesma especificidade da
 * regra acima, e vence por ordem de carga. Para o conteudo injetado em #mn-resultado usamos
 * o ID, que ganha sem precisar de !important.
 */
.mn-cosmos h1,
.mn-cosmos h2,
.mn-cosmos h3,
body.mn-cosmos #mn-resultado h2,
body.mn-cosmos #mn-resultado h3,
body.mn-cosmos #mn-resultado p,
body.mn-cosmos #mn-resultado li {
	color: var(--mn-texto);
}

body.mn-cosmos #mn-resultado .mn-numeral { color: var(--mn-ouro); }
body.mn-cosmos #mn-resultado .mn-suave,
body.mn-cosmos #mn-resultado .mn-memoria { color: var(--mn-suave); }
body.mn-cosmos #mn-resultado .mn-rotulo { color: var(--mn-ouro); }
body.mn-cosmos #mn-resultado .mn-tema .mn-rotulo { color: var(--mn-tinta); }
body.mn-cosmos #mn-resultado .mn-camada { color: var(--mn-ouro); }

/*
 * O formulario precisa da mesma blindagem por ID que o resultado. O kit do Elementor define
 * cor e tamanho para label com especificidade que vence uma classe, e o rotulo saia em tom
 * escuro sobre o fundo cosmico, praticamente invisivel. Encontrado medindo contraste de
 * elemento com texto proprio, depois de um screenshot ter passado batido.
 */
body.mn-cosmos #mn-form label {
	color: var(--mn-texto);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}

/*
 * Campos: o Elementor impoe fundo branco com especificidade que vence uma classe. Definir so
 * a cor do texto aqui deixa claro sobre branco e o visitante nao enxerga o que digita. Fundo e
 * cor andam juntos, sempre, e por ID.
 */
body.mn-cosmos #mn-form input[type="text"],
body.mn-cosmos #mn-form input[type="date"] {
	background-color: #0E142E;
	background-image: none;
	color: var(--mn-texto);
	border: 1px solid rgba(250, 248, 243, 0.28);
}

body.mn-cosmos #mn-form input[type="text"]::placeholder,
body.mn-cosmos #mn-form input[type="date"]::placeholder {
	color: #B9C0DA;
	opacity: 1;
}
body.mn-cosmos #mn-form .mn-suave { color: var(--mn-suave); }
body.mn-cosmos #mn-form .mn-erro { color: var(--mn-erro); }
body.mn-cosmos #mn-form .mn-botao { color: var(--mn-texto); }
body.mn-cosmos .mn-aviso p { color: var(--mn-texto); }
body.mn-cosmos .mn-metodo li { color: var(--mn-texto); }

.mn-cosmos h1 { font-size: 44px; }
.mn-cosmos h2 { font-size: 32px; }
.mn-cosmos h3 { font-size: 24px; }
.mn-cosmos p { margin: 0 0 16px; }
.mn-cosmos .mn-suave { color: var(--mn-suave); }

.mn-cosmos .mn-rotulo {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--mn-ouro);
}

/* Filete decorativo dourado, usado com parcimonia. */
.mn-cosmos .mn-filete {
	width: 48px;
	height: 1px;
	background: var(--mn-ouro);
	border: 0;
	margin: 0 0 24px;
}

/* Formulario */
.mn-cosmos .mn-form {
	background: var(--mn-superficie);
	border: 1px solid var(--mn-filete);
	border-radius: var(--mn-raio);
	padding: 32px;
	backdrop-filter: blur(2px);
}

.mn-cosmos label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 8px;
	color: var(--mn-texto);
}

.mn-cosmos input[type="text"],
.mn-cosmos input[type="date"] {
	width: 100%;
	box-sizing: border-box;
	background: rgba(11, 16, 38, 0.72);
	border: 1px solid rgba(250, 248, 243, 0.22);
	border-radius: var(--mn-raio);
	color: var(--mn-texto);
	font-family: inherit;
	font-size: 17px;
	padding: 14px 16px;
	margin: 0 0 20px;
}

.mn-cosmos input::placeholder { color: var(--mn-suave); opacity: 1; }

.mn-cosmos input:focus-visible {
	outline: none;
	border-color: var(--mn-ouro);
	box-shadow: 0 0 0 3px rgba(176, 138, 74, 0.28);
}

.mn-cosmos .mn-check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 24px;
}

.mn-cosmos .mn-check input { margin-top: 5px; flex: 0 0 auto; }

.mn-cosmos .mn-check label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	color: var(--mn-suave);
}

.mn-cosmos .mn-botao {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	background: var(--mn-acao);
	color: var(--mn-texto);
	border: 1px solid rgba(250, 248, 243, 0.18);
	border-radius: var(--mn-raio);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 17px 32px;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.mn-cosmos .mn-botao:hover { background: var(--mn-acao-hover); }
.mn-cosmos .mn-botao[disabled] { opacity: 0.55; cursor: progress; }

.mn-cosmos .mn-erro {
	color: var(--mn-erro);
	font-size: 15px;
	margin: -12px 0 16px;
}

/* Cartoes de numero */
.mn-cosmos .mn-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}

.mn-cosmos .mn-cartao {
	background: var(--mn-superficie);
	border: 1px solid var(--mn-filete);
	border-radius: var(--mn-raio);
	padding: 24px;
}

.mn-cosmos .mn-cartao .mn-numeral {
	font-size: 72px;
	font-weight: 300;
	color: var(--mn-ouro);
	line-height: 1;
	margin: 0 0 8px;
}

.mn-cosmos .mn-cartao h3 { font-size: 22px; }
.mn-cosmos .mn-cartao p { font-size: 16px; }

.mn-cosmos .mn-camada {
	font-size: 13px;
	color: var(--mn-ouro);
	letter-spacing: 0.08em;
}

/* Memoria de calculo: o visitante precisa poder auditar a conta. */
.mn-cosmos .mn-memoria {
	font-size: 15px;
	color: var(--mn-suave);
	border-top: 1px solid var(--mn-filete);
	margin-top: 16px;
	padding-top: 12px;
}

.mn-cosmos .mn-memoria b { color: var(--mn-texto); font-weight: 600; }

/* Caixa de aviso */
.mn-cosmos .mn-aviso {
	border: 1px solid var(--mn-filete);
	border-left: 3px solid var(--mn-ouro);
	border-radius: var(--mn-raio);
	background: rgba(26, 16, 51, 0.5);
	padding: 24px 28px;
	font-size: 16px;
}

.mn-cosmos .mn-aviso p:last-child { margin-bottom: 0; }

/* Compartilhar */
.mn-cosmos .mn-share { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }

.mn-cosmos .mn-share button {
	background: transparent;
	color: var(--mn-ouro);
	border: 1px solid var(--mn-ouro);
	border-radius: var(--mn-raio);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	padding: 12px 20px;
	cursor: pointer;
}

.mn-cosmos .mn-share button:hover { background: rgba(176, 138, 74, 0.12); }

/* Espacos de anuncio: ocultos ate serem ativados nas opcoes. */
.mn-cosmos .mn-ad { display: none; }
.mn-cosmos .mn-ad.mn-ad-ativo { display: block; margin: 32px 0; }

.mn-cosmos .mn-oculto { display: none; }

/*
 * Secoes tematicas. A paleta pedida no briefing (rose, verde, azul) entra como tinta de
 * detalhe sobre o fundo cosmico: filete, icone e borda. O texto continua em #FAF8F3 para
 * manter contraste bem acima de 4.5:1. Nenhum bloco inteiro recebe cor.
 */
.mn-cosmos .mn-tema {
	--mn-tinta: var(--mn-ouro);
	border-left: 2px solid var(--mn-tinta);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 70%);
	border-radius: 0 var(--mn-raio) var(--mn-raio) 0;
	padding: 24px 28px;
	margin: 0 0 24px;
	max-width: var(--mn-coluna);
}

.mn-cosmos .mn-tema .mn-filete { background: var(--mn-tinta); }
.mn-cosmos .mn-tema .mn-rotulo { color: var(--mn-tinta); }

.mn-cosmos .mn-tema h2 {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mn-cosmos .mn-icone {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--mn-tinta);
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mn-cosmos .mn-tema-amor { --mn-tinta: #E8A0AE; }
.mn-cosmos .mn-tema-carreira { --mn-tinta: #7FC9A8; }
.mn-cosmos .mn-tema-espiritual { --mn-tinta: #8FB6E8; }
.mn-cosmos .mn-tema-talentos { --mn-tinta: #B08A4A; }

.mn-cosmos .mn-tema ul { margin: 0 0 8px; padding-left: 22px; }
.mn-cosmos .mn-tema li { margin: 0 0 10px; }

@media (max-width: 782px) {
	.mn-cosmos .mn-tema { padding: 20px 18px; }
	.mn-cosmos .mn-tema h2 { gap: 10px; }
	.mn-cosmos .mn-icone { width: 22px; height: 22px; }
}

@media (max-width: 782px) {
	body.mn-cosmos { font-size: 17px; }
	.mn-cosmos h1 { font-size: 32px; }
	.mn-cosmos h2 { font-size: 26px; }
	.mn-cosmos .mn-form { padding: 24px 20px; }
	.mn-cosmos .mn-grade { grid-template-columns: 1fr; }
	.mn-cosmos .mn-cartao .mn-numeral { font-size: 64px; }
	.mn-cosmos .mn-share button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mn-cosmos .mn-botao { transition: none; }
}