/**
 * DROPE Loja: base visual v3 (11/11/2026).
 *
 * Referência pedida pelo dono: o desenho do GPL Times (home, /updates-latest,
 * /membership-plans e a página de produto vista por visitante), traduzido para
 * a paleta da DROPE: o cinza escuro do cabeçalho (--dh-dark) e o laranja como
 * cor de ação e de acento. Superfícies NEUTRAS (branco e cinza frio): creme,
 * bege e pêssego em área grande são proibidos, porque brigam com o cabeçalho.
 *
 * Este arquivo é a fundação comum de quatro telas: home, /changelog/,
 * /planos/ e a página de produto. Cada tela tem a sua folha por cima desta.
 * Quem precisar mudar um componente daqui muda AQUI, para as quatro telas
 * continuarem iguais entre si.
 *
 * Regras que valem para tudo:
 *   - Plano, sem sombra. Superfícies se separam com borda de 1px, troca de
 *     fundo e espaço. Nada de box-shadow, nem brilho interno, nem halo.
 *   - Nenhuma faixa decorativa de cor no topo ou na lateral de cartão.
 *   - Botão laranja leva texto BRANCO, sobre o laranja mais fundo (--lj-brand-2).
 *   - Nenhum conteúdo depende de JavaScript: entrada é `animation ... both`.
 *   - O kit do Elementor estiliza `a` com (0,1,1) e o reset do Hello estiliza
 *     `button`. Toda regra de link ou botão aqui é escrita como
 *     `.lj :is(a, button).classe` (0,2,1), que vence os dois sem !important.
 *
 * Carregado por Drope_Loja::usar() (includes/loja-base.php), que também
 * garante as fontes: Poppins nos títulos e Figtree no texto, a mesma do
 * cabeçalho.
 */

:root {
	/* ---------- Texto ---------- */
	--lj-ink: #1b1d21;        /* títulos e números; o mesmo cinza do cabeçalho */
	--lj-text: #474c54;       /* corpo (8,6:1 no branco) */
	--lj-muted: #6b7076;      /* secundário: piso da escala (4,99:1 no branco) */

	/* ---------- Estrutura ---------- */
	--lj-surface: #fff;
	--lj-canvas: #f5f6f8;     /* seção alternada e fundo de página interna */
	--lj-canvas-2: #eef0f3;   /* trilho, fundo de controle, miniatura vazia */
	--lj-line: #e6e7ea;       /* borda padrão de cartão */
	--lj-line-2: #eff0f2;     /* divisória dentro de cartão */
	--lj-line-3: #d9dce1;     /* borda em hover e de controle */

	/* ---------- Escuro (cabeçalho, rodapé, cartão em destaque) ---------- */
	--lj-dark: #1b1d21;
	--lj-dark-2: #24272c;
	--lj-dark-3: #2e3238;
	--lj-dark-line: rgba(255, 255, 255, 0.1);
	--lj-dark-text: rgba(255, 255, 255, 0.72);

	/* ---------- Marca ---------- */
	--lj-brand: #ff7e01;      /* acento: ícone, ponto, fio, sublinhado */
	--lj-brand-2: #ee6a00;    /* fundo de tudo que leva texto branco */
	--lj-brand-3: #d95f00;    /* hover do botão laranja */
	--lj-brand-text: #e86400; /* palavra laranja em título grande (3,2:1, AA grande) */
	--lj-brand-ink: #a34700;  /* texto laranja pequeno (6,1:1) */
	--lj-brand-tint: #fff4e8; /* fundo de realce PEQUENO: ícone, chip, selo */
	--lj-brand-tint-2: #ffe8d1;
	--lj-brand-line: #ffd9b3;

	/* ---------- Estado ---------- */
	--lj-ok: #15803d;
	--lj-ok-2: #16a34a;
	--lj-ok-tint: #ecfdf3;
	--lj-ok-line: #bbf7d0;
	--lj-info: #1d4ed8;
	--lj-info-tint: #eff4ff;
	--lj-info-line: #c7d7fe;
	--lj-warn-ink: #8a5300;
	--lj-warn-tint: #fff8eb;
	--lj-warn-line: #fde3ad;
	--lj-danger: #b42318;
	--lj-danger-tint: #fef3f2;
	--lj-danger-line: #fecdca;
	--lj-star: #f5a524;

	/* ---------- Tipo ---------- */
	--lj-display: Poppins, Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lj-sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lj-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

	/* ---------- Forma ---------- */
	/*
	 * Raio por PAPEL (crítica 2, 11/11): três valores para superfície e mais
	 * nenhum. Apareciam 18, 22, 24 e 26 em peças do mesmo nível.
	 *   cartão   16  item de lista, avaliação, produto, pergunta (--lj-r-md)
	 *   painel   20  plano, mosaico, resposta do FAQ, chamada final (--lj-r-lg)
	 *   bandeja  24  SÓ o contêiner que guarda outros cartões (--lj-r-xl)
	 * Abaixo disso ficam as peças pequenas: ladrilho de ícone (--lj-r),
	 * miniatura (--lj-r-sm) e selo de versão (--lj-r-xs). Pílula é --lj-pill.
	 */
	--lj-r-xs: 6px;
	--lj-r-sm: 8px;
	--lj-r: 12px;
	--lj-r-md: 16px;
	--lj-r-lg: 20px;
	--lj-r-xl: 24px;
	--lj-r-cartao: var(--lj-r-md);
	--lj-r-painel: var(--lj-r-lg);
	--lj-r-bandeja: var(--lj-r-xl);
	--lj-pill: 999px;

	/* ---------- Ritmo ---------- */
	/* A mesma régua do cabeçalho (--dh-w): o conteúdo alinha com a marca. */
	--lj-w: 1140px;
	--lj-sec-y: clamp(64px, 8vw, 104px);
	--lj-gap: clamp(16px, 2vw, 24px);

	/* ---------- Movimento ---------- */
	--lj-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--lj-t: 0.16s;
}

/* ============================================================
 * Raiz
 * ============================================================ */

/*
 * Toda seção ou página nova leva a classe `lj` na raiz. É ela que dá escopo
 * aos componentes e zera as margens que o tema e o Elementor espalham.
 */
.lj {
	font-family: var(--lj-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lj-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

.lj :where(h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }

/*
 * O style.css do tema tem `.page-content h3 { margin: 30px 0 15px }` (0,1,1),
 * que vence o zero acima. Home e /changelog/ moram dentro de .page-content.
 * Este seletor pesa (0,2,0): vence o do tema em qualquer ordem e perde para
 * as regras de componente das telas (.lj .classe), que vêm depois desta folha.
 */
.page-content .lj :where(h1, h2, h3, h4, h5, h6) { margin: 0; }
.lj :where(ul, ol) { padding: 0; list-style: none; }
.lj :where(img, svg, video) { display: block; max-width: 100%; }
.lj :where(img) { height: auto; }
.lj :where(a) { color: inherit; text-decoration: none; }
.lj :where(button) { font: inherit; }
.lj :where(strong, b) { font-weight: 700; color: var(--lj-ink); }

.lj-i { width: 18px; height: 18px; flex: none; }

.lj-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lj-num { font-variant-numeric: tabular-nums; }

/*
 * Anel de foco único, em tudo o que se alcança pelo teclado. O box-shadow
 * zerado tira o anel branco de 4 px que o reset do tema põe no foco e que
 * aparecia sobre os cartões escuros.
 */
.lj :focus-visible {
	outline: 2px solid var(--lj-brand);
	outline-offset: 3px;
	box-shadow: none;
}

/* ============================================================
 * Layout
 * ============================================================ */

.lj-wrap {
	width: min(var(--lj-w), calc(100% - 40px));
	margin-inline: auto;
}

.lj-sec {
	position: relative;
	padding-block: var(--lj-sec-y);
	background: var(--lj-surface);
}

.lj-sec--canvas { background: var(--lj-canvas); }
.lj-sec--tight { padding-block: clamp(40px, 5vw, 64px); }
.lj-sec--line { border-top: 1px solid var(--lj-line); }

/*
 * Faixa de topo das páginas internas (crítica 2, 11/11): uma peça só para
 * licenças, contato, suporte, cupons, FAQ, como utilizar, afiliado, legais,
 * sobre, DMCA, trabalhe conosco, limite, expirado, busca e catálogo. Antes
 * eram oito folhas com H1 de 40 a 62px e trilha a distâncias diferentes; no
 * GPL toda página interna tem a mesma faixa. Cada página só acrescenta o que é
 * dela (pílulas à direita, cartão de status) e alinha pelo topo.
 *
 *   <section class="lj-topo"><div class="lj-wrap lj-topo-in">
 *     <nav class="lj-crumbs">…</nav>
 *     <div class="lj-topo-txt"><h1 class="lj-h1 lj-h1--pagina">…</h1><p class="lj-lead">…</p></div>
 *     <div class="lj-topo-lado">(opcional)</div>
 *   </div></section>
 *
 * Exceções declaradas, com herói próprio: home, planos, DAU, acesso-novo e
 * o título de produto.
 */
.lj-topo {
	padding: clamp(28px, 3.2vw, 44px) 0 clamp(32px, 3.6vw, 48px);
	border-bottom: 1px solid var(--lj-line);
	background: var(--lj-canvas);
}

.lj .lj-topo-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 0 clamp(24px, 4vw, 56px);
}

.lj .lj-topo .lj-crumbs { margin-bottom: 14px; }

.lj .lj-topo-txt { display: grid; gap: 12px; min-width: 0; }

.lj .lj-topo .lj-lead { margin: 0; }

@media (min-width: 961px) {
	.lj .lj-topo-in:has(> .lj-topo-lado) { grid-template-columns: minmax(0, 1fr) auto; }
	.lj .lj-topo-in > .lj-crumbs { grid-column: 1 / -1; }
}

.lj .lj-topo-lado { align-self: start; margin-top: 18px; }

@media (min-width: 961px) {
	.lj .lj-topo-lado { margin-top: 0; }
}

.lj .lj-h1.lj-h1--pagina {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

/* A primeira seção depois da faixa começa sempre à mesma distância. */
.lj-topo + .lj-sec { padding-top: clamp(32px, 4vw, 56px); }

.lj-sec--dark {
	background: var(--lj-dark);
	color: var(--lj-dark-text);
}

/*
 * Fundo do herói: cinza frio clareando para o branco e grade de pontos bem
 * leve. É o mesmo gesto do GPL Times, neutro.
 */
.lj-bg-hero {
	/*
	 * Sem o brilho laranja que havia aqui (crítica de 11/11): num herói
	 * centrado ele virava uma mancha quente de um lado só.
	 */
	background:
		radial-gradient(circle at 1px 1px, rgba(27, 29, 33, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
		linear-gradient(180deg, #f3f4f7 0%, #f7f8fa 55%, #fff 100%);
}

/* ============================================================
 * Tipografia
 * ============================================================ */

.lj .lj-h1,
.lj .lj-h2,
.lj .lj-h3,
.lj .lj-display {
	font-family: var(--lj-display);
	color: var(--lj-ink);
	text-wrap: balance;
}

.lj .lj-h1 {
	font-size: clamp(36px, 5.4vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.lj .lj-h2 {
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.lj .lj-h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* A palavra que leva a cor no título, como o "Themes & Plugins" da referência. */
.lj .lj-hl { color: var(--lj-brand-text); }

.lj .lj-lead {
	max-width: 62ch;
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: var(--lj-text);
	text-wrap: pretty;
}

.lj .lj-small {
	font-size: 13px;
	line-height: 1.5;
	color: var(--lj-muted);
}

/*
 * Rótulo da seção: pílula com ponto, em caixa alta espaçada.
 * "• POR QUE A DROPE", "• DENTRO DO PLANO".
 *
 * Branca com texto em tinta e só o PONTO laranja (crítica de 11/11): o texto
 * laranja escuro que passa contraste em letra pequena lê como marrom ao lado
 * do laranja dos botões, e o fundo pêssego lembra o creme que o dono recusou.
 * Assim o rótulo é da mesma família da pílula do herói.
 */
.lj .lj-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 26px;
	padding: 0 12px 0 10px;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-pill);
	background: var(--lj-surface);
	font-family: var(--lj-sans);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--lj-ink);
}

.lj .lj-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lj-brand);
}

/* Cabeçalho de seção: rótulo, título, apoio. */
.lj .lj-head {
	display: grid;
	justify-items: start;
	gap: 14px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.lj .lj-head--center {
	justify-items: center;
	text-align: center;
}

.lj .lj-head--center .lj-lead { margin-inline: auto; }

/* Título à esquerda, ação à direita (vira pilha no celular). */
.lj .lj-head--split {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 32px;
}

.lj .lj-head--split > :not(.lj-head-acao) { grid-column: 1; }
.lj .lj-head--split > .lj-head-acao { grid-column: 2; grid-row: 1 / span 3; align-self: end; }

@media (max-width: 760px) {
	.lj .lj-head--split { grid-template-columns: minmax(0, 1fr); }
	.lj .lj-head--split > .lj-head-acao { grid-column: 1; grid-row: auto; }
}

/* ============================================================
 * Botões
 * ============================================================ */

/*
 * Pílula, como na referência. Altura padrão de 48px (alvo de toque folgado),
 * 40px no pequeno e 54px no grande. O ícone acompanha a cor do texto.
 */
.lj :is(a, button).lj-btn {
	--lj-btn-h: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--lj-btn-h);
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--lj-pill);
	background: var(--lj-surface);
	font-family: var(--lj-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	color: var(--lj-ink);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--lj-t) ease, border-color var(--lj-t) ease,
		color var(--lj-t) ease, transform 0.18s var(--lj-ease);
}

.lj :is(a, button).lj-btn:active { transform: translateY(1px); }

.lj :is(a, button).lj-btn .lj-i { width: 18px; height: 18px; }

/* A seta anda um pouco no hover: diz "isto leva a algum lugar". */
.lj :is(a, button).lj-btn .lj-i--seta { transition: transform 0.2s var(--lj-ease); }

@media (hover: hover) {
	.lj :is(a, button).lj-btn:hover .lj-i--seta { transform: translateX(3px); }
}

.lj :is(a, button).lj-btn--sm { --lj-btn-h: 40px; padding: 0 18px; font-size: 14px; }
.lj :is(a, button).lj-btn--lg { --lj-btn-h: 54px; padding: 0 30px; font-size: 16px; }
.lj :is(a, button).lj-btn--block { display: flex; width: 100%; }

/* Ação principal: laranja fundo, texto branco. */
.lj :is(a, button).lj-btn--primary {
	border-color: var(--lj-brand-2);
	background: var(--lj-brand-2);
	color: #fff;
}

.lj :is(a, button).lj-btn--primary:hover,
.lj :is(a, button).lj-btn--primary:focus-visible {
	border-color: var(--lj-brand-3);
	background: var(--lj-brand-3);
	color: #fff;
}

/* Escuro: o "Go to product" da referência, e ação forte sobre fundo claro. */
.lj :is(a, button).lj-btn--dark {
	border-color: var(--lj-dark);
	background: var(--lj-dark);
	color: #fff;
}

.lj :is(a, button).lj-btn--dark:hover,
.lj :is(a, button).lj-btn--dark:focus-visible {
	border-color: var(--lj-dark-3);
	background: var(--lj-dark-3);
	color: #fff;
}

/* Fantasma: branco com borda, a ação secundária. */
.lj :is(a, button).lj-btn--ghost {
	border-color: var(--lj-line-3);
	background: var(--lj-surface);
	color: var(--lj-ink);
}

.lj :is(a, button).lj-btn--ghost:hover,
.lj :is(a, button).lj-btn--ghost:focus-visible {
	border-color: var(--lj-ink);
	background: var(--lj-surface);
	color: var(--lj-ink);
}

/*
 * Tingido: o "BUY NOW" claro dos cartões que não estão em destaque.
 *
 * Cinza neutro com texto em tinta, e ESCURO no hover (crítica de 11/11). Um
 * botão pêssego com texto laranja parecia "botão laranja sem texto branco" e
 * trazia de volta a superfície pêssego.
 */
.lj :is(a, button).lj-btn--tint {
	border-color: var(--lj-canvas-2);
	background: var(--lj-canvas-2);
	color: var(--lj-ink);
}

.lj :is(a, button).lj-btn--tint:hover,
.lj :is(a, button).lj-btn--tint:focus-visible {
	border-color: var(--lj-dark);
	background: var(--lj-dark);
	color: #fff;
}

/*
 * Contorno: o "VER TODOS OS 16 MIL" ao lado do título. Borda e texto
 * neutros; o laranja fica só na seta.
 */
.lj :is(a, button).lj-btn--outline {
	border-color: var(--lj-line-3);
	background: transparent;
	color: var(--lj-ink);
}

.lj :is(a, button).lj-btn--outline .lj-i { color: var(--lj-brand-2); }

.lj :is(a, button).lj-btn--outline:hover,
.lj :is(a, button).lj-btn--outline:focus-visible {
	border-color: var(--lj-ink);
	background: transparent;
	color: var(--lj-ink);
}

/* Verde: demonstração ao vivo ("Try Now"). */
.lj :is(a, button).lj-btn--green {
	border-color: var(--lj-ok);
	background: var(--lj-ok);
	color: #fff;
}

.lj :is(a, button).lj-btn--green:hover,
.lj :is(a, button).lj-btn--green:focus-visible {
	border-color: #116b33;
	background: #116b33;
	color: #fff;
}

/* Verde claro: "Experimente antes" dentro da caixa de compra. */
.lj :is(a, button).lj-btn--green-soft {
	border-color: var(--lj-ok-line);
	background: var(--lj-ok-tint);
	color: var(--lj-ok);
}

.lj :is(a, button).lj-btn--green-soft:hover,
.lj :is(a, button).lj-btn--green-soft:focus-visible {
	border-color: var(--lj-ok-2);
	background: var(--lj-ok-tint);
	color: var(--lj-ok);
}

/* Sobre fundo escuro: branco cheio (o "GET LIFETIME" da referência). */
.lj :is(a, button).lj-btn--white {
	border-color: #fff;
	background: #fff;
	color: var(--lj-ink);
}

/* Hover neutro: o pêssego com marrom saiu da base (crítica 2, 11/11). */
.lj :is(a, button).lj-btn--white:hover,
.lj :is(a, button).lj-btn--white:focus-visible {
	border-color: var(--lj-canvas-2);
	background: var(--lj-canvas-2);
	color: var(--lj-ink);
}

/*
 * Link com seta: "Ver todos os 5.549 plugins →". Texto em tinta e seta
 * laranja; no hover, sublinhado na cor da marca.
 */
.lj :is(a, button).lj-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	text-underline-offset: 4px;
	color: var(--lj-ink);
	cursor: pointer;
}

.lj :is(a, button).lj-link:hover {
	color: var(--lj-ink);
	text-decoration: underline;
	text-decoration-color: var(--lj-brand);
	text-decoration-thickness: 2px;
}

.lj :is(a, button).lj-link .lj-i { width: 16px; height: 16px; color: var(--lj-brand-2); transition: transform 0.2s var(--lj-ease); }
.lj :is(a, button).lj-link:hover .lj-i { transform: translateX(3px); }

/* Botão redondo só de ícone (paginação, setas, link externo). */
.lj :is(a, button).lj-btn-ico {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	padding: 0;
	border: 1px solid var(--lj-line-3);
	border-radius: 50%;
	background: var(--lj-surface);
	color: var(--lj-ink);
	cursor: pointer;
	transition: border-color var(--lj-t) ease, background-color var(--lj-t) ease, color var(--lj-t) ease;
}

.lj :is(a, button).lj-btn-ico:hover { border-color: var(--lj-ink); }
.lj :is(a, button).lj-btn-ico[disabled],
.lj :is(a, button).lj-btn-ico[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }
.lj :is(a, button).lj-btn-ico .lj-i { width: 17px; height: 17px; }

/* ============================================================
 * Pílula de novidade (topo do herói)
 * ============================================================ */

.lj a.lj-badge,
.lj .lj-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 0 14px 0 12px;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-pill);
	background: var(--lj-surface);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--lj-ink);
	transition: border-color var(--lj-t) ease;
}

.lj a.lj-badge:hover { border-color: var(--lj-line-3); color: var(--lj-ink); }
/* Ícone é acento: o laranja da marca, não o laranja escuro de texto (lia marrom). */
.lj .lj-badge .lj-i { width: 15px; height: 15px; color: var(--lj-brand); }

/* Ponto verde que pulsa devagar: "tem coisa acontecendo agora". */
.lj .lj-vivo {
	position: relative;
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--lj-ok-2);
}

.lj .lj-vivo::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--lj-ok-2);
	opacity: 0;
	animation: lj-pulso 2.4s ease-out infinite;
}

@keyframes lj-pulso {
	0% { transform: scale(0.5); opacity: 0.55; }
	80%, 100% { transform: scale(1.35); opacity: 0; }
}

/* ============================================================
 * Fichas (abas, filtros, categorias)
 * ============================================================ */

/*
 * A ficha ativa é ESCURA, como na referência ("Plugins 4,500+" em grafite).
 * Funciona com classe (.is-on), com aria-current e com rádio escondido logo
 * antes dela (.lj-chip-input:checked + .lj-chip), que é como as abas da
 * home trocam de conteúdo sem JavaScript.
 */
.lj :is(a, button, label, span).lj-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-pill);
	background: var(--lj-surface);
	font-family: var(--lj-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	color: var(--lj-ink);
	cursor: pointer;
	transition: border-color var(--lj-t) ease, background-color var(--lj-t) ease, color var(--lj-t) ease;
}

.lj .lj-chip-n {
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--lj-muted);
}

@media (hover: hover) {
	.lj :is(a, button, label, span).lj-chip:hover { border-color: var(--lj-line-3); }
}

.lj :is(a, button, label, span).lj-chip.is-on,
.lj :is(a, button, label, span).lj-chip[aria-current="true"],
.lj :is(a, button, label, span).lj-chip[aria-pressed="true"],
.lj .lj-chip-input:checked + .lj-chip {
	border-color: var(--lj-dark);
	background: var(--lj-dark);
	color: #fff;
}

.lj .lj-chip.is-on .lj-chip-n,
.lj .lj-chip[aria-current="true"] .lj-chip-n,
.lj .lj-chip[aria-pressed="true"] .lj-chip-n,
.lj .lj-chip-input:checked + .lj-chip .lj-chip-n { color: rgba(255, 255, 255, 0.62); }

.lj .lj-chip-input:focus-visible + .lj-chip {
	outline: 2px solid var(--lj-brand);
	outline-offset: 3px;
}

/* A fileira de fichas rola de lado no celular, sem barra aparente. */
.lj .lj-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width: 760px) {
	/*
	 * scroll-padding: sem ele o encaixe da rolagem colava a primeira ficha na
	 * borda da tela (x = 1) enquanto título e cartões começam em 20 px.
	 */
	.lj .lj-chips--rola {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: -20px;
		padding: 2px 20px;
		scroll-padding-inline: 20px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.lj .lj-chips--rola::-webkit-scrollbar { display: none; }
	.lj .lj-chips--rola > * { scroll-snap-align: start; }
}

/* ============================================================
 * Cartões
 * ============================================================ */

.lj .lj-card {
	position: relative;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-r-md);
	background: var(--lj-surface);
}

.lj .lj-card--pad { padding: clamp(20px, 2.4vw, 28px); }
.lj .lj-card--lg { border-radius: var(--lj-r-lg); }
.lj .lj-card--canvas { background: var(--lj-canvas); }

/* Cartão clicável: a borda escurece e ele sobe 2px. Sem sombra. */
.lj .lj-card--hover {
	transition: border-color var(--lj-t) ease, transform 0.2s var(--lj-ease);
}

@media (hover: hover) {
	.lj .lj-card--hover:hover {
		border-color: var(--lj-line-3);
		transform: translateY(-2px);
	}
}

/* Moldura de imagem: raio, borda e proporção reservada (sem salto de layout). */
.lj .lj-thumb {
	position: relative;
	overflow: hidden;
	border-radius: var(--lj-r-sm);
	background: var(--lj-canvas-2);
	aspect-ratio: 3 / 2;
}

.lj .lj-thumb > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
 * Ícone em ladrilho
 * ============================================================ */

/*
 * Branco com borda e o ÍCONE laranja (crítica de 11/11): funciona sobre o
 * branco e sobre o canvas, sem superfície pêssego. --brand guarda o desenho
 * tingido.
 */
.lj .lj-ico {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-r);
	background: var(--lj-surface);
	color: var(--lj-brand-2);
}

.lj .lj-ico--brand { border-color: var(--lj-brand-tint); background: var(--lj-brand-tint); }
.lj .lj-ico--soft { border-color: var(--lj-canvas-2); background: var(--lj-canvas-2); }

.lj .lj-ico .lj-i { width: 21px; height: 21px; }
.lj .lj-ico--sm { width: 36px; height: 36px; border-radius: 10px; }
.lj .lj-ico--sm .lj-i { width: 18px; height: 18px; }
.lj .lj-ico--lg { width: 52px; height: 52px; border-radius: 14px; }
.lj .lj-ico--lg .lj-i { width: 24px; height: 24px; }
.lj .lj-ico--dark { border-color: var(--lj-dark); background: var(--lj-dark); color: var(--lj-brand); }
.lj .lj-ico--ok { border-color: var(--lj-ok-tint); background: var(--lj-ok-tint); color: var(--lj-ok); }
.lj .lj-ico--info { border-color: var(--lj-info-tint); background: var(--lj-info-tint); color: var(--lj-info); }
.lj .lj-ico--line { border: 1px solid var(--lj-line); background: var(--lj-surface); color: var(--lj-brand-2); }

/* ============================================================
 * Lista com checagem
 * ============================================================ */

.lj .lj-checks {
	display: grid;
	gap: 11px;
}

.lj .lj-checks > li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--lj-text);
}

.lj .lj-checks > li > .lj-i {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--lj-brand-2);
	stroke-width: 2.4;
}

.lj .lj-checks--ok > li > .lj-i { color: var(--lj-ok-2); }

/* Em linha, como "Atualização automática  16 mil produtos  Arquivos verificados". */
.lj .lj-checks--linha {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.lj .lj-checks--linha > li { font-size: 14.5px; font-weight: 500; }

/* ============================================================
 * Etiquetas
 * ============================================================ */

.lj .lj-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 9px;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-pill);
	background: var(--lj-surface);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--lj-text);
}

.lj .lj-tag .lj-i { width: 13px; height: 13px; }

.lj .lj-tag--ok { border-color: var(--lj-ok-line); background: var(--lj-ok-tint); color: var(--lj-ok); }
/*
 * --brand é o laranja cheio com texto branco, o mesmo do "RECOMENDADO" de
 * /planos/. Era pêssego com marrom, o par que a crítica proibiu.
 */
.lj .lj-tag--brand { border-color: var(--lj-brand-2); background: var(--lj-brand-2); color: #fff; }
.lj .lj-tag--dark { border-color: var(--lj-dark); background: var(--lj-dark); color: #fff; }
.lj .lj-tag--muted { border-color: var(--lj-canvas-2); background: var(--lj-canvas-2); color: var(--lj-text); }
.lj .lj-tag--info { border-color: var(--lj-info-line); background: var(--lj-info-tint); color: var(--lj-info); }
.lj .lj-tag--warn { border-color: var(--lj-warn-line); background: var(--lj-warn-tint); color: var(--lj-warn-ink); }
.lj .lj-tag--danger { border-color: var(--lj-danger-line); background: var(--lj-danger-tint); color: var(--lj-danger); }

/* Caixa alta espaçada: "RECOMENDADO", "MAIS ESCOLHIDO". */
.lj .lj-tag--caps {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * Versão em mono: "v3.9.1.1". Com --dot ganha o ponto verde de "atual".
 * Neutra por padrão (crítica de 11/11); --brand guarda o desenho laranja.
 */
.lj .lj-ver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 8px;
	border-radius: var(--lj-r-xs);
	background: var(--lj-canvas-2);
	font-family: var(--lj-mono);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--lj-ink);
}

.lj .lj-ver--neutra { background: var(--lj-canvas-2); color: var(--lj-ink); }
/* Destaque em tinta, sem pêssego nem marrom (crítica 2, 11/11). */
.lj .lj-ver--brand { background: var(--lj-ink); color: #fff; }

.lj .lj-ver--dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lj-ok-2);
}

/* ============================================================
 * Estrelas, números e linha de confiança
 * ============================================================ */

.lj .lj-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--lj-star);
}

.lj .lj-stars .lj-i { width: 15px; height: 15px; fill: currentColor; stroke: none; }

/* Número grande com o "+" laranja: "16 mil+". */
.lj .lj-stat-n {
	display: block;
	font-family: var(--lj-display);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--lj-ink);
}

.lj .lj-stat-n > i {
	font-style: normal;
	color: var(--lj-brand);
}

.lj .lj-stat-l {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--lj-muted);
}

/* "Pagamento seguro · Cartão ou Pix · Cancele quando quiser". */
.lj .lj-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 22px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--lj-muted);
}

.lj .lj-trust > li,
.lj .lj-trust > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.lj .lj-trust .lj-i { width: 15px; height: 15px; color: var(--lj-muted); }

/* ============================================================
 * Aviso em caixa (o "Install this first" da referência)
 * ============================================================ */

.lj .lj-note {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-r-md);
	background: var(--lj-canvas);
}

.lj .lj-note--warn { border-color: var(--lj-warn-line); background: var(--lj-warn-tint); }
.lj .lj-note--brand { border-color: var(--lj-brand-line); background: var(--lj-brand-tint); }
.lj .lj-note--ok { border-color: var(--lj-ok-line); background: var(--lj-ok-tint); }
.lj .lj-note--info { border-color: var(--lj-info-line); background: var(--lj-info-tint); }

.lj .lj-note-txt { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; }
.lj .lj-note-txt > strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--lj-ink); }

@media (max-width: 600px) {
	.lj .lj-note { flex-wrap: wrap; }
	.lj .lj-note > .lj-btn { width: 100%; }
}

/* ============================================================
 * Trilha (breadcrumb) e paginação
 * ============================================================ */

.lj .lj-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--lj-muted);
}

.lj .lj-crumbs a { color: var(--lj-muted); text-decoration: none; }
.lj .lj-crumbs a:hover { color: var(--lj-ink); }
.lj .lj-crumbs-sep { color: var(--lj-line-3); }

/* Paginação numerada em círculos, a página atual em laranja. */
.lj .lj-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.lj .lj-pager :is(a, button, span) {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--lj-line);
	border-radius: var(--lj-pill);
	background: var(--lj-surface);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--lj-ink);
	cursor: pointer;
	transition: border-color var(--lj-t) ease, background-color var(--lj-t) ease;
}

.lj .lj-pager :is(a, button):hover { border-color: var(--lj-line-3); }

.lj .lj-pager .is-on,
.lj .lj-pager [aria-current="page"] {
	border-color: var(--lj-brand-2);
	background: var(--lj-brand-2);
	color: #fff;
}

.lj .lj-pager .lj-pager-gap {
	min-width: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lj-muted);
	cursor: default;
}

/* ============================================================
 * Toque: alvo mínimo de 44 px
 *
 * No desktop o botão pequeno, a ficha e o botão redondo podem ter 40 px.
 * Com o dedo, não: tudo o que se toca sobe para 44 px.
 * ============================================================ */

@media (pointer: coarse), (max-width: 760px) {
	.lj :is(a, button).lj-btn--sm { --lj-btn-h: 44px; }
	.lj :is(a, button).lj-btn-ico { width: 44px; height: 44px; }
	.lj :is(a, button, label, span).lj-chip { min-height: 44px; }
	.lj a.lj-badge { min-height: 44px; }
	.lj .lj-pager :is(a, button) { min-width: 44px; height: 44px; }
}

/* ============================================================
 * Escuro
 * ============================================================ */

.lj-sec--dark .lj-h1,
.lj-sec--dark .lj-h2,
.lj-sec--dark .lj-h3,
.lj-sec--dark strong { color: #fff; }

.lj-sec--dark .lj-hl { color: var(--lj-brand); }
.lj-sec--dark .lj-lead { color: var(--lj-dark-text); }

.lj-sec--dark .lj-eyebrow {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

/* ============================================================
 * Movimento
 * ============================================================ */

/*
 * Entrada suave, sem depender de script: o elemento nasce visível e a
 * animação só o traz de 14px abaixo. Escalonamento pelos irmãos (nth-child),
 * nunca por atributo style.
 */
.lj .lj-rise { animation: lj-rise 0.6s var(--lj-ease) both; }
.lj .lj-rise:nth-child(2) { animation-delay: 0.06s; }
.lj .lj-rise:nth-child(3) { animation-delay: 0.12s; }
.lj .lj-rise:nth-child(4) { animation-delay: 0.18s; }
.lj .lj-rise:nth-child(5) { animation-delay: 0.24s; }
.lj .lj-rise:nth-child(6) { animation-delay: 0.3s; }
.lj .lj-rise:nth-child(n+7) { animation-delay: 0.34s; }

@keyframes lj-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/*
 * Entrada pela rolagem, UMA física para o site todo (crítica 2, 11/11).
 * Antes cada página tinha a sua (hm-surge, v-surge, af-entra, ct-entra,
 * lc-entra, fq-entra, gu-entra, cl-surge), com percurso de 14 a 32px e fim de
 * "entry 20%" a "cover 30%": na home os produtos passavam metade da leitura
 * desbotados. Agora o bloco chega inteiro quando 60% dele já entrou na tela.
 *
 * Só onde o navegador sabe animar pela rolagem; nos outros o bloco já nasce
 * no lugar. Nada fica invisível esperando script. Escalonamento opcional
 * pelos irmãos (nth-child), nunca por atributo style.
 */
@supports (animation-timeline: view()) {
	.lj .lj-entra {
		animation: lj-entra linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 60%;
	}
}

/*
 * `translate`, e não `transform`: a propriedade própria se soma ao transform
 * do elemento. Um cartão com .lj-entra que sobe no hover (transform) continua
 * subindo; com transform na animação, o hover ficaria preso.
 */
@keyframes lj-entra {
	from { opacity: 0; translate: 0 16px; }
	to { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lj *,
	.lj *::before,
	.lj *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.lj .lj-rise { opacity: 1; transform: none; animation: none; }
	.lj .lj-entra { opacity: 1; translate: none; animation: none; }
}