/* Visual loja (seguindo a Microsoft Store). So carrega com Personalizar >
   Visual loja ligado (body.mdi-loja-ui). Sem efeito de vidro: cabecalho e
   caixas solidos, como na loja. Curvas e tempos do Fluent (Windows):
   167/250/333 ms, desaceleracao cubic-bezier(.1,.9,.2,1). */

body.mdi-loja-ui {
	--lh-bg: #f7f8fa; /* cinza claro do site (faixa do topo dos posts) */
	--lh-panel: #fff;
	--lh-text: #1a1a1a;
	--lh-muted: #5f6368;
	--lh-line: rgba(0, 0, 0, .07);
	--lh-hover: rgba(0, 0, 0, .04);
	--lh-accent: #005fb8;
	--lh-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 0 1px rgba(0, 0, 0, .08);
	--lh-shadow-up: 0 8px 16px rgba(0, 0, 0, .1), 0 0 1px rgba(0, 0, 0, .1);
	--lh-ease: cubic-bezier(.1, .9, .2, 1);
	--lh-r: 8px;
	--mdi-header-h: 64px;
}
[data-theme="dark"] body.mdi-loja-ui {
	--lh-bg: #202020;
	--lh-panel: #2b2b2b;
	--lh-text: #f3f3f3;
	--lh-muted: #b4b4b4;
	--lh-line: rgba(255, 255, 255, .08);
	--lh-hover: rgba(255, 255, 255, .06);
	--lh-accent: #60cdff;
	--lh-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 1px rgba(255, 255, 255, .08);
	--lh-shadow-up: 0 8px 16px rgba(0, 0, 0, .45), 0 0 1px rgba(255, 255, 255, .12);
}

/* ---------- Largura igual a da loja: 136 px de margem em tela grande,
   98 px em notebook, 50 px em tablet; conteudo ate 1920 px ---------- */
.mdi-loja-ui .container,
.mdi-loja-ui .container-header,
.mdi-loja-ui .page-container { width: min(1920px, calc(100% - 272px)); }
@media (max-width: 1365px) {
	.mdi-loja-ui .container, .mdi-loja-ui .container-header, .mdi-loja-ui .page-container { width: calc(100% - 196px); }
}
@media (max-width: 1007px) {
	.mdi-loja-ui .container, .mdi-loja-ui .container-header, .mdi-loja-ui .page-container { width: calc(100% - 100px); }
}
@media (max-width: 640px) {
	.mdi-loja-ui .container, .mdi-loja-ui .container-header, .mdi-loja-ui .page-container { width: calc(100% - 32px); }
}

/* Fundo cinza claro (#f7f8fa) onde ha caixas brancas (home, Central); paginas de
   leitura (posts, categorias, busca) ficam brancas como no padrao original. */
html body.mdi-loja-ui { background: var(--lh-bg); }
/* Posts e paginas fixas ficam brancos; blog, categorias, busca e arquivos sao "homes" e
   usam o cinza com caixas brancas. */
html:not([data-theme="dark"]) body.mdi-loja-ui.mdi-clean:is(.single, .page):not(.home) { background: #fff; }

/* ---------- Cabecalho: uma linha, branco solido; ao rolar ganha a sombra da loja
   e continua fixo (nao some ao descer, como na loja) ---------- */
.mdi-loja-ui .lh-header {
	background: var(--lh-panel);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 1px solid var(--lh-line);
	box-shadow: none;
	transition: transform .35s, box-shadow .25s;
}
.mdi-loja-ui .lh-header.is-scrolled { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); }
/* Ao descer, o menu sobe e fica so a faixa "Dica do Mestre", agora com a sombra da loja;
   ao subir um pouco, o menu volta (main.js poe/tira .header-hidden, como antes). */
.mdi-loja-ui .promo-bar { transition: box-shadow .25s; }
body.mdi-loja-ui:has(.lh-header.header-hidden) .promo-bar { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); }
.lh-bar { height: 64px; gap: 20px; }
.lh-bar .mobile-toggle { display: none; }
.lh-bar .brand-area { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.lh-bar .logo-main { font-size: 1.32rem; line-height: 1.1; }
.lh-bar .logo-sub { font-size: .58rem; letter-spacing: 1.6px; line-height: 1; white-space: nowrap; }
/* Abas com o visual e a animacao do menu original: Outfit em maiusculas; ao passar
   o mouse fica azul e a linha cresce embaixo; a pagina atual nao fica marcada. */
/* Abas no meio, entre a logo e a busca. */
.lh-tabs { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: 25px; padding-left: 16px; height: 100%; }
.lh-tabs a { position: relative; display: inline-block; padding: 10px 0; color: var(--nav-link-color); font-family: "Outfit", Arial, sans-serif; font-size: .85rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.lh-tabs a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--primary); transform: scaleX(0); transition: .25s; }
.lh-tabs a:hover { color: var(--accent-hover); }
.lh-tabs a:hover::after { transform: scaleX(1); }
/* Menu do WordPress no computador: a linha corta o que nao cabe e o resto vai para "Mais". */
.lh-tabs { min-width: 0; overflow: hidden; }
.lh-mais { position: relative; flex: none; }
.lh-mais > button { display: inline-flex; align-items: center; gap: 4px; padding: 10px 0; border: 0; background: none; color: var(--nav-link-color); font-family: "Outfit", Arial, sans-serif; font-size: .85rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.lh-mais > button:hover { color: var(--accent-hover); }
.lh-mais > button svg { width: 14px; height: 14px; transition: transform .2s; }
.lh-mais.is-open > button svg { transform: rotate(180deg); }
.lh-mais-menu { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 30; display: none; min-width: 200px; padding: 6px; border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow-up); transform: translateX(-50%); }
.lh-mais.is-open .lh-mais-menu { display: grid; }
.lh-mais-menu a { padding: 9px 12px; border-radius: 6px; color: var(--lh-text); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.lh-mais-menu a:hover { background: var(--lh-hover); color: var(--lh-accent); }
.lh-search { position: relative; flex: 0 1 300px; min-width: 180px; }
.lh-search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--lh-muted); pointer-events: none; }
.lh-search input { width: 100%; height: 38px; padding: 0 16px 0 40px; border: 1px solid var(--lh-line); border-bottom-color: rgba(0, 0, 0, .2); border-radius: 999px; background: var(--lh-panel); color: var(--lh-text); font: inherit; font-size: .88rem; outline: none; transition: border-color .167s, box-shadow .167s; }
[data-theme="dark"] .lh-search input { border-bottom-color: rgba(255, 255, 255, .25); }
.lh-search input:focus { border-color: var(--lh-accent); box-shadow: 0 0 0 1px var(--lh-accent); }
.lh-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lh-actions .header-cta { min-height: 36px; padding: 0 18px; }
.lh-search-btn { display: none; width: 38px; height: 38px; padding: 9px; border: 0; border-radius: 6px; background: transparent; color: var(--lh-text); cursor: pointer; }
.lh-search-btn:hover { background: var(--lh-hover); }

@media (max-width: 1080px) {
	.lh-tabs { gap: 18px; }
	.lh-search { max-width: 280px; }
}
@media (max-width: 960px) {
	.lh-bar { gap: 10px; }
	.lh-bar .mobile-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 6px; }
	.lh-bar .mobile-toggle span { width: 18px; margin: 0; border-radius: 2px; }
	.lh-bar .mobile-toggle:hover { background: var(--lh-hover); }
	.lh-actions .header-cta { display: inline-flex; }
	.lh-bar .logo-main { font-size: 1.12rem; }
	.lh-tabs, .lh-mais { display: none; }
	.lh-search { position: absolute; left: 12px; right: 12px; top: 13px; max-width: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .167s, transform .25s var(--lh-ease), visibility 0s .25s; }
	.lh-header.is-search-open .lh-search { opacity: 1; visibility: visible; transform: none; transition: opacity .167s, transform .25s var(--lh-ease); }
	.lh-search-btn { display: inline-flex; margin-left: auto; }
	.lh-header.is-search-open .lh-actions { visibility: hidden; }
}
@media (max-width: 520px) {
	.lh-header .lh-bar { width: calc(100% - 20px); gap: 6px; }
	.lh-bar .logo-main { font-size: .86rem; letter-spacing: -.3px; }
	.lh-bar .logo-sub { font-size: .56rem; letter-spacing: .3px; }
	.lh-actions { gap: 4px; }
	.lh-actions .header-cta { min-height: 32px; padding: 0 11px; font-size: .68rem; }
	/* O botao do tema sai para caber Ofertas (a escolha salva continua valendo). */
	.lh-actions .theme-toggle { display: none; }
	.lh-search-btn { width: 34px; height: 34px; padding: 8px; }
}

/* ---------- Titulos de secao ---------- */
.lh-title { margin: 0 0 12px; color: var(--lh-text); font-family: "Outfit", Arial, sans-serif; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.lh-title a { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.lh-title svg { width: 14px; height: 14px; color: var(--lh-accent); transition: transform .25s var(--lh-ease); }
.lh-title a:hover svg { transform: translateX(3px); }

/* ---------- Vitrine: carrossel 16:9 + 3 quadros (medidas da loja: 980 x 551,
   641 x 353 e 315 x 186 com 12 px entre eles) ---------- */
.lh-home .page-container { padding-top: 24px; }
/* Espaco ate os paineis igual ao da loja: 64 px (32 no tablet, 28 no celular). */
.lh-spotlight { display: grid; grid-template-columns: minmax(0, 980fr) minmax(0, 641fr); gap: 12px; margin-bottom: 64px; }
.lh-spotlight.is-solo { grid-template-columns: 1fr; }
.lh-carousel { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px; background: #0b1220; box-shadow: var(--lh-shadow); }
.lh-slides { display: flex; height: 100%; transition: transform .6s var(--lh-ease); }
.lh-slide, .lh-spot { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.lh-slide { flex: 0 0 100%; height: 100%; }
.lh-slide > img, .lh-spot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--lh-ease); }
.lh-slide:hover > img, .lh-spot:hover > img { transform: scale(1.03); }
.lh-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 353fr 186fr; gap: 12px; min-height: 0; }
.lh-spot { border-radius: 12px; background: #0b1220; box-shadow: var(--lh-shadow); }
.lh-spot.is-wide { grid-column: 1 / -1; }
/* Legenda igual a da home anterior: degrade escuro so na metade de baixo, titulo colado na base. */
.lh-spotlight .hero-overlay { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; max-height: 50%; overflow: hidden; padding: 34px 22px 18px; background: linear-gradient(to top, rgba(4, 9, 22, .94) 0%, rgba(4, 9, 22, .82) 55%, rgba(4, 9, 22, 0) 100%); color: #fff; }
.lh-spotlight .hero-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-family: "Outfit", Arial, sans-serif; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 900; line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.lh-spot .hero-overlay { padding: 16px 12px 10px; }
.lh-spot .hero-title { font-size: .92rem; line-height: 1.22; }
.lh-spot:not(.is-wide) .hero-overlay { max-height: 72%; }
.lh-spot.is-wide .hero-title { font-size: 1.12rem; }
.lh-carousel .hero-overlay { padding-bottom: 34px; }
.lh-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.lh-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .333s var(--lh-ease), background-color .25s; }
.lh-dots button[aria-selected="true"] { width: 20px; background: #fff; }
.lh-carousel .lh-nav { position: absolute; z-index: 2; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 6px; background: #fff; box-shadow: var(--lh-shadow-up); color: #1a1a1a; cursor: pointer; opacity: 0; transition: opacity .25s; }
.lh-carousel:hover .lh-nav, .lh-carousel .lh-nav:focus-visible { opacity: 1; }
.lh-carousel .lh-nav.is-prev { left: 10px; }
.lh-carousel .lh-nav.is-next { right: 10px; }
.lh-carousel .lh-nav svg { width: 14px; height: 14px; }

/* ---------- Paineis "mais populares" iguais aos da loja (medidas do print em
   1536 px): caixa de ~616 x 543 px, branca a 70% sobre o cinza, borda #e4e4e7,
   canto 8 px; titulo de 20 px com linha embaixo e setas redondas com triangulo;
   6 itens em 2 colunas e 3 linhas de 140 px; imagem com 68 px de altura ---------- */
.lh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 64px; }
.lh-panel { min-width: 0; padding: 36px; border: .8px solid #e4e4e7; border-radius: var(--lh-r); background: #fff; }
[data-theme="dark"] .lh-panel { border-color: var(--lh-line); background: rgba(255, 255, 255, .04); }
.lh-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 22px; padding: 2px 0 14px; border-bottom: 1px solid #e5e5e5; }
[data-theme="dark"] .lh-panel-head { border-color: var(--lh-line); }
.lh-panel-head .lh-title { margin: 0; }
.lh-pager-btns { display: inline-flex; gap: 12px; }
.lh-pager-btns button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: .8px solid rgba(0, 0, 0, .06); border-radius: 999px; background: #f1f2f3; color: #1a1a1a; cursor: pointer; transition: background-color .167s, opacity .167s; }
.lh-pager-btns button:hover:not(:disabled) { background: #e6e7e8; }
.lh-pager-btns button:disabled { opacity: .4; cursor: default; }
/* Toque: setas dos paineis com area minima de 36 px. */
@media (hover: none) { .lh-pager-btns button { width: 36px; height: 36px; } }
.lh-pager-btns svg { width: 10px; height: 10px; fill: currentColor; }
[data-theme="dark"] .lh-pager-btns button { background: rgba(255, 255, 255, .08); border-color: var(--lh-line); color: var(--lh-text); }
.lh-pages { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-top: 5px; }
.lh-pages::-webkit-scrollbar { display: none; }
.lh-page { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; scroll-snap-align: start; min-width: 0; }
.lh-item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 18px 12px 0 22px; border-radius: 6px; color: var(--lh-text); transition: background-color .167s; }
.lh-item:hover { background: var(--lh-hover); }
/* Mais lidos: a capa inteira em 16:9 (68 px de altura, como o icone da loja). */
.lh-item-img.is-capa { flex: 0 0 121px; width: 121px; height: 68px; border-radius: 6px; object-fit: cover; background: var(--lh-hover); }
/* Programas: quadrado de 68 px com o icone inteiro (contain), nunca cortado. */
.lh-item .loja-icon { flex: 0 0 68px; display: grid; place-items: center; width: 68px; height: 68px; padding: 6px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; overflow: hidden; }
.lh-item .loja-icon img { width: 100%; height: 100%; object-fit: contain; }
.lh-item .loja-icon-txt { padding: 0; border: 0; color: #fff; font-size: 1.2rem; font-weight: 700; }
/* "Mais lidos" em uma coluna: o titulo ganha a largura toda e aparece inteiro
   (2 colunas cortavam o titulo ao lado da capa 16:9). 6 linhas de 76 px; os
   programas (2 colunas) ganham linhas de 152 px para os paineis terem a mesma altura. */
.lh-panel.is-lista .lh-page { grid-template-columns: 1fr; grid-auto-rows: 76px; }
.lh-panel.is-lista .lh-item { align-items: center; gap: 18px; padding: 4px 22px; }
.lh-panel:not(.is-lista) .lh-page { grid-auto-rows: 152px; }
/* Programas em 16:9 (mesmo tamanho da capa dos "Mais lidos"): icone inteiro no centro sobre a propria cor desfocada. */
.lh-item-art { position: relative; flex: 0 0 121px; display: grid; place-items: center; width: 121px; height: 68px; overflow: hidden; isolation: isolate; border-radius: 6px; background: #f0f0f0; }
[data-theme="dark"] .lh-item-art { background: #2b2b2b; }
.lh-item-art .loja-icon { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.lh-item-art .loja-icon-txt { font-size: .95rem; }
/* Iniciais na cor da categoria (o CSS da Central nao carrega na home). */
.lh-home .loja-icon-txt { background: #2563eb; color: #fff; }
.lh-home .loja-icon-txt.purple { background: #7c3aed; }
.lh-home .loja-icon-txt.green { background: #059669; }
.lh-home .loja-icon-txt.red { background: #dc2626; }
.lh-home .loja-icon-txt.blue { background: #2563eb; }
.lh-home .loja-icon-txt.orange { background: #ea580c; }
.lh-item-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.lh-item-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; font-weight: 600; line-height: 1.375; }
.lh-item-txt small { overflow: hidden; color: var(--lh-muted); font-size: .75rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
/* Etiqueta "Gratis" como o "Gratuito" da loja. */
.lh-item-txt .lh-tag { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 2px; background: var(--lh-bg); color: #1a1a1a; font-size: .75rem; line-height: 1.5; }
[data-theme="dark"] .lh-item-txt .lh-tag { background: rgba(255, 255, 255, .08); color: var(--lh-text); }
.lh-free { align-self: flex-start; padding: 2px 8px; border-radius: 4px; background: var(--lh-hover); color: var(--lh-muted); font-size: .72rem; font-style: normal; font-weight: 600; }

/* ---------- Fileiras que rolam de lado ---------- */
.lh-row { margin-bottom: 32px; }
.lh-scroller { position: relative; }
.lh-track { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 4px 10px; margin: -4px -4px -10px; }
.lh-track::-webkit-scrollbar { display: none; }
.lh-track > * { scroll-snap-align: start; }
.lh-arrow { position: absolute; z-index: 2; top: 50%; width: 32px; height: 32px; margin-top: -26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--lh-panel); box-shadow: var(--lh-shadow-up); color: var(--lh-text); cursor: pointer; opacity: 0; transition: opacity .25s, transform .25s var(--lh-ease); }
.lh-arrow svg { width: 14px; height: 14px; }
.lh-arrow.is-prev { left: -14px; }
.lh-arrow.is-next { right: -14px; }
.lh-scroller:hover .lh-arrow, .lh-arrow:focus-visible { opacity: 1; }
.lh-arrow:hover { transform: scale(1.08); }
.lh-arrow[hidden] { display: none; }
@media (hover: none) { .lh-arrow { display: none; } }

/* ---------- Cards de programa e ferramenta (icone no centro, cor do icone ao redor) ---------- */
.lh-app { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); color: var(--lh-text); transition: transform .25s var(--lh-ease), box-shadow .25s; }
.lh-app:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-up); }
.lh-app-art { position: relative; display: grid; place-items: center; height: 128px; overflow: hidden; isolation: isolate; background: #f0f0f0; }
[data-theme="dark"] .lh-app-art { background: #2b2b2b; }
.lh-app-blur { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#f0f0f0, #f0f0f0), var(--ic); background-size: 100% 100%; background-repeat: no-repeat; background-blend-mode: luminosity, normal; filter: blur(42px) saturate(4) contrast(.9); transform: scale(1.5); }
[data-theme="dark"] .lh-app-blur { background-image: linear-gradient(#3a3a3a, #3a3a3a), var(--ic); }
.lh-app-art .loja-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; transition: transform .333s var(--lh-ease); }
.lh-app-art .loja-icon img { width: 100%; height: 100%; object-fit: contain; }
.lh-app-art .loja-icon-txt { font-weight: 700; font-size: 1.3rem; }
.lh-app:hover .lh-app-art .loja-icon, .lh-app:hover .lh-tool-ico { transform: scale(1.06); }
.lh-app-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.lh-app-body strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.lh-app-body small { color: var(--lh-muted); font-size: .74rem; }
.lh-app-body .lh-free { margin-top: 4px; }
.lh-tool .lh-app-art { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 28%, #fff), color-mix(in srgb, var(--b) 28%, #fff)); }
[data-theme="dark"] .lh-tool .lh-app-art { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, #202020), color-mix(in srgb, var(--b) 26%, #202020)); }
/* Top Ofertas na fileira da loja: mesmos cartoes das outras fileiras, foto 4:3 para a linha ficar baixa. */
.lh-row-ofertas .lh-track { grid-auto-columns: 200px; }
.lh-row-ofertas .ho-card { border-color: var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); transition: transform .25s var(--lh-ease), box-shadow .25s; }
.lh-row-ofertas .ho-card:hover { border-color: var(--lh-line); box-shadow: var(--lh-shadow-up); }
.lh-row-ofertas .ho-img { aspect-ratio: 4 / 3; }
.lh-row-ofertas .ho-info { padding: 10px 12px 12px; border-color: var(--lh-line); }
.lh-row-ofertas .ho-name { font-size: .88rem; line-height: 1.25; min-height: 2.5em; }
.lh-row-ofertas .ho-price { font-size: 1.15rem; }
.lh-row-ofertas .ho-note { margin-top: 14px; }

/* ---------- Tres formatos do fim da home da loja (medidas da Store em 1536 px:
   cartoes de 408 px, 3 por linha, 12 px de vao) ---------- */
.lh-row-cols .lh-track { grid-auto-columns: calc((100% - 24px) / 3); }
/* Atualizados recentemente: 4 cartoes curvos por linha, como a loja. */
.lh-row-curvas .lh-track { grid-auto-columns: calc((100% - 36px) / 4); }

/* "Collections" -> Categorias: arte da categoria e o nome embaixo, em branco (24 px, como
   a loja). Ao passar o mouse, igual a loja: cartao sobe 2 px, fundo desfoca 15 px e cresce 5%,
   o titulo sobe 30 px e aparece a frase da categoria (14 px, ate 2 linhas), tudo em .15 s. */
.lh-col { position: relative; display: block; aspect-ratio: 408 / 230; overflow: hidden; isolation: isolate; border-radius: var(--lh-r); background: linear-gradient(135deg, #0b3d91, #0ea5e9); color: #fff; box-shadow: var(--lh-shadow); transition: transform .15s ease-out, box-shadow .15s; }
.lh-col img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .15s ease-out, filter .15s ease-out; }
.lh-col::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 60%); }
.lh-col-txt { position: absolute; left: 28px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.lh-col strong { font-family: "Outfit", Arial, sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); transform: translateY(calc(2.7em * .875 / 1.5 + 4px)); transition: transform .15s ease-out; }
.lh-col small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .92); font-size: .875rem; line-height: 1.35; height: 2.7em; opacity: 0; transform: scaleY(0); transform-origin: top; transition: opacity .15s ease-out, transform .15s ease-out; }
.lh-col:hover, .lh-col:focus-visible { transform: translateY(-2px); box-shadow: var(--lh-shadow-up); }
.lh-col:hover img, .lh-col:focus-visible img { filter: blur(15px); transform: scale(1.05); }
.lh-col:hover strong, .lh-col:focus-visible strong { transform: none; }
.lh-col:hover small, .lh-col:focus-visible small { opacity: 1; transform: none; }
/* Celular e tablet (sem mouse): a frase fica sempre a mostra, sem desfocar. */
@media (hover: none) {
	.lh-col strong { transform: none; }
	.lh-col small { opacity: 1; transform: none; }
	.lh-col::after { background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 65%); }
}

/* "Aplicativos para redes sociais" -> programas, com as medidas da loja (cartao 408x292):
   cor do programa desfocada no cartao inteiro, print no meio do alto e a curva branca como
   peca propria (608 px de largura, comeca a 171 px). No hover (classe is-hover, loja.js) a
   curva fica reta e desce para 179 px, o icone vai para o lado do nome e a descricao sobe
   40 px e aparece inteira; tudo em .2s cubic-bezier(0, 0, .32, 1), como la. */
.lh-curva { position: relative; display: block; aspect-ratio: 408 / 292; overflow: hidden; isolation: isolate; border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); color: var(--lh-text); text-align: center; transition: box-shadow .2s; }
.lh-curva:hover { box-shadow: var(--lh-shadow-up); }
.lh-curva-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #f0f0f0; }
/* Sem icone em imagem: a cor do selo com a sigla do programa, em tom claro. */
.lh-curva-art[style] { background: linear-gradient(135deg, color-mix(in srgb, var(--cor) 45%, #fff), color-mix(in srgb, var(--cor) 18%, #fff)); }
[data-theme="dark"] .lh-curva-art { background: #2b2b2b; }
/* Print do programa no meio do alto, menor que o quadro; a curva branca cobre o pe dele. */
.lh-curva-print { position: absolute; top: 6%; left: 50%; width: 72%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transform: translateX(-50%); }
/* Cor do icone bem viva no fundo (a loja usa a arte do app desfocada). */
.lh-curva .lh-app-blur { background-image: var(--ic); background-size: cover; background-position: center; background-blend-mode: normal; filter: blur(30px) saturate(1.8); opacity: .85; transform: scale(1.8); }
.lh-curva-forma { position: absolute; z-index: -1; top: 58.56%; left: -24.26%; width: 148.8%; height: 58.2%; border-radius: 50% / 100% 100% 0 0; background: var(--lh-panel); transition: top .2s cubic-bezier(0, 0, .32, 1), border-radius .2s cubic-bezier(0, 0, .32, 1); }
.lh-curva.is-hover .lh-curva-forma { top: 61.3%; border-radius: 0; }
.lh-curva-body { position: absolute; top: 64%; left: 6.1%; right: 5.9%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lh-curva-topo { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; padding-top: 8px; }
.lh-curva.is-hover .lh-curva-topo { flex-direction: row; gap: 8px; padding-top: 6px; }
.lh-curva.is-hover .lh-curva-body { gap: 6px; }
.lh-curva .loja-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: 6px; }
.lh-curva .loja-icon img { width: 100%; height: 100%; object-fit: contain; }
.lh-curva .loja-icon-txt { font-size: .62rem; font-weight: 700; }
.lh-curva-topo strong { min-width: 0; max-width: 100%; overflow: hidden; font-size: 1.125rem; font-weight: 600; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; }
.lh-curva-body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--lh-muted); font-size: .75rem; line-height: 16px; }
.lh-curva .loja-icon, .lh-curva-topo strong { transition: transform .2s cubic-bezier(0, 0, .32, 1); }
/* Descricao escondida abaixo do nome e so sobe e aparece no hover, como na loja. */
.lh-curva-body small { opacity: 0; transform: translateY(24px); transition: opacity .2s cubic-bezier(0, 0, .32, 1), transform .2s cubic-bezier(0, 0, .32, 1); }
.lh-curva.is-hover .lh-curva-body small, .lh-curva:focus-visible .lh-curva-body small { opacity: 1; transform: none; }
/* Celular e tablet (sem mouse): icone ao lado do nome e descricao sempre visivel, curva mantida. */
@media (hover: none) {
	.lh-curva-topo { flex-direction: row; padding-top: 6px; }
	.lh-curva-body { gap: 6px; }
	.lh-curva-body small { opacity: 1; transform: none; }
}

/* "Jogos de quebra-cabeca" -> tutoriais: um grande e quatro menores, capa sempre inteira
   (16:9, nada cortado); no grande a capa fica em cima e o titulo com resumo embaixo. */
.lh-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lh-bento-item { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: var(--lh-r); background: #0b1220; color: #fff; box-shadow: var(--lh-shadow); }
.lh-bento-item.is-big { grid-row: span 2; aspect-ratio: auto; container-type: inline-size; background: linear-gradient(180deg, #0b1220, #14233f); }
.lh-bento-item.is-big img { bottom: auto; height: auto; aspect-ratio: 16 / 9; }
.lh-bento-item.is-big::after { background: linear-gradient(0deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0) 100%); }
.lh-bento-item.is-big .lh-bento-info { top: 56.25cqw; align-items: flex-start; padding: 20px; }
.lh-bento-resumo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 4px; color: rgba(255, 255, 255, .82); font-size: .86rem; line-height: 1.45; }
.lh-bento-item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--lh-ease); }
.lh-bento-item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4, 9, 22, .88) 0%, rgba(4, 9, 22, .45) 32%, rgba(4, 9, 22, 0) 58%); }
.lh-bento-item:hover img { transform: scale(1.04); }
.lh-bento-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.lh-bento-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lh-bento-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .98rem; font-weight: 700; line-height: 1.3; }
.lh-bento-item.is-big .lh-bento-txt strong { font-family: "Outfit", Arial, sans-serif; font-size: 1.4rem; font-weight: 800; -webkit-line-clamp: 3; }
.lh-bento-txt small { color: rgba(255, 255, 255, .8); font-size: .74rem; }
.lh-bento-info .lh-tag { flex: none; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); color: #fff; font-size: .72rem; font-style: normal; font-weight: 600; }

/* Pagina /categorias/ (page-categorias.php) */
.lh-cats-page { padding-top: 24px; padding-bottom: 64px; }
.lh-cats-title { margin: 8px 0 4px; font-family: "Outfit", Arial, sans-serif; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; }
.lh-cats-lead { margin: 0; color: var(--lh-muted); }
.lh-cats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; margin-top: 28px; }
.lh-cats-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.lh-cats-sub a { display: inline-block; padding: 4px 10px; border: 1px solid var(--lh-line); border-radius: 999px; background: var(--lh-panel); color: var(--lh-text); font-size: .78rem; transition: color .167s, border-color .167s; }
.lh-cats-sub a:hover { border-color: var(--lh-accent); color: var(--lh-accent); }
@media (max-width: 1007px) {
	.lh-row-cols .lh-track, .lh-row-curvas .lh-track { grid-auto-columns: calc((100% - 12px) / 2.15); }
	.lh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lh-bento-item.is-big { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
	.lh-bento-item.is-big img { height: 100%; }
	.lh-bento-item.is-big::after { background: linear-gradient(0deg, rgba(4, 9, 22, .88) 0%, rgba(4, 9, 22, .45) 32%, rgba(4, 9, 22, 0) 58%); }
	.lh-bento-item.is-big .lh-bento-info { top: auto; }
	.lh-bento-resumo { display: none; }
	.lh-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.lh-row-cols .lh-track, .lh-row-curvas .lh-track { grid-auto-columns: 82%; }
	/* Cartao mais estreito: um pouco mais alto para a descricao caber inteira. */
	.lh-curva { aspect-ratio: 408 / 320; }
	.lh-col-txt { left: 18px; right: 18px; bottom: 16px; }
	.lh-col strong { font-size: 1.2rem; }
	.lh-col small { font-size: .8rem; }
	.lh-bento-info { padding: 10px 12px; }
	.lh-bento-txt strong { font-size: .84rem; }
	.lh-bento-item:not(.is-big) .lh-bento-txt small, .lh-bento-item:not(.is-big) .lh-tag { display: none; }
	.lh-bento-item.is-big .lh-bento-txt strong { font-size: 1.1rem; }
	.lh-cats-grid { grid-template-columns: 1fr; }
}
.lh-tool-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #fff; box-shadow: var(--lh-shadow); color: color-mix(in srgb, var(--b) 75%, #000); transition: transform .333s var(--lh-ease); }
.lh-tool-ico svg { width: 34px; height: 34px; }

/* ---------- Secoes da home anterior no visual limpo da loja: fundo cinza,
   caixas brancas de canto 8 px e titulos no mesmo tamanho ---------- */
/* Videos do canal ficam exatamente como antes (sem regra aqui). */
body.mdi-loja-ui main :not(.video-heading-copy) > .section-title { margin: 0; color: var(--lh-text); font-family: "Outfit", Arial, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
body.mdi-loja-ui main :not(.video-heading-copy) > .section-title::before,
body.mdi-loja-ui main :not(.video-heading-copy) > .section-title::after { display: none; }
.lh-home .posts-feed { padding: 24px; border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); }
body.mdi-loja-ui .lh-home .feed-heading { padding: 0 0 8px; background: none; }
.lh-home .feed-list > * + * { border-top-color: var(--lh-line); }
.lh-home .posts-feed img { border-radius: 6px; }

/* ---------- Mesmo acabamento em todas as secoes da home: titulo em Outfit sem
   etiqueta, barra ou faixa; 64 px entre as secoes (como a loja). Os Videos do
   canal ficam exatamente como antes. ---------- */
.lh-home .content-grid,
.lh-home .lh-row,
.lh-home .hg-section,
.lh-home .hc-section,
.lh-home .ho-section,
.lh-home .mdi-nl { margin-top: 0; margin-bottom: 64px; }
body.mdi-loja-ui main :not(.video-heading-copy) > .section-title { padding-left: 0; border-left: 0; }
.lh-home .hg-section .section-heading-row { margin-bottom: 16px; }
.lh-home .hg-section .eyebrow,
.lh-home .hg-section .section-heading-row p { display: none; }
.lh-home .hc-title { color: var(--lh-text); font-family: "Outfit", Arial, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.lh-home .hc-head { padding: 0; border: 0; background: none; }
.lh-home .hc-head:hover .hc-title { color: var(--lh-accent); }
.lh-home .hc-more { border: 0; background: none; box-shadow: none; color: var(--lh-accent); }
.lh-home .ho-heading { margin-bottom: 16px; padding: 0; border: 0; background: none; box-shadow: none; }
/* A trilha das fileiras tem margem -10 px embaixo (espaco da sombra): compensa para dar os mesmos 64 px. */
.lh-home .lh-row { margin-bottom: 74px; }
@media (max-width: 1007px) {
	.lh-home .content-grid, .lh-home .lh-row, .lh-home .hg-section, .lh-home .hc-section, .lh-home .ho-section, .lh-home .mdi-nl { margin-bottom: 32px; }
	.lh-home .lh-row { margin-bottom: 42px; }
}
@media (max-width: 640px) {
	.lh-home .content-grid, .lh-home .lh-row, .lh-home .hg-section, .lh-home .hc-section, .lh-home .ho-section, .lh-home .mdi-nl { margin-bottom: 28px; }
	.lh-home .lh-row { margin-bottom: 38px; }
}

/* ---------- Videos do canal no formato da vitrine da loja (print do dono):
   video grande a esquerda (16:9 exato, como o 1920 x 1080 do video: nada cortado;
   previa sem som, controles, botao e 4 miniaturas) e lista a direita (4 por pagina, item escolhido em branco) ---------- */
.lh-videos { display: grid; grid-template-columns: minmax(0, 787fr) minmax(0, 462fr); margin-bottom: 64px; }
.lh-vplayer { position: relative; align-self: start; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--lh-r) 0 0 var(--lh-r); background: #0b1220; color: #fff; }
.lh-vmedia { position: absolute; inset: 0; cursor: pointer; }
.lh-vmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.lh-vmedia iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.lh-vmedia.is-video iframe { opacity: 1; }
.lh-vmedia.is-video img { opacity: 0; }
.lh-vplayer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4, 9, 22, .94) 0%, rgba(4, 9, 22, .8) 34%, rgba(4, 9, 22, .2) 58%, rgba(4, 9, 22, 0) 72%), linear-gradient(0deg, rgba(4, 9, 22, .6) 0%, rgba(4, 9, 22, 0) 30%); }
.lh-vinfo { position: absolute; z-index: 1; left: 40px; top: 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 38%; transform: translateY(-50%); }
.lh-vinfo strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: "Outfit", Arial, sans-serif; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.lh-vinfo span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .85); font-size: .9rem; line-height: 1.45; }
.lh-vbtn { margin-top: 12px; padding: 10px 26px; border-radius: 6px; background: var(--primary); color: #fff; font-size: .88rem; font-weight: 700; transition: filter .167s; }
.lh-vbtn:hover { filter: brightness(1.1); }
.lh-vctrl { position: absolute; z-index: 1; left: 24px; bottom: 18px; display: none; gap: 8px; }
.lh-videos.has-preview .lh-vctrl { display: flex; }
.lh-vctrl button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; transition: background-color .167s; }
.lh-vctrl button:hover { background: rgba(255, 255, 255, .15); }
.lh-vctrl svg { width: 15px; height: 15px; fill: currentColor; }
.lh-vctrl .is-play, .lh-videos.is-paused .lh-vctrl .is-pause, .lh-vctrl .is-som, .lh-videos.is-sound .lh-vctrl .is-mudo { display: none; }
.lh-videos.is-paused .lh-vctrl .is-play, .lh-videos.is-sound .lh-vctrl .is-som { display: inline; }
.lh-vthumbs { position: absolute; z-index: 1; right: 22px; bottom: 22px; display: flex; gap: 12px; }
.lh-vthumb { width: 84px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: #000; cursor: pointer; transition: transform .25s var(--lh-ease), border-color .167s; }
.lh-vthumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lh-vthumb:hover { transform: translateY(-2px); }
.lh-vthumb.is-on { border-color: #60cdff; }
/* Assistindo aqui: sai o texto por cima e fica so o player do YouTube, com som e controles. */
.lh-videos.is-watching .lh-vinfo, .lh-videos.is-watching .lh-vctrl, .lh-videos.is-watching .lh-vthumbs, .lh-videos.is-watching .lh-vplayer::after { display: none; }
.lh-videos.is-watching .lh-vmedia { cursor: auto; }
.lh-videos.is-watching .lh-vmedia iframe { pointer-events: auto; }
.lh-vside { min-width: 0; padding: 32px 32px 24px; }
.lh-vside-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #e5e5e5; }
[data-theme="dark"] .lh-vside-head { border-color: var(--lh-line); }
.lh-vside-head .lh-title { margin: 0; }
.lh-vpage { grid-template-columns: 1fr; grid-auto-rows: 80px; gap: 0; }
.lh-vitem { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 0 16px; border: 0; border-radius: var(--lh-r); background: transparent; color: var(--lh-text); font: inherit; text-align: left; cursor: pointer; transition: background-color .167s, box-shadow .167s; }
.lh-vitem:hover { background: rgba(255, 255, 255, .7); }
.lh-vitem.is-on { background: var(--lh-panel); box-shadow: var(--lh-shadow); }
.lh-vitem img { flex: 0 0 85px; width: 85px; height: 48px; border-radius: 4px; object-fit: cover; }
.lh-vitem-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lh-vitem-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.lh-vitem-txt small { color: var(--lh-muted); font-size: .74rem; }
@media (max-width: 1007px) {
	.lh-videos { grid-template-columns: 1fr; margin-bottom: 32px; }
	.lh-vplayer { border-radius: var(--lh-r); }
	.lh-vinfo { left: 24px; max-width: 55%; }
	.lh-vside { padding: 20px 0 0; }
}
@media (max-width: 640px) {
	.lh-videos { margin-bottom: 28px; }
	.lh-vinfo { left: 16px; right: 16px; top: auto; bottom: 16px; max-width: none; gap: 6px; transform: none; }
	.lh-vinfo strong { font-size: 1.02rem; -webkit-line-clamp: 2; }
	.lh-vinfo span, .lh-vthumbs { display: none; }
	.lh-vbtn { margin-top: 4px; padding: 7px 16px; font-size: .8rem; }
	.lh-vplayer::after { background: linear-gradient(0deg, rgba(4, 9, 22, .88) 0%, rgba(4, 9, 22, .35) 55%, rgba(4, 9, 22, 0) 80%); }
	.lh-vitem { padding: 0 8px; }
}

/* ---------- Demais paginas no visual da loja ---------- */
/* Listas de leitura (blog, busca, 404): o mesmo item em cascata da home (template-parts/blog-card.php). */
.mdi-loja-ui .blog-grid { display: block; }
.mdi-loja-ui .blog-grid > .post-card + .post-card { border-top: 1px solid var(--lh-line); }
.mdi-loja-ui main .section-heading-row .eyebrow { display: none; }

/* Top Ofertas e Cupons: topo centralizado sobre uma faixa de cor que some de cima para
   baixo ate o fundo da pagina (a mesma ideia da pagina do programa, mais viva). Cores do
   site fora de data especial; com campanha ligada (Ofertas > Campanhas), as dela
   (--camp-1, --camp-2 e --camp-accent vem no style do <main>). */
.mdi-loja-ui main:has(> .lh-of-bg) { position: relative; isolation: isolate; }
.lh-of-bg { --of-1: var(--camp-1, #1e3a8a); --of-2: var(--camp-2, #0284c7); --of-3: var(--camp-accent, #7c3aed); position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 720px; pointer-events: none;
	background: radial-gradient(48% 70% at 12% 0%, color-mix(in srgb, var(--of-3) 75%, transparent), transparent 72%), radial-gradient(45% 65% at 90% 8%, color-mix(in srgb, var(--of-2) 85%, transparent), transparent 70%), linear-gradient(180deg, var(--of-1) 0%, color-mix(in srgb, var(--of-1) 55%, var(--of-2)) 60%, var(--of-2) 100%);
	-webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); }
.mdi-loja-ui .ofertas-hero.ofertas-hero { margin: 0 0 28px; padding: 52px 0 8px !important; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; text-align: center; }
.mdi-loja-ui .ofertas-hero .eyebrow,
.mdi-loja-ui .ofertas-hero .campanha-line { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 14px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mdi-loja-ui .ofertas-hero h1 { margin: 16px 0 10px; color: #fff; font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); font-weight: 900; line-height: 1.05; text-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
.mdi-loja-ui .ofertas-hero > p:not(.eyebrow):not(.campanha-line) { max-width: 680px; margin: 0 auto 20px; color: rgba(255, 255, 255, .9); font-size: 1.02rem; line-height: 1.6; }
.mdi-loja-ui .ofertas-hero .mdi-of-trust { justify-content: center; margin: 0 0 22px; }
.mdi-loja-ui .ofertas-hero .mdi-of-trust li { border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; }
.mdi-loja-ui .ofertas-hero .ofertas-hero-ctas { justify-content: center; }
/* Botoes dos grupos: brancos sobre a faixa de cor; verde e azul cheios no resto da pagina. */
.mdi-loja-ui .ofertas-whatsapp-cta, .mdi-loja-ui .ofertas-telegram-cta { border: 0; border-radius: 8px; box-shadow: none; color: #fff; }
.mdi-loja-ui .ofertas-whatsapp-cta { background: #16a34a; }
.mdi-loja-ui .ofertas-telegram-cta { background: #229ed9; }
.mdi-loja-ui .ofertas-whatsapp-cta svg, .mdi-loja-ui .ofertas-telegram-cta svg { fill: currentColor; }
.mdi-loja-ui .ofertas-whatsapp-cta:hover, .mdi-loja-ui .ofertas-telegram-cta:hover { color: #fff; filter: brightness(1.08); }
.mdi-loja-ui .ofertas-hero .ofertas-whatsapp-cta, .mdi-loja-ui .ofertas-hero .ofertas-telegram-cta { padding: 13px 22px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); font-weight: 800; transition: transform .2s var(--lh-ease), box-shadow .2s; }
.mdi-loja-ui .ofertas-hero .ofertas-whatsapp-cta, .mdi-loja-ui .ofertas-hero .ofertas-whatsapp-cta:hover { color: #15803d; }
.mdi-loja-ui .ofertas-hero .ofertas-telegram-cta, .mdi-loja-ui .ofertas-hero .ofertas-telegram-cta:hover { color: #0284c7; }
.mdi-loja-ui .ofertas-hero .ofertas-whatsapp-cta:hover, .mdi-loja-ui .ofertas-hero .ofertas-telegram-cta:hover { filter: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
.mdi-loja-ui .ofertas-countdown-bar { margin: 0 auto 32px !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important; }
.mdi-loja-ui .cupons-section-empty { margin: 0 0 48px; }
/* Cartao flutuante "Entre no grupo agora!": so a barra do celular e do tablet (ate 768 px); no computador sai. */
@media (min-width: 769px) { .mdi-loja-ui .ofertas-sticky-cta { display: none !important; } }
.mdi-loja-ui .cupons-empty-box { border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); }
@media (max-width: 640px) {
	.lh-of-bg { height: 860px; }
	.mdi-loja-ui .ofertas-hero.ofertas-hero { padding-top: 32px !important; }
	.mdi-loja-ui .ofertas-hero > p:not(.eyebrow):not(.campanha-line) { font-size: .95rem; }
}

/* Paineis brancos da loja (canto 8 px, borda fina, sombra leve) */
.mdi-loja-ui .cp-section,
.mdi-loja-ui .cupons-section:not(.cupons-section-empty),
.mdi-loja-ui .mdi-of-como,
.mdi-loja-ui .mdi-of-sobre,
.mdi-loja-ui .mdi-of-faq,
.mdi-loja-ui .ofertas-lojas-nav,
.mdi-loja-ui .cupons-store-block,
.mdi-loja-ui .cupons-howto,
.mdi-loja-ui .cupons-faq,
.mdi-loja-ui .downloads-recommended-section { margin: 0 0 48px; padding: 28px; background-image: none; border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); }
.mdi-loja-ui .mdi-of-como .eyebrow, .mdi-loja-ui .mdi-of-faq .eyebrow { display: none; }
.mdi-loja-ui .mdi-of-passos li, .mdi-loja-ui .mdi-of-stats div { border-radius: var(--lh-r); }
.mdi-loja-ui .mdi-of-sobre-foto img { border-radius: var(--lh-r); }
.mdi-loja-ui .ofertas-lojas-title { font-family: "Outfit", Arial, sans-serif; font-size: 1.25rem; font-weight: 800; }

/* Ferramentas: a faixa escura vira destaque dentro da largura do conteudo, com canto
   arredondado (como a vitrine da loja e a Central de Downloads), sem ir de ponta a ponta. */
.mdi-loja-ui .tl-hero { width: min(1920px, calc(100% - 272px)); margin: 24px auto 0; border-radius: 12px; }
.mdi-loja-ui .tl-hero > .container { width: calc(100% - 96px); }
@media (max-width: 1365px) { .mdi-loja-ui .tl-hero { width: calc(100% - 196px); } }
@media (max-width: 1007px) { .mdi-loja-ui .tl-hero { width: calc(100% - 100px); } .mdi-loja-ui .tl-hero > .container { width: calc(100% - 48px); } }
@media (max-width: 640px) { .mdi-loja-ui .tl-hero { width: calc(100% - 32px); margin-top: 14px; } .mdi-loja-ui .tl-hero > .container { width: calc(100% - 28px); } }
/* Cartoes das paginas institucionais e da lateral com o canto da loja. */
.mdi-loja-ui .about-card, .mdi-loja-ui .widget-box, .mdi-loja-ui .sidebar-block, .mdi-loja-ui .tu-card, .mdi-loja-ui .tl-card { border-radius: var(--lh-r); }

/* "Acabaram de chegar": fileira com setas (loja.js), no lugar da grade alta laranja. */
.mdi-loja-ui .ofertas-novas-section { margin: 0 0 48px; padding: 0; border: 0; border-radius: 0; background: none; }
.mdi-loja-ui .ofertas-novas-section .ofertas-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 270px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: -4px -4px 0; padding: 4px 4px 10px; }
.mdi-loja-ui .ofertas-novas-section .ofertas-grid::-webkit-scrollbar { display: none; }
.mdi-loja-ui .ofertas-novas-section .oferta-card { scroll-snap-align: start; }
.mdi-loja-ui .ofertas-novas-section .oferta-card-linkarea { border-color: var(--lh-line); }
#ofertasNovasWrap { position: relative; }

/* Todas as ofertas: cartoes de 300 px (4 por linha em 1536), no padrao dos cartoes da loja. */
.mdi-loja-ui #ofertasGridWrap .ofertas-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.mdi-loja-ui .oferta-card-linkarea { border: 1px solid var(--lh-line); border-radius: var(--lh-r); box-shadow: var(--lh-shadow); transition: transform .25s var(--lh-ease), box-shadow .25s; }
.mdi-loja-ui .oferta-card-linkarea:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-up); }
.mdi-loja-ui .oferta-thumb { height: auto; aspect-ratio: 4 / 3; }
.mdi-loja-ui .oferta-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mdi-loja-ui .oferta-info { padding: 12px 14px 14px; }
.mdi-loja-ui .oferta-title { font-size: .9rem; line-height: 1.3; }
.mdi-loja-ui .oferta-cta { border-radius: 6px; }
/* Pe do cartao: "Historico de preco" com a linha toda e "Esta oferta acabou?" como uma
   bandeirinha discreta no canto (o texto aparece ao passar o mouse; title vem do loja.js). */
.mdi-loja-ui .oferta-card.has-ph .ph-btn { left: 0; width: calc(100% - 44px); justify-content: flex-start; padding: 0 0 0 14px; font-size: .78rem; white-space: nowrap; }
.mdi-loja-ui .oferta-card.has-ph .oferta-card-report, .mdi-loja-ui .oferta-card .oferta-card-report { left: auto !important; right: 8px !important; bottom: 5px; width: 30px !important; height: 30px; padding: 0; border-radius: 999px; font-size: 0; text-decoration: none; opacity: .55; transition: opacity .15s, background-color .15s; }
.mdi-loja-ui .oferta-card .oferta-card-report::before { content: ""; display: block; width: 14px; height: 14px; margin: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4h9l1 2h5v10h-7l-1-2H7v7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4h9l1 2h5v10h-7l-1-2H7v7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mdi-loja-ui .oferta-card .oferta-card-report:hover { opacity: 1; color: #b91c1c; background: rgba(220, 38, 38, .08); }
.mdi-loja-ui .oferta-card .oferta-card-report.is-done { opacity: 1; color: #15803d; }
.mdi-loja-ui .oferta-card .oferta-card-report.is-done::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.mdi-loja-ui .ofertas-sort-pill { border-radius: 999px; }
@media (max-width: 640px) {
	.mdi-loja-ui #ofertasGridWrap .ofertas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mdi-loja-ui .ofertas-novas-section .ofertas-grid { grid-auto-columns: 46%; }
	.mdi-loja-ui .cp-section, .mdi-loja-ui .cupons-section:not(.cupons-section-empty), .mdi-loja-ui .mdi-of-como, .mdi-loja-ui .mdi-of-sobre, .mdi-loja-ui .mdi-of-faq, .mdi-loja-ui .ofertas-lojas-nav, .mdi-loja-ui .cupons-store-block, .mdi-loja-ui .cupons-howto, .mdi-loja-ui .cupons-faq { padding: 18px 14px; margin-bottom: 28px; }
}

/* ---------- Blog, categorias, busca e arquivos como "homes" (category.php, home.php,
   index.php, archive.php): cabecalho, vitrine, paineis, lista e categorias ---------- */
.lh-arq-head { margin: 0 0 28px; }
.lh-arq-head .breadcrumb, .lh-arq-head .mdi-breadcrumb { margin-bottom: 8px; }
.lh-arq-head h1 { margin: 0 0 6px; color: var(--lh-text); font-family: "Outfit", Arial, sans-serif; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); font-weight: 800; line-height: 1.1; }
.lh-arq-head .archive-description, .lh-arq-head .archive-description p { max-width: 760px; margin: 0; color: var(--lh-muted); font-size: 1rem; line-height: 1.6; }
.lh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lh-chip { padding: 6px 14px; border: 1px solid var(--lh-line); border-radius: 999px; background: var(--lh-panel); color: var(--lh-text); font-size: .85rem; font-weight: 600; transition: border-color .167s, color .167s, background-color .167s; }
.lh-chip:hover { border-color: var(--lh-accent); color: var(--lh-accent); }
.lh-chip.is-current { border-color: var(--lh-accent); background: var(--lh-accent); color: #fff; }
.lh-arquivo .lh-spotlight { margin-bottom: 24px; }
.lh-arquivo .lh-duo { margin-bottom: 64px; }
.lh-arquivo .content-grid { margin-bottom: 64px; }
.lh-vazio { margin: 0 0 16px; color: var(--lh-muted); }
.lh-arquivo .feed-heading { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
.lh-busca-form { display: flex; align-items: center; gap: 10px; max-width: 760px; margin-top: 18px; padding: 6px 6px 6px 16px; border: 1px solid var(--lh-line); border-radius: 999px; background: var(--lh-panel); box-shadow: var(--lh-shadow); }
.lh-busca-form:focus-within { border-color: var(--lh-accent); }
.lh-busca-form svg { flex: none; width: 18px; height: 18px; fill: var(--lh-muted); }
.lh-busca-form input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; color: var(--lh-text); font: inherit; font-size: 1rem; outline: none; }
.lh-busca-form button { flex: none; padding: 9px 20px; border: 0; border-radius: 999px; background: var(--lh-accent); color: #fff; font-weight: 700; cursor: pointer; }
.lh-busca .lh-row { margin-bottom: 48px; }
@media (max-width: 640px) {
	.lh-arq-head { margin-bottom: 18px; }
	.lh-arquivo .lh-duo, .lh-arquivo .content-grid { margin-bottom: 32px; }
	.lh-busca-form button { padding: 9px 14px; }
}

/* ---------- Anuncio do topo dentro do fundo da pagina (sem faixa branca separada) ----------
   Post: o bloco do anuncio ganha a cor da faixa do titulo, de ponta a ponta, e encosta nela.
   Programa: a faixa com a cor do programa comeca no topo da pagina (atras do anuncio) e
   some no mesmo ponto de antes. So o anuncio do topo (o que vem antes do <main>). */
body.mdi-loja-ui.single-post .ad-container:not(main ~ .ad-container) { padding-bottom: 1px; background: var(--clean-soft, #f7f8fa); box-shadow: 0 0 0 100vmax var(--clean-soft, #f7f8fa); clip-path: inset(0 -100vmax); }
body.mdi-loja-ui.single-programa main.mdi-loja { position: static; isolation: auto; }
body.mdi-loja-ui.single-programa .loja-app-bg { top: 0; height: 1100px; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }

/* ---------- Pagina Sobre no formato da "Sobre" da Microsoft Store (template-parts/sobre-loja.php):
   topo pastel com o titulo em degrade, banners grandes intercalados com cartoes, pontinho
   pulsando nos selos (como a loja) e tudo entrando com a animacao do site ---------- */
body.mdi-loja-ui.page:has(.ab-page) { background: var(--lh-bg); }
.ab-page { overflow: hidden; padding-bottom: 32px; }
.ab-page h2 { margin: 0; color: var(--lh-text); font-family: "Outfit", Arial, sans-serif; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.ab-page p { line-height: 1.65; }

/* Topo */
.ab-hero { position: relative; isolation: isolate; padding: 40px 0 72px; }
.ab-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #f3f6ff 0%, var(--lh-bg) 100%); }
.ab-hero-bg span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: ab-blob 18s ease-in-out infinite alternate; }
.ab-hero-bg span:nth-child(1) { width: 520px; height: 520px; top: -140px; right: 6%; background: #9bc4ff; }
.ab-hero-bg span:nth-child(2) { width: 460px; height: 460px; top: 120px; right: 30%; background: #e2b8ff; animation-delay: -6s; }
.ab-hero-bg span:nth-child(3) { width: 420px; height: 420px; bottom: -160px; left: -80px; background: #ffd1e6; animation-delay: -12s; }
@keyframes ab-blob { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.12); } }
[data-theme="dark"] .ab-hero-bg { background: linear-gradient(180deg, #111a2e 0%, var(--lh-bg) 100%); }
[data-theme="dark"] .ab-hero-bg span { opacity: .22; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; }
.ab-grad { margin: 14px 0 18px; font-family: "Outfit", Arial, sans-serif; font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; background: linear-gradient(100deg, #0067c0 0%, #4f46e5 45%, #9333ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-lead { margin: 0 0 12px; color: var(--lh-text); font-size: 1.15rem; font-weight: 600; }
.ab-hero-text > p:not(.ab-lead) { max-width: 600px; margin: 0; color: var(--lh-muted); }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 6px; font-weight: 700; transition: transform .2s var(--lh-ease), box-shadow .2s, background-color .2s; }
.ab-btn svg { width: 18px; height: 18px; fill: currentColor; }
.ab-btn-yt { background: #e11d48; color: #fff; box-shadow: 0 8px 20px rgba(225, 29, 72, .25); }
.ab-btn-yt:hover { color: #fff; transform: translateY(-2px); }
.ab-btn-ghost { border: 1px solid var(--lh-line); background: var(--lh-panel); color: var(--lh-text); }
.ab-btn-ghost:hover { color: var(--lh-accent); transform: translateY(-2px); }
.ab-hero-art { position: relative; justify-self: center; width: min(100%, 440px); }
.ab-hero-photo { margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 60px rgba(30, 41, 99, .22); }
.ab-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ab-float { position: absolute; display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 14px 30px rgba(30, 41, 99, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: ab-flutua 6s ease-in-out infinite; }
.ab-float strong { color: #0f172a; font-family: "Outfit", Arial, sans-serif; font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.ab-float small { color: #475569; font-size: .74rem; }
.ab-float-1 { top: 10%; left: -14%; }
.ab-float-2 { top: 46%; right: -12%; animation-delay: -2s; }
.ab-float-3 { bottom: 6%; left: -8%; animation-delay: -4s; }
@keyframes ab-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Icones empilhados + titulo central */
.ab-intro { margin: 0 auto 72px; text-align: center; }
.ab-stack { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 22px; }
.ab-ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 -6px; border: 3px solid var(--lh-bg); border-radius: 16px; color: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, .18); transition: transform .3s var(--lh-ease); }
.ab-ico svg { width: 30px; height: 30px; fill: currentColor; }
.ab-ico-site { background: linear-gradient(135deg, #0ea5e9, #2563eb); transform: rotate(-8deg) translateY(6px); }
.ab-ico-ig { background: linear-gradient(135deg, #f59e0b, #e11d48 55%, #9333ea); transform: rotate(-4deg); }
.ab-ico-yt { width: 82px; height: 82px; z-index: 1; background: #e11d48; }
.ab-ico-yt svg { width: 40px; height: 40px; }
.ab-ico-of { background: linear-gradient(135deg, #22c55e, #059669); transform: rotate(4deg); }
.ab-ico-logo { background: linear-gradient(135deg, #1e3a8a, #4f46e5); font-family: "Outfit", Arial, sans-serif; font-size: 1.7rem; font-weight: 900; transform: rotate(8deg) translateY(6px); }
.ab-intro:hover .ab-ico { transform: none; }
.ab-intro > p { max-width: 720px; margin: 14px auto 0; color: var(--lh-muted); }
.ab-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.ab-stats li { display: flex; flex-direction: column; min-width: 170px; padding: 16px 20px; border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); }
.ab-stats strong { color: var(--lh-accent); font-family: "Outfit", Arial, sans-serif; font-size: 1.6rem; font-weight: 800; }
.ab-stats span { color: var(--lh-muted); font-size: .85rem; }

/* Banners grandes */
.ab-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; margin-bottom: 24px; padding: 48px 56px; overflow: hidden; border-radius: 16px; color: #fff; }
.ab-banner h2 { margin: 14px 0 14px; color: #fff; }
.ab-banner p { margin: 0 0 10px; color: rgba(255, 255, 255, .88); }
.ab-banner-roxo { background: radial-gradient(60% 90% at 90% 20%, rgba(244, 114, 182, .55), transparent 70%), linear-gradient(120deg, #4c1d95 0%, #7c3aed 55%, #c026d3 100%); }
.ab-banner-escuro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: radial-gradient(50% 80% at 10% 80%, rgba(56, 189, 248, .25), transparent 70%), linear-gradient(120deg, #0b1220 0%, #16213b 100%); margin-bottom: 72px; }
.ab-banner-azul { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: radial-gradient(55% 90% at 85% 10%, rgba(125, 211, 252, .5), transparent 70%), linear-gradient(120deg, #1d4ed8 0%, #2563eb 50%, #0ea5e9 100%); margin-bottom: 72px; }
.ab-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ab-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.ab-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: ab-pulso 2s ease-in-out .5s infinite; }
@keyframes ab-pulso { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.ab-quote { position: relative; margin: 0; padding: 32px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: rotate(-1.5deg); transition: transform .4s var(--lh-ease); }
.ab-banner:hover .ab-quote { transform: none; }
.ab-quote::before { content: "\201C"; position: absolute; top: -18px; left: 20px; color: #fff; font-family: Georgia, serif; font-size: 5rem; line-height: 1; opacity: .5; }
.ab-quote p { margin: 0 0 14px; color: #fff; font-family: "Outfit", Arial, sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1.35; }
.ab-quote cite { color: rgba(255, 255, 255, .8); font-size: .85rem; font-style: normal; }
.ab-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ab-steps li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .06); font-family: "Outfit", Arial, sans-serif; font-size: 1.15rem; font-weight: 700; transition: transform .25s var(--lh-ease), background-color .25s; }
.ab-steps li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .12); }
.ab-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #38bdf8, #6366f1); font-size: .95rem; }

/* Dois cartoes de recurso */
.ab-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 72px; }
.ab-feature { display: flex; gap: 18px; padding: 28px; border: 1px solid var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); transition: transform .25s var(--lh-ease), box-shadow .25s; }
.ab-feature:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-up); }
.ab-feature h3 { margin: 0 0 6px; font-family: "Outfit", Arial, sans-serif; font-size: 1.25rem; font-weight: 700; }
.ab-feature p { margin: 0; color: var(--lh-muted); font-size: .95rem; }
.ab-feature-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; color: #fff; }
.ab-feature-ico svg { width: 26px; height: 26px; fill: currentColor; }
.ab-feature-azul { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.ab-feature-rosa { background: linear-gradient(135deg, #fb7185, #c026d3); }

/* Quem esta por tras */
.ab-head { max-width: 760px; margin: 0 0 28px; }
.ab-head p { margin: 10px 0 0; color: var(--lh-muted); font-size: 1.05rem; }
.ab-people { margin-bottom: 72px; }
.ab-people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ab-person { display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--lh-line); border-radius: 16px; background: var(--lh-panel); box-shadow: var(--lh-shadow); transition: transform .25s var(--lh-ease), box-shadow .25s; }
.ab-person:hover { transform: translateY(-4px); box-shadow: var(--lh-shadow-up); }
.ab-person-photo { overflow: hidden; background: linear-gradient(160deg, #dbeafe, #ede9fe); }
.ab-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--lh-ease); }
.ab-person:hover .ab-person-photo img { transform: scale(1.04); }
.ab-person-body { padding: 26px 28px; }
.ab-role { color: var(--lh-accent); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ab-person h3 { margin: 6px 0 10px; font-family: "Outfit", Arial, sans-serif; font-size: 1.45rem; font-weight: 800; }
.ab-person p { margin: 0 0 10px; color: var(--lh-muted); font-size: .93rem; }
.ab-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: #c13584; font-weight: 700; }
.ab-link svg { width: 18px; height: 18px; fill: currentColor; }

/* Banner azul: blocos do ecossistema */
.ab-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-tile { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s var(--lh-ease), background-color .25s; }
.ab-tile:hover { color: #fff; transform: translateY(-3px); background: rgba(255, 255, 255, .22); }
.ab-tile svg { width: 26px; height: 26px; margin-bottom: 6px; fill: currentColor; }
.ab-tile strong { font-family: "Outfit", Arial, sans-serif; font-size: 1.15rem; font-weight: 800; }
.ab-tile small { color: rgba(255, 255, 255, .85); font-size: .82rem; }

/* O que voce encontra */
.ab-find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; margin-bottom: 72px; }
.ab-find-art { padding: 36px; border-radius: 16px; background: radial-gradient(70% 80% at 20% 20%, rgba(147, 197, 253, .45), transparent 70%), radial-gradient(60% 70% at 85% 85%, rgba(216, 180, 254, .45), transparent 70%), var(--lh-panel); box-shadow: var(--lh-shadow); }
.ab-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ab-cloud li { padding: 10px 16px; border: 1px solid var(--lh-line); border-radius: 999px; background: var(--lh-panel); box-shadow: 0 4px 10px rgba(15, 23, 42, .06); color: var(--lh-text); font-weight: 700; animation: ab-flutua 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.ab-list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ab-list li { display: flex; align-items: center; gap: 12px; color: var(--lh-text); font-weight: 600; }
.ab-list span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 103, 192, .1); color: var(--lh-accent); }
.ab-list svg { width: 16px; height: 16px; fill: currentColor; }
.ab-find-q { margin: 22px 0 0; color: var(--lh-muted); font-style: italic; }

/* Explore agora */
.ab-explore h2 { margin-bottom: 24px; text-align: center; }
.ab-explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 220px; padding: 26px; overflow: hidden; border-radius: 16px; color: #fff; box-shadow: var(--lh-shadow); transition: transform .25s var(--lh-ease), box-shadow .25s; }
.ab-card:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--lh-shadow-up); }
.ab-card::before { content: ""; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform .6s var(--lh-ease); }
.ab-card:hover::before { transform: scale(1.25); }
.ab-card small { position: relative; color: rgba(255, 255, 255, .85); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ab-card strong { position: relative; max-width: 90%; font-family: "Outfit", Arial, sans-serif; font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.ab-card-go { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: transform .25s var(--lh-ease); }
.ab-card-go svg { width: 14px; height: 14px; }
.ab-card:hover .ab-card-go { transform: translateX(4px); }
.ab-card-marcas { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.ab-card-contato { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.ab-card-canal { background: linear-gradient(135deg, #e11d48, #9333ea); }
.ab-signoff { margin: 36px auto 0; max-width: 720px; color: var(--lh-muted); font-family: "Outfit", Arial, sans-serif; font-size: 1.15rem; font-weight: 600; text-align: center; }

@media (max-width: 1007px) {
	.ab-hero-grid, .ab-banner, .ab-banner-escuro, .ab-banner-azul, .ab-find { grid-template-columns: 1fr; }
	.ab-hero-art { width: min(100%, 380px); margin-top: 8px; }
	.ab-banner { padding: 36px 32px; }
	.ab-banner-escuro .ab-steps { order: 2; }
	.ab-people-grid, .ab-duo { grid-template-columns: 1fr; }
	.ab-explore-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ab-hero { padding: 20px 0 48px; }
	.ab-float { padding: 8px 12px; }
	.ab-float strong { font-size: 1.05rem; }
	.ab-float-1 { left: -4%; }
	.ab-float-2 { right: -4%; }
	.ab-float-3 { left: 0; }
	.ab-ico { width: 52px; height: 52px; }
	.ab-ico-yt { width: 66px; height: 66px; }
	.ab-intro, .ab-duo, .ab-people, .ab-find, .ab-banner-escuro, .ab-banner-azul { margin-bottom: 44px; }
	.ab-banner { padding: 28px 20px; border-radius: 14px; }
	.ab-quote { padding: 24px 20px; }
	.ab-quote p { font-size: 1.15rem; }
	.ab-steps { grid-template-columns: 1fr 1fr; }
	.ab-person { grid-template-columns: 1fr; }
	.ab-person-photo img { aspect-ratio: 4 / 3; }
	.ab-person-body { padding: 20px; }
	.ab-tiles { grid-template-columns: 1fr; }
	.ab-find-art { padding: 22px; }
	.ab-card { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
	.ab-hero-bg span, .ab-float, .ab-cloud li, .ab-dot::after { animation: none; }
}

/* ---------- Post infinito: entre um artigo e outro so uma linha fina com "Continue lendo"
   (sem caixa nem titulo repetido); o artigo seguinte comeca com o anuncio do topo dele
   dentro da faixa do titulo (post-infinito.js) ---------- */
.mdi-loja-ui .next-post.is-done { gap: 16px; margin-top: 48px; border-top: 0; }
.mdi-loja-ui .next-post.is-done::before, .mdi-loja-ui .next-post.is-done::after { content: ""; flex: 1; height: 1px; background: var(--lh-line); }
.mdi-loja-ui .next-post.is-done .next-post-label { margin: 0; padding: 0; border-radius: 0; background: none; color: var(--lh-muted); font-size: .72rem; letter-spacing: .12em; }
.mdi-loja-ui .next-post.is-done + .post-stream-item .post-hero { margin-top: 0; }
.mdi-loja-ui .next-post.is-done + .post-stream-item { margin-top: 24px; }

/* ---------- Entrada ao rolar, como a loja (loja.js, site todo): fade de 1 s na curva da
   loja, em cascata de 0,05 s; a subida de 12 px reforca o "vem de baixo" ---------- */
.lh-surge { opacity: 0; }
.lh-surge.is-in { animation: lh-surge 1s cubic-bezier(.33, 1, .68, 1) var(--d, 0ms) both; }
@keyframes lh-surge { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Rodape do visual loja: colunas sem repeticao e as paginas legais na barra ---------- */
.mdi-loja-ui .site-footer { padding-top: 56px; }
/* Na home a ultima secao ja deixa os 64 px da loja; sem somar mais 80 px do rodape. */
.home.mdi-loja-ui .site-footer { margin-top: 0; }
.mdi-loja-ui .footer-bottom { flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.mdi-loja-ui .footer-legal { width: auto; margin: 0 0 0 auto; }
@media (max-width: 760px) {
	.mdi-loja-ui .footer-legal { width: 100%; margin: 6px 0 0; }
	/* Celular: as colunas de links duas a duas, para o rodape nao ficar comprido. */
	.mdi-loja-ui .footer-grid { gap: 32px 24px; }
	.mdi-loja-ui .footer-grid .footer-brand { flex-basis: 100%; }
	.mdi-loja-ui .footer-grid .footer-col { flex: 1 1 calc(50% - 12px); }
}

/* ---------- Celular e tablet ---------- */
/* Tablet (como a loja em 768 px): quadros embaixo do slide, o largo a esquerda
   (418 x 264) e os dois pequenos empilhados a direita (223 x 126); paineis um embaixo do outro. */
@media (max-width: 1007px) {
	.lh-spotlight { grid-template-columns: 1fr; margin-bottom: 32px; }
	.lh-side { grid-template-columns: minmax(0, 418fr) minmax(0, 223fr); grid-template-rows: 1fr 1fr; aspect-ratio: 653 / 264; }
	.lh-spot.is-wide { grid-column: 1; grid-row: 1 / span 2; }
	.lh-duo { grid-template-columns: 1fr; margin-bottom: 32px; }
}
/* Celular: o largo ocupa a linha toda (16:9) e os dois pequenos ficam lado a lado. */
@media (max-width: 640px) {
	.lh-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
	.lh-spot.is-wide { grid-column: 1 / -1; grid-row: auto; }
	.lh-spot { aspect-ratio: 16 / 9; }
	.lh-home .page-container { padding-top: 14px; }
	.lh-carousel .hero-overlay, .lh-spot .hero-overlay { padding: 14px 12px 10px; }
	.lh-carousel .hero-overlay { max-height: 75%; padding-bottom: 30px; }
	.lh-spot:not(.is-wide) .hero-overlay { max-height: 85%; }
	.lh-spot:not(.is-wide) .hero-title { font-size: .82rem; }
	.lh-spotlight .hero-title { font-size: .98rem; line-height: 1.2; }
	.lh-spotlight, .lh-duo { margin-bottom: 28px; }
	.lh-panel { padding: 14px; }
	.lh-panel-head { margin: 0 8px; }
	.lh-page { grid-template-columns: 1fr; grid-auto-rows: 120px; }
	.lh-panel.is-lista .lh-page { grid-auto-rows: 86px; }
	.lh-panel.is-lista .lh-item { gap: 12px; padding: 4px 8px; }
	.lh-panel:not(.is-lista) .lh-page { grid-auto-rows: 120px; }
	.lh-item { padding: 14px 8px 0; }
	.lh-item-img.is-capa { flex-basis: 124px; width: 124px; height: 70px; }
	.lh-item-art { flex-basis: 124px; width: 124px; height: 70px; }
	.lh-item-txt strong { font-size: .92rem; }
	.lh-track { grid-auto-columns: 140px; }
	.lh-row-ofertas .lh-track { grid-auto-columns: 160px; }
}

@media (prefers-reduced-motion: reduce) {
	.mdi-loja-ui *, .mdi-loja-ui *::before, .mdi-loja-ui *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
	.lh-surge { opacity: 1; }
}

/* ---------- Central de Downloads como a "home" dos programas (mdi_loja_central) ---------- */
.lh-selos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--lh-muted); font-size: .82rem; font-weight: 600; }
.lh-selos li { display: inline-flex; align-items: center; gap: 6px; }
.lh-selos li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
/* Downloads no lugar da nota da loja ("4.5 estrelas") e a etiqueta "Gratis" ao lado. */
.lh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.lh-meta .lh-tag, .lh-meta .lh-free { margin: 0; }
/* position: o texto so para leitor de tela fica preso no cartao (solto, alargava a pagina no celular). */
.lh-dl { position: relative; display: inline-flex; align-items: center; gap: 3px; color: var(--lh-muted); font-size: .75rem; font-weight: 600; line-height: 1.5; }
.lh-dl svg { width: 13px; height: 13px; }
.lh-dl.is-novo { color: #16a34a; }
/* Vitrine: a cor do icone desfocada no quadro inteiro e o icone grande em destaque. */
.lh-prog { isolation: isolate; background: #1b2a4a; }
.lh-prog-art { position: absolute; inset: 0; z-index: -1; background: var(--ic) center / cover no-repeat; filter: blur(60px) saturate(2.2); transform: scale(1.6); transition: transform .6s var(--lh-ease); }
.lh-prog-art.is-cor { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--cor) 55%, #fff), var(--cor) 60%, color-mix(in srgb, var(--cor) 60%, #000)); filter: none; transform: none; }
.lh-prog::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 9, 22, .78), rgba(4, 9, 22, .1) 55%, rgba(4, 9, 22, 0)); }
.lh-prog-ico { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); transition: transform .5s var(--lh-ease); }
.lh-prog-ico .loja-icon { display: grid; place-items: center; width: clamp(96px, 15vw, 196px); height: clamp(96px, 15vw, 196px); overflow: hidden; border-radius: 22%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.lh-prog-ico .loja-icon img { width: 100%; height: 100%; object-fit: contain; }
.lh-prog-ico .loja-icon-txt { background: rgba(255, 255, 255, .16); color: #fff; font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 800; }
.lh-prog:hover .lh-prog-ico { transform: translate(-50%, -50%) scale(1.06); }
.lh-prog:hover .lh-prog-art { transform: scale(1.75); }
.lh-prog-txt { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 28px 42px; color: #fff; }
.lh-prog-txt strong { font-family: "Outfit", Arial, sans-serif; font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 900; line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.lh-prog-txt small { max-width: 560px; color: rgba(255, 255, 255, .88); font-size: .92rem; line-height: 1.4; }
.lh-prog .lh-dl { color: rgba(255, 255, 255, .9); }
.lh-prog .lh-tag { padding: 1px 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); color: #fff; font-size: .72rem; font-weight: 600; }
/* Como o destaque da Microsoft Store: nome, informacoes e o botao "Baixar" embaixo, alinhados a esquerda. */
.lh-prog-btn { margin-top: 10px; padding: 8px 26px; border-radius: 6px; background: #fff; color: #0b1220; font-size: .9rem; font-style: normal; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .2s var(--lh-ease); }
.lh-prog:hover .lh-prog-btn { transform: translateY(-1px); }
.lh-spot.lh-prog .lh-prog-ico { top: 42%; }
.lh-spot.lh-prog .lh-prog-ico .loja-icon { width: 64px; height: 64px; }
.lh-spot.lh-prog.is-wide .lh-prog-ico { top: 50%; left: 28%; }
.lh-spot.lh-prog.is-wide .lh-prog-ico .loja-icon { width: clamp(80px, 9vw, 132px); height: clamp(80px, 9vw, 132px); }
.lh-spot.lh-prog.is-wide .lh-prog-txt { inset: 0 0 0 50%; justify-content: center; padding: 18px 18px 18px 0; }
.lh-spot.lh-prog.is-wide .lh-prog-txt strong { font-size: 1.25rem; }
.lh-spot.lh-prog.is-wide .lh-prog-btn { margin-top: 8px; padding: 6px 18px; font-size: .8rem; }
.lh-spot.lh-prog.is-wide::after { background: linear-gradient(to right, rgba(4, 9, 22, 0) 30%, rgba(4, 9, 22, .55)); }
.lh-spot.lh-prog:not(.is-wide) .lh-prog-txt { padding: 10px 12px; }
.lh-spot.lh-prog:not(.is-wide) .lh-prog-txt strong { overflow: hidden; max-width: 100%; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.lh-spot.lh-prog:not(.is-wide) .lh-meta { display: none; }
/* Explore por categoria (as Collections): cor por posicao e 3 icones sobrepostos. */
.lh-row-catprog .lh-track { grid-auto-columns: 232px; }
.lh-catprog { --c: #2563eb; position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 150px; padding: 18px; overflow: hidden; border-radius: var(--lh-r); background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); color: #fff; box-shadow: var(--lh-shadow); transition: transform .25s var(--lh-ease), box-shadow .25s; }
.lh-catprog[style*="--n:1"] { --c: #7c3aed; }
.lh-catprog[style*="--n:2"] { --c: #059669; }
.lh-catprog[style*="--n:3"] { --c: #ea580c; }
.lh-catprog[style*="--n:4"] { --c: #db2777; }
.lh-catprog[style*="--n:5"] { --c: #0891b2; }
.lh-catprog:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-up); }
.lh-catprog-ico { display: flex; margin-bottom: auto; padding-bottom: 14px; }
.lh-catprog-ico .loja-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-right: -10px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .85); border-radius: 12px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); transition: transform .3s var(--lh-ease); }
.lh-catprog-ico .loja-icon img { width: 100%; height: 100%; object-fit: contain; }
.lh-catprog-ico .loja-icon-txt { color: #fff; font-size: .8rem; font-weight: 700; }
.lh-catprog:hover .loja-icon:nth-child(1) { transform: translateY(-3px) rotate(-6deg); }
.lh-catprog:hover .loja-icon:nth-child(3) { transform: translateY(-3px) rotate(6deg); }
.lh-catprog strong { font-family: "Outfit", Arial, sans-serif; font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.lh-catprog small { color: rgba(255, 255, 255, .82); font-size: .8rem; }
/* Banner grande de colecao (o "Descobrir" da loja) com os icones flutuando. */
.lh-banner-prog { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 300px; margin: 16px 0 24px; padding: 40px 48px; overflow: hidden; border-radius: 16px; background: radial-gradient(circle at 85% 20%, #4f46e5 0, transparent 45%), radial-gradient(circle at 70% 90%, #0ea5e9 0, transparent 40%), #0b1220; color: #fff; }
.lh-banner-pill { display: inline-block; margin-bottom: 12px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lh-banner-prog h2 { margin: 0 0 10px; font-family: "Outfit", Arial, sans-serif; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 900; line-height: 1.1; }
.lh-banner-prog p { max-width: 460px; margin: 0; color: rgba(255, 255, 255, .8); font-size: 1rem; line-height: 1.55; }
.lh-banner-prog-ico { position: relative; height: 220px; }
.lh-banner-prog-ico > span { position: absolute; top: 6%; left: calc(var(--i) * 19%); animation: lh-flutua 5s ease-in-out calc(var(--i) * -.9s) infinite; }
.lh-banner-prog-ico > span:nth-child(even) { top: 46%; }
.lh-banner-prog-ico .loja-icon { display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, .4); }
.lh-banner-prog-ico .loja-icon img { width: 80%; height: 80%; object-fit: contain; }
.lh-banner-prog-ico .loja-icon-txt { color: #fff; font-size: 1.4rem; font-weight: 800; }
@keyframes lh-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 1007px) {
	.lh-banner-prog { padding: 32px; }
	.lh-banner-prog-ico .loja-icon { width: 76px; height: 76px; border-radius: 18px; }
}
@media (max-width: 640px) {
	.lh-prog-txt { padding: 14px 14px 30px; }
	.lh-prog-txt small { display: none; }
	.lh-prog-btn { display: none; }
	.lh-spot.lh-prog.is-wide .lh-prog-txt strong { font-size: 1rem; }
	.lh-spot.lh-prog:not(.is-wide) .lh-prog-ico .loja-icon { width: 52px; height: 52px; }
	.lh-row-catprog .lh-track { grid-auto-columns: 70%; }
	.lh-banner-prog { grid-template-columns: 1fr; min-height: 0; padding: 26px 22px 18px; }
	.lh-banner-prog-ico { height: 130px; }
	.lh-banner-prog-ico .loja-icon { width: 60px; height: 60px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.lh-banner-prog-ico > span { animation: none; }
	.lh-prog-art, .lh-prog-ico { transition: none; }
}

/* ---------- Ferramentas como a "home" das ferramentas (template-parts/ferramentas-loja.php) ---------- */
.lh-tl-loja .lh-busca-form { margin-top: 16px; }
.lh-tl-loja .lh-arq-head .lh-chips { margin-top: 12px; }
.lh-tl-loja .lh-spotlight { margin-top: 8px; }
/* Vitrine: as cores da ferramenta e o icone grande no meio (estrategia icone + cor). */
.lh-tl-spot { background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--a) 70%, #fff), transparent 60%), linear-gradient(135deg, var(--a), var(--b)); }
.lh-tl-spot-ico { position: absolute; top: 40%; left: 50%; display: grid; place-items: center; width: 30%; max-width: 180px; aspect-ratio: 1; border-radius: 22%; background: #fff; color: color-mix(in srgb, var(--b) 75%, #000); box-shadow: 0 18px 34px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); transition: transform .5s var(--lh-ease); }
.lh-tl-spot:hover .lh-tl-spot-ico { transform: translate(-50%, -50%) scale(1.06); }
.lh-spot.lh-tl-spot:not(.is-wide) .lh-tl-spot-ico { top: 38%; width: 34%; }
.lh-tl-loja .tl-suggest .lh-chip { padding: 6px 14px; border: 1px solid var(--lh-line); background: var(--lh-panel); color: var(--lh-text); font-size: .85rem; font-weight: 600; cursor: pointer; }
.lh-tl-loja .tl-suggest .lh-chip:hover { border-color: var(--lh-accent); color: var(--lh-accent); }
.lh-tl-spot-ico svg { width: 55%; height: 55%; }
.lh-tl-spot-txt { display: block; max-width: 560px; margin-top: 6px; color: rgba(255, 255, 255, .88); font-size: .92rem; line-height: 1.4; }
.lh-tl-art { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 28%, #fff), color-mix(in srgb, var(--b) 28%, #fff)); }
[data-theme="dark"] .lh-tl-art { background: linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, #202020), color-mix(in srgb, var(--b) 26%, #202020)); }
.lh-tl-art .lh-tool-ico { width: 44px; height: 44px; border-radius: 10px; }
.lh-tl-art .lh-tool-ico svg { width: 24px; height: 24px; }
/* Lista completa com busca e filtros: grade de cartoes de app. */
.lh-tl-todas { margin: 16px 0 64px; scroll-margin-top: 140px; }
.lh-tl-todas > .lh-chips { margin: 0 0 18px; }
.lh-tl-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.lh-tl-grade .tl-card { display: block; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; transition: none; }
.lh-tl-grade .tl-card::before { content: none; }
.lh-tl-grade .tl-card:hover { transform: none; box-shadow: none; }
.lh-tl-grade .tl-card[hidden] { display: none; }
.lh-tl-grade .lh-app { height: 100%; }
.lh-tl-todas .tl-empty { margin: 16px 0 0; color: var(--lh-muted); }
.mdi-loja-ui .tl-page.lh-home { background: transparent; }
@media (max-width: 640px) {
	.lh-tl-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lh-tl-spot-txt { display: none; }
	.lh-tl-todas { margin-bottom: 32px; }
}

/* ---------- Capas 3D das ferramentas nos cartoes (mdi_loja_tool_card) ---------- */
.lh-app-art.is-capa { display: block; background: var(--lh-hover); }
.lh-app-art.is-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--lh-ease); }
.lh-app:hover .lh-app-art.is-capa img { transform: scale(1.05); }
.lh-tl-spot > img { object-fit: cover; }

/* ---------- Pagina de cada ferramenta no visual loja (inc/tool-app.php + tool-ui.css):
   a capa 3D desfocada pinta o topo desde cima (atras do anuncio, como a pagina do
   programa), cabecalho mais limpo e cartoes com o raio e a sombra da loja ---------- */
body.mdi-loja-ui .tu-main { position: static; background: transparent; --tu-radius: var(--lh-r); --tu-shadow: var(--lh-shadow); }
body.mdi-loja-ui .lh-tl-band { position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 760px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
body.mdi-loja-ui .lh-tl-band::before { content: ""; position: absolute; inset: -120px; background: var(--capa) center / cover no-repeat; filter: blur(70px) saturate(1.5); opacity: .55; }
[data-theme="dark"] body.mdi-loja-ui .lh-tl-band::before { opacity: .35; }
body.mdi-loja-ui .tu-hero { padding: 28px 0 22px; }
body.mdi-loja-ui .tu-hero-ico { width: 64px; height: 64px; border: 0; border-radius: 16px; background: #fff; color: var(--tu-fg); box-shadow: 0 8px 22px rgba(15, 23, 42, .14); }
body.mdi-loja-ui .tu-hero-ico .tu-ico { width: 32px; height: 32px; }
body.mdi-loja-ui .tu-title { font-family: "Outfit", Arial, sans-serif; font-weight: 800; letter-spacing: -.01em; }
body.mdi-loja-ui .tu-card, body.mdi-loja-ui .tu-article { border-color: var(--lh-line); border-radius: var(--lh-r); box-shadow: var(--lh-shadow); }
body.mdi-loja-ui .tu-article h2 { font-family: "Outfit", Arial, sans-serif; font-weight: 700; }
body.mdi-loja-ui .tu-related { gap: 12px; }
body.mdi-loja-ui .mdi-app a.tu-rel { border-color: var(--lh-line); border-radius: var(--lh-r); background: var(--lh-panel); box-shadow: var(--lh-shadow); transition: transform .25s var(--lh-ease), box-shadow .25s; }
body.mdi-loja-ui .mdi-app a.tu-rel:hover { transform: translateY(-2px); box-shadow: var(--lh-shadow-up); }
@media (max-width: 640px) {
	body.mdi-loja-ui .lh-tl-band { height: 520px; }
}