/**
 * Monetix — Botão Monetix
 * Quatro variações no mesmo bloco: banner de aplicativo, selos das lojas,
 * barras simples e card. As cores vêm por custom properties no wrapper.
 */

/* =========================================================
   Base
========================================================= */
.mtx-btn {
	/*
	 * A base é clara, que é o fundo de artigo em que o bloco cai. Quem escolhe
	 * o tema escuro recebe as cores pelo wrapper, então elas nunca dependem
	 * destes valores — e um bloco sem variável nenhuma sai legível em vez de
	 * preto no meio do texto.
	 */
	--mtx-b-card: #ffffff;
	--mtx-b-title: #111827;
	--mtx-b-text: #4b5563;
	--mtx-b-accent: #2c3ab8;
	--mtx-b-btn: #2c3ab8;
	--mtx-b-btn-text: #ffffff;
	--mtx-b-aura: #7c3aed;
	--mtx-b-line: #e6e8f0;

	box-sizing: border-box;
	max-width: 560px;
	margin: 24px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.mtx-btn *,
.mtx-btn *::before,
.mtx-btn *::after {
	box-sizing: border-box;
}

/* =========================================================
   Selos das lojas
========================================================= */
.mtx-stores {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* Empilhados, os dois selos ficam do mesmo tamanho: com larguras diferentes o
   conjunto parece desalinhado. */
.mtx-stores:not(.mtx-stores--inline) .mtx-store {
	width: 240px;
}

.mtx-stores--inline {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.mtx-store,
.mtx-store:hover,
.mtx-store:focus,
.mtx-store:active,
.mtx-store:visited {
	position: relative;
	overflow: hidden;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 13px;
	min-width: 220px;
	padding: 9px 20px;
	color: #ffffff !important;
	text-decoration: none !important;
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 9px;
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mtx-store:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.6);
}

.mtx-store__logo {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.mtx-store__logo svg {
	width: 32px;
	height: 32px;
}

.mtx-store__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-align: left;
}

.mtx-store__small {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	opacity: 0.92;
}

/*
 * Reflexo cruzando o selo.
 *
 * Faixa estreita e de largura fixa, com o degradê na horizontal: num bloco
 * largo o degradê inclinado se espalha e vira um retângulo claro em vez de um
 * facho. A altura passa de 100% para o skew não deixar cantos vazios em cima
 * e embaixo.
 */
.mtx-store__shine {
	position: absolute;
	top: -25%;
	left: -60%;
	width: 46px;
	height: 150%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	transform: skewX(-22deg);
	/*
	 * Velocidade constante de propósito: com ease-in-out o facho arrasta
	 * devagar fora da vista e depois acelera, dando a impressão de aparecer
	 * já no meio do botão em vez de entrar pela borda.
	 */
	animation: mtx-store-shine 3.6s linear infinite;
	pointer-events: none;
}

@keyframes mtx-store-shine {
	/* Começa rente à borda esquerda (a faixa tem 46px mais a inclinação) e
	   sai inteira pela direita antes da pausa. */
	0%        { left: -28%; }
	45%, 100% { left: 112%; }
}

.mtx-store__name {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.3px;
}

/* =========================================================
   Banner do aplicativo
========================================================= */
/* Mais largo que as outras variações: são dois botões lado a lado. */
.mtx-btn--app-advanced {
	max-width: 660px;
}

.mtx-app {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: var(--mtx-b-card);
	border: 1px solid var(--mtx-b-line);
	border-radius: 18px;
	box-shadow: 0 16px 40px -18px rgba(17, 24, 39, 0.32), 0 2px 8px rgba(17, 24, 39, 0.05);
}

/* Coluna da esquerda: painel com degradê e o ícone centralizado. */
.mtx-app__media {
	position: relative;
	display: flex;
	flex: 0 0 30%;
	align-items: center;
	justify-content: center;
	min-height: 190px;
	overflow: hidden;
	background: var(--mtx-b-aura);
	background: radial-gradient(120% 120% at 50% 40%, var(--mtx-b-aura) 0%, #1c1040 52%, #0d0820 100%);
}

/* Anel de luz. A cor sai em branco translúcido, então acompanha qualquer
   cor de aura que o autor escolher. */
.mtx-app__content {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 22px 22px 20px;
}

.mtx-app__ring {
	position: absolute;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.05), inset 0 0 30px 6px rgba(255, 255, 255, 0.22);
	pointer-events: none;
}

.mtx-app__icon {
	position: relative;
	z-index: 1;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---- Efeitos do fundo (escolhidos no bloco) ---- */
.mtx-app__media[data-aura="pulse"] .mtx-app__ring {
	animation: mtx-a-pulse 3.2s ease-in-out infinite;
}

@keyframes mtx-a-pulse {
	0%, 100% { transform: scale(1);    opacity: 0.85; }
	50%      { transform: scale(1.12); opacity: 1; }
}

.mtx-app__media[data-aura="orbit"] .mtx-app__ring::after {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.8);
}

.mtx-app__media[data-aura="orbit"] .mtx-app__ring {
	animation: mtx-a-orbit 5s linear infinite;
}

@keyframes mtx-a-orbit {
	to { transform: rotate(360deg); }
}

.mtx-app__media[data-aura="float"] .mtx-app__icon {
	animation: mtx-a-float 4s ease-in-out infinite;
}

@keyframes mtx-a-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

.mtx-app__media[data-aura="glow"]::after {
	content: "";
	position: absolute;
	inset: -30%;
	background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.5), transparent 62%);
	animation: mtx-a-glow 3.6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes mtx-a-glow {
	0%, 100% { opacity: 0.25; transform: scale(0.92); }
	50%      { opacity: 0.7;  transform: scale(1.08); }
}

/* Logo do site no canto do banner.
   Seletor com dois níveis de propósito: a regra genérica que levanta os filhos
   acima da aura é .mtx-app > *:not(...) e sobrescreveria um seletor simples. */
.mtx-app .mtx-app__brand {
	position: absolute;
	top: 18px;
	right: 20px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	max-width: 104px;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/*
 * Logo de site costuma ser feita para fundo escuro — clara, muitas vezes
 * branca. No card claro ela sumiria, então ganha uma pastilha escura atrás,
 * como a etiqueta ganha no tema escuro. No tema escuro a logo já contrasta e
 * a pastilha não entra.
 */
.mtx-btn:not(.is-dark) .mtx-app__brand {
	padding: 6px 11px;
	background: rgba(17, 24, 39, 0.92);
	border-radius: 9px;
	box-shadow: 0 4px 12px -6px rgba(17, 24, 39, 0.6);
}

.mtx-app .mtx-app__brand:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.mtx-app .mtx-app__brand img {
	/* Altura fixa e largura livre: com max-width em porcentagem o tamanho
	   dependia do pai, que depende do filho, e a logo colapsava para zero. */
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 24px;
	max-width: 104px;
	object-fit: contain;
}

/*
 * Com a logo no canto, só as linhas do topo precisam desviar dela — a etiqueta
 * e o título. Recuar a coluna inteira roubava largura dos botões lá embaixo e
 * fazia os dois selos empilharem mesmo havendo espaço de sobra.
 */
.mtx-app.has-brand .mtx-app__eyebrow,
.mtx-app.has-brand .mtx-app__name {
	padding-right: 130px;
}

.mtx-app__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 5px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--mtx-b-accent);
}

.mtx-app__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: mtx-b-pulse 1.8s ease-in-out infinite;
}

@keyframes mtx-b-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(0.8); }
}

.mtx-app__name {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.4px;
	/* Sem cor própria, segue a cor de título: evita nome preto sobre card
	   escuro quando só o tema muda. */
	color: var(--mtx-b-app-name, var(--mtx-b-title));
}

/* Risco sob o título, na cor (ou degradê) escolhida no bloco. */
.mtx-app__underline {
	display: block;
	width: 62px;
	height: 4px;
	margin: 9px 0 12px;
	/* Valor de reserva dentro do var(): sem ele, uma variável ausente deixaria
	   a barra sem fundo — invisível, mas ainda ocupando espaço. */
	background: var(--mtx-b-underline, linear-gradient(90deg, #ff5f3d, #ff9a4d));
	border-radius: 3px;
}

.mtx-app__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.mtx-app__pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mtx-b-text);
	background: rgba(17, 24, 39, 0.05);
	border-radius: 999px;
}

.mtx-app__pill svg {
	flex: 0 0 auto;
	opacity: 0.75;
}

.mtx-app__pill--free {
	color: #0f7b3d;
	background: rgba(22, 163, 74, 0.12);
}

.mtx-app__desc {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mtx-b-text);
}

/*
 * Grade de uma coluna com largura max-content: a coluna fica do tamanho da
 * linha mais larga, e as outras esticam para preenchê-la. Com flex cada botão
 * ficaria do seu próprio tamanho, e "App Store" sairia menor que "Google Play".
 */
/*
 * Colunas de largura igual, lado a lado. O auto-fit com minmax cuida sozinho
 * do espaço curto: sem largura para duas, vira uma coluna só.
 */
.mtx-app__actions {
	display: grid;
	/*
	 * O máximo precisa ser 1fr: com um valor fixo, a grade conta quantas
	 * colunas cabem usando esse valor e só caberia uma. O teto de largura
	 * fica no próprio botão, logo abaixo.
	 */
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	justify-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
}

.mtx-app__actions .mtx-store {
	width: 100%;
	/* Com uma loja só, a coluna ocupa a linha inteira; o teto evita o botão
	   esticado de ponta a ponta. */
	max-width: 250px;
	min-width: 0;
	padding-left: 16px;
	padding-right: 16px;
}

.mtx-app__notice {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mtx-b-text);
	opacity: 0.75;
}

/* =========================================================
   Barras (variação simples e dentro do card)
========================================================= */
/*
 * As barras seguem o texto mais longo, em vez de ocupar a linha inteira: com
 * texto curto, a barra de largura total fica enorme e vazia. A coluna
 * max-content adota a largura do maior e as outras esticam até ela, então
 * continuam iguais entre si. O minmax(0,…) impede que um texto muito longo
 * estoure o contêiner.
 */
.mtx-bars {
	display: grid;
	grid-template-columns: minmax(0, max-content);
	justify-content: center;
	gap: 12px;
}

.mtx-bar,
.mtx-bar:hover,
.mtx-bar:focus,
.mtx-bar:active,
.mtx-bar:visited {
	--mtx-bar-bg: #e8341c;
	--mtx-bar-text: #ffffff;

	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	width: 100%;
	/* O respiro lateral define quanto a barra passa do texto: vem do bloco. */
	padding: 17px var(--mtx-bar-pad, 34px);
	font-family: inherit;
	font-size: var(--mtx-bar-size, 16px);
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--mtx-bar-text) !important;
	background: var(--mtx-bar-bg);
	border-radius: 10px;
	box-shadow: 0 6px 16px -8px rgba(17, 24, 39, 0.5);
	transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.15s ease;
}

.mtx-bar:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(17, 24, 39, 0.55);
}

.mtx-bar:active {
	transform: translateY(0);
}

.mtx-bar__label,
.mtx-bar__arrow {
	position: relative;
	z-index: 1;
}

/* Sem isto o texto vira o piso da barra e estoura a tela no celular. */
.mtx-bar__label {
	min-width: 0;
}

.mtx-bar__arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.2s ease;
}

.mtx-bar:hover .mtx-bar__arrow {
	transform: translateX(4px);
}

/* Pulsação leve. */
.mtx-bar.is-pulse {
	animation: mtx-b-beat 2.2s ease-in-out infinite;
}

@keyframes mtx-b-beat {
	0%, 100% { transform: scale(1); }
	55%      { transform: scale(1.018); }
}

.mtx-bar.is-pulse:hover {
	animation: none;
}

/* Reflexo passando. */
.mtx-bar__shine {
	position: absolute;
	top: 0;
	left: -130%;
	width: 55%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.42), transparent);
	transform: skewX(-20deg);
	opacity: 0;
}

.mtx-bar.is-shine .mtx-bar__shine {
	opacity: 1;
	animation: mtx-b-shine 3.4s infinite;
}

@keyframes mtx-b-shine {
	0%        { left: -130%; }
	55%, 100% { left: 135%; }
}

/* =========================================================
   Card
========================================================= */
/*
 * A chamada mora fora do cartão, sobre o fundo do artigo — que é claro mesmo
 * quando o card está no tema escuro. Seguir a cor de título deixaria a linha
 * branca no branco, então ela tem cor própria, escura nos dois temas.
 */
.mtx-card__intro {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--mtx-b-card-intro, #111827);
}

.mtx-card__intro-icon {
	display: inline-flex;
	color: var(--mtx-b-accent);
}

/* Mesma razão: o destaque do tema escuro é verde-água, ilegível no fundo claro. */
.mtx-btn.is-dark .mtx-card__intro-icon {
	color: currentColor;
}

.mtx-card {
	overflow: hidden;
	background: var(--mtx-b-card);
	border: 1px solid var(--mtx-b-line);
	border-radius: 14px;
	box-shadow: 0 10px 30px -16px rgba(17, 24, 39, 0.3);
}

.mtx-card__media {
	position: relative;
	line-height: 0;
}

.mtx-card__img {
	display: block;
	width: 100%;
	height: auto;
}

.mtx-card__badge {
	--mtx-b-badge: #2c3ab8;

	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 14px;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--mtx-b-badge);
	border-radius: 999px;
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6);
}

.mtx-card__body {
	padding: 16px 18px 18px;
}

.mtx-card__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.3px;
	color: var(--mtx-b-title);
}

.mtx-card__features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.mtx-card__feature {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 600;
	/* Fundo e texto vêm dos campos da pastilha; sem eles, o cinza do bloco. */
	color: var(--mtx-b-feat-text, var(--mtx-b-text));
	background: var(--mtx-b-feat-bg, #edeffb);
	/* Contorno na família do fundo: a linha cinza do bloco sujava o tom. */
	border: 1px solid var(--mtx-b-feat-line, #e3e6f2);
	border-radius: 999px;
}

/*
 * O check tem cor própria: é ele que dá o toque de cor na pastilha, e nem o
 * texto nem o destaque do bloco servem para isso.
 */
.mtx-card__feature svg {
	color: var(--mtx-b-feat-icon, #4f5bf7);
}

/*
 * O rodapé acompanha o texto das pastilhas: são as duas linhas de apoio do
 * card, e no tema escuro o cinza do bloco deixava esta apagada.
 */
.mtx-card__footnote {
	margin: 12px 0 0;
	font-size: 12.5px;
	font-weight: 500;
	text-align: center;
	color: var(--mtx-b-feat-text, var(--mtx-b-text));
}

/*
 * Dentro do card a barra usa a cor de botão do bloco quando o autor não
 * definir uma cor própria, e é a ação principal, então ele sai em degradê: a cor do bloco
 * clareada no canto de cima e cheia embaixo, com um brilho diagonal por cima.
 * O color-mix cai para a cor sólida em navegador antigo, que é o que a linha
 * de --mtx-bar-bg garante antes.
 */
.mtx-card .mtx-bar {
	--mtx-bar-bg: var(--mtx-b-btn);
	--mtx-bar-text: var(--mtx-b-btn-text);

	background:
		linear-gradient( 160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 58% ),
		linear-gradient( 135deg, color-mix( in srgb, var(--mtx-b-btn) 72%, #ffffff ), var(--mtx-b-btn) 62% );
	border-radius: 12px;
	box-shadow: 0 14px 26px -12px color-mix( in srgb, var(--mtx-b-btn) 70%, transparent );
}

/* =========================================================
   Tema escuro
   As cores principais vêm dos campos do bloco (o seletor de tema troca os
   valores). Aqui ficam os tons embutidos no CSS que sumiriam num fundo
   escuro: bordas, pills, etiqueta e os selos das lojas.
========================================================= */
.mtx-btn.is-dark {
	--mtx-b-line: rgba(255, 255, 255, 0.1);
}

.mtx-btn.is-dark .mtx-app {
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 46px -18px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Etiqueta vira pastilha, como no banner de referência. */
.mtx-btn.is-dark .mtx-app__eyebrow {
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.09);
	background: color-mix(in srgb, currentColor 14%, transparent);
	border-radius: 999px;
}

.mtx-btn.is-dark .mtx-app__pill {
	color: #e8eaf2;
	background: rgba(255, 255, 255, 0.08);
}

.mtx-btn.is-dark .mtx-app__pill--free {
	color: #6ee7a0;
	background: rgba(34, 197, 94, 0.16);
}

.mtx-btn.is-dark .mtx-app__notice {
	opacity: 0.65;
}

/*
 * O selo preto é o oficial das duas lojas, e é o que o público reconhece —
 * então ele fica. Sobre fundo escuro o problema é só a silhueta sumir, e a
 * solução que as próprias lojas recomendam é contorno claro. Somando um fio
 * de luz na aresta de cima e sombra embaixo, o botão ganha relevo e se
 * destaca do card sem precisar trocar de cor.
 */
.mtx-btn.is-dark .mtx-store,
.mtx-btn.is-dark .mtx-store:hover,
.mtx-btn.is-dark .mtx-store:focus,
.mtx-btn.is-dark .mtx-store:active,
.mtx-btn.is-dark .mtx-store:visited {
	color: #ffffff !important;
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.34);
	box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.mtx-btn.is-dark .mtx-store:hover {
	border-color: rgba(255, 255, 255, 0.6);
	box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Card e barras no escuro. */
.mtx-btn.is-dark .mtx-card {
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.85);
}

/*
 * A cor da pastilha no escuro vem dos campos, junto com a paleta do tema; aqui
 * fica só a borda, que não tem campo.
 */
.mtx-btn.is-dark .mtx-card__feature {
	--mtx-b-feat-line: rgba(255, 255, 255, 0.14);
}

/* =========================================================
   Responsivo e acessibilidade
========================================================= */
@media (max-width: 480px) {
	/* Sem largura para duas colunas: o painel vira uma faixa no topo. */
	.mtx-app {
		flex-direction: column;
	}

	.mtx-app__media {
		flex: 0 0 auto;
		min-height: 150px;
	}

	.mtx-app__ring {
		width: 100px;
		height: 100px;
	}

	.mtx-app__icon {
		width: 80px;
		height: 80px;
		border-radius: 19px;
	}

	.mtx-app__content {
		padding: 18px 16px 16px;
	}

	.mtx-app.has-brand .mtx-app__eyebrow,
	.mtx-app.has-brand .mtx-app__name {
		padding-right: 108px;
	}

	.mtx-app__name {
		font-size: 19px;
	}

	.mtx-app__actions {
		grid-template-columns: 1fr;
	}


	.mtx-store__logo svg {
		width: 28px;
		height: 28px;
	}

	.mtx-store__name {
		font-size: 20px;
	}

	/*
	 * No celular a barra ocupa a linha, e o minmax(0,…) segura o texto longo
	 * dentro da tela. O respiro escolhido no bloco continua valendo, mas com
	 * teto: 90px de cada lado não cabem em 375px de largura.
	 */
	.mtx-bars {
		grid-template-columns: minmax(0, 1fr);
	}

	.mtx-bar {
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: min( var( --mtx-bar-pad, 34px ), 16px );
		padding-right: min( var( --mtx-bar-pad, 34px ), 16px );
	}

	.mtx-card__title {
		font-size: 16.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtx-btn *,
	.mtx-btn *::before,
	.mtx-btn *::after {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Separador entre trechos: entra pelo CSS para o texto do HTML ficar limpo
 * (símbolo solto no meio da frase quebra a tradução do GTranslate).
 */
.mtx-dotted > span + span::before {
	content: "\00b7";
	margin: 0 7px;
	opacity: 0.65;
}

/* =========================================================
   Só no editor
========================================================= */
.mtx-btn-editor-preview > * {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.mtx-btn-editor-preview {
	position: relative;
	min-height: 60px;
}