/**
 * Newsletter: variantes faixa (home), card (lateral) e bloco (celular).
 *
 * Classes mg-* porque o Tailwind do site é pré-compilado. O verde do botão é #13804f e não o
 * #22b573 do manual: com texto branco o verde claro fica em 2,6:1, abaixo do 4,5:1.
 *
 * @package GuiaWP
 * @since 2.5.450 - Valoar - 2026-09-14
 */

.mg-news {
	--mg-news-botao: #1266d6;
	position: relative;
	border-radius: 14px;
	padding: 22px;
	color: #fff;
	background: linear-gradient(150deg, #1266d6, #0d2b5c);
	font-family: Inter, system-ui, sans-serif;
}
.mg-news--bloco { --mg-news-botao: #13804f; padding: 20px; border-radius: 13px; }
/*
 * 2026-09-16 - Valoar: a FAIXA passou a ser a da arte (Home Morro Guia v2.dc.html, linha 575).
 *
 * Era azul-marinho chapado com botão azul sobre fundo azul — o dono comparou com o HTML e a
 * diferença era grande mesmo. Agora: degradê 100deg, envelope ao lado do título (e não acima),
 * e o botão verde, que é o que separa "Quero receber" do fundo.
 *
 * O verde é #13804f e NÃO o #22b573 da arte, pelo motivo que já está no topo deste arquivo: no
 * verde claro o texto branco fica em 2,6:1. É o mesmo verde do botão do Descubra, então os dois
 * continuam iguais entre si.
 */
.mg-news--faixa {
	--mg-news-botao: #13804f;
	background: linear-gradient(100deg, #1266d6, #0d2b5c);
	border-radius: 16px;
	padding: 28px 20px;
}
/* Correção da auditoria, etapa 8 (Home #9): título da faixa 17px (18px a partir de 768), como no protótipo. */
.mg-news--faixa .mg-news__titulo { font-size: 17px; }

.mg-news__icone {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 14px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .16);
}
.mg-news__icone svg { width: 22px; height: 22px; }

.mg-news__titulo {
	margin: 0 0 8px;
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #fff;
}
.mg-news__texto { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #eaf2fc; }

.mg-news__form { margin: 0; }
.mg-news__linha { display: grid; gap: 9px; }
.mg-news__campo {
	width: 100%;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: #fff;
	color: #0d2b5c;
	font: 500 14px/1.2 Inter, system-ui, sans-serif;
	box-sizing: border-box;
}
.mg-news__campo::placeholder { color: #52678a; opacity: 1; }
.mg-news__campo:focus { outline: 3px solid #ffb35c; outline-offset: 1px; }
.mg-news__campo[aria-invalid="true"] { border-color: #ffb35c; }

.mg-news__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 9px;
	background: var(--mg-news-botao);
	color: #fff;
	font: 700 14px/1 Inter, system-ui, sans-serif;
	cursor: pointer;
	transition: filter .15s ease;
}
.mg-news__seta { width: 15px; height: 15px; flex: none; }
.mg-news__botao:hover { filter: brightness(1.08); }
.mg-news__botao:focus-visible { outline: 3px solid #ffb35c; outline-offset: 2px; }
.mg-news__botao[disabled] { opacity: .7; cursor: progress; }

.mg-news__aceite {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	min-height: 44px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	cursor: pointer;
}
.mg-news__aceite input {
	flex: none;
	width: 18px; height: 18px;
	margin: 1px 0 0;
	accent-color: #22b573;
	cursor: pointer;
}
.mg-news__aceite input:focus-visible { outline: 3px solid #ffb35c; outline-offset: 2px; }
.mg-news__aceite a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* T5 (correção da auditoria, etapa 5): estados do link do consentimento. */
.mg-news__aceite a:hover { text-decoration-thickness: 2px; }
.mg-news__aceite a:active { opacity: .8; }
.mg-news__aceite a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.mg-news__aviso {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	background: rgba(255, 255, 255, .14);
	color: #fff;
}
.mg-news__aviso[data-tipo="ok"] { background: rgba(34, 181, 115, .28); }
.mg-news__aviso[data-tipo="erro"] { background: rgba(255, 122, 0, .3); }

/*
 * L1 (correção da auditoria, etapa 5): card claro para a lateral da listagem do blog, como no
 * protótipo. O post continua com o `card` escuro. Link do consentimento em #0d4fa8: o #1266d6
 * sobre #eef5fe fica no limite de 4,5:1.
 */
.mg-news--card-claro {
	--mg-news-botao: var(--mg-azul, #1266d6);
	padding: 20px;
	border: 1px solid var(--mg-borda-azul, #dce8f8);
	background: var(--mg-fundo-azul, #eef5fe);
	color: var(--mg-texto, #33496b);
}
.mg-news--card-claro .mg-news__cabeca {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
}
.mg-news--card-claro .mg-news__icone { width: 40px; height: 40px; margin: 0; background: #fff; color: var(--mg-azul, #1266d6); }
.mg-news--card-claro .mg-news__icone svg { width: 20px; height: 20px; }
.mg-news--card-claro .mg-news__titulo { margin: 0; font-size: 14.5px; line-height: 1.3; color: var(--mg-marinho, #0d2b5c); }
.mg-news--card-claro .mg-news__texto { grid-column: 1 / -1; margin: 14px 0; font-size: 12.5px; line-height: 1.6; color: var(--mg-texto, #33496b); }
.mg-news--card-claro .mg-news__campo { border-color: var(--mg-borda-campo, #e1e8f2); }
.mg-news--card-claro .mg-news__campo:focus { outline: 2px solid var(--mg-azul, #1266d6); outline-offset: 1px; border-color: transparent; }
.mg-news--card-claro .mg-news__campo[aria-invalid="true"] { border-color: var(--mg-erro, #b42318); }
.mg-news--card-claro .mg-news__botao { border-color: transparent; }
.mg-news--card-claro .mg-news__botao:hover { filter: none; background: var(--mg-azul-hover, #0d47a6); }
.mg-news--card-claro .mg-news__botao:focus-visible { outline: 2px solid var(--mg-marinho, #0d2b5c); outline-offset: 2px; }
.mg-news--card-claro .mg-news__aceite { color: var(--mg-texto, #33496b); }
.mg-news--card-claro .mg-news__aceite input { accent-color: var(--mg-azul, #1266d6); }
.mg-news--card-claro .mg-news__aceite input:focus-visible { outline-color: var(--mg-azul, #1266d6); }
.mg-news--card-claro .mg-news__aceite a { color: #0d4fa8; }
.mg-news--card-claro .mg-news__aceite a:hover { color: var(--mg-marinho, #0d2b5c); }
.mg-news--card-claro .mg-news__aceite a:focus-visible { outline-color: var(--mg-azul, #1266d6); }
.mg-news--card-claro .mg-news__aviso { background: #fff; color: var(--mg-texto, #33496b); }
.mg-news--card-claro .mg-news__aviso[data-tipo="ok"] { background: #e9f7f0; color: #0a6b42; }
.mg-news--card-claro .mg-news__aviso[data-tipo="erro"] { background: var(--mg-erro-fundo, #fef3f2); color: var(--mg-erro, #b42318); }

/* Fora da tela e fora do leitor de tela. display:none alguns robôs pulam. */
.mg-news__isca { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 768px) {
	/* Envelope | texto | formulário empurrado para a direita, como na arte. */
	.mg-news--faixa {
		display: flex;
		align-items: center;
		gap: 24px;
		padding: 24px 28px;
	}
	/*
	 * Grade e não flex: o parcial põe ícone, h2 e p como IRMÃOS dentro de .mg-news__cabeca, e num
	 * flex-row os três viram colunas — o texto ficava na mesma linha do título. Aqui o envelope
	 * ocupa a coluna 1 nas duas linhas, e título e texto empilham na coluna 2, como na arte.
	 */
	.mg-news--faixa .mg-news__cabeca {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 20px;
		align-items: center;
		flex: none;
	}
	.mg-news--faixa .mg-news__icone { width: 50px; height: 50px; margin-bottom: 0; border-radius: 12px; flex: none; grid-row: 1 / span 2; }
	.mg-news--faixa .mg-news__icone svg { width: 25px; height: 25px; }
	.mg-news--faixa .mg-news__titulo { font-size: 18px; margin-bottom: 7px; }
	.mg-news--faixa .mg-news__texto { margin-bottom: 0; font-size: 13px; }
	.mg-news--faixa .mg-news__form { width: min(520px, 100%); margin-left: auto; flex: none; }
	.mg-news--faixa .mg-news__linha { grid-template-columns: minmax(0, 1fr) auto; }
	.mg-news--faixa .mg-news__aceite { margin-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-news__botao { transition: none; }
}