/* LPVB Browser CSS */

:root {
	/* O RESPIRO DAS BANDEIRAS, NUM LUGAR SÓ.
	 *
	 * Este número decide ao mesmo tempo o espaço ACIMA e o espaço ABAIXO da
	 * fileira de bandeiras, na loja e nas telas de cartão. Antes cada tela
	 * tinha o seu: quatro valores de cabeçalho espalhados por consultas de
	 * tela e mais dois da faixa. Medido em sete tamanhos de tela, o espaço
	 * de cima batia com o de baixo em três — e o ALEX viu isso sem medir
	 * nada.
	 *
	 * Mexer aqui move os dois lados juntos. É o único jeito de a conta nunca
	 * mais desencontrar. */
	--lpvb-respiro-idiomas: 22px;

	--lpvb-bg: #0a0a0a;
	--lpvb-surface: #151515;
	--lpvb-surface-light: #222222;
	--lpvb-cyan: #00D4FF;
	--lpvb-magenta: #FF00FF;
	--lpvb-text: #ffffff;
	--lpvb-text-muted: #aaaaaa;
	--lpvb-border: rgba(255, 255, 255, 0.1);
	--lpvb-border-light: rgba(255, 255, 255, 0.2);
	--lpvb-danger: #ff4444;
	--lpvb-success: #00C851;
	--lpvb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset for our scope */
#lpvb-login-page, #lpvb-warning-page, #lpvb-expired-page, #lpvb-browser-app {
	font-family: var(--lpvb-font);
	color: var(--lpvb-text);
	box-sizing: border-box;
}
#lpvb-login-page *, #lpvb-warning-page *, #lpvb-expired-page *, #lpvb-browser-app * {
	box-sizing: inherit;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: var(--lpvb-bg); 
}
::-webkit-scrollbar-thumb {
	background: var(--lpvb-surface-light); 
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #333; 
}

/* Full Page Templates (Login, Warning, Expired) */
.lpvb-full-page {
	/* svh = a altura que sobra COM as barras do navegador à vista. No
	   navegador de dentro do WhatsApp, 100vh é maior que a tela visível, e
	   era por isso que o botão ficava cortado embaixo. */
	min-height: 100vh;
	min-height: 100svh;
	background-color: var(--lpvb-bg);
	display: flex;
	/* Centralizar com align-items corta o topo quando o conteúdo é mais alto
	   que a tela — e o que ficou para fora não volta nem rolando. Com
	   flex-start aqui e margin:auto no cartão, ele fica centralizado quando
	   cabe e rola inteiro quando não cabe. */
	align-items: flex-start;
	justify-content: center;
	padding: 20px;
	position: relative;
	overflow-x: hidden;
}

/* Glass Card */
.lpvb-glass-card {
	/* Centraliza sozinho na vertical, sem cortar o topo. */
	margin: auto;
	background: rgba(25, 25, 25, 0.6);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid var(--lpvb-border-light);
	border-radius: 16px;
	padding: 40px;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	text-align: center;
	z-index: 10;
}

.lpvb-logo-container {
	/* O mesmo respiro das bandeiras: nestas telas é esta margem que faz o
	   espaço ENTRE a logo e a fileira. */
	margin-bottom: var(--lpvb-respiro-idiomas);
}

/* ---------------------------------------------------------------------------
 * Warning / rules screen
 *
 * The point is that the rules get read, so the page reads like a document:
 * one accent colour used sparingly, four equal cards, and each rule in its
 * own language pair instead of a run-on line separated by a slash.
 * ------------------------------------------------------------------------ */
.lpvb-content-container {
	max-width: 880px;
	width: 100%;
	text-align: center;
	z-index: 10;
	padding: 8px 0 32px;
}
.lpvb-warning-shield {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: 8px auto 18px;
	border-radius: 50%;
	color: var(--lpvb-warn-border, #ff4444);
	background: color-mix(in srgb, var(--lpvb-warn-border, #ff4444) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--lpvb-warn-border, #ff4444) 45%, transparent);
}
.lpvb-warning-title {
	color: var(--lpvb-warn-border, #ff4444);
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	line-height: 1.15;
	margin: 0 0 6px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-wrap: balance;
}
.lpvb-warning-subtitle {
	color: var(--lpvb-text-muted);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 34px;
}
.lpvb-rules-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 28px;
	text-align: left;
}
@media (max-width: 860px) {
	.lpvb-rules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.lpvb-rules-grid { grid-template-columns: 1fr; }
}
.lpvb-rule-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 18px;
	border-radius: 12px;
	background: var(--lpvb-surface);
	border: 1px solid var(--lpvb-border);
	border-top: 3px solid var(--lpvb-warn-border, #ff4444);
	overflow: hidden;
}
.lpvb-rule-icon {
	display: inline-flex;
	width: 30px;
	height: 30px;
	color: var(--lpvb-warn-border, #ff4444);
}
.lpvb-rule-icon svg {
	width: 100%;
	height: 100%;
}
.lpvb-rule-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--lpvb-text);
}
.lpvb-rule-text-en {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--lpvb-text-muted);
}
@keyframes pulse-red {
	0%, 100% { border-top-color: var(--lpvb-warn-border, #ff4444); }
	50%      { border-top-color: color-mix(in srgb, var(--lpvb-warn-border, #ff4444) 35%, transparent); }
}
.pulse-red {
	animation: pulse-red 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.pulse-red { animation: none; }
}
.lpvb-important-info {
	background: var(--lpvb-surface);
	border: 1px solid var(--lpvb-border);
	border-left: 3px solid var(--lpvb-warn-border, #ff4444);
	border-radius: 10px;
	padding: 20px 22px;
	text-align: left;
	margin-bottom: 28px;
}

/*
 * De onde o acesso esta sendo feito.
 *
 * Esta caixa e o aviso mais forte da tela: ela mostra a cidade da propria
 * pessoa. Por isso ela tem a borda inteira na cor do alerta, e nao so uma
 * faixa na lateral como a caixa de informacoes.
 */
.lpvb-warning-local {
	border: 2px solid var(--lpvb-warn-border, #ff4444);
	border-radius: 12px;
	padding: 18px 22px 16px;
	margin-bottom: 26px;
	text-align: center;
	background: color-mix(in srgb, var(--lpvb-warn-border, #ff4444) 8%, var(--lpvb-surface));
}
.lpvb-warning-local h3 {
	margin: 0 0 10px;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lpvb-warn-border, #ff4444);
}
.lpvb-warning-local h3 span {
	display: block;
	margin-top: 3px;
	color: var(--lpvb-text-muted);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
}
.lpvb-local-lugar {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--lpvb-text);
	overflow-wrap: anywhere;
}
.lpvb-local-dados {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 0;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	color: var(--lpvb-text-muted);
}
.lpvb-local-nota {
	margin: 12px 0 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--lpvb-text-muted);
}
.lpvb-local-nota span {
	display: block;
	margin-top: 2px;
	opacity: 0.75;
}

/* A borda inteira pisca, nao so o topo como nos cartoes de regra. */
.lpvb-warning-local.pulse-red {
	animation: pulse-red-all 2.4s ease-in-out infinite;
}
@keyframes pulse-red-all {
	0%, 100% { border-color: var(--lpvb-warn-border, #ff4444); }
	50%      { border-color: color-mix(in srgb, var(--lpvb-warn-border, #ff4444) 35%, transparent); }
}
@media ( prefers-reduced-motion: reduce ) {
	.lpvb-warning-local.pulse-red { animation: none; }
}
.lpvb-important-info h3 {
	margin: 0 0 12px;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lpvb-warn-border, #ff4444);
}
.lpvb-important-info h3 span {
	color: var(--lpvb-text-muted);
	font-weight: 500;
}
.lpvb-important-info ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.lpvb-important-info li {
	position: relative;
	padding-left: 20px;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--lpvb-text);
}
.lpvb-important-info li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--lpvb-warn-border, #ff4444);
}
.lpvb-btn-accept {
	display: inline-block;
	min-width: 280px;
	max-width: 100%;
	padding: 15px 34px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta));
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.lpvb-btn-accept:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.lpvb-btn-accept:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Kept for any older markup still using the green button. */
.lpvb-btn-success {
	background: var(--lpvb-success);
	color: white;
	border: none;
	padding: 15px 40px;
	font-size: 1.2rem;
	border-radius: 8px;
	cursor: pointer;
	font-weight: bold;
}

/* Expired Page */
.lpvb-background-blur {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%230a0a0a"/></svg>') center/cover;
	filter: blur(20px);
	z-index: 1;
}
.lpvb-expired-icon {
	margin-bottom: 20px;
}
.lpvb-expired-title {
	font-size: 2rem;
	margin-bottom: 10px;
	color: var(--lpvb-magenta);
}
.lpvb-expired-message {
	font-size: 1.1rem;
	margin-bottom: 20px;
	line-height: 1.5;
}
.lpvb-expired-contact {
	color: var(--lpvb-text-muted);
	margin-bottom: 30px;
}
.lpvb-btn-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #25D366;
	color: white;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 30px;
	font-weight: bold;
	transition: transform 0.2s, box-shadow 0.2s;
}
.lpvb-btn-whatsapp:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

/* Browser App */
#lpvb-browser-app {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: var(--lpvb-bg);
}

/* Navbar */
.lpvb-navbar {
	min-height: 70px;
	background: var(--lpvb-surface);
	border-bottom: 1px solid var(--lpvb-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	/* Vertical em vez de zero: com logo grande, a barra cresce junto em vez
	   de deixar a imagem estourar por cima do topo. */
	padding: 10px 20px;
	position: sticky;
	top: 0;
	z-index: 100;
}
.lpvb-navbar-left, .lpvb-navbar-right {
	min-width: 250px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* Espaco entre a logo e o "Todos os packs": sem isso os dois encostam. */
	gap: 14px;
}
.lpvb-navbar-right {
	justify-content: flex-end;
}
/* O tamanho da logo vem do template, como variável, e o teto está no bloco
   responsivo lá embaixo. Esta regra não fixa mais altura nenhuma: quando
   fixava, ela ganhava do teto por ser mais específica e a logo voltava a
   estourar a barra no celular. */
.lpvb-navbar-left img {
	height: auto;
	max-width: 100%;
	object-fit: contain;
}
.lpvb-navbar-center {
	flex: 1;
	display: flex;
	/* Em coluna porque agora o centro da barra tem DOIS andares: em cima o
	 * nome do acesso (ou a busca, na área do cliente), embaixo a pasta aberta.
	 * Em linha, como era, os dois ficariam lado a lado. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Sem isto, um nome de pasta comprido estica o centro e espreme a logo e
	 * os botões das pontas. */
	min-width: 0;
}
.lpvb-search-container {
	position: relative;
	width: 100%;
	max-width: 500px;
}
#lpvb-search-input {
	width: 100%;
	background: var(--lpvb-surface-light);
	border: 1px solid var(--lpvb-border);
	color: var(--lpvb-text);
	padding: 10px 40px 10px 15px;
	border-radius: 20px;
	outline: none;
	transition: border-color 0.3s;
}
#lpvb-search-input:focus {
	border-color: var(--lpvb-cyan);
}
#lpvb-search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--lpvb-text-muted);
	font-size: 1.2rem;
	cursor: pointer;
}
.lpvb-user-info {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
}
.lpvb-user-details {
	display: flex;
	flex-direction: column;
	text-align: right;
}
.lpvb-user-name {
	font-weight: bold;
	font-size: 0.9rem;
}
.lpvb-user-plan {
	font-size: 0.75rem;
	color: var(--lpvb-text-muted);
}
.lpvb-logout-btn {
	color: var(--lpvb-danger);
	text-decoration: none;
	font-size: 0.9rem;
	padding: 5px 10px;
	border: 1px solid var(--lpvb-danger);
	border-radius: 4px;
	transition: all 0.2s;
}
.lpvb-logout-btn:hover {
	background: var(--lpvb-danger);
	color: white;
}

/* Main Container & Sidebar */
.lpvb-main-container {
	display: flex;
	flex: 1;
	overflow: hidden;
}
.lpvb-sidebar {
	width: 250px;
	background: var(--lpvb-surface);
	border-right: 1px solid var(--lpvb-border);
	overflow-y: auto;
	padding: 20px 10px;
}
.lpvb-sidebar-title {
	color: var(--lpvb-text-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 15px 10px;
}
.lpvb-folder-item {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	cursor: pointer;
	border-radius: 6px;
	color: var(--lpvb-text);
	margin-bottom: 2px;
	transition: background 0.2s;
	font-size: 0.9rem;
}
.lpvb-folder-item:hover {
	background: var(--lpvb-surface-light);
}
.lpvb-folder-item.active {
	background: rgba(0, 212, 255, 0.1);
	color: var(--lpvb-cyan);
}
.lpvb-folder-icon {
	margin-right: 10px;
	color: #F8D775;
}

/* Content Area */
.lpvb-content {
	flex: 1;
	padding: 20px 30px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
/* O caminho.

   A cor vai escrita em CADA pedaço, com !important, e nao herdada do pai.
   Herdar parecia mais limpo e custou um dia: na tela de pastas o tema nao
   interferia e o caminho aparecia; na tela de vide0s o tema mandava uma regra
   direta nos filhos, que ganha de qualquer heranca, e pintava o texto da cor
   do fundo. O caminho estava la, com todos os pedacos montados e presos na
   pagina — invisivel. */
.lpvb-breadcrumb {
	/* As travas que a medição provou necessárias.
	
	   O caminho ficava montado, com todos os pedaços presos na página, e
	   invisível na tela de vídeos. Cor foi descartada por teste. Sobraram
	   estas: sem altura mínima ele colapsava, e o recorte do contêiner
	   comia o que sobrasse. Não isolei qual das duas sozinha resolvia —
	   custaria mais um dia de ida e volta para separar, e nenhuma delas
	   tem custo. */
	display: block;
	visibility: visible;
	opacity: 1;
	position: relative;
	z-index: 2;
	min-height: 26px;
	overflow: visible;
	margin-bottom: 20px;
	color: var(--lpvb-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}
.lpvb-breadcrumb span {
	cursor: pointer;
	transition: color 0.2s;
}
.lpvb-breadcrumb .lpvb-breadcrumb-item {
	display: inline-block !important;
	color: var(--lpvb-text-muted) !important;
}
.lpvb-breadcrumb .lpvb-breadcrumb-item.is-current {
	color: var(--lpvb-cyan) !important;
}
.lpvb-breadcrumb .lpvb-breadcrumb-item.is-link:hover {
	color: var(--lpvb-cyan) !important;
}
.lpvb-breadcrumb-sep {
	display: inline-block !important;
	margin: 0 8px;
	color: var(--lpvb-text-muted) !important;
}

/* O "…" que esconde o meio do caminho comprido.
 *
 * Vem com !important pelo mesmo motivo dos irmãos acima: regra direta do
 * tema ganha de regra herdada do contêiner. Essa armadilha já custou caro
 * nesta mesma faixa.
 *
 * O pontilhado embaixo existe para dizer "isto aqui clica". Sem ele, o "…"
 * parece texto cortado — que é exatamente a impressão que viemos consertar. */
.lpvb-breadcrumb .lpvb-breadcrumb-mais {
	display: inline-block !important;
	cursor: pointer;
	padding: 0 2px;
	letter-spacing: 1px;
	color: var(--lpvb-cyan) !important;
	border-bottom: 1px dotted var(--lpvb-cyan);
}

.lpvb-breadcrumb .lpvb-breadcrumb-mais:hover {
	opacity: 0.75;
}

/* Grids */
.lpvb-folders-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 30px;
}
/*
 * O TÍTULO DO RAMO, entre os mosaicos.
 *
 * Quando o visitante clica num nível que só tem subpastas, a loja pula
 * esse nível e mostra direto as pastas com loops — agrupadas sob o nome
 * do ramo de onde vieram. É o que mantém de pé a separação entre
 * gratuito, 1080p e 4K numa tela que pode ter 1.261 cartões.
 *
 * grid-column: 1 / -1 faz o título ocupar a linha inteira. Sem isso ele
 * entraria como se fosse mais um cartão e empurraria a grade.
 */
.lpvb-secao {
	grid-column: 1 / -1;
	margin: 18px 0 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--lpvb-border);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lpvb-cyan);
	/* Nome comprido quebra em vez de estourar a tela do celular. */
	overflow-wrap: anywhere;
}

/* O primeiro título não precisa empurrar: já tem o respiro da grade. */
.lpvb-secao:first-child {
	margin-top: 0;
}

@media (max-width: 480px) {
	.lpvb-secao {
		margin-top: 14px;
		font-size: 12px;
	}
}

.lpvb-folder-card {
	background: var(--lpvb-surface);
	border: 1px solid var(--lpvb-border);
	border-radius: 8px;
	padding: 15px;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s;
}
.lpvb-folder-card:hover {
	background: var(--lpvb-surface-light);
	border-color: var(--lpvb-cyan);
}
.lpvb-folder-card .lpvb-folder-icon {
	font-size: 1.5rem;
}
.lpvb-folder-card-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.95rem;
}

/*
 * O cartão de um acesso que o cliente ainda não tem.
 *
 * Tudo aqui vai com !important, e não por capricho: este cartão é um <a>, e o
 * tema do site dele estiliza links — cor, sublinhado, peso da fonte. Sem isto
 * o cadeado sairia azul e sublinhado no meio das pastas. Já aconteceu antes
 * com o botão "Entendi", que sumiu no tema dele.
 *
 * A borda tracejada é a única coisa que o olho precisa: fala "isto não é uma
 * pasta sua" antes de qualquer texto ser lido.
 */
/*
 * DUAS LINHAS, sempre: cadeado + nome em cima, preço + botão embaixo.
 *
 * Numa linha só o nome desaparecia. O preço e o botão não encolhem, o nome sim
 * — e num cartão de 200px ele encolhia até zero: o cliente via um cadeado, um
 * preço e um botão, sem saber de qual acesso se tratava. O nome é a única
 * coisa que ele PRECISA ler.
 */
.lpvb-folder-card.lpvb-trancado {
	display: grid !important;
	grid-template-columns: 30px minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 9px 10px !important;
	border-style: dashed !important;
	border-color: var(--lpvb-cyan, #00d4ff) !important;
	background: transparent !important;
	color: var(--lpvb-text, #f2f2f2) !important;
	text-decoration: none !important;
	font-weight: 400 !important;
	box-shadow: none !important;
}
.lpvb-folder-card.lpvb-trancado:hover,
.lpvb-folder-card.lpvb-trancado:focus {
	background: var(--lpvb-surface-light, rgba(255, 255, 255, 0.06)) !important;
	border-style: solid !important;
	text-decoration: none !important;
}
/*
 * O nome ocupa a primeira linha inteira, ao lado do cadeado.
 *
 * Isto era um flex com "flex-basis: calc(100% - 34px)" e o nome caía para a
 * linha de baixo, sozinho, por causa de alguns pixels de arredondamento na
 * conta da porcentagem. No grid a coluna é declarada e não há conta nenhuma
 * para dar errado.
 */
.lpvb-folder-card.lpvb-trancado .lpvb-folder-card-name {
	grid-column: 2 !important;
	min-width: 0 !important;
	color: inherit !important;
	font-size: 0.95rem !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	line-height: 1.3 !important;
}
/*
 * Largura FIXA, não "auto".
 *
 * O emoji do cadeado tem largura diferente em cada sistema. Com "auto", a
 * conta da linha de cima (100% - 34px) dava certo no meu teste e estourava
 * por um fio no aparelho real — e aí o cadeado caía sozinho numa linha, com
 * o nome embaixo dele. Fixando em 22px a conta fecha em qualquer lugar.
 */
.lpvb-folder-card .lpvb-cadeado {
	grid-column: 1 !important;
	width: 30px !important;
	font-size: 1.7rem !important;
	line-height: 1.1 !important;
	text-align: center !important;
	opacity: 0.85 !important;
}
.lpvb-trancado-preco {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--lpvb-cyan, #00d4ff) !important;
	white-space: nowrap !important;
}
/*
 * A faixa de baixo: preço à esquerda, botão à direita, atravessando as duas
 * colunas. Se os dois não couberem lado a lado, o botão desce — nunca sobe
 * por cima do preço, que era o defeito de quando eles ficavam soltos.
 */
.lpvb-trancado-rodape {
	grid-column: 1 / -1 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 6px 10px !important;
	width: 100% !important;
}
/*
 * Sozinho na faixa, o botão ocupa a largura toda: vira um alvo de dedo de
 * verdade no celular, em vez de um selo minúsculo no canto.
 */
.lpvb-trancado-rodape > .lpvb-trancado-cta:only-child {
	flex: 1 1 100% !important;
	text-align: center !important;
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}
.lpvb-trancado-cta {
	font-size: 0.74rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	padding: 3px 9px !important;
	border-radius: 999px !important;
	border: 1px solid var(--lpvb-cyan, #00d4ff) !important;
	color: var(--lpvb-cyan, #00d4ff) !important;
	white-space: nowrap !important;
	line-height: 1.4 !important;
}

/*
 * No celular o cartão ocupa a linha inteira e o nome tem espaço de sobra —
 * mas o botão precisa de um respiro do preço para os dois não se encostarem
 * quando o preço é comprido.
 */
@media (max-width: 600px) {
	.lpvb-folder-card.lpvb-trancado {
		row-gap: 10px !important;
	}
}

.lpvb-videos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 1024px) {
	.lpvb-videos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 767px) {
	.lpvb-videos-grid {
		grid-template-columns: 1fr;
	}
	.lpvb-sidebar {
		display: none; /* simple responsive for now */
	}
}

/* Video Card */
.lpvb-video-card {
	background: var(--lpvb-surface);
	border: 1px solid var(--lpvb-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
}
.lpvb-video-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	border-color: var(--lpvb-border-light);
}
.lpvb-video-thumb-container {
	position: relative;
	aspect-ratio: 16/9;
	background: #000;
	cursor: pointer;
	overflow: hidden;
}
.lpvb-video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
.lpvb-video-card:hover .lpvb-video-thumb {
	opacity: 0.7;
}
.lpvb-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Above the player: with the native control bar gone, this is the only
	   play button, and it has to stay reachable while a video sits there. */
	z-index: 4;
	pointer-events: none;
	width: 72px;
	height: 72px;
	background: color-mix(in srgb, var(--lpvb-cyan) 88%, #001018);
	border: 3px solid #fff;
	box-shadow: 0 3px 20px rgba(0, 0, 0, 0.6),
		0 0 22px color-mix(in srgb, var(--lpvb-cyan) 55%, transparent);
	backdrop-filter: blur(2px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Sempre visível: em celular não existe "passar o mouse", e mesmo no
	   computador ninguém adivinha que o quadrado é clicável. */
	opacity: 0.92;
	transition: opacity 0.2s, transform 0.15s;
}
.lpvb-video-card:hover .lpvb-play-overlay,
.lpvb-video-thumb-container.is-paused .lpvb-play-overlay {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.06);
}
/* While it plays, nothing sits on top of the picture. */
.lpvb-video-thumb-container:has(.lpvb-video-player):not(.is-paused) .lpvb-play-overlay {
	opacity: 0;
}
.lpvb-play-overlay svg {
	/* O triangulo ocupa quase todo o circulo: de longe, num cartao pequeno,
	   um play miudo some dentro da bola. */
	width: 46px;
	height: 46px;
	margin-left: 5px;
	fill: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.lpvb-video-player {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	background: #000;
	z-index: 2;
}

.lpvb-video-info {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.lpvb-video-title {
	font-size: 0.95rem;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--lpvb-text);
}
.lpvb-btn-download {
	background: transparent;
	border: 1px solid var(--lpvb-cyan);
	color: var(--lpvb-cyan);
	padding: 8px 0;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	transition: all 0.2s;
	margin-top: auto;
}
.lpvb-btn-download:hover {
	background: var(--lpvb-cyan);
	color: var(--lpvb-bg);
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* Pagination */
.lpvb-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
	padding-bottom: 20px;
}
.lpvb-page-btn {
	background: var(--lpvb-surface);
	border: 1px solid var(--lpvb-border);
	color: var(--lpvb-text);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
}
.lpvb-page-btn:hover {
	border-color: var(--lpvb-cyan);
	color: var(--lpvb-cyan);
}

/*
 * O fim da lista, no lugar dos números de página.
 *
 * Ele quase nunca é clicado: quando a pessoa chega perto, o resto já entrou
 * sozinho. Fica como rede de segurança — e para quem prefere clicar.
 */
.lpvb-mais-fim {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 8px 0 24px;
}

.lpvb-mais-btn {
	width: auto !important;
	min-width: 180px;
	padding: 0 22px;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
}

.lpvb-mais-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}
.lpvb-page-btn.active {
	background: var(--lpvb-cyan);
	color: var(--lpvb-bg);
	border-color: var(--lpvb-cyan);
}
.lpvb-page-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Loading Skeleton */
.lpvb-skeleton {
	animation: skeleton-loading 1.5s infinite linear;
	background: linear-gradient(90deg, var(--lpvb-surface) 25%, var(--lpvb-surface-light) 50%, var(--lpvb-surface) 75%);
	background-size: 200% 100%;
}
@keyframes skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Toasts */
#lpvb-toast-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1000;
}
.lpvb-toast {
	background: var(--lpvb-surface-light);
	color: white;
	padding: 12px 20px;
	border-radius: 8px;
	border-left: 4px solid var(--lpvb-cyan);
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
	animation: slideIn 0.3s ease forwards;
	opacity: 0;
	transform: translateX(100%);
}
.lpvb-toast.success { border-color: var(--lpvb-success); }
.lpvb-toast.error { border-color: var(--lpvb-danger); }
.lpvb-toast.fade-out {
	animation: fadeOut 0.3s ease forwards;
}
@keyframes slideIn {
	to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
	to { opacity: 0; transform: translateX(100%); }
}

#lpvb-empty-state {
	text-align: center;
	padding: 40px;
	color: var(--lpvb-text-muted);
}

/* ---------------------------------------------------------------------------
 * Additions for the corrected markup (v1.0.1)
 * ------------------------------------------------------------------------ */

/* Navbar branding */
.lpvb-navbar-logo {
	display: block;
	max-height: var(--lpvb-logo-navbar, 40px);
	width: auto;
}
.lpvb-navbar-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	background: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Breadcrumb items */
.lpvb-breadcrumb-item {
	cursor: default;
}
.lpvb-breadcrumb-item.is-link {
	cursor: pointer;
}
.lpvb-breadcrumb-item.is-link:hover {
	color: var(--lpvb-cyan);
}
.lpvb-breadcrumb-item.is-current {
	color: var(--lpvb-cyan);
	cursor: default;
}

/* Sidebar nesting */
/*
 * O recuo de cada degrau vem do JS, que sabe a profundidade. Aqui fica só o
 * que e visual: o fio que liga os degraus, como num explorador de arquivos.
 */
.lpvb-folder-child {
	position: relative;
}
.lpvb-folder-child::before {
	content: '';
	position: absolute;
	left: calc( var( --lpvb-folder-recuo, 10px ) - 8px );
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--lpvb-border);
}
.lpvb-folder-item .lpvb-folder-icon {
	flex: 0 0 auto;
	margin-right: 6px;
}
.lpvb-folder-nome {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Inline form controls on the login screen */
.lpvb-input-group {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}
.lpvb-input-icon {
	position: absolute;
	left: 14px;
	font-size: 1rem;
	opacity: 0.6;
	pointer-events: none;
}
.lpvb-input {
	width: 100%;
	padding: 13px 44px;
	border-radius: 8px;
	border: 1px solid var(--lpvb-border-light);
	background: rgba(0, 0, 0, 0.5);
	color: var(--lpvb-text);
	font-family: inherit;
	font-size: 0.95rem;
}
.lpvb-input:focus {
	outline: none;
	border-color: var(--lpvb-cyan);
	box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}
.lpvb-eye-toggle {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	color: var(--lpvb-text-muted);
	font-size: 1rem;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}
.lpvb-eye-toggle:hover {
	color: var(--lpvb-cyan);
}
.lpvb-form-actions {
	margin-top: 20px;
}
.lpvb-btn-primary {
	width: 100%;
	padding: 13px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta));
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.2s;
}
.lpvb-btn-primary:hover {
	filter: brightness(1.12);
}
.lpvb-subtitle {
	margin: 0 0 22px;
	font-size: 1.05rem;
	font-weight: 500;
	text-align: center;
	color: var(--lpvb-text);
}
.lpvb-forgot-password {
	margin-top: 18px;
	text-align: center;
	font-size: 0.88rem;
}
.lpvb-forgot-password a {
	color: var(--lpvb-cyan);
	text-decoration: none;
}
.lpvb-forgot-password a:hover {
	text-decoration: underline;
}

/* Error messages */
.lpvb-login-error {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 6px;
	border: 1px solid rgba(255, 68, 68, 0.4);
	background: rgba(255, 68, 68, 0.12);
	color: #ff8080;
	font-size: 0.88rem;
	text-align: center;
}

/* Expired screen footer */
.lpvb-expired-logout {
	margin-top: 24px;
	font-size: 0.85rem;
}
.lpvb-expired-logout a {
	color: var(--lpvb-text-muted);
	text-decoration: none;
}
.lpvb-expired-logout a:hover {
	color: var(--lpvb-cyan);
}

/* Thumbnail loading state */
.lpvb-video-thumb-container.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(1px);
}

/* Search clear button */
#lpvb-search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--lpvb-text-muted);
	font-size: 1.2rem;
	cursor: pointer;
	line-height: 1;
	padding: 2px 6px;
}
#lpvb-search-clear:hover {
	color: var(--lpvb-cyan);
}

/* ---------------------------------------------------------------------------
 * Casual-copy deterrent (v1.2.2)
 *
 * Applies to the media only. Text elsewhere on the page stays selectable, so
 * a client can still copy a file name if they need to tell you which one.
 * ------------------------------------------------------------------------ */

.lpvb-video-thumb,
.lpvb-video-player,
.lpvb-logo-container img,
.lpvb-navbar-logo {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	/* iOS: stops long-press from offering "Save Image". */
	-webkit-touch-callout: none;
	pointer-events: auto;
}

.lpvb-video-thumb-container {
	-webkit-touch-callout: none;
}

/* ---------------------------------------------------------------------------
 * Compatibilidade com temas e Elementor
 *
 * Temas (e o Kit de Estilo do Elementor) estilizam inputs com seletores mais
 * fortes que os desta folha, e o resultado era o campo branco com o ícone por
 * cima do texto. Aqui o id da tela sobe a especificidade e trava o essencial.
 * ------------------------------------------------------------------------ */

.lpvb-logo-container {
	display: flex;
	justify-content: center;
	align-items: center;
}
.lpvb-logo-container img {
	display: block;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

#lpvb-login-page .lpvb-input,
#lpvb-login-page input.lpvb-input {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 13px 44px !important;
	border: 1px solid var(--lpvb-border-light) !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.5) !important;
	background-image: none !important;
	color: var(--lpvb-text) !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-align: left !important;
}

#lpvb-login-page .lpvb-input:focus {
	border-color: var(--lpvb-cyan) !important;
	box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2) !important;
}

#lpvb-login-page .lpvb-input::placeholder {
	color: var(--lpvb-text-muted);
	opacity: 1;
}

#lpvb-login-page .lpvb-input-icon {
	z-index: 2;
	color: var(--lpvb-text-muted);
	line-height: 1;
}

#lpvb-login-page .lpvb-eye-toggle {
	z-index: 2;
}

#lpvb-login-page .lpvb-btn-primary,
#lpvb-login-page input.lpvb-btn-primary {
	width: 100% !important;
	height: auto !important;
	padding: 13px !important;
	border: none !important;
	border-radius: 8px !important;
	background: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta)) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Capa ausente e prévia indisponível
 * ------------------------------------------------------------------------ */

/* Sem capa no Drive: uma tira de filme e o nome, em vez de um retângulo preto. */
.lpvb-video-thumb-container.is-empty {
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.07), transparent 60%),
		var(--lpvb-surface-light);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lpvb-video-thumb-container.is-empty::before {
	content: "";
	width: 40%;
	max-width: 76px;
	aspect-ratio: 4 / 3;
	background: currentColor;
	color: rgba(255, 255, 255, 0.22);
	-webkit-mask: var(--lpvb-film-mask) center / contain no-repeat;
	mask: var(--lpvb-film-mask) center / contain no-repeat;
}
:root {
	--lpvb-film-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm3 1v14M19 2v14M1 5h4M1 9h4M1 13h4M19 5h4M19 9h4M19 13h4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* Formato que o navegador não decodifica. */
.lpvb-preview-fallback {
	position: absolute;
	inset: 0;
	/* Above the play button: the message is what matters on this card. */
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #000;
	overflow: hidden;
}
.lpvb-preview-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}
.lpvb-preview-note {
	position: relative;
	margin: 0;
	padding: 0 18px;
	max-width: 100%;
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.lpvb-preview-close {
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 2;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.lpvb-preview-close:hover {
	background: rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------------------
 * Capa desenhada a partir do próprio vídeo
 *
 * Quando o Google não gerou capa, o primeiro quadro do arquivo faz o papel
 * dela. O mesmo elemento vira o player quando o cartão é clicado.
 * ------------------------------------------------------------------------ */

.lpvb-video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	z-index: 1;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Já promovido a player: ocupa a frente e obedece o object-fit do player. */
.lpvb-video-poster.lpvb-video-player {
	z-index: 2;
	object-fit: contain;
}

/* Com capa desenhada, a tira de filme do estado vazio some. */
.lpvb-video-thumb-container.has-poster::before {
	content: none;
}

/* Com o aviso na frente, o play sai do caminho do texto. */
.lpvb-video-thumb-container:has(.lpvb-preview-fallback) .lpvb-play-overlay {
	opacity: 0;
}

/* A capa entra suave: com várias chegando em tempos diferentes, o corte
   seco de uma para outra é o que lê como "piscando". */
.lpvb-video-thumb {
	opacity: 0;
	transition: opacity 0.25s ease;
}
.lpvb-video-thumb.is-loaded {
	opacity: 1;
}
.lpvb-video-card:hover .lpvb-video-thumb.is-loaded {
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Vitrine pública
 * ------------------------------------------------------------------------ */

.lpvb-vitrine-title {
	margin: 0 0 6px;
	font-size: 1.35rem;
	line-height: 1.25;
	font-weight: 700;
	text-wrap: balance;
}
.lpvb-vitrine-sub {
	margin: 0 0 14px;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--lpvb-text-muted);
}
.lpvb-vitrine-pack {
	display: inline-block;
	margin: 0 0 22px;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--lpvb-border-light);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}
.lpvb-vitrine-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 4px;
	text-align: left;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--lpvb-text-muted);
}
.lpvb-vitrine-consent input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.lpvb-vitrine-badge {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--lpvb-border);
	font-size: 0.9rem;
	color: var(--lpvb-text-muted);
}

/* A chamada para a venda ocupa o lugar do download. */
.lpvb-cta-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta));
	color: #fff;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s, box-shadow 0.15s;
}
.lpvb-cta-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	color: #fff;
}
.lpvb-btn-cta {
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
}

/* Selo de conferência do dono: diz se este cartão está tocando a prévia leve
   ou o arquivo original. Só existe no HTML quando quem abriu a página é
   administrador — o cliente nunca recebe o dado que desenha isto.

   Fica no canto SUPERIOR ESQUERDO de propósito: é o único canto que a marca
   d'água do cliente não costuma ocupar, e assim os dois nunca brigam. */
.lpvb-fonte {
	position: absolute;
	z-index: 7;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: #fff;
	pointer-events: none;
	user-select: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* As bandeirinhas de idioma.
 *
 * Flutuando no canto de baixo, do lado oposto ao botão "ver como visitante"
 * do dono — senão os dois brigariam pelo mesmo canto na tela dele.
 *
 * A bandeira do idioma atual fica acesa e as outras apagadas: assim dá para
 * ver de relance em que idioma a loja está, sem ler nada. */
.lpvb-idiomas {
	display: flex;
	align-items: center;
	/* CENTRALIZADAS, logo abaixo da barra do logo e acima da chamada.
	 *
	 * Passaram por três lugares até aqui, e vale registrar por quê.
	 * Começaram flutuando no canto inferior esquerdo: ninguém via. Subiram
	 * para uma faixa própria ACIMA do quadro do logo: ficavam penduradas
	 * fora dele, como enfeite solto. Depois foram para o canto direito de
	 * DENTRO do quadro: ali competiam com o nada, porque o olho de quem
	 * abre a loja não passa por aquele canto.
	 *
	 * O ALEX escolheu este lugar olhando as duas últimas lado a lado.
	 * Entre o logo e a chamada, a bandeirinha fica no caminho do olho de
	 * quem desce a página — a única posição em que ela cumpre o que
	 * promete.
	 *
	 * FORA da barra, e não dentro dela: a barra pode ser escondida por
	 * configuração, e levaria as bandeiras junto. */
	justify-content: center;
	gap: 12px;
	/* RESPIRO IGUAL dos dois lados: 24px abaixo da barra do logo, 24px até
	   o título: o MESMO valor dos dois lados, e o cabeçalho logo abaixo não
	   acrescenta nada por conta dele.
	 *
	 * Antes eram 16 em cima e 50 embaixo, e o ALEX viu o desequilíbrio: as
	 * bandeiras pareciam coladas na barra e o título, largado lá longe. */
	padding: var(--lpvb-respiro-idiomas) 18px var(--lpvb-respiro-idiomas);
	/* NUNCA esmagada.
	 *
	 * Esta faixa é filha de um container em coluna com altura de tela
	 * cheia. Filho de flex encolhe sozinho quando o conteúdo não cabe, e
	 * era a altura das bandeiras que ia embora primeiro — "bandeiras
	 * cortadas", nas palavras do ALEX. flex-shrink: 0 resolve de uma vez. */
	flex: 0 0 auto;
}

.lpvb-idiomas .lpvb-idioma {
	display: block;
	line-height: 0;
	border-radius: 3px;
	/* Apagada, mas LEGÍVEL. A 0.5 a bandeira espanhola virava um borrão
	   marrom no preto da loja: quem precisa dela é justamente quem não lê
	   a página para procurá-la. */
	opacity: 0.8;
	/* box-shadow e não outline: o anel do outline é desenhado FORA da caixa
	   e o primeiro container com overflow escondido o decepa. A sombra
	   acompanha o border-radius e nunca sai do lugar. */
	box-shadow: 0 0 0 2px transparent;
	transition: opacity 0.15s, box-shadow 0.15s;
}

.lpvb-idiomas .lpvb-idioma:hover,
.lpvb-idiomas .lpvb-idioma:focus-visible {
	opacity: 1;
}

.lpvb-idiomas .lpvb-idioma.is-atual {
	/* MAGENTA COM BRILHO, escolhido pelo ALEX entre quatro desenhos.
	 *
	 * O ciano fino que havia antes era correto e invisível: num fundo preto,
	 * com a loja inteira em ciano, ele não dizia "clique aqui" para ninguém.
	 * O magenta é a cor que a loja dele já usa para o que importa — o nome
	 * dos packs, as resoluções — e o brilho resolve o resto: a bandeira
	 * acesa é a primeira coisa colorida que o olho encontra no alto.
	 *
	 * Duas sombras: o anel, que marca qual idioma está ligado, e o halo, que
	 * é o que faz a fileira ser notada antes de ser lida. */
	opacity: 1;
	box-shadow:
		0 0 0 2px var(--lpvb-magenta),
		0 0 14px rgba(255, 0, 255, 0.75);
	cursor: default;
}

.lpvb-idiomas .lpvb-idioma svg {
	display: block;
	border-radius: 2px;
	/* 3:2 exatos, a mesma proporção do viewBox do desenho. Qualquer outra
	   conta aqui estica a bandeira: era por isso que a listra de baixo da
	   americana sumia e a faixa amarela da espanhola engordava. */
	width: 36px;
	height: 24px;
	/* A americana é quase toda branca e sangrava no preto da loja. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* NAS TELAS DE CARTÃO, DENTRO DO CARTÃO.
 *
 * Elas já moraram no canto de cima à direita destas telas, e de lá o ALEX
 * mandou a foto da tela de prévias: as três bandeiras soltas num pedaço de
 * preto, do outro lado da tela, sem relação nenhuma com o cartão que a
 * pessoa está lendo. Pareciam ter caído ali.
 *
 * Agora ficam dentro do cartão, entre a logo e o título — a MESMA ordem da
 * loja. O site inteiro passa a dizer a mesma coisa no mesmo lugar, e quem
 * chega de fora encontra a bandeirinha onde já viu antes.
 *
 * O respiro é menor que o da loja porque aqui o espaço é do cartão, não da
 * página: 14px separam sem abrir buraco entre a logo e o título. */
.lpvb-idiomas-cartao {
	justify-content: center;
	/* Em cima quem dá o espaço é a margem da logo, que usa a MESMA variável;
	   embaixo é este padding. Os dois lados ficam iguais por construção, e
	   não por coincidência de números escritos em lugares diferentes. */
	padding: 0 0 var(--lpvb-respiro-idiomas);
	margin: 0;
}

/* Sem logo configurada, a fileira é a primeira coisa do cartão e precisa do
   respiro de cima por conta própria. */
.lpvb-glass-card > .lpvb-idiomas-cartao:first-child,
.lpvb-content-container > .lpvb-idiomas-cartao:first-child {
	padding-top: var(--lpvb-respiro-idiomas);
}

@media (max-width: 480px) {
	:root {
		--lpvb-respiro-idiomas: 18px;
	}

	.lpvb-idiomas {
		gap: 10px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Maiores também no celular, a pedido do ALEX: na tela pequena a
	   bandeira some entre o logo e o título se for discreta demais. A
	   proporção continua 3:2, que é a do desenho. */
	.lpvb-idiomas .lpvb-idioma svg {
		width: 33px;
		height: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpvb-idiomas .lpvb-idioma {
		transition: none;
	}
}

/* A etiqueta de resolução, no canto OPOSTO ao selo do dono.
 *
 * O selo PRÉVIA/ORIGINAL fica à esquerda; esta fica à direita. Assim, na
 * tela do dono, as duas aparecem juntas sem brigar por lugar — ele vê o que
 * está tocando e o que o cliente leva, de uma olhada só. */
.lpvb-resolucao {
	position: absolute;
	z-index: 7;
	top: 8px;
	right: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: #fff;
	/* Magenta da marca, escolhido por ele vendo as três lado a lado.
	 *
	 * Passou por preto translúcido (sumia em capa escura) e por verde (se
	 * misturava com as capas, e ficava igual ao selo PRÉVIA na tela do dono).
	 * O magenta é o que mais salta, e deixa o verde significando uma coisa
	 * só: "prévia, está tudo certo". */
	background: var(--lpvb-magenta, #FF00FF);
	pointer-events: none;
	user-select: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Verde: está tocando a prévia, que é o certo. */
.lpvb-fonte-previa {
	background: #15803d;
}

/* Âmbar: está tocando o ORIGINAL. Não é um erro do plugin — é a trava de
   tamanho deixando passar um arquivo leve que ficou sem prévia. Mas o dono
   tem que enxergar isso de longe, porque é o sintoma de pareamento que não
   aconteceu. */
.lpvb-fonte-original {
	background: #b45309;
}

/* A marca é desenhada aqui, não gravada no arquivo: trocar o logo é uma
   configuração, não 60 mil reconversões. */
.lpvb-watermark {
	position: absolute;
	z-index: 6;
	height: auto;
	max-width: 60%;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.lpvb-mark-inferior-direito  { right: 10px; bottom: 10px; }
.lpvb-mark-inferior-esquerdo { left: 10px;  bottom: 10px; }
.lpvb-mark-superior-direito  { right: 10px; top: 10px; }
.lpvb-mark-superior-esquerdo { left: 10px;  top: 10px; }
.lpvb-mark-centro {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 55%;
}

/* ---------------------------------------------------------------------------
 * A prateleira da vitrine
 *
 * Um cartão por pack. A capa manda no cartão, e o bloco de informações fica
 * legível sem virar tabela: rótulo apagado, valor em destaque.
 * ------------------------------------------------------------------------ */

.lpvb-shelf-head {
	padding: 24px 24px 8px;
	text-align: center;
}

/* Logo abaixo das bandeiras, o cabeçalho não acrescenta espaço nenhum: quem
   manda no respiro é a faixa, e só ela. Dois donos do mesmo espaço foi o que
   fez a conta desencontrar em quatro dos sete tamanhos de tela que eu medi —
   e esta regra, com duas classes, ganha de todas as consultas de tela que
   mexiam no cabeçalho. */
.lpvb-idiomas + .lpvb-shelf-head {
	padding-top: 0;
}

.lpvb-shelf-title {
	margin: 0 0 8px;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	color: var(--lpvb-text);
	text-wrap: balance;
}

.lpvb-shelf-sub {
	margin: 0;
	color: var(--lpvb-text-muted);
	font-size: 1rem;
}

/* Sempre centralizado, inclusive a última fileira incompleta.
   Era uma grade de colunas fixas: com 3 packs numa tela larga, sobravam
   colunas vazias à direita e os cartões pareciam encostados na esquerda. */
/*
 * O NOME DA PRATELEIRA.
 *
 * Só aparece quando o dono deu uma categoria ao acesso. Com tudo em
 * branco a loja não ganha título nenhum e continua idêntica ao que era.
 *
 * O padding de baixo da grade é 64px, pensado para a última linha da
 * tela. Entre duas prateleiras isso vira um buraco que parece fim de
 * página — por isso a grade seguida de outro título encolhe embaixo.
 */
.lpvb-prateleira-nome {
	max-width: 1400px;
	margin: 0 auto;
	/* Respiro em cima: colado na chamada da loja, o primeiro título
	   parecia parte dela em vez de um começo de prateleira. */
	padding: 26px 24px 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lpvb-cyan);
	text-align: center;
	/* Nome comprido quebra em vez de estourar a tela do celular. */
	overflow-wrap: anywhere;
}

/*
 * A CAIXA DA PRATELEIRA.
 *
 * Existe para a barrinha de deslizar ter onde se pendurar, e para a
 * conta de "é a última prateleira?" ser uma pergunta sobre a caixa, e
 * não sobre quem vem depois do título. Sem posicionamento próprio ela
 * não muda nada no PC.
 */
.lpvb-prateleira {
	position: relative;
}

/* O padding de baixo da grade é 64px, pensado para a última linha da
   tela. Entre duas prateleiras isso vira um buraco que parece fim de
   página — por isso a prateleira seguida de outra encolhe embaixo. */
.lpvb-prateleira:has( + .lpvb-prateleira ) .lpvb-shelf-grid {
	padding-bottom: 28px;
}

@media (max-width: 480px) {
	.lpvb-prateleira-nome {
		font-size: 13px;
		padding-top: 18px;
	}
}

/* ---------------------------------------------------------------------------
 * A FILEIRA QUE DESLIZA, no celular
 *
 * O PROBLEMA MEDIDO: no celular os cartões ficam um por linha. Com 8
 * acessos em 3 prateleiras a loja virava 3.073px — 3,6 telas de rolagem
 * até o último produto. Deslizando, as mesmas 3 prateleiras ocupam uma
 * fileira cada.
 *
 * QUEM LIGA ISTO É O JAVASCRIPT, com a classe lpvb-desliza-on, e só
 * quando há duas ou mais prateleiras E a fileira não cabe na tela. Sem
 * JavaScript, ou com uma prateleira só, tudo aqui fica desligado e a
 * loja é exatamente a que sempre foi — empilhada, um cartão por linha.
 *
 * Nada disto vale no PC: lá os cartões cabem lado a lado e deslizar
 * seria esconder produto sem ganhar nada.
 * ------------------------------------------------------------------------ */

@media (max-width: 600px) {
	.lpvb-shelf-grid.lpvb-desliza-on {
		flex-wrap: nowrap;
		/*
		 * flex-start, e NÃO center.
		 *
		 * Com center e conteúdo maior que a tela, o começo da fileira sai
		 * para fora da área rolável e o primeiro cartão fica cortado para
		 * sempre — não há como rolar de volta até ele. É um defeito
		 * clássico, e silencioso: a tela parece certa com poucos cartões e
		 * quebra justamente quando a fileira enche.
		 */
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* O cartão encosta na mesma margem do título quando para. */
		scroll-padding-left: 16px;
		-webkit-overflow-scrolling: touch;
		/* A barra de rolagem do sistema some: quem informa é a barrinha
		   desenhada embaixo, que combina com a loja. */
		scrollbar-width: none;
		/* Espaço para a barrinha, no lugar do respiro da pilha. */
		padding-bottom: 14px;
	}

	.lpvb-shelf-grid.lpvb-desliza-on::-webkit-scrollbar {
		display: none;
	}

	/*
	 * 82% da tela, e não 100%.
	 *
	 * Os 18% que sobram são o que faz a fileira dizer sozinha que
	 * continua: a borda do próximo cartão aparecendo é o aviso mais
	 * honesto que existe, porque é o próprio produto espiando. Com 100%
	 * a fileira pareceria um cartão só e ninguém arrastaria.
	 */
	.lpvb-shelf-grid.lpvb-desliza-on > .lpvb-pack-card {
		flex: 0 0 82%;
		max-width: 82%;
		min-width: 0;
		scroll-snap-align: start;
	}
}

/*
 * A DICA: a barrinha mais a seta.
 *
 * A BARRA diz quanto tem e onde você está; a SETA diz que é para
 * arrastar. Juntas num só bloco centralizado, porque são uma frase só.
 */
.lpvb-desliza-dica {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0 auto 26px;
	/* A seta herda a cor daqui, e a barra tem a sua própria. */
	color: var(--lpvb-cyan);
}

.lpvb-desliza-dica[hidden] {
	display: none;
}

/*
 * A BARRINHA.
 *
 * Fina, sem moldura, na cor da casa. Ela diz duas coisas ao mesmo tempo:
 * que a fileira continua (o trilho é mais comprido que o cheio) e quanto
 * falta (a proporção entre os dois). Com doze acessos ela não cresce —
 * que é a diferença entre uma barra e doze bolinhas.
 */
.lpvb-desliza-barra {
	display: block;
	width: 64px;
	height: 3px;
	border-radius: 999px;
	background: var(--lpvb-border-light);
	overflow: hidden;
}

/*
 * A SETA.
 *
 * O mesmo desenho do aviso de "tem mais embaixo" — mesma espessura,
 * mesmas pontas arredondadas —, deitado para o lado. É de propósito: a
 * loja já ensinou essa forma ao visitante uma vez, e repetir a forma
 * custa zero atenção. Forma nova custaria.
 *
 * E ela balança POUCO, 4px, no mesmo ritmo do outro aviso. Movimento
 * grande que ninguém pediu, numa loja, lê como site com defeito.
 */
.lpvb-desliza-seta {
	display: block;
	flex: 0 0 auto;
	opacity: 0.9;
	animation: lpvb-vai-pro-lado 1.6s ease-in-out infinite;
	transition: opacity 0.35s ease;
}

@keyframes lpvb-vai-pro-lado {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(4px); }
}

/*
 * ARRASTOU UMA VEZ, a seta sai de cena — e não volta.
 *
 * Quem arrastou já descobriu que a fileira anda. Um convite que insiste
 * depois de aceito deixa de ser ajuda e vira enfeite piscando. É a mesma
 * regra do aviso de baixo, que some na primeira rolagem.
 *
 * A BARRA FICA: ela não convida a nada, ela responde "onde eu estou" —
 * e essa pergunta continua existindo no meio da fileira.
 */
.lpvb-desliza-dica.lpvb-ja-deslizou .lpvb-desliza-seta {
	opacity: 0;
}

.lpvb-desliza-cheio {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--lpvb-magenta), var(--lpvb-cyan));
	/* O JavaScript escreve largura e deslocamento; sem ele, o trilho fica
	   vazio em vez de cheio — e a barrinha nem chega a aparecer. */
	width: 0;
	transform: translateX(0);
	transition: transform 0.18s ease, width 0.18s ease;
}

/* Quem ligou "reduzir movimento" no telefone está pedindo exatamente
   para não ver a seta balançando. Ela fica parada — e continua
   apontando para o lado, que é o que ela tem a dizer. */
@media (prefers-reduced-motion: reduce) {
	.lpvb-desliza-cheio,
	.lpvb-desliza-seta {
		transition: none;
	}

	.lpvb-desliza-seta {
		animation: none;
	}
}

/* Cinto de segurança: no PC a dica não existe, mesmo que o
   JavaScript tenha ligado antes de girarem o telefone. */
@media (min-width: 601px) {
	.lpvb-desliza-dica {
		display: none;
	}

	.lpvb-shelf-grid.lpvb-desliza-on {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
	}
}

.lpvb-shelf-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 24px;
	padding: 32px 24px 64px;
	max-width: 1400px;
	margin: 0 auto;
	/*
	 * A prateleira ocupa a largura toda, sempre.
	 *
	 * Sem isto ela se encolhia até o tamanho do conteúdo quando havia poucos
	 * packs — e aí a conta de "metade da largura" era metade de um pedaço, não
	 * metade da tela. Era isso que produzia o cartão magro de 143px.
	 */
	width: 100%;
	box-sizing: border-box;
}

/*
 * A largura vem do Personalizar, pela variável que o template escreve.
 *
 * Cartão grande é bonito com um pack só; com várias prateleiras ele joga o
 * catálogo para fora da tela. O padrão é menor de propósito, e quem quiser o
 * cartão grande de volta é só aumentar o número.
 */
.lpvb-shelf-grid > .lpvb-pack-card {
	flex: 0 1 var( --lpvb-card-w, 260px );
	max-width: calc( var( --lpvb-card-w, 260px ) * 1.12 );
}

/*
 * O texto do cartão da prateleira é menor que o da área do cliente.
 *
 * Um cartão estreito com a lista inteira de informações — loops, tamanho,
 * formatos, resolução, prazo, e mais quatro linhas de "acesso liberado para"
 * — virava uma torre de 577px de altura para 220px de largura. Encolher a
 * letra aqui vale mais do que alargar o cartão, porque alargar joga o
 * catálogo para fora da tela de novo, que é o problema que a gente veio
 * resolver.
 *
 * Só a prateleira muda: a lista dentro do pack aberto continua como estava.
 */
.lpvb-is-shelf .lpvb-pack-body {
	gap: 8px;
	padding: 14px 14px 16px;
}

/* Mesma blindagem para o nome e para o preço, pelo mesmo motivo. */
.lpvb-is-shelf .lpvb-pack-name,
.lpvb-is-shelf .lpvb-pack-name a {
	font-size: clamp( 1.05rem, 2.6vw, 1.2rem ) !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}

/*
 * O tamanho vai escrito em CADA linha, não só na lista.
 *
 * Aqui o tamanho era definido só na lista (<dl>) e as linhas (<dt>/<dd>)
 * herdavam. Só que herança perde para QUALQUER regra que o tema aplique
 * direto na linha — até uma fraquinha como "dd { font-size: 16px }". Foi por
 * isso que, no celular do ALEX, o CSS certo estava no servidor e o texto
 * continuava grande: o tema mandava nas linhas, não na lista.
 *
 * O !important aqui é o mesmo remédio que o botão "Entendi" já precisou: o
 * CSS do tema carrega depois do nosso e, em empate, quem vem depois ganha.
 */
.lpvb-is-shelf .lpvb-pack-info,
.lpvb-is-shelf .lpvb-pack-info dt,
.lpvb-is-shelf .lpvb-pack-info dd,
.lpvb-is-shelf .lpvb-pack-info dd span {
	font-size: 0.76rem !important;
	line-height: 1.32 !important;
}

.lpvb-is-shelf .lpvb-pack-info {
	gap: 2px;
	margin: 0 !important;
}

/* As linhas em bloco ("Acesso Liberado para:") ficam mais juntas ainda. */
.lpvb-is-shelf .lpvb-info-row + .lpvb-info-row {
	margin-top: 1px;
}

.lpvb-is-shelf .lpvb-info-row,
.lpvb-is-shelf .lpvb-info-row dt,
.lpvb-is-shelf .lpvb-info-row dd {
	margin: 0;
	padding: 0;
}

.lpvb-is-shelf .lpvb-pack-price-from,
.lpvb-is-shelf .lpvb-pack-price-from s {
	font-size: 0.92rem !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

.lpvb-is-shelf .lpvb-pack-price,
.lpvb-is-shelf .lpvb-pack-price .lpvb-preco-valor {
	font-size: clamp( 1.35rem, 3.4vw, 1.6rem ) !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}

/* O rótulo "POR:" é menor que o valor, e continua sendo com tema por cima. */
.lpvb-is-shelf .lpvb-pack-price .lpvb-preco-rotulo {
	font-size: 0.72em !important;
}

.lpvb-is-shelf .lpvb-pack-precos {
	gap: 0;
	padding-top: 2px;
}

.lpvb-is-shelf .lpvb-cta-btn,
.lpvb-is-shelf .lpvb-preview-btn {
	padding: 9px 14px;
	font-size: 0.86rem;
}

.lpvb-pack-card {
	display: flex;
	flex-direction: column;
	background: var(--lpvb-surface);
	border: 1px solid var(--lpvb-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .18s ease, border-color .18s ease;
}

.lpvb-pack-card:hover {
	transform: translateY(-4px);
	border-color: var(--lpvb-border-light);
}

.lpvb-pack-cover {
	position: relative;
	display: block;
	aspect-ratio: var(--lpvb-cover-ratio, 16 / 9);
	background: var(--lpvb-surface-light);
	overflow: hidden;
}

.lpvb-pack-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lpvb-pack-cover-empty {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--lpvb-surface-light), var(--lpvb-surface));
}

/*
 * Formato "natural": a imagem inteira, sem corte nenhum.
 *
 * Nos formatos fixos o object-fit: cover corta as laterais (ou o topo) para
 * preencher — proporcional, nunca espremido. Aqui não há corte: o cartão toma
 * a altura que a imagem pedir. É o que serve para arte pronta.
 */
.lpvb-capa-natural .lpvb-pack-cover {
	aspect-ratio: auto;
}

.lpvb-capa-natural .lpvb-pack-cover img {
	height: auto;
	object-fit: contain;
}

/*
 * Cartão inteiro: só a arte do dono e os dois botões.
 *
 * Quem desenhou a imagem com nome, informações e preço dentro não quer o
 * plugin repetindo tudo embaixo. A imagem não é cortada — a arte foi feita
 * inteira e tem que aparecer inteira.
 */
.lpvb-card-imagem .lpvb-pack-cover {
	aspect-ratio: auto;
}

.lpvb-card-imagem .lpvb-pack-cover img {
	height: auto;
	object-fit: contain;
}

.lpvb-card-imagem .lpvb-pack-body {
	padding: 10px 10px 12px;
	gap: 8px;
}

.lpvb-pack-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--lpvb-cyan);
	color: #001018;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lpvb-pack-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	flex: 1;
	text-align: center;
}

.lpvb-pack-name {
	margin: 0;
	font-size: clamp(1.25rem, 3.4vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

/* Rosa com brilho, no espelho do "MEMBROS" da sua página de acesso. */
.lpvb-pack-name a,
.lpvb-pack-name {
	color: var(--lpvb-magenta);
	text-decoration: none;
	text-shadow:
		0 0 14px color-mix(in srgb, var(--lpvb-magenta) 55%, transparent),
		0 0 34px color-mix(in srgb, var(--lpvb-magenta) 28%, transparent);
}

.lpvb-pack-name a:hover {
	color: var(--lpvb-magenta);
	filter: brightness(1.15);
}

.lpvb-pack-tagline {
	margin: 0;
	color: var(--lpvb-text-muted);
	font-size: .9rem;
	line-height: 1.45;
}

/* Centralizado, "Rótulo: valor" numa linha só. Nada é empurrado para a
   direita, então rótulo comprido quebra a linha em vez de cortar o valor. */
.lpvb-pack-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: .88rem;
	text-align: center;
}

.lpvb-info-row {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
}

.lpvb-info-row dt {
	display: inline;
	margin: 0;
	color: var(--lpvb-text-muted);
	font-weight: 400;
}

.lpvb-info-row dt::after {
	content: ": ";
}

.lpvb-info-row dd {
	display: inline;
	margin: 0;
	color: var(--lpvb-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Valor de várias linhas: o rótulo fica sozinho e a lista desce embaixo,
   cada item na sua linha, também centralizado. */
.lpvb-info-row.is-block dt,
.lpvb-info-row.is-block dd {
	display: block;
}

.lpvb-info-row.is-block dt {
	margin-bottom: 2px;
}

.lpvb-info-row.is-block dd span {
	display: block;
	line-height: 1.45;
}

.lpvb-pack-price {
	margin: 0;
	/* Preço tem que parecer preço, não mais uma linha da lista. */
	font-size: clamp(1.7rem, 5vw, 2.1rem);
	text-align: center;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--lpvb-cyan);
	padding-top: 2px;
}

.lpvb-pack-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

.lpvb-pack-open,
.lpvb-back-btn {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 8px;
	border: 1px solid var(--lpvb-border-light);
	background: transparent;
	color: var(--lpvb-text);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.lpvb-pack-open:hover,
.lpvb-back-btn:hover {
	border-color: var(--lpvb-cyan);
	color: var(--lpvb-cyan);
}

/* Os dois botões dividem a linha; quando não cabem, cada um ocupa a sua
   inteira, em vez de um ficar curto e o outro largo. */
.lpvb-pack-actions > a {
	flex: 1 1 auto;
	text-align: center;
	white-space: nowrap;
	/*
	 * "Não quebrar a linha" é bom até o texto não caber: aí o botão passa por
	 * cima da borda do cartão e fica pendurado para fora, que foi o que
	 * aconteceu no cartão estreito. Estas duas linhas mandam ele se conter.
	 */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Na prateleira o texto do botão pode quebrar em duas linhas em vez de sumir. */
.lpvb-is-shelf .lpvb-pack-actions > a {
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	.lpvb-shelf-grid {
		padding: 24px 16px 48px;
		gap: 18px;
	}

	/*
	 * No celular, UM cartão por linha.
	 *
	 * A tentativa de pôr dois lado a lado fracassou pela medida: com a lista
	 * de informações completa — loops, tamanho, formatos, resolução, prazo e
	 * as quatro linhas de "acesso liberado para" — cada cartão ficava com
	 * 155px de largura por 505 de altura. Torre de 3,3 para 1: cada linha
	 * quebrava em duas e o texto virava confete.
	 *
	 * Num celular a pessoa rola de qualquer jeito; o que ela não perdoa é
	 * texto ilegível. A economia de tela veio da letra menor, que vale nos
	 * dois casos, e não de espremer duas colunas onde não cabem.
	 */
	.lpvb-shelf-grid > .lpvb-pack-card {
		flex: 1 1 100%;
		max-width: none;
		min-width: 0;
	}

	.lpvb-shelf-head {
		padding: 18px 16px 4px;
	}
}

/* ---------------------------------------------------------------------------
 * O portão da vitrine, à prova do tema
 *
 * A tela de login já tinha esta blindagem; o portão da vitrine não, e o tema
 * vencia em dois pontos visíveis: o título herdava a cor escura do tema (ficava
 * apagado no fundo preto) e o botão virava um retângulo branco sem texto ao
 * passar o mouse. Aqui a vitrine repete o que já resolveu no login.
 * ------------------------------------------------------------------------ */

#lpvb-vitrine-gate .lpvb-vitrine-title {
	color: var(--lpvb-text) !important;
	opacity: 1 !important;
}

#lpvb-vitrine-gate .lpvb-vitrine-sub {
	color: var(--lpvb-text-muted) !important;
	opacity: 1 !important;
}

#lpvb-vitrine-gate .lpvb-vitrine-consent span {
	color: var(--lpvb-text-muted) !important;
}

#lpvb-vitrine-gate .lpvb-btn-primary,
#lpvb-vitrine-gate button.lpvb-btn-primary,
#lpvb-vitrine-gate input.lpvb-btn-primary,
#lpvb-vitrine-gate .lpvb-btn-primary:hover,
#lpvb-vitrine-gate .lpvb-btn-primary:focus,
#lpvb-vitrine-gate .lpvb-btn-primary:active {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	padding: 13px !important;
	border: none !important;
	border-radius: 8px !important;
	background-image: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta)) !important;
	background-color: var(--lpvb-cyan) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: pointer !important;
}

#lpvb-vitrine-gate .lpvb-btn-primary:hover {
	filter: brightness(1.12) !important;
}

/* O tema também pinta os campos de branco, como fazia no login. */
#lpvb-vitrine-gate .lpvb-input,
#lpvb-vitrine-gate input.lpvb-input {
	width: 100% !important;
	background: var(--lpvb-surface-light) !important;
	color: var(--lpvb-text) !important;
	-webkit-text-fill-color: var(--lpvb-text) !important;
	border: 1px solid var(--lpvb-border-light) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	box-shadow: none !important;
}

#lpvb-vitrine-gate .lpvb-input::placeholder {
	color: var(--lpvb-text-muted) !important;
	opacity: 1 !important;
}

/* O mesmo vale para o título e o subtítulo da prateleira. */
.lpvb-is-shelf .lpvb-shelf-title {
	color: var(--lpvb-text) !important;
}

.lpvb-is-shelf .lpvb-shelf-sub {
	color: var(--lpvb-text-muted) !important;
}

/* Logo centralizado na barra da vitrine: as três colunas continuam existindo,
   só que a da esquerda deixa de mandar na largura. */
.lpvb-navbar.lpvb-logo-centro {
	justify-content: center;
	text-align: center;
}

.lpvb-navbar.lpvb-logo-centro .lpvb-navbar-left {
	min-width: 0;
	justify-content: center;
	width: 100%;
}

.lpvb-navbar.lpvb-logo-centro .lpvb-navbar-center,
.lpvb-navbar.lpvb-logo-centro .lpvb-navbar-right {
	display: none;
}

.lpvb-navbar.lpvb-logo-centro .lpvb-navbar-logo {
	margin: 0 auto;
}

/* Cartão sem foto: o corpo sobe e ocupa o lugar, em vez de deixar um buraco. */
.lpvb-pack-card:not(:has(.lpvb-pack-cover)) .lpvb-pack-body {
	padding-top: 22px;
}

/* Na prateleira a barra não precisa acompanhar a rolagem, e fixá-la é o que
   fazia a logo grande cavalgar por cima do título em janela estreita. */
.lpvb-is-shelf .lpvb-navbar {
	position: static;
}

/* Oferta: o valor antigo riscado em vermelho, o novo embaixo em destaque.
   Cada um na sua linha, como se faz em vitrine de loja. */
.lpvb-pack-precos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.lpvb-pack-price-from {
	margin: 0;
	color: var(--lpvb-danger, #ff4444);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}

.lpvb-pack-price-from s {
	text-decoration-thickness: 2px;
}

.lpvb-preco-rotulo {
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/*
 * O valor nunca quebra no meio.
 *
 * Em cartão estreito o preço saía como "R$" numa linha e "59,90" na outra —
 * num cartão de venda, isso é o pior lugar possível para uma quebra.
 */
.lpvb-preco-valor {
	white-space: nowrap;
}

.lpvb-pack-price-from s {
	white-space: nowrap;
}

.lpvb-pack-price .lpvb-preco-rotulo {
	font-size: 0.72em;
	vertical-align: 0.12em;
	margin-right: 2px;
}

/* Nome do acesso no lugar da busca desligada. */
.lpvb-acesso-nome {
	margin: 0;
	font-size: clamp(1.05rem, 2.6vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	color: var(--lpvb-magenta);
	text-shadow:
		0 0 14px color-mix(in srgb, var(--lpvb-magenta) 50%, transparent),
		0 0 32px color-mix(in srgb, var(--lpvb-magenta) 25%, transparent);
	text-wrap: balance;
}

/* A pasta aberta, logo abaixo do nome do acesso.
 *
 * Fica de propósito mais discreta que o título: o acesso é o que a pessoa
 * comprou, a pasta é só onde ela está no momento. Se as duas gritassem no
 * mesmo tom, a barra viraria duas manchetes brigando.
 *
 * Vazia ela some por completo — sem isso a barra de cima mudaria de altura
 * a cada clique, e a página inteira daria um pulinho. */
.lpvb-pasta-atual {
	margin: 3px 0 0;
	font-size: clamp(0.78rem, 1.6vw, 0.92rem);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--lpvb-text-muted);
	/* Nome comprido não pode empurrar a barra: corta com reticências. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lpvb-pasta-atual:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Preenchimento automático do navegador
 *
 * O Chrome pinta os campos que ele mesmo preencheu com fundo e cor próprios,
 * e ignora "background" e "color". A cor só cede a -webkit-text-fill-color, e
 * o fundo só a uma sombra interna do tamanho do campo — daí o truque abaixo.
 * ------------------------------------------------------------------------ */

#lpvb-vitrine-gate .lpvb-input:-webkit-autofill,
#lpvb-vitrine-gate .lpvb-input:-webkit-autofill:hover,
#lpvb-vitrine-gate .lpvb-input:-webkit-autofill:focus,
#lpvb-login-page .lpvb-input:-webkit-autofill,
#lpvb-login-page .lpvb-input:-webkit-autofill:hover,
#lpvb-login-page .lpvb-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lpvb-text) !important;
	caret-color: var(--lpvb-text);
	-webkit-box-shadow: 0 0 0 1000px var(--lpvb-surface-light) inset !important;
	box-shadow: 0 0 0 1000px var(--lpvb-surface-light) inset !important;
	transition: background-color 9999s ease-in-out 0s;
}

/* O texto digitado à mão também: opacidade cheia, cor cheia. */
#lpvb-vitrine-gate .lpvb-input,
#lpvb-vitrine-gate input.lpvb-input {
	opacity: 1 !important;
	caret-color: var(--lpvb-text);
}

/* O aviso de consentimento, agora sem caixa para marcar. */
#lpvb-vitrine-gate .lpvb-vitrine-consent {
	display: block;
	margin: 4px 0 18px;
	font-size: 0.82rem;
	line-height: 1.45;
	text-align: center;
	color: var(--lpvb-text-muted) !important;
}

/* ==========================================================================
   Troca de senha pelo proprio cliente
   O botao fica ao lado de "Sair"; a janela abre por cima de tudo.
   Todas as regras usam !important porque o tema do site pode ter estilos
   proprios para input e button, e ja perdemos essa briga duas vezes.
   ========================================================================== */
.lpvb-senha-btn {
	color: var(--lpvb-cyan);
	background: transparent;
	font-family: var(--lpvb-font);
	font-size: 0.9rem;
	padding: 5px 10px;
	margin-right: 8px;
	border: 1px solid var(--lpvb-cyan);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}
.lpvb-senha-btn:hover {
	background: var(--lpvb-cyan);
	color: #001018;
}
/*
 * O aviso no meio da tela.
 *
 * Existe para o que não pode passar despercebido: o download recusado, o
 * aparelho que não coube. A tigela no canto é para "deu certo".
 */
.lpvb-alerta-fundo {
	position: fixed;
	inset: 0;
	z-index: 100010;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	animation: lpvb-alerta-entra 0.16s ease-out;
}
.lpvb-alerta-caixa {
	width: 100%;
	max-width: 400px;
	background: var(--lpvb-surface) !important;
	color: var(--lpvb-text) !important;
	border: 1px solid var(--lpvb-danger, #ff4444);
	border-radius: 14px;
	padding: 26px 24px 22px;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
	font-family: var(--lpvb-font);
}
.lpvb-alerta-icone {
	width: 58px;
	height: 58px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lpvb-danger, #ff4444);
	background: color-mix( in srgb, var(--lpvb-danger, #ff4444) 14%, transparent );
}
.lpvb-alerta-icone svg {
	width: 30px;
	height: 30px;
}
.lpvb-alerta-titulo {
	margin: 0 0 10px !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	color: var(--lpvb-danger, #ff4444) !important;
	text-transform: uppercase;
}
.lpvb-alerta-texto {
	margin: 0 0 20px !important;
	font-size: 0.98rem !important;
	line-height: 1.5 !important;
	color: var(--lpvb-text, #f2f2f2) !important;
	overflow-wrap: anywhere;
}
/*
 * O botão vai blindado.
 *
 * Sem isto o tema do site vence: a regra dele para "button" carrega depois da
 * do plugin e pinta o botão por cima — e o cliente fica olhando para um espaço
 * vazio, sem saber como fechar o aviso. A borda existe pelo mesmo motivo: se
 * ainda assim alguém apagar o fundo, o botão continua sendo um botão na tela.
 */
.lpvb-alerta-botao {
	display: inline-block !important;
	min-width: 150px;
	padding: 11px 22px !important;
	margin: 0 !important;
	border: 2px solid var(--lpvb-cyan, #00d4ff) !important;
	border-radius: 8px !important;
	cursor: pointer;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	color: #06121a !important;
	background: var(--lpvb-cyan, #00d4ff) !important;
	background-image: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	-webkit-appearance: none;
	appearance: none;
}
.lpvb-alerta-botao:hover {
	filter: brightness( 1.08 );
	color: #06121a !important;
	background: var(--lpvb-cyan, #00d4ff) !important;
}

/* Dois botões: "Entendi" e, quando faz sentido, "Tentar de novo". */
.lpvb-alerta-acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/*
 * O segundo botão é o secundário: só contorno, para que a ação principal
 * continue sendo uma só.
 */
.lpvb-alerta-botao-2 {
	min-width: 0;
	color: var(--lpvb-cyan, #00d4ff) !important;
	background: transparent !important;
}
.lpvb-alerta-botao-2:hover {
	color: #06121a !important;
	background: var(--lpvb-cyan, #00d4ff) !important;
}
.lpvb-alerta-botao:focus-visible {
	outline: 2px solid var(--lpvb-cyan, #00d4ff);
	outline-offset: 3px;
}
@keyframes lpvb-alerta-entra {
	from { opacity: 0; transform: scale( 0.97 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.lpvb-alerta-fundo { animation: none; }
}

.lpvb-senha-fundo {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.lpvb-senha-caixa {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--lpvb-surface) !important;
	color: var(--lpvb-text) !important;
	border: 1px solid var(--lpvb-border-light);
	border-radius: 10px;
	padding: 26px 24px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	font-family: var(--lpvb-font);
}
.lpvb-senha-caixa h2 {
	margin: 0 0 18px !important;
	font-size: 1.25rem !important;
	color: var(--lpvb-text) !important;
	text-align: center;
}
.lpvb-senha-caixa label {
	display: block;
	margin: 12px 0 5px;
	font-size: 0.85rem;
	color: var(--lpvb-text-muted) !important;
}
.lpvb-senha-caixa input[type="password"] {
	width: 100%;
	padding: 11px 12px !important;
	background: var(--lpvb-surface-light) !important;
	color: var(--lpvb-text) !important;
	border: 1px solid var(--lpvb-border-light) !important;
	border-radius: 6px !important;
	font-size: 1rem !important;
	font-family: var(--lpvb-font) !important;
}
.lpvb-senha-caixa input[type="password"]:focus {
	outline: none;
	border-color: var(--lpvb-cyan) !important;
	box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.25) !important;
}
/* O Chrome pinta o preenchimento automatico por cima do nosso fundo. */
.lpvb-senha-caixa input:-webkit-autofill,
.lpvb-senha-caixa input:-webkit-autofill:hover,
.lpvb-senha-caixa input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lpvb-text) !important;
	box-shadow: 0 0 0 1000px var(--lpvb-surface-light) inset !important;
	caret-color: var(--lpvb-text) !important;
}
.lpvb-senha-dica {
	margin: 14px 0 0 !important;
	font-size: 0.78rem;
	color: var(--lpvb-text-muted) !important;
}
.lpvb-senha-aviso {
	margin: 12px 0 0 !important;
	padding: 9px 11px;
	border-radius: 6px;
	font-size: 0.85rem;
}
.lpvb-senha-aviso.is-erro {
	background: rgba(255, 68, 68, 0.12);
	border: 1px solid var(--lpvb-danger);
	color: #ffb3b3 !important;
}
.lpvb-senha-aviso.is-ok {
	background: rgba(0, 200, 81, 0.12);
	border: 1px solid var(--lpvb-success);
	color: #a8f0c2 !important;
}
.lpvb-senha-caixa .lpvb-btn-primario {
	width: 100%;
	margin-top: 18px;
	padding: 12px 16px !important;
	background: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 1rem !important;
	font-weight: 600;
	font-family: var(--lpvb-font) !important;
	cursor: pointer;
}
.lpvb-senha-caixa .lpvb-btn-primario:hover {
	filter: brightness(1.12);
	color: #fff !important;
}
.lpvb-senha-caixa .lpvb-btn-primario:disabled {
	opacity: 0.6;
	cursor: default;
}
.lpvb-senha-fechar {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none !important;
	border: none !important;
	color: var(--lpvb-text-muted) !important;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0 !important;
	cursor: pointer;
}
.lpvb-senha-fechar:hover {
	color: var(--lpvb-text) !important;
}
@media (max-width: 600px) {
	.lpvb-senha-btn {
		margin-right: 4px;
		padding: 4px 8px;
		font-size: 0.8rem;
	}
}

/* ===========================================================================
   RESPONSIVO — celular, tablet e telas estreitas
   ===========================================================================

   A logo cavalgando o título no celular não era falta de media query: era
   estrutural. O aplicativo é uma coluna flex de 100vh, e todo filho de uma
   coluna flex ENCOLHE por padrão. A barra, espremida para 70px, não segurava
   uma logo de 274px — e a imagem escapava por cima do que vinha depois.

   Aqui estão as três causas, resolvidas na raiz:
     1. a barra não encolhe mais (flex: 0 0 auto);
     2. a altura da logo tem um teto que acompanha a tela, e não 30vh —
        em um celular de 900px de altura, 30vh são 270px de logo;
     3. as colunas da barra não exigem mais 250px cada, o que sozinho já
        estourava a largura de qualquer celular (250 + 250 = 500 > 412).
   ======================================================================== */

/* 1. A barra manda na própria altura. Vale para a área do cliente e para a
      vitrine, nas duas o problema era o mesmo. */
.lpvb-navbar {
	flex: 0 0 auto;
}

/* 2. Teto da logo. O tamanho escolhido em Personalizar entra como variável,
      e aqui ele é limitado ao que a barra comporta. Nunca o contrário. */
.lpvb-navbar .lpvb-navbar-logo {
	height: auto;
	width: auto;
	max-height: min( var( --lpvb-logo-desta-barra, 40px ), 200px );
	max-width: 100%;
	object-fit: contain;
}

/* A prateleira rola a página inteira; travar em 100vh só criava rolagem
   dentro de rolagem no celular. */
#lpvb-browser-app.lpvb-is-shelf {
	height: auto;
	min-height: 100vh;
}

/* Rótulos só para leitores de tela. O WordPress tem essa classe, mas quem
   garante que ela chega na página é o tema — e num tema que não a define os
   rótulos apareciam empurrando os campos do formulário para o lado. */
#lpvb-browser-app .screen-reader-text,
#lpvb-vitrine-gate .screen-reader-text,
#lpvb-primeiro-acesso .screen-reader-text,
#lpvb-warning-page .screen-reader-text,
#lpvb-expired-page .screen-reader-text,
#lpvb-login-page .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Tablet e janela estreita ------------------------------------------ */
@media (max-width: 900px) {
	.lpvb-navbar-left,
	.lpvb-navbar-right {
		min-width: 0;
	}

	.lpvb-navbar .lpvb-navbar-logo {
		max-height: min( var( --lpvb-logo-desta-barra, 40px ), 90px );
	}
}

/* --- Celular ------------------------------------------------------------ */
@media (max-width: 700px) {
	/* A barra vira três linhas centralizadas: logo, nome do pack, botões.
	   Espremer tudo numa linha só é o que produzia texto cortado na borda. */
	.lpvb-navbar {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
		padding: 12px 14px;
	}

	.lpvb-navbar-left,
	.lpvb-navbar-center,
	.lpvb-navbar-right {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.lpvb-navbar .lpvb-navbar-logo {
		max-height: min( var( --lpvb-logo-desta-barra, 40px ), 72px );
	}

	.lpvb-acesso-nome {
		font-size: 1.15rem;
	}

	/* Nome, plano e botões do cliente numa linha que pode quebrar. */
	.lpvb-user-info {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	.lpvb-user-details {
		align-items: center;
		text-align: center;
		width: 100%;
	}

	.lpvb-search-container {
		max-width: 100%;
	}

	/* O conteúdo rola a página, e não uma caixa interna. Rolagem dentro de
	   rolagem no celular é como se perde o rodapé. */
	#lpvb-browser-app {
		height: auto;
		min-height: 100vh;
	}

	.lpvb-main-container {
		overflow: visible;
	}

	.lpvb-content {
		padding: 16px 14px 32px;
	}

	/* O portão e o login ganham ar sem encostar nas bordas. */
	.lpvb-glass-card {
		padding: 26px 18px;
		margin: 16px;
	}

	.lpvb-cta-btn,
	.lpvb-back-btn {
		font-size: 0.9rem;
		padding: 9px 16px;
	}
}

/* --- Celular pequeno (360px e menos) ------------------------------------ */
@media (max-width: 380px) {
	.lpvb-navbar .lpvb-navbar-logo {
		max-height: min( var( --lpvb-logo-desta-barra, 40px ), 60px );
	}

	.lpvb-pack-name {
		font-size: 1.15rem;
	}

	.lpvb-pack-actions {
		flex-direction: column;
	}

	.lpvb-pack-actions > * {
		width: 100%;
	}
}

/* Nada, em tela nenhuma, pode empurrar a página para o lado. Tabela larga,
   nome de arquivo comprido e caminho de pastas rolam dentro da própria
   caixa — a página não. */
#lpvb-browser-app,
#lpvb-vitrine-gate,
#lpvb-warning-page,
#lpvb-expired-page,
#lpvb-login-page {
	max-width: 100%;
	overflow-x: hidden;
}

.lpvb-breadcrumb {
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

/* ===========================================================================
   CABER NA TELA — celular deitado, navegador de dentro do WhatsApp, telas
   curtas em geral.
   ===========================================================================

   Largura já estava resolvida. O que faltava era ALTURA: o navegador dentro
   do WhatsApp come uns 250px de tela com as próprias barras, e sobra pouco
   mais de 600px. Com a logo em 200px, o formulário não cabia e o botão ficava
   escondido embaixo.

   A regra aqui é por altura da tela, não por largura: numa tela baixa tudo
   encolhe junto — logo, espaçamentos e títulos — e o conteúdo inteiro passa a
   caber. Numa tela alta nada muda.
   ======================================================================== */

@media (max-height: 780px) {
	.lpvb-full-page {
		padding: 10px;
	}

	.lpvb-glass-card {
		padding: 20px 18px;
	}

	/* Em tela baixa o respiro encolhe — mas encolhe NOS DOIS LADOS, porque
	   quem manda nele é a variável. Era aqui que a conta desencontrava: esta
	   regra mexia só na margem da logo, e a fileira de bandeiras continuava
	   com o espaço grande embaixo. */
	:root {
		--lpvb-respiro-idiomas: 12px;
	}

	/* A logo passa a ser medida pela tela: 16% da altura, nunca mais que o
	   tamanho escolhido em Personalizar. */

	.lpvb-logo-container img {
		max-height: 16vh;
		width: auto;
	}

	.lpvb-vitrine-title,
	.lpvb-login-title {
		font-size: 1.2rem;
		margin-bottom: 4px;
	}

	.lpvb-vitrine-sub,
	.lpvb-login-subtitle {
		font-size: 0.88rem;
		margin-bottom: 10px;
	}

	.lpvb-vitrine-pack {
		margin-bottom: 12px;
	}

	.lpvb-input-group {
		margin-bottom: 10px;
	}

	.lpvb-input {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.lpvb-vitrine-consent {
		margin: 8px 0 10px;
		font-size: 0.78rem;
	}

	/* Prateleira: a barra e o cabeçalho cedem espaço para o primeiro cartão
	   aparecer inteiro já na abertura. */
	.lpvb-navbar {
		padding: 8px 14px;
	}

	.lpvb-navbar .lpvb-navbar-logo {
		max-height: min( var( --lpvb-logo-desta-barra, 40px ), 56px );
	}

	.lpvb-shelf-head {
		padding: 14px 16px 2px;
	}

	.lpvb-shelf-title {
		font-size: 1.4rem;
		margin-bottom: 4px;
	}

	.lpvb-shelf-sub {
		font-size: 0.88rem;
	}

	.lpvb-shelf-grid {
		padding-top: 14px;
		gap: 14px;
	}

	.lpvb-pack-body {
		gap: 8px;
		padding: 14px 16px 16px;
	}
}

/* Tela muito baixa (celular deitado): a logo sai de cena no portão, porque
   entre ver a logo e ver o botão de entrar, o botão importa mais. */
@media (max-height: 480px) {
	#lpvb-vitrine-gate .lpvb-logo-container,
	#lpvb-login-page .lpvb-logo-container {
		display: none;
	}
}

/* A área do cliente no celular: a barra estava tomando meia tela. Nome do
   acesso, nome da pessoa e botões ficam compactos, sobrando espaço para as
   pastas, que é o que o cliente veio fazer aqui. */
@media (max-width: 700px) {
	.lpvb-navbar {
		padding: 8px 12px;
		gap: 6px;
	}

	.lpvb-acesso-nome {
		font-size: 1.05rem;
	}

	.lpvb-user-name {
		font-size: 0.9rem;
	}

	.lpvb-user-plan {
		font-size: 0.78rem;
	}

	.lpvb-user-details {
		gap: 0;
	}

	.lpvb-senha-btn,
	.lpvb-logout-btn {
		padding: 4px 12px;
		font-size: 0.85rem;
	}
}

/* Tela baixa de verdade (celular pequeno, ou deitado): o subtítulo sai e
   tudo aperta mais um pouco. Entre ler a explicação e ver o botão de entrar,
   o botão ganha — quem chegou aqui já clicou no link sabendo o que quer. */
@media (max-height: 620px) {
	.lpvb-full-page {
		padding: 6px;
	}

	.lpvb-glass-card {
		padding: 14px 16px;
	}

	.lpvb-logo-container img {
		max-height: 14vh;
	}

	#lpvb-vitrine-gate .lpvb-vitrine-sub,
	#lpvb-login-page .lpvb-login-subtitle,
	#lpvb-vitrine-gate .lpvb-vitrine-pack {
		display: none;
	}

	.lpvb-vitrine-title,
	.lpvb-login-title {
		font-size: 1.1rem;
		margin-bottom: 10px;
	}

	.lpvb-input-group {
		margin-bottom: 8px;
	}

	.lpvb-input {
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.lpvb-vitrine-consent {
		margin: 6px 0 8px;
		font-size: 0.74rem;
		line-height: 1.35;
	}

	.lpvb-btn-primary {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.lpvb-shelf-head {
		padding: 10px 16px 2px;
	}

	.lpvb-shelf-title {
		font-size: 1.25rem;
	}

	.lpvb-shelf-sub {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * A lista de países
 *
 * A caixa fechada já estava certa, mas ao abrir a lista o texto some: quem
 * desenha aquela lista é o sistema, não a página, e ele só respeita cor e
 * fundo se a gente disser as duas coisas em <option>. Sem isso o sistema
 * escolhe o texto por conta própria — e escolheu cinza-escuro sobre preto.
 * ------------------------------------------------------------------------ */
.lpvb-select,
#lpvb-vitrine-gate select,
#lpvb-login-page select {
	/* A setinha some quando o fundo é escuro; esta é a de volta. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23aaaaaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
	cursor: pointer;
}

.lpvb-select option,
#lpvb-vitrine-gate select option,
#lpvb-login-page select option {
	background-color: #1e1e1e;
	color: #ffffff;
}

/* O portão usa campos com ícone à esquerda; o seletor não tem ícone, então
   não precisa daquele recuo todo. */
#lpvb-vitrine-gate .lpvb-select {
	padding-left: 14px;
}

/* A blindagem contra o tema usa "background" e "padding" inteiros com
   !important, e isso apagava a setinha e o espaço dela. Aqui ela volta, com
   a mesma força e depois no arquivo, que é o que decide quando as duas
   regras têm o mesmo peso. */
#lpvb-vitrine-gate .lpvb-select,
#lpvb-login-page .lpvb-select,
.lpvb-select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23aaaaaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
	padding-right: 38px !important;
}

/* ---------------------------------------------------------------------------
 * Primeiro acesso: a tela onde o cliente cria a senha dele
 *
 * A caixa com o login não é enfeite. É o único instante em que o cliente
 * está olhando com atenção, e é onde ele aprende que o login dele é o
 * e-mail. Sem isso, daqui a um mês ele volta e não sabe o que digitar.
 * ------------------------------------------------------------------------ */
.lpvb-senha-login {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(0, 212, 255, 0.07);
	border: 1px solid rgba(0, 212, 255, 0.28);
	color: var(--lpvb-text-muted);
	font-size: 0.88rem;
	line-height: 1.5;
	text-align: center;
}

.lpvb-senha-login strong {
	color: var(--lpvb-text);
	font-size: 0.98rem;
	overflow-wrap: anywhere;
}

/* Estes campos não têm ícone à esquerda, então não precisam do recuo dele. */
#lpvb-primeiro-acesso .lpvb-sem-icone {
	padding-left: 14px !important;
	padding-right: 14px !important;
}

/* O aviso de link já usado, no login. Informa, não acusa: quem cai aqui
   quase sempre é o cliente certo abrindo o link duas vezes. */
.lpvb-login-aviso {
	margin: 0 0 16px;
	padding: 11px 13px;
	border-radius: 8px;
	background: rgba(0, 212, 255, 0.08);
	border: 1px solid rgba(0, 212, 255, 0.3);
	color: var(--lpvb-text) !important;
	font-size: 0.86rem;
	line-height: 1.45;
	text-align: left;
}

/* A tela de primeiro acesso herda a blindagem contra o tema que o portão da
   vitrine já tinha: o tema do site não pode apagar o texto dos campos. */
#lpvb-primeiro-acesso .lpvb-input {
	width: 100% !important;
	background: var(--lpvb-surface-light) !important;
	color: var(--lpvb-text) !important;
	-webkit-text-fill-color: var(--lpvb-text) !important;
	border: 1px solid var(--lpvb-border-light) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	box-shadow: none !important;
}

#lpvb-primeiro-acesso .lpvb-input::placeholder {
	color: var(--lpvb-text-muted) !important;
	opacity: 1 !important;
}

#lpvb-primeiro-acesso input:-webkit-autofill,
#lpvb-primeiro-acesso input:-webkit-autofill:hover,
#lpvb-primeiro-acesso input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lpvb-text) !important;
	box-shadow: 0 0 0 1000px var(--lpvb-surface-light) inset !important;
	caret-color: var(--lpvb-text) !important;
}

#lpvb-primeiro-acesso .lpvb-vitrine-title,
#lpvb-primeiro-acesso .lpvb-vitrine-sub {
	opacity: 1 !important;
}

#lpvb-primeiro-acesso .lpvb-vitrine-title {
	color: var(--lpvb-text) !important;
}

#lpvb-primeiro-acesso .lpvb-vitrine-sub {
	color: var(--lpvb-text-muted) !important;
}

#lpvb-primeiro-acesso .lpvb-btn-primary {
	width: 100% !important;
	background: linear-gradient(90deg, var(--lpvb-cyan), var(--lpvb-magenta)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 13px 18px !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	cursor: pointer;
}

#lpvb-primeiro-acesso .lpvb-btn-primary:hover {
	filter: brightness(1.12);
	color: #fff !important;
}

#lpvb-primeiro-acesso .lpvb-btn-primary:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * O olhinho para ver a senha
 *
 * Vale em toda tela onde se digita senha, e não só no login: quem cria uma
 * senha nova, digitando às cegas duas vezes, é justamente quem mais precisa
 * conferir o que escreveu.
 * ------------------------------------------------------------------------ */
.lpvb-campo-senha {
	position: relative;
	display: block;
}

.lpvb-campo-senha .lpvb-eye-toggle {
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

/* Espaço para o olho não ficar por cima do texto digitado. */
#lpvb-primeiro-acesso .lpvb-tem-olho,
.lpvb-senha-caixa .lpvb-tem-olho {
	padding-right: 44px !important;
}

.lpvb-senha-caixa .lpvb-eye-toggle {
	position: absolute;
	right: 12px;
	background: none !important;
	border: none !important;
	color: var(--lpvb-text-muted) !important;
	font-size: 1rem;
	line-height: 1;
	padding: 4px !important;
	cursor: pointer;
}

.lpvb-senha-caixa .lpvb-eye-toggle:hover {
	color: var(--lpvb-cyan) !important;
}

/* Enquanto a senha está à mostra, o olho fica aceso — assim o cliente vê que
   ela está visível e não deixa sem querer numa tela compartilhada. */
.lpvb-eye-toggle.is-aberto {
	color: var(--lpvb-cyan) !important;
}

/* ---------------------------------------------------------------------------
 * A loja vista por quem JÁ É CLIENTE
 *
 * Duas situações, e a diferença tem que entrar pelo olho antes de qualquer
 * palavra ser lida: o acesso que ele já pagou fica colorido e normal; os que
 * ele ainda não tem ficam cinza, com um cadeado grande por cima da capa.
 *
 * Para quem não está logado nada disso aparece: um visitante não tem "o que é
 * dele", e cinza na loja inteira seria só uma loja feia.
 * ------------------------------------------------------------------------ */

.lpvb-pack-card.lpvb-card-trancado .lpvb-pack-cover {
	position: relative;
}

/*
 * O cinza vai na IMAGEM, não no cartão inteiro: o nome, as informações e o
 * preço continuam legíveis — é a capa que diz "você não tem isto".
 */
.lpvb-pack-card.lpvb-card-trancado .lpvb-pack-cover img {
	filter: grayscale(100%) brightness(0.55) !important;
	transition: filter 0.25s;
}

/* Passando o mouse, a cor volta: é um convite, não uma porta fechada. */
.lpvb-pack-card.lpvb-card-trancado:hover .lpvb-pack-cover img {
	filter: grayscale(35%) brightness(0.8) !important;
}

.lpvb-capa-cadeado {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	font-size: 3.4rem;
	line-height: 1;
	pointer-events: none;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.75));
}

/* O que é dele: moldura verde e um selo, sem cadeado nenhum. */
.lpvb-pack-card.lpvb-card-meu {
	outline: 2px solid var(--lpvb-ok, #3dd68c);
	outline-offset: 2px;
}

.lpvb-selo-meu {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	background: var(--lpvb-ok, #3dd68c);
	color: #04140c;
	font-weight: 700;
	font-size: 0.62rem;
	letter-spacing: 0.09em;
	padding: 4px 9px;
	border-radius: 3px;
}

.lpvb-cta-btn.lpvb-btn-meu {
	background: var(--lpvb-ok, #3dd68c) !important;
	color: #04140c !important;
	font-weight: 700 !important;
	border-color: var(--lpvb-ok, #3dd68c) !important;
}

/*
 * No cartão do acesso que ele JÁ COMPROU, o preço sai.
 *
 * "DE: R$ 297,00 / POR: R$ 97,00" em cima do que a pessoa já pagou não é
 * informação: ou ela acha que vai pagar de novo, ou fica pensando se pagou
 * caro. O que ela precisa ali é só o caminho de volta.
 */
.lpvb-pack-card.lpvb-card-meu .lpvb-pack-precos {
	display: none !important;
}

/*
 * Na loja, a pasta que JÁ É DELE.
 *
 * Verde discreto, para ele reconhecer de relance que aquilo já comprou — e o
 * cursor de link, porque clicar ali sai da loja em vez de abrir uma pasta.
 */
.lpvb-folder-item.lpvb-folder-meu .lpvb-folder-nome,
.lpvb-folder-card.lpvb-folder-meu .lpvb-folder-card-name {
	color: var(--lpvb-ok, #3dd68c) !important;
}

.lpvb-folder-card.lpvb-folder-meu {
	border-color: var(--lpvb-ok, #3dd68c) !important;
}

/*
 * "Já sou cliente — entrar", na loja.
 *
 * Discreto de propósito: a loja existe para vender para quem ainda não é
 * cliente. Este link é uma saída de serviço, não a chamada principal — por
 * isso contorno em vez de preenchido, e no canto em vez de no meio.
 */
.lpvb-ja-cliente {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--lpvb-cyan, #00d4ff);
	border-radius: 999px;
	color: var(--lpvb-cyan, #00d4ff) !important;
	text-decoration: none !important;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.2s;
}

.lpvb-ja-cliente:hover,
.lpvb-ja-cliente:focus {
	background: rgba(0, 212, 255, 0.12);
	text-decoration: none !important;
}

/* No portão da loja ele fica embaixo do formulário, centralizado. */
.lpvb-ja-cliente-linha {
	margin: 18px 0 0;
	text-align: center;
}

@media (max-width: 600px) {
	.lpvb-ja-cliente {
		font-size: 0.78rem;
		padding: 6px 13px;
	}
}

/* O interruptor "ver a loja como visitante", só para o dono.

   Fica preso no canto inferior esquerdo porque o direito é onde costumam
   morar os botões de chat e de voltar ao topo dos temas — e ele não pode
   cobrir nada que o visitante usaria. */
.lpvb-ver-como {
	position: fixed;
	z-index: 99990;
	bottom: 16px;
	left: 16px;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: #1d2327;
	color: #fff !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	opacity: 0.55;
	transition: opacity .15s ease;
}

.lpvb-ver-como:hover,
.lpvb-ver-como:focus-visible {
	opacity: 1;
}

/* Vermelho enquanto ele está vendo como visitante: neste estado a loja
   esconde o selo das prévias e pede o formulário de novo, e ele precisa
   saber disso de longe, sem ter que lembrar em que modo deixou. */
.lpvb-ver-como.is-visitante {
	background: #8b1a1a;
	border-color: rgba(255, 255, 255, 0.3);
	opacity: 0.92;
}

@media (max-width: 600px) {
	.lpvb-ver-como {
		bottom: 10px;
		left: 10px;
		max-width: calc(100vw - 20px);
		font-size: 10px;
	}
}


/* ---------------------------------------------------------------------------
 * "mais acessos abaixo" — o aviso de rolagem do celular
 *
 * No celular um cartão enche a tela sozinho, e quem abre a loja sai achando
 * que ela tem um produto só. O ALEX sugeriu a tela se mexer sozinha até
 * aparecer o próximo título; eu não fiz isso de propósito — página que rola
 * sozinha briga com o dedo de quem já está rolando, tira o botão de baixo do
 * polegar na hora do toque e dá enjoo em muita gente. Em loja, isso lê como
 * site com defeito.
 *
 * Este aviso diz a mesma coisa e deixa a tela quieta: fica parado no pé,
 * balança de leve para ser notado, some na primeira rolagem e, se tocarem
 * nele, leva até o próximo acesso — aí a tela se move porque a PESSOA pediu.
 * ------------------------------------------------------------------------ */
.lpvb-mais-abaixo {
	position: fixed;
	/* Acima da barra do navegador do celular, que come os últimos pixels. */
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 120;

	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;

	border: 1px solid var(--lpvb-magenta);
	border-radius: 999px;
	/* MAGENTA CHEIO, escolhido pelo ALEX entre quatro desenhos.
	 *
	 * A versão discreta que havia antes — pílula escura com borda fina —
	 * desaparecia sobre os cartões da loja, que são escuros também. Aqui o
	 * aviso disputa atenção de propósito: ele só existe porque o visitante
	 * NÃO está vendo uma coisa que precisa ver.
	 *
	 * Cheio e não translúcido: por cima de um cartão com foto clara, fundo
	 * transparente deixaria o texto ilegível justamente quando ele importa. */
	background: var(--lpvb-magenta);
	box-shadow: 0 0 22px rgba(255, 0, 255, 0.55);
	color: #ffffff;

	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1;
	/* Uma linha só: quebrado em duas, o aviso vira um bloco e perde a cara
	   de etiqueta. */
	white-space: nowrap;
	cursor: pointer;

	opacity: 1;
	transition: opacity 0.35s ease;
}

/*
 * ESCONDIDO É ESCONDIDO.
 *
 * O "hidden" do HTML vale display:none — mas é a folha do NAVEGADOR que
 * diz isso, e qualquer display escrito aqui ganha dela. O display:flex
 * acima, portanto, estava desfazendo o hidden em silêncio: nas horas em
 * que o JavaScript decide NÃO mostrar o aviso (a página já cabe na tela,
 * não há nada abaixo da dobra, ou o JavaScript nem rodou), a pílula
 * magenta aparecia MESMO ASSIM — vazia, sem número e sem frase, uma
 * bolha rosa no pé da loja.
 *
 * Isto é mais velho que as prateleiras: está na loja dele desde que o
 * aviso existe. Eu só vi agora porque a fileira que desliza deixou a
 * loja sem nada embaixo, e o caso virou o caso comum em vez do raro.
 *
 * Achado OLHANDO A TELA, não lendo o código: o teste do aviso pergunta
 * ao JavaScript se ele escondeu, e o JavaScript tinha escondido. Quem
 * desobedecia era o CSS.
 */
.lpvb-mais-abaixo[hidden] {
	display: none;
}

.lpvb-mais-abaixo.lpvb-sumindo {
	opacity: 0;
	pointer-events: none;
}

/* O NÚMERO, num círculo branco.
 *
 * É ele que transforma o aviso em promessa: "tem mais embaixo" a pessoa
 * pode achar que não compensa rolar; "+2 ACESSOS ABAIXO" diz o tamanho do
 * que ela ainda não viu. Branco sobre magenta é o maior contraste que a
 * etiqueta tem, e por isso o número é a primeira coisa que se lê. */
.lpvb-mais-num {
	display: inline-block;
	background: #ffffff;
	color: var(--lpvb-magenta);
	border-radius: 999px;
	padding: 3px 9px;
	font-weight: 800;
	font-size: 0.84rem;
	line-height: 1;
	/* Os dígitos não dançam quando o número muda de 1 para 2. */
	font-variant-numeric: tabular-nums;
}

/* Só a SETA balança, e pouco. O aviso inteiro pulando viraria o próprio
   problema que ele tenta evitar: movimento que ninguém pediu. */
.lpvb-mais-seta {
	display: block;
	animation: lpvb-desce 1.6s ease-in-out infinite;
}

@keyframes lpvb-desce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(4px); }
}

/* Quem ligou "reduzir movimento" no telefone está pedindo exatamente para
   não ver isto. A seta fica parada — e continua dizendo "para baixo". */
@media (prefers-reduced-motion: reduce) {
	.lpvb-mais-seta {
		animation: none;
	}

	.lpvb-mais-abaixo {
		transition: none;
	}
}

/* No PC os três cartões aparecem lado a lado: não há nada embaixo para
   avisar, e o aviso seria uma seta apontando para o rodapé. O JavaScript já
   não o mostra ali; esta regra é o cinto de segurança. */
@media (min-width: 701px) {
	.lpvb-mais-abaixo {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * O MOSAICO NO CARTÃO DA PASTA
 *
 * "LoopsPRO ML 114 OR…" é uma pastinha azul e um nome cortado — ninguém
 * escolhe uma pasta por isso. Com os loops de dentro aparecendo no cartão, a
 * pessoa bate o olho e sabe se é o pack que procura.
 *
 * Quantos quadrados é escolha do dono, em Personalização. O servidor manda só
 * a quantidade que ele pediu, e o JavaScript monta a grade com o que chegou.
 * ------------------------------------------------------------------------ */

/* Com mosaico o cartão deixa de ser uma linha e vira um bloco: imagem em
   cima, nome embaixo. Sem mosaico, nada muda — continua a linha de hoje. */
.lpvb-folder-card.lpvb-tem-mosaico {
	display: block;
	padding: 0;
	overflow: hidden;
}

.lpvb-folder-mosaico {
	display: grid;
	gap: 1px;
	/* O fundo aparece nas frestas e nos quadrados que a pasta não encheu:
	   pasta com 3 loops num mosaico de 4 deixa o quarto escuro, em vez de
	   repetir um loop para fingir que está cheia. */
	background: #000;
	/* 16:9, a proporção do loop. A altura sai da largura do cartão, que o
	   dono já controla em Personalização. */
	aspect-ratio: 16 / 9;
	position: relative;
	line-height: 0;
}

.lpvb-mq {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #0e0e0e;
	position: relative;
	overflow: hidden;
}

.lpvb-mq img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A etiqueta de resolução da PASTA, no mesmo canto onde ela já aparece nos
   loops. Faixa única sai limpa ("4K"); pasta misturada sai "4K · 1080p".
   Nunca a mais alta sozinha — seria o erro do Reels vertical virando 2K. */
.lpvb-folder-faixas {
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 2;
	padding: 2px 7px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.72);
	color: var(--lpvb-magenta);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.5;
	white-space: nowrap;
	pointer-events: none;
}

/* O nome, embaixo do mosaico. Sem mosaico esta mesma linha é o cartão
   inteiro, com a pastinha ao lado — por isso o gap vive aqui. */
.lpvb-folder-linha {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.lpvb-tem-mosaico .lpvb-folder-linha {
	padding: 9px 11px;
}

/* O vídeo dentro do quadradinho do mosaico. Cobre a imagem parada sem
   substituí-la: quando ele sai, a miniatura já está lá embaixo e o quadrado
   nunca fica preto no meio da troca. */
.lpvb-mq {
	position: relative;
	overflow: hidden;
}

.lpvb-mq video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

/* O cartão que está tocando ganha a borda ciano, como qualquer coisa
   "ativa" nesta loja — e assim fica claro que o movimento é dali e só dali. */
.lpvb-folder-card.lpvb-mosaico-tocando {
	border-color: var(--lpvb-cyan);
}

/* "DÁ PARA CLICAR AQUI."
 *
 * O ALEX pediu algo piscando no centro do quadro. Piscando em 24 cartões ao
 * mesmo tempo seria poluição, e competiria com os próprios loops. Como só um
 * cartão toca por vez, a dica aparece só nele: entra junto com o movimento,
 * no cartão onde o olho já está, e sai junto com ele.
 *
 * Entra devagar, e não piscando: piscar é alarme, e isto é um convite. */
.lpvb-mosaico-dica {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--lpvb-cyan);
	background: rgba(8, 8, 8, 0.82);
	color: var(--lpvb-cyan);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	animation: lpvb-dica-entra 0.45s ease both;
}

@keyframes lpvb-dica-entra {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Cartão pequeno: a frase não cabe, e o símbolo diz a mesma coisa. */
@media (max-width: 480px) {
	.lpvb-mosaico-dica {
		font-size: 0.68rem;
		padding: 5px 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpvb-mosaico-dica {
		animation: none;
	}
}

/* O ▶ NO CENTRO DO MOSAICO.
 *
 * O MESMO play dos cartões de loop, e não um parecido. Pedido do ALEX, e
 * ele está certo: dois botões de play diferentes na mesma loja fazem a
 * pessoa perguntar se fazem coisas diferentes. Mesma cor, mesma borda,
 * mesmo triângulo — só menor, porque aqui ele mora num cartão de 165 px em
 * vez de ocupar a capa inteira de um loop.
 *
 * Ele queria algo fixo no centro de cada mosaico, e escolheu o ▶ entre três
 * desenhos postos lado a lado. A frase escrita, repetida em 24 cartões,
 * vira papel de parede e o olho para de ver — e era para o olho ver que ela
 * existia. */
.lpvb-play-fixo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	/* As mesmas três linhas do play dos loops: o ciano da marca, a borda
	   branca e o brilho que descola o botão de qualquer fundo — inclusive
	   de um quadradinho claro. */
	background: color-mix(in srgb, var(--lpvb-cyan) 88%, #001018);
	border: 2px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55),
		0 0 14px color-mix(in srgb, var(--lpvb-cyan) 55%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0.92;
	transition: opacity 0.2s, transform 0.15s;
}

.lpvb-play-fixo svg {
	width: 22px;
	height: 22px;
	/* O triângulo empurrado um fio para a direita: centrado de verdade ele
	   parece torto para a esquerda, porque a ponta pesa menos que a base. */
	margin-left: 2px;
	fill: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Mouse em cima: cresce um pouco, como o play dos loops. */
.lpvb-folder-card:hover .lpvb-play-fixo {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.06);
}

/* Enquanto o mosaico roda, nada fica por cima da imagem. */
.lpvb-mosaico-tocando .lpvb-play-fixo {
	opacity: 0;
}

/* Cartão pequeno pede ▶ pequeno. */
@media (max-width: 480px) {
	.lpvb-play-fixo {
		width: 32px;
		height: 32px;
	}

	.lpvb-play-fixo svg {
		width: 18px;
		height: 18px;
	}
}

/* A frase fixa, para quem escolher texto em vez do ▶: sem a animação de
   entrada, que só faz sentido quando ela aparece no meio do caminho. */
.lpvb-mosaico-dica.lpvb-dica-fixa {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.lpvb-play-fixo {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * O BOTÃO DE WHATSAPP DA LOJA
 *
 * Fica no canto de baixo à direita, onde o polegar alcança e onde todo
 * mundo já procura esse botão — a posição é convenção, e brigar com ela só
 * custaria descoberta.
 *
 * Ele divide o pé da tela com o aviso "+N ACESSOS ABAIXO", que é centrado.
 * Num celular de 360px a conta fecha: o aviso ocupa o meio, a bolinha os
 * 56px da direita. A folga é pequena, e é por isso que ela está MEDIDA no
 * teste, e não no olho.
 * ------------------------------------------------------------------------ */

.lpvb-wa-flutua {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 130;

	display: flex;
	align-items: center;
	/*
	 * CENTRO, e sem espaço entre as peças.
	 *
	 * O balão de convite vem ANTES do ícone na marcação, para o texto
	 * aparecer à esquerda da bolinha quando ela cresce. Fechado, ele tem
	 * de ocupar largura ZERO — na primeira versão ele ficava invisível mas
	 * continuava ocupando 190px, empurrando o ícone para fora do círculo,
	 * que tem overflow:hidden. O resultado era uma bolinha verde lisa, sem
	 * ícone nenhum, e eu só vi olhando a tela: o teste media a largura
	 * (56px, certa) e o alvo do dedo (certo), e nunca perguntou se dava
	 * para VER o desenho.
	 */
	justify-content: center;
	gap: 0;

	width: 56px;
	height: 56px;
	padding: 0;
	box-sizing: border-box;

	border-radius: 999px;
	/* O verde do WhatsApp, e não a cor da loja: aqui a cor é o próprio
	   letreiro. Pintar de magenta esconderia o que o botão é. */
	background: #25D366;
	color: #ffffff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);

	text-decoration: none;
	overflow: hidden;

	transition: width .25s ease, background-color .2s ease;
}

.lpvb-wa-flutua:hover,
.lpvb-wa-flutua:focus {
	background: #1ebe5a;
	color: #ffffff;
}

.lpvb-wa-flutua:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.lpvb-wa-icone {
	/* O ícone é o que nunca encolhe: quando o balão abre, é o texto que
	   ganha o espaço novo, não o desenho que aperta. */
	flex: 0 0 auto;
}

/*
 * O BALÃO COM O CONVITE.
 *
 * Fechado por padrão: a bolinha sozinha já é entendida, e um texto parado
 * sobre a loja o tempo todo é ruído. Ele abre no passar do mouse, onde há
 * mouse — e no celular fica fechado, porque lá não existe "passar por
 * cima" e espaço de tela é o que mais falta.
 */
.lpvb-wa-balao {
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;

	/*
	 * LARGURA ZERO FECHADO, e não só transparente.
	 *
	 * Transparente ele continua ocupando o lugar dele — e era isso que
	 * expulsava o ícone do círculo.
	 */
	max-width: 0;
	overflow: hidden;
	opacity: 0;

	transition: opacity .2s ease, max-width .25s ease, margin-right .25s ease;
}

@media (hover: hover) and (min-width: 601px) {
	.lpvb-wa-flutua:hover,
	.lpvb-wa-flutua:focus-within {
		width: auto;
		padding: 0 18px;
	}

	.lpvb-wa-flutua:hover .lpvb-wa-balao,
	.lpvb-wa-flutua:focus-within .lpvb-wa-balao {
		max-width: 260px;
		margin-right: 10px;
		opacity: 1;
	}
}

/* Quem pediu menos movimento no aparelho não vê a bolinha crescer. */
@media (prefers-reduced-motion: reduce) {
	.lpvb-wa-flutua,
	.lpvb-wa-balao {
		transition: none;
	}
}

/* Enquanto o aviso "+N ABAIXO" está na tela, a bolinha sobe para não
   encostar nele. Medido em 360 e 390px, onde o aviso vai quase até a
   borda direita. O aviso some na primeira rolagem e a bolinha desce. */
html.lpvb-tem-aviso .lpvb-wa-flutua {
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ===================================================================
   O CONVITE DE QUEM COMPROU UM PEDAÇO

   Quem comprou uma pasta avulsa vê esta faixa no fim da lista dele.
   Quem tem o acesso cheio não vê nada.

   Discreta de propósito: é um convite, não um anúncio piscando na
   cara de quem já é cliente. Ela aparece depois do conteúdo — quem
   veio buscar os loops dele pega os loops primeiro.
   =================================================================== */
.lpvb-convite {
	margin: 36px auto 8px;
	max-width: 640px;
	padding: 20px 22px;
	text-align: center;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
}

.lpvb-convite-titulo {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--lpvb-text, #fff);
}

.lpvb-convite-titulo strong {
	background: linear-gradient(90deg, var(--lpvb-cyan, #00D4FF), var(--lpvb-magenta, #FF00FF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 800;
}

.lpvb-convite-texto {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--lpvb-muted, #9a9aa4);
}

.lpvb-convite-botao {
	display: inline-block;
	min-height: 46px;
	padding: 13px 26px;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--lpvb-cyan, #00D4FF), var(--lpvb-magenta, #FF00FF));
	color: #07070a;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .02em;
	text-decoration: none;
}

.lpvb-convite-botao:hover,
.lpvb-convite-botao:focus {
	color: #07070a;
	filter: brightness(1.08);
}

@media (max-width: 600px) {
	.lpvb-convite {
		margin: 28px 12px 8px;
		padding: 18px 16px;
	}
}

/* ==================================================================
   AS ETIQUETAS DOS ACESSOS

   O pedido dele, vendo a tela de um cliente que comprou tudo: "como
   aparece pra ele no topo, tudo grande, feio... no celular fica pior".

   O título era o nome de TODOS os acessos colado com " + ". Cinco
   acessos viravam sete linhas de magenta, e no telefone não sobrava
   tela para uma pasta sequer.

   Agora o título é curto e os acessos são etiquetas. Cada uma leva o
   prazo DELA — o cabeçalho antigo mostrava um número só, o do acesso
   que vencia por último, e o cliente perdia o de 30 dias achando que
   tinha um ano.
   ================================================================== */
.lpvb-etiquetas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	max-width: 100%;
}

.lpvb-etiquetas-faixa {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	max-width: 100%;
}

/*
 * O display:flex acima vence o hidden do HTML.
 *
 * Sem esta linha, a lista de quem tem muitos acessos nasce ABERTA e o
 * botão não fecha nada — o contrário exato do que ele existe para
 * fazer. O teste de tela pegou; lendo o CSS eu não tinha visto.
 */
.lpvb-etiquetas-faixa[hidden] {
	display: none;
}

.lpvb-etiqueta {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--lpvb-cyan) 45%, transparent);
	background: color-mix(in srgb, var(--lpvb-cyan) 8%, transparent);
	font-size: .78rem;
	line-height: 1.5;
	color: #e8f8ff;
	white-space: nowrap;
	max-width: 100%;
}

/* Nome de acesso é comprido ("500 BORDAS | EDGES"). Sem isto, uma
   etiqueta sozinha estoura a barra e empurra a página para o lado. */
.lpvb-etiqueta-nome {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 22ch;
}

.lpvb-etiqueta-dias {
	font-size: .72rem;
	font-weight: 700;
	color: var(--lpvb-cyan);
	font-variant-numeric: tabular-nums;
}

/* Vermelho é para quem precisa agir esta semana. Aceso o tempo todo,
   vermelho não avisa nada — por isso são 7 dias, e não 30. */
.lpvb-etiqueta.is-acabando {
	border-color: rgba(255, 90, 90, .7);
	background: rgba(255, 90, 90, .12);
	color: #ffdede;
}

.lpvb-etiqueta.is-acabando .lpvb-etiqueta-dias {
	color: #ff7a7a;
}

.lpvb-etiquetas-abrir {
	background: transparent;
	border: 1px solid var(--lpvb-border);
	border-radius: 999px;
	color: var(--lpvb-text-dim, #b9b9c3);
	font-size: .78rem;
	padding: 4px 12px;
	cursor: pointer;
	min-height: 32px;
}

.lpvb-etiquetas-abrir:hover,
.lpvb-etiquetas-abrir:focus-visible {
	border-color: var(--lpvb-cyan);
	color: var(--lpvb-cyan);
}

@media (max-width: 768px) {
	/*
	 * NO CELULAR A FAIXA DESLIZA, não quebra.
	 *
	 * Quebrando, cinco etiquetas viram três linhas e empurram as pastas
	 * para fora da primeira tela — que é o defeito que estamos
	 * consertando. Deslizando, ocupam uma linha só, e a ordem (quem
	 * vence primeiro na frente) garante que a urgente é a que aparece
	 * sem precisar arrastar.
	 */
	.lpvb-etiquetas-faixa {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.lpvb-etiquetas-faixa::-webkit-scrollbar {
		display: none;
	}

	.lpvb-etiqueta {
		flex: 0 0 auto;
	}

	.lpvb-etiqueta-nome {
		max-width: 16ch;
	}
}

/* ---------------------------------------------------------------------------
 * O BOTÃO DO GRUPO DO TELEGRAM
 *
 * Empilhado acima do verde, no mesmo canto. A conta: o do WhatsApp tem
 * 56px de altura e fica a 16px do pé, então este começa em 16+56+12 = 84.
 * Os 12 de folga são para o dedo não acertar o errado — alvos colados são
 * alvos trocados.
 * ------------------------------------------------------------------------ */
.lpvb-tg-flutua {
	position: fixed;
	right: 16px;
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	z-index: 130;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;

	width: 56px;
	height: 56px;
	padding: 0;
	box-sizing: border-box;

	border-radius: 999px;
	/* O azul do Telegram, pelo mesmo motivo do verde no outro: aqui a
	   cor é metade do letreiro. */
	background: #229ED9;
	color: #ffffff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);

	text-decoration: none;
	overflow: hidden;

	transition: width .25s ease, background-color .2s ease;
}

.lpvb-tg-flutua:hover,
.lpvb-tg-flutua:focus {
	background: #1b87ba;
	color: #ffffff;
}

.lpvb-tg-flutua:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.lpvb-tg-icone {
	flex: 0 0 auto;
}

/*
 * O logotipo oficial que ele sobe vem como <img>. Ele chega quadrado e
 * com fundo próprio; aqui ganha o tamanho e o arredondamento para não
 * estourar o círculo nem aparecer um quadrado dentro da bolinha.
 */
.lpvb-icone-proprio {
	width: 30px;
	height: 30px;
	object-fit: contain;
	border-radius: 6px;
	display: block;
}

.lpvb-tg-balao {
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity .2s ease, max-width .25s ease, margin-right .25s ease;
}

@media (hover: hover) and (min-width: 601px) {
	.lpvb-tg-flutua:hover,
	.lpvb-tg-flutua:focus-within {
		width: auto;
		padding: 0 18px;
	}

	.lpvb-tg-flutua:hover .lpvb-tg-balao,
	.lpvb-tg-flutua:focus-within .lpvb-tg-balao {
		max-width: 260px;
		opacity: 1;
		margin-right: 10px;
	}
}

/* ---------------------------------------------------------------------------
 * O CONVITE DO GRUPO NA ÁREA DO CLIENTE
 *
 * Quem abre esta tela já pagou: é a conversão mais fácil que existe, e
 * hoje a tela não pedia nada a ele. Uma linha discreta acima das pastas,
 * com um X que a tira de vez.
 * ------------------------------------------------------------------------ */
.lpvb-tg-convite {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;

	margin: 0 0 14px;
	padding: 10px 12px;

	border: 1px solid rgba(34, 158, 217, .45);
	border-left: 3px solid #229ED9;
	border-radius: 6px;
	background: rgba(34, 158, 217, .08);
}

.lpvb-tg-convite[hidden] {
	display: none;
}

.lpvb-tg-convite-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 200px;
	min-width: 0;
}

.lpvb-tg-convite-texto strong {
	font-size: .92rem;
	color: #eaf7ff;
}

.lpvb-tg-convite-texto span {
	font-size: .8rem;
	color: #a9c7d6;
}

.lpvb-tg-convite-btn {
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 999px;
	background: #229ED9;
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	/* Alvo de dedo: abaixo de 36px no celular vira erro de toque. */
	min-height: 36px;
	display: inline-flex;
	align-items: center;
}

.lpvb-tg-convite-btn:hover,
.lpvb-tg-convite-btn:focus {
	background: #1b87ba;
	color: #fff;
}

.lpvb-tg-convite-x {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #8fb3c4;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.lpvb-tg-convite-x:hover,
.lpvb-tg-convite-x:focus-visible {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

@media (max-width: 600px) {
	/* No telefone o botão passa a ocupar a linha inteira: alvo grande
	   vale mais que simetria quando o dedo é o mouse. */
	.lpvb-tg-convite-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}