/* Loja pública — camada de experiência (carregada depois do base.css e antes do CSS do template, que pode sobrescrever).
   Intensidade escolhida pela loja em Loja online › Aparência › Efeitos visuais: body.fx-completo | fx-sutil | fx-desligado.
   Sem JavaScript tudo continua visível; "reduzir movimento" do sistema desliga as animações (bloco no fim). */
:root {
  --grad: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  --brilho: color-mix(in srgb, var(--cor-primaria) 55%, transparent);
  --vidro: color-mix(in srgb, var(--cartao) 78%, transparent);
  --mola: cubic-bezier(.2, .9, .25, 1.15);
  --suave: cubic-bezier(.22, .61, .36, 1);
}
::selection { background: color-mix(in srgb, var(--cor-primaria) 32%, transparent); }
h1, h2 { letter-spacing: -.015em; }

/* Barra de progresso da leitura */
.lj-progresso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 70; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--progresso, 0)); pointer-events: none; box-shadow: 0 0 12px var(--brilho); }
.fx-desligado .lj-progresso { display: none; }

/* Topo em vidro fosco; encolhe e ganha sombra ao rolar (classe .rolou posta pelo experiencia.js) */
.fx-completo .lj-topo, .fx-sutil .lj-topo { background: var(--vidro); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); transition: box-shadow .3s, background-color .3s; view-transition-name: lj-topo; }
.lj-topo.rolou { box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .28); }
.lj-topo-linha { transition: min-height .3s var(--suave); }
.lj-topo.rolou .lj-topo-linha { min-height: 56px; }
.lj-menu a { position: relative; }
.fx-completo .lj-menu a::after, .fx-sutil .lj-menu a::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--suave); }
.lj-menu a:hover::after, .lj-menu a:focus-visible::after { transform: scaleX(1); }
.lj-busca input { transition: box-shadow .25s, border-color .25s, background-color .25s; }
.lj-busca input:focus { outline: 0; border-color: var(--cor-primaria); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-primaria) 18%, transparent); }
.lj-sugestoes { animation: lj-surgir .18s var(--suave); }
.lj-carrinho-link.lj-pulo, .lj-nav-movel a.lj-pulo { animation: lj-pulo .6s var(--mola); }
.lj-contagem { box-shadow: 0 0 0 2px var(--cartao); }
.lj-contagem[hidden] { display: none; }

/* Botões: brilho que atravessa, elevação colorida e onda no toque */
.lj-btn { position: relative; overflow: hidden; isolation: isolate; transition: filter .2s, transform .2s var(--mola), box-shadow .25s; }
.fx-completo .lj-btn:not(.secundario):not([disabled]):hover, .fx-sutil .lj-btn:not(.secundario):not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--brilho); }
.fx-completo .lj-btn::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-20deg); transition: left .7s var(--suave); z-index: -1; pointer-events: none; }
.fx-completo .lj-btn:hover::after { left: 120%; }
.lj-btn svg { transition: transform .25s var(--suave); }
.lj-btn:hover svg { transform: translateX(3px); }
.lj-onda { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: lj-onda .6s ease-out forwards; pointer-events: none; }
.lj-campo input:focus, .lj-campo select:focus, .lj-campo textarea:focus { outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-primaria) 16%, transparent); }

/* Títulos de seção com traço em gradiente e "Ver todos" com seta */
.lj-secao-titulo h2 { position: relative; padding-bottom: 10px; }
.lj-secao-titulo h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 4px; border-radius: 4px; background: var(--grad); }
.lj-ver-todos { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; text-decoration: none; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); color: var(--cor-primaria); transition: background-color .2s, gap .25s var(--suave); }
.lj-ver-todos:hover { gap: 10px; background: color-mix(in srgb, var(--cor-primaria) 18%, transparent); }

/* Herói vivo: aurora animada, partículas, texto em gradiente, busca e vitrine flutuante */
.lj-heroi-vivo { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cor-primaria) 42%, #060a18) 0%, #060a18 58%), #060a18; color: #fff; isolation: isolate; border: 1px solid rgba(255, 255, 255, .06); }
.lj-heroi-principal { align-items: stretch; }
@media (min-width: 960px) { .lj-heroi-principal { min-height: clamp(420px, 56vh, 580px); } }
.lj-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lj-aurora i { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; }
.lj-aurora i:nth-child(1) { background: var(--cor-primaria); left: -10%; top: -25%; }
.lj-aurora i:nth-child(2) { background: var(--cor-secundaria); right: -15%; top: 10%; }
.lj-aurora i:nth-child(3) { background: color-mix(in srgb, var(--cor-primaria) 50%, var(--cor-secundaria)); left: 25%; bottom: -45%; opacity: .4; }
.fx-completo .lj-aurora i:nth-child(1) { animation: lj-aurora-a 16s ease-in-out infinite alternate; }
.fx-completo .lj-aurora i:nth-child(2) { animation: lj-aurora-b 19s ease-in-out infinite alternate; }
.fx-completo .lj-aurora i:nth-child(3) { animation: lj-aurora-c 22s ease-in-out infinite alternate; }
.lj-heroi-vivo::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); }
.lj-particulas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.lj-heroi-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; width: 100%; padding: clamp(28px, 5vw, 64px); }
@media (min-width: 960px) { .lj-heroi-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.lj-heroi-grade > * { min-width: 0; }
.lj-heroi-vivo .lj-heroi-texto { text-shadow: none; background: none; }
.lj-heroi-principal .lj-heroi-texto { padding: 0; max-width: 640px; }
.lj-carrossel .lj-heroi-vivo .lj-heroi-texto { padding: clamp(24px, 5vw, 56px); }
.lj-heroi-selo { max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-bottom: 18px; }
.lj-heroi-selo i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: lj-pulso 2s infinite; }
.lj-heroi-principal h1 { font-size: clamp(2.1rem, 5.6vw, 4rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: .35em; }
.lj-gradiente-texto { background: linear-gradient(100deg, #fff 0%, color-mix(in srgb, var(--cor-primaria) 55%, #fff) 35%, #fff 55%, color-mix(in srgb, var(--cor-secundaria) 55%, #fff) 80%, #fff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-completo .lj-gradiente-texto { animation: lj-reluzir 9s linear infinite; }
.lj-heroi-frase { font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, .78); max-width: 52ch; margin: 0 0 22px; }
.lj-heroi-busca { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); max-width: 560px; transition: box-shadow .3s, border-color .3s; color: rgba(255, 255, 255, .8); }
.lj-heroi-busca:focus-within { border-color: color-mix(in srgb, var(--cor-primaria) 70%, #fff); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-primaria) 25%, transparent), 0 20px 50px -20px var(--brilho); }
.lj-heroi-busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; height: 44px; font-size: 1rem; outline: 0; }
.lj-heroi-busca input::placeholder { color: rgba(255, 255, 255, .6); }
.lj-heroi-busca .lj-btn { border-radius: 999px; background: var(--grad); color: #fff; }
.lj-heroi-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.lj-heroi-vivo .lj-heroi-acoes .lj-btn:not(.secundario) { background: #fff; color: #0b1020; }
.lj-heroi-vivo .lj-btn.secundario, .lj-heroi .lj-heroi-acoes .lj-btn.secundario { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .04); }
.lj-heroi-vivo .lj-btn.secundario:hover { background: rgba(255, 255, 255, .12); }
.lj-heroi-vitrine { position: relative; min-height: 340px; display: none; perspective: 1000px; }
@media (min-width: 960px) { .lj-heroi-vitrine { display: block; } }
.lj-flutuante { position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); transform: translate3d(calc(var(--mx, 0) * var(--prof, 12px)), calc(var(--my, 0) * var(--prof, 12px)), 0); transition: transform .4s var(--suave); }
.lj-flutuante .midia { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 14px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.lj-flutuante .midia img, .lj-flutuante .midia svg { width: 100%; height: 100%; object-fit: contain; }
.lj-flutuante .txt { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; line-height: 1.25; max-width: 190px; }
.lj-flutuante small { font-size: 1rem; font-weight: 800; color: color-mix(in srgb, var(--cor-primaria) 45%, #fff); }
.lj-flutuante.f1 { left: 4%; top: 4%; --prof: 18px; }
.lj-flutuante.f2 { right: 0; top: 36%; --prof: -14px; }
.lj-flutuante.f3 { left: 14%; bottom: 2%; --prof: 10px; }
.fx-completo .lj-flutuante .midia { animation: lj-flutuar 6s ease-in-out infinite; }
.fx-completo .lj-flutuante.f2 .midia { animation-delay: -2s; }
.fx-completo .lj-flutuante.f3 .midia { animation-delay: -4s; }
.lj-flutuante:hover { border-color: rgba(255, 255, 255, .35); }

/* Carrossel: troca com esmaecimento, imagem em movimento lento, setas e pontos com progresso */
.fx-completo .lj-carrossel, .fx-sutil .lj-carrossel { display: grid; }
.fx-completo .lj-carrossel > .lj-heroi, .fx-sutil .lj-carrossel > .lj-heroi { display: flex; grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s var(--suave), visibility 0s .8s; }
.fx-completo .lj-carrossel > .lj-heroi.ativo, .fx-sutil .lj-carrossel > .lj-heroi.ativo { opacity: 1; visibility: visible; transition: opacity .8s var(--suave); }
.lj-carrossel .lj-heroi { min-height: clamp(220px, 32vw, 420px); }
.lj-carrossel .lj-heroi.com-imagem { min-height: clamp(240px, 40vw, 480px); }
.fx-completo .lj-carrossel .lj-heroi.ativo > img { animation: lj-kenburns 9s ease-out both; }
.fx-completo .lj-carrossel .lj-heroi.ativo .lj-heroi-texto > * { animation: lj-entrar-texto .9s var(--suave) both; }
.fx-completo .lj-carrossel .lj-heroi.ativo .lj-heroi-texto > :nth-child(2) { animation-delay: .12s; }
.fx-completo .lj-carrossel .lj-heroi.ativo .lj-heroi-texto > :nth-child(3) { animation-delay: .24s; }
.lj-carrossel .lj-heroi.com-imagem .lj-heroi-texto { background: none; padding: clamp(24px, 5vw, 56px); }
.lj-carrossel .lj-heroi.com-imagem::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 8, 20, .72) 0%, rgba(4, 8, 20, .35) 45%, transparent 75%); pointer-events: none; }
.lj-carrossel .lj-heroi.com-imagem .lj-heroi-texto { z-index: 1; }
.lj-carrossel .lj-heroi h1, .lj-carrossel .lj-heroi h2 { font-size: clamp(1.6rem, 4.2vw, 3rem); letter-spacing: -.03em; }
.lj-carrossel-seta { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 14, 28, .35); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .25s, transform .25s var(--mola), background-color .2s; }
.lj-carrossel-seta.ant { left: 14px; } .lj-carrossel-seta.prox { right: 14px; }
.lj-carrossel:hover .lj-carrossel-seta, .lj-carrossel-seta:focus-visible { opacity: 1; }
.lj-carrossel-seta:hover { transform: scale(1.08); background: rgba(10, 14, 28, .6); }
@media (hover: none) { .lj-carrossel-seta { display: none; } }
.lj-carrossel-pontos { position: relative; z-index: 2; }
.fx-completo .lj-carrossel-pontos, .fx-sutil .lj-carrossel-pontos { grid-area: 1 / 1; align-self: end; margin: 0 0 16px; }
.lj-carrossel-pontos button { position: relative; overflow: hidden; transition: width .4s var(--suave), background-color .3s; }
.fx-completo .lj-carrossel-pontos button, .fx-sutil .lj-carrossel-pontos button { width: 10px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .45); }
.fx-completo .lj-carrossel-pontos button.ativo, .fx-sutil .lj-carrossel-pontos button.ativo { width: 42px; background: rgba(255, 255, 255, .35); }
.fx-completo .lj-carrossel-pontos button.ativo::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; animation: lj-progresso-slide var(--duracao, 6s) linear forwards; }
.lj-carrossel.pausado .lj-carrossel-pontos button.ativo::after { animation-play-state: paused; }

/* Faixa de vantagens */
.lj-vantagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; margin: 22px 0 6px; }
.lj-vantagem { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra); transition: transform .3s var(--mola), box-shadow .3s, border-color .3s; }
.lj-vantagem .ic { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 10px 22px -10px var(--brilho); }
.lj-vantagem b { display: block; font-size: .95rem; line-height: 1.25; }
.lj-vantagem small { display: block; font-size: .8rem; color: var(--texto-sub); line-height: 1.35; margin-top: 2px; }
.fx-completo .lj-vantagem:hover, .fx-sutil .lj-vantagem:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cor-primaria) 45%, transparent); box-shadow: 0 16px 34px -18px var(--brilho); }
.fx-completo .lj-vantagem:hover .ic svg { animation: lj-balancar .6s var(--mola); }
@media (max-width: 699px) {
  .lj-vantagens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 4px 16px 8px; }
  .lj-vantagens::-webkit-scrollbar { display: none; }
  .lj-vantagem { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Categorias */
.lj-categoria { position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--mola), box-shadow .3s, border-color .3s; }
.lj-categoria::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cor-primaria) 16%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; }
.lj-categoria .ic { transition: transform .4s var(--mola), box-shadow .3s; }
.fx-completo .lj-categoria:hover, .fx-sutil .lj-categoria:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--cor-primaria) 45%, transparent); box-shadow: 0 18px 36px -20px var(--brilho); }
.lj-categoria:hover::before { opacity: 1; }
.fx-completo .lj-categoria:hover .ic { transform: scale(1.1) rotate(-4deg); box-shadow: 0 10px 24px -12px var(--brilho); }

/* Cards de produto: inclinação 3D, luz que segue o cursor, borda em gradiente, zoom e selo de desconto */
.lj-card { position: relative; isolation: isolate; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .35s var(--suave), box-shadow .35s; will-change: transform; }
.fx-completo .lj-card:hover, .fx-sutil .lj-card:hover { --ty: -6px; box-shadow: 0 26px 50px -28px var(--brilho), var(--sombra); }
.lj-card::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .22), transparent 60%); opacity: 0; transition: opacity .3s; }
.lj-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.fx-completo .lj-card:hover::before { opacity: 1; }
.fx-completo .lj-card:hover::after, .fx-sutil .lj-card:hover::after { opacity: 1; }
.lj-card-midia { position: relative; }
.lj-card-midia img, .lj-card-midia svg { transition: transform .6s var(--suave); }
.fx-completo .lj-card:hover .lj-card-midia img, .fx-completo .lj-card:hover .lj-card-midia svg { transform: scale(1.07); }
.lj-card-selo { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 8px 18px -8px rgba(239, 68, 68, .8); }
.fx-completo .lj-card-selo { animation: lj-selo 2.6s ease-in-out infinite; }
.lj-disp.ok::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
.fx-completo .lj-disp.ok::before { animation: lj-pulso-ok 2.2s infinite; }
.lj-compra-rapida .lj-btn { transition: transform .2s var(--mola), box-shadow .25s, filter .2s; }

/* Projetos e caixas */
.lj-projeto-card { transition: transform .3s var(--mola), box-shadow .3s; }
.lj-projeto-card .capa img { transition: transform .6s var(--suave); }
.fx-completo .lj-projeto-card:hover, .fx-sutil .lj-projeto-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px var(--brilho); }
.fx-completo .lj-projeto-card:hover .capa img { transform: scale(1.06); }

/* Revelação ao rolar (classe .lj-revelar posta pelo experiencia.js; sem JS nada fica escondido) */
.fx-completo .lj-revelar { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); transition: opacity .7s var(--suave), transform .7s var(--suave), filter .7s var(--suave); transition-delay: calc(var(--ordem, 0) * 70ms); }
.fx-sutil .lj-revelar { opacity: 0; transition: opacity .6s var(--suave); transition-delay: calc(var(--ordem, 0) * 50ms); }
.fx-completo .lj-revelar.visivel, .fx-sutil .lj-revelar.visivel { opacity: 1; transform: none; filter: none; }
.fx-completo .lj-card.lj-revelar.visivel { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: opacity .7s var(--suave), transform .35s var(--suave), filter .7s var(--suave), box-shadow .35s; }
img.lj-esmaecer { opacity: 0; transition: opacity .5s var(--suave); }
img.lj-esmaecer.ok { opacity: 1; }

/* Produto: lupa na imagem principal */
.lj-galeria-principal { position: relative; }
.lj-galeria-principal.lj-lupa { cursor: zoom-in; }
.lj-galeria-principal img { transition: transform .35s var(--suave); }
.lj-galeria-principal.zoom img { transform: scale(2.1); }
.lj-produto-info .lj-preco b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lj-miniaturas button { transition: border-color .2s, transform .2s var(--mola); }
.lj-miniaturas button:hover { transform: translateY(-2px); }

/* Produto voando para o carrinho e aviso */
.lj-voando { position: fixed; z-index: 90; pointer-events: none; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); }
.lj-voando img, .lj-voando svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.lj-toast { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 12px 16px 14px; overflow: hidden; background: rgba(15, 18, 32, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .1); animation: lj-toast .45s var(--mola); }
.lj-toast::before { content: ''; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.5 15.5-4.5-4.5 1.6-1.6 2.9 2.9 6.4-6.4 1.6 1.6z'/%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='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.5 15.5-4.5-4.5 1.6-1.6 2.9 2.9 6.4-6.4 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lj-toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad); transform-origin: 0 50%; animation: lj-progresso-slide 3.8s linear reverse forwards; }
.lj-toast a { font-weight: 700; white-space: nowrap; }

/* Navegação inferior no celular (estilo aplicativo) e botão de voltar ao topo */
.lj-nav-movel { display: none; }
@media (max-width: 899px) {
  .lj-nav-movel { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; display: flex; justify-content: space-around; padding: 6px; border-radius: 20px; background: var(--vidro); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border: 1px solid var(--borda); box-shadow: 0 16px 40px -16px rgba(15, 23, 42, .45); view-transition-name: lj-nav-movel; }
  .lj-nav-movel a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 5px; border-radius: 14px; text-decoration: none; color: var(--texto-sub); font-size: .68rem; font-weight: 600; transition: color .2s, background-color .2s; }
  .lj-nav-movel a.ativo { color: var(--cor-primaria); background: color-mix(in srgb, var(--cor-primaria) 12%, transparent); }
  .lj-nav-movel a:active { transform: scale(.94); }
  .lj-nav-movel .lj-contagem { top: 2px; right: calc(50% - 22px); }
  body:has(.lj-nav-movel) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body:has(.lj-nav-movel) .lj-whats { bottom: calc(92px + env(safe-area-inset-bottom)); }
  body:has(.lj-nav-movel) .lj-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(.lj-nav-movel) .lj-topo-btn { bottom: calc(160px + env(safe-area-inset-bottom)); }
  body:has(.lj-nav-movel) .lj-rodape-fim { padding-bottom: 16px; }
}
.lj-topo-btn { position: fixed; right: 20px; bottom: 88px; z-index: 24; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--cor-primaria); background: var(--vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sombra-forte); transition: transform .3s var(--mola), opacity .3s; }
.lj-topo-btn[hidden] { display: grid; opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; }
.lj-topo-btn:hover { transform: translateY(-3px); }
.lj-topo-btn svg { position: absolute; inset: 1px; }
.lj-topo-btn .anel-fundo, .lj-topo-btn .anel { fill: none; stroke-width: 2.5; }
.lj-topo-btn .anel-fundo { stroke: var(--borda); }
.lj-topo-btn .anel { stroke: var(--cor-primaria); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progresso, 0) * 100); transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: round; }
.fx-desligado .lj-topo-btn { display: none; }

/* WhatsApp com anel pulsante e rodapé com linha em gradiente */
.fx-completo .lj-whats::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: lj-anel 2.4s ease-out infinite; }
.lj-whats { transition: transform .3s var(--mola); }
.lj-whats:hover { transform: scale(1.08) rotate(-6deg); }
.lj-rodape { position: relative; }
.lj-rodape::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); opacity: .85; }
.lj-rodape a { text-decoration: none; transition: color .2s; }
.lj-rodape a:hover { color: var(--cor-primaria); }

/* Transição entre páginas (navegadores com View Transitions; os demais navegam normalmente) */
::view-transition-old(root) { animation: lj-vt-sair .22s ease-in both; }
::view-transition-new(root) { animation: lj-vt-entrar .32s var(--suave) both; }

@keyframes lj-surgir { from { opacity: 0; transform: translateY(-6px); } }
@keyframes lj-pulo { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-8deg); } 65% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes lj-onda { to { transform: scale(2.6); opacity: 0; } }
@keyframes lj-aurora-a { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes lj-aurora-b { to { transform: translate(-22%, 12%) scale(.9); } }
@keyframes lj-aurora-c { to { transform: translate(-14%, -20%) scale(1.2); } }
@keyframes lj-pulso { 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@keyframes lj-pulso-ok { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes lj-reluzir { to { background-position: -220% 0; } }
@keyframes lj-flutuar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes lj-kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes lj-entrar-texto { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes lj-progresso-slide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lj-balancar { 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }
@keyframes lj-selo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes lj-toast { from { opacity: 0; transform: translate(-50%, 24px) scale(.94); } }
@keyframes lj-anel { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
@keyframes lj-vt-sair { to { opacity: 0; transform: translateY(-8px); } }
@keyframes lj-vt-entrar { from { opacity: 0; transform: translateY(10px); } }

/* Vitrine estática e "reduzir movimento" */
.fx-desligado *, .fx-desligado ::before, .fx-desligado ::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .lj-revelar { opacity: 1 !important; transform: none !important; filter: none !important; }
  .lj-card { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print { .lj-progresso, .lj-nav-movel, .lj-topo-btn { display: none !important; } }