/**
 * Univer Menu — drawer lateral.
 * Escopo todo sob .um-* para o tema nao vazar estilo aqui dentro.
 */

/* O botao tem exatamente o tamanho do icone.
   Tudo com !important porque temas costumam estilizar `button` direto —
   padding, altura minima, fundo e borda — e regra direta no elemento vence
   uma classe sozinha. Sem isso o botao nasce com folga e nao da para
   encostar ele nos vizinhos. */
.um-abrir,
button.um-abrir {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: currentColor !important;
	cursor: pointer;
	line-height: 0 !important;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	inline-size: auto !important;
	block-size: auto !important;
	vertical-align: middle;
	text-transform: none !important;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.um-abrir:hover,
.um-abrir:focus,
.um-abrir:active {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: currentColor !important;
	transform: none !important;
}

/* O Elementor envolve o shortcode numa div de bloco que ocupa a largura
   toda (no caso do cliente: 384px de largura para um botao de 26px). Isso
   joga o botao para uma linha propria. Encolhemos a caixa ate o conteudo.

   O :has() so casa quando a div realmente contem o nosso botao, entao
   nenhum outro shortcode do site e afetado. */
/* O widget do Elementor pedia 375px de largura para um botao de 26px, entao
   nao cabia na linha dos outros icones e quebrava para baixo. Medido no site
   real: antes 375px em x=0/y=781; depois 26px em x=326, na mesma linha do
   item vizinho.

   `.um-host` e posto pelo JS; o :has() faz o mesmo antes do JS rodar, para
   nao existir um piscar de layout. Os dois so casam quando o botao do menu
   esta de fato la dentro — nenhum outro shortcode do site e tocado. */
.um-host,
.elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .um-abrir) {
	inline-size: auto !important;
	max-inline-size: none !important;
	flex: 0 0 auto !important;
}

.elementor-shortcode:has(> .um-abrir),
.elementor-widget-shortcode .elementor-widget-container:has(.um-abrir),
.elementor-widget-shortcode:has(.um-abrir) > .elementor-widget-container {
	display: inline-flex !important;
	align-items: center;
	inline-size: auto !important;
	max-inline-size: none;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	vertical-align: middle;
}

/* O SVG/IMG e quem define a caixa. `block` mata o espaco fantasma que o
   navegador reserva embaixo de elementos inline. */
.um-abrir > svg,
.um-abrir > img {
	display: block !important;
	margin: 0 !important;
	max-inline-size: none !important;
}

.um-abrir:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.um-overlay {
	--um-ink: #101211;
	--um-muted: #6f7573;
	--um-faint: #9aa09d;
	--um-line: #e9ebea;
	--um-surface: #fff;
	--um-surface-2: #f4f5f4;
	--um-accent: #101211;
	--um-radius: 14px;
	--um-ease: cubic-bezier(0.32, 0.72, 0, 1);

	position: fixed;
	inset: 0;
	z-index: 999999;
	font-family: 'Levenim MT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.um-overlay[hidden] {
	display: none;
}

.um-overlay *,
.um-overlay *::before,
.um-overlay *::after {
	box-sizing: border-box;
}

.um-fundo {
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 13, 0.42);
	opacity: 0;
	transition: opacity 0.26s var(--um-ease);
}

.um-overlay.is-aberto .um-fundo {
	opacity: 1;
}

/* Folha que sobe de baixo. O topo fica livre de proposito: o site
   continua aparecendo atras, que e o comportamento do concorrente. */
.um-painel {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	inline-size: 100%;
	max-block-size: var(--um-altura, 86vh);
	background: var(--um-surface);
	border-start-start-radius: 20px;
	border-start-end-radius: 20px;
	/* o botao de fechar vive acima da borda; nao pode ser cortado */
	overflow: visible;
	box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.22);
	transform: translateY(100%);
	transition: transform 0.34s var(--um-ease);
	display: flex;
	flex-direction: column;
}

.um-overlay.is-aberto .um-painel {
	transform: translateY(0);
}

/* Alcinha de arrasto, so visual: sinaliza que a folha desce. */
.um-painel::before {
	content: "";
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 38px;
	block-size: 4px;
	border-radius: 999px;
	background: #d8dcda;
}

/* Fica no escuro, centralizado logo acima da folha. Ancorado pela mesma
   variavel de altura, entao acompanha o menu quando voce muda o tamanho. */
.um-fechar {
	position: absolute;
	/* Negativo em relacao ao painel: sobe para o escuro, colado na borda
	   de cima da folha. Segue a altura real dela, nao a maxima. */
	inset-block-start: -52px;
	inset-inline-start: 50%;
	z-index: 2;
	inline-size: 40px;
	block-size: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--um-surface);
	color: var(--um-ink);
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 0.24s var(--um-ease) 0.08s, transform 0.28s var(--um-ease) 0.08s;
}

.um-overlay.is-aberto .um-fechar {
	opacity: 1;
	transform: translate(-50%, 0);
}

.um-fechar:hover {
	background: #f2f4f3;
}

.um-fechar:focus-visible {
	outline: 2px solid var(--um-accent);
	outline-offset: 2px;
}

.um-rolagem {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 26px 18px calc(26px + env(safe-area-inset-bottom, 0px));
}

/* ── Barra de conta ── */

.um-conta {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 7px 7px 10px;
	border: 1px solid var(--um-line);
	border-radius: 999px;
	margin-block-end: 14px;
}

.um-conta-marca {
	inline-size: 34px;
	block-size: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--um-ink);
	color: #fff;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.um-conta-marca img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.um-conta-texto {
	flex: 1;
	min-inline-size: 0;
	font-size: 13px;
	color: var(--um-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.um-conta-botao {
	flex: none;
	background: var(--um-accent);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.um-conta-botao:hover {
	opacity: 0.9;
	color: #fff;
}

/* ── Cartoes ──
   O desenho antigo era um retangulo cinza com o icone perdido no canto e o
   rotulo grudado embaixo: muito vazio no meio e nenhuma hierarquia. Agora o
   icone vive num chip proprio, com tom por categoria, e o rotulo ganha peso.
   O mesmo componente serve o topo e os grupos em estilo cartao. */

.um-cartoes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 9px;
	margin-block-end: 22px;
}

.um-cartoes--grupo {
	margin-block: 2px 18px;
}

.um-cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 12px 14px;
	border: 1px solid var(--um-line);
	border-radius: 15px;
	background: var(--um-surface);
	color: var(--um-ink);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.18s var(--um-ease), border-color 0.18s var(--um-ease), box-shadow 0.18s var(--um-ease);
}

/* Brilho de canto: da profundidade sem pesar o card. */
.um-cartao::after {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -30%;
	inline-size: 70%;
	block-size: 70%;
	border-radius: 50%;
	/* Cinza, nao colorido: o brilho da profundidade sem virar semaforo. */
	background: var(--um-surface-2);
	opacity: 0.85;
	pointer-events: none;
}

@media (hover: hover) {
	.um-cartao:hover {
		transform: translateY(-2px);
		border-color: #d6dad8;
		box-shadow: 0 10px 22px -14px rgba(16, 18, 17, 0.4);
		color: var(--um-ink);
	}
}

.um-cartao:active {
	transform: translateY(0);
}

.um-cartao:focus-visible {
	outline: 2px solid var(--um-accent);
	outline-offset: 2px;
}

/* Chip do icone */
.um-cartao-icone {
	position: relative;
	z-index: 1;
	inline-size: 36px;
	block-size: 36px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--um-surface-2);
	color: var(--um-ink);
	line-height: 0;
}

.um-cartao-rotulo {
	position: relative;
	z-index: 1;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--um-ink);
}

/* Telas estreitas: tres cartoes ficam apertados abaixo de 340px. */
@media (max-width: 340px) {
	.um-cartoes {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Grupos ── */

.um-grupo + .um-grupo {
	margin-block-start: 4px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--um-line);
}

.um-grupo-titulo {
	margin: 0 0 4px;
	padding: 0 2px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--um-faint);
	text-transform: lowercase;
}

.um-itens {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.um-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 2px;
	color: var(--um-ink);
	text-decoration: none;
	border-radius: 10px;
	transition: opacity 0.16s var(--um-ease);
}

.um-item:hover {
	color: var(--um-ink);
	opacity: 0.62;
}

.um-item:focus-visible {
	outline: 2px solid var(--um-accent);
	outline-offset: 1px;
}

.um-item-icone {
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	display: grid;
	place-items: center;
	color: var(--um-ink);
	line-height: 0;
}

.um-item-rotulo {
	flex: 1;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.3;
	min-inline-size: 0;
}

/* Item sem icone alinha pela margem, como no menu de referencia. */
.um-item--sem-icone {
	padding-inline-start: 2px;
}

/* Seta das categorias */
.um-item-seta {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--um-faint);
	line-height: 0;
	transition: transform 0.18s var(--um-ease);
}

.um-item:hover .um-item-seta {
	transform: translateX(2px);
}

/* Item em destaque: vira botao de largura cheia, como o pill preto
   do menu de referencia. */
.um-item--botao {
	justify-content: center;
	gap: 9px;
	margin-block: 4px;
	padding: 14px 18px;
	background: var(--um-accent);
	color: #fff;
	border-radius: 999px;
}

.um-item--botao:hover {
	color: #fff;
	opacity: 0.88;
}

.um-item--botao .um-item-rotulo {
	flex: none;
	font-size: 14.5px;
	font-weight: 700;
}

.um-item--botao .um-item-icone {
	color: #fff;
}

/* ── Telas maiores: o menu vira lateral fixa mais estreita ── */

@media (min-width: 900px) {
	.um-painel {
		inline-size: min(520px, 100%);
		inset-inline-start: 50%;
		transform: translate(-50%, 100%);
	}

	.um-overlay.is-aberto .um-painel {
		transform: translate(-50%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.um-fundo,
	.um-painel,
	.um-item,
	.um-cartao {
		transition: none;
	}
}

/* ── Simbolos vindos da biblioteca de midia ──
   Um <img> nao herda currentColor como o SVG embutido herda. Nos lugares
   de fundo escuro invertemos a cor por filtro, o que funciona porque os
   icones da marca sao monocromaticos. */

.um-simbolo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: contain;
}

.um-item-icone .um-simbolo,
.um-cartao-icone .um-simbolo {
	inline-size: 20px;
	block-size: 20px;
}

.um-cartao-icone .um-simbolo {
	inline-size: 19px;
	block-size: 19px;
}

/* Botao preto e barra de conta: o icone precisa virar branco. */
.um-item--botao .um-simbolo,
.um-conta-marca .um-simbolo {
	filter: brightness(0) invert(1);
}

/* ═══════════════════════════════════════════════════════════
   Submenus: sanfona e multistep
   ═══════════════════════════════════════════════════════════ */

/* Item que abre submenu e um <button>: precisa parecer com o <a> ao lado. */
.um-item--sanfona,
button.um-item {
	inline-size: 100%;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: start;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ── Sanfona ── */

.um-item--sanfona[aria-expanded="true"] .um-item-seta {
	transform: rotate(90deg);
	color: var(--um-ink);
}

.um-sub {
	list-style: none;
	margin: 0 0 6px;
	padding: 2px 0 6px 35px;
	display: flex;
	flex-direction: column;
	border-inline-start: 1px solid var(--um-line);
	margin-inline-start: 12px;
}

.um-sub[hidden] {
	display: none;
}

.um-sub-item {
	display: block;
	padding: 9px 2px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--um-muted);
	text-decoration: none;
	transition: color 0.16s var(--um-ease);
}

.um-sub-item:hover {
	color: var(--um-ink);
}

.um-sub-item:focus-visible {
	outline: 2px solid var(--um-accent);
	outline-offset: 1px;
	border-radius: 6px;
}

/* ── Multistep ──
   O cabecalho (conta + cartoes) fica fora de .um-niveis, entao ele
   permanece na tela enquanto so o miolo troca. */

.um-niveis {
	position: relative;
}

.um-nivel[hidden] {
	display: none;
}

.um-nivel.is-ativo {
	animation: umEntra 0.26s var(--um-ease);
}

@keyframes umEntra {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

.um-nivel[data-nivel="raiz"].is-ativo {
	animation-name: umEntraRaiz;
}

@keyframes umEntraRaiz {
	from { opacity: 0; transform: translateX(-14px); }
	to   { opacity: 1; transform: none; }
}

.um-voltar {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 2px 0 12px;
	padding: 8px 12px 8px 8px;
	border: 0;
	border-radius: 999px;
	background: var(--um-surface-2);
	color: var(--um-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.um-voltar:hover {
	background: #e9ebea;
}

.um-voltar:focus-visible {
	outline: 2px solid var(--um-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.um-nivel.is-ativo {
		animation: none;
	}
}

/* ── Sair da conta ── */

.um-sair {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 2px 0 6px;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var(--um-line);
	background: var(--um-surface);
	color: var(--um-muted);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.16s var(--um-ease), border-color 0.16s var(--um-ease);
}

.um-sair:hover {
	color: #b3261e;
	border-color: #f0c9c6;
}

.um-sair:focus-visible {
	outline: 2px solid var(--um-accent);
	outline-offset: 2px;
}

.um-sair svg {
	flex: none;
}

/* Foto do WordPress na barra de conta: mesmo circulo e mesmo tamanho do
   icone que ela substitui. O filtro de inversao vale so para o SVG
   monocromatico — numa foto ele destruiria a imagem. */
.um-conta-marca .um-conta-foto,
.um-conta-marca img.avatar {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	filter: none;
}