/**
 * LP Clube LeCard — folha própria.
 *
 * POR QUE NÃO É TAILWIND: o `assets/css/tailwind.css` do tema é artefato de
 * build VERSIONADO, e o Tailwind não está instalado no projeto (sem dependência,
 * sem script de build). Classe utilitária nova escrita num render.php novo
 * simplesmente não existiria na folha — o estilo não aplicaria e nada acusaria
 * o erro. Então a LP segue o precedente do `fluent.css`: arquivo à parte,
 * editado à mão, com classes semânticas.
 *
 * Carregada SOB DEMANDA: registrada em functions.php e declarada em
 * `"style": "lecard-clube"` no block.json de cada bloco `clube-*`. O WordPress
 * só a enfileira quando um desses blocos está na página, então ela não pesa no
 * resto do site.
 *
 * NENHUM VALOR DE COR AQUI: tudo vem dos tokens `clube-*` do theme.json
 * (§6.2 do DESIGN_MANIFEST.md), via as CSS vars que o WP gera.
 *
 * Medidas: extraídas nó a nó do frame `lp_onepage_lecard_desktop` (1280).
 * O container NÃO é o do tema (1320): a LP tem o seu, medido do design — o
 * conteúdo recua ~104px de cada lado num frame de 1280. Ver §6.3.
 */

.lc-clube {
	/* ---- tokens locais da LP ---- */
	--clube-amarelo: var(--wp--preset--color--clube-amarelo);
	--clube-amarelo-medio: var(--wp--preset--color--clube-amarelo-medio);
	--clube-amarelo-claro: var(--wp--preset--color--clube-amarelo-claro);
	--clube-grafite: var(--wp--preset--color--clube-grafite);
	--clube-cinza: var(--wp--preset--color--clube-cinza);
	--clube-cinza-claro: var(--wp--preset--color--clube-cinza-claro);
	--clube-texto-cartao: var(--wp--preset--color--clube-texto-cartao);

	/*
	 * CONTAINER NÃO É ÚNICO NA LP. Medido seção a seção: 1071 no cabeçalho,
	 * 1048 na grade de descontos, 1029 no rodapé — e 1185 na seção de
	 * vantagens, que é a mais larga. Um valor só para todas fazia a coluna do
	 * título ficar com 601px, e "feito para facilitar sua vida" a 48px precisa
	 * de ~640: o título quebrava em 3 linhas em vez de 2 e a seção crescia 9%.
	 */
	--clube-container: 1072px;
	--clube-container-largo: 1206px;
	--clube-gutter: clamp(20px, 5vw, 64px);

	/* raios medidos: 36.211 no botão branco, 47.074 no amarelo. A diferença é
	   ruído de export (os dois são pílula) — um só valor, e pílula de verdade. */
	--clube-pill: 999px;
}

.lc-clube__container {
	/*
	 * SEM `width: 100%`. Com box-sizing: content-box, o width 100% é a largura
	 * do CONTEÚDO e os dois gutters entram POR CIMA: a 390px o container media
	 * 430 e a página inteira estourava para o lado. Um div em fluxo normal já
	 * ocupa a largura disponível descontando o padding — o width era supérfluo
	 * e era o defeito.
	 *
	 * O content-box fica: é ele que faz `--clube-container` significar a
	 * largura do CONTEÚDO medida no Figma, e não conteúdo+respiro.
	 */
	max-width: var(--clube-container);
	margin-inline: auto;
	padding-inline: var(--clube-gutter);
	box-sizing: content-box;
}

/* ==========================================================================
 * Cabeçalho da LP (bloco lecard/clube-header)
 * Barra escura de 78px, logo à esquerda, 3 links, 2 CTAs à direita.
 * ========================================================================== */

.lc-clube-header {
	background: var(--clube-grafite);
}

.lc-clube-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 78px;
}

.lc-clube-header__marca {
	flex: none;
	display: inline-flex;
	align-items: center;
}

.lc-clube-header__marca img {
	display: block;
	width: auto;
	height: 40px;
}

.lc-clube-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-inline-start: 76px; /* medido: nav começa em x=228, logo ocupa 112 + 40 de folga */
}

.lc-clube-header__nav a {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
	transition: color 0.15s ease;
}

.lc-clube-header__nav a:hover,
.lc-clube-header__nav a:focus-visible {
	color: var(--clube-amarelo);
}

.lc-clube-header__ctas {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-inline-start: auto;
}

/* ---- botões da LP (usados no header e no hero) ---- */

.lc-clube-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 32px;
	border-radius: var(--clube-pill);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.2s ease;
}

.lc-clube-btn:hover {
	transform: translateY(-1px);
}

.lc-clube-btn:focus-visible {
	outline: 2px solid var(--clube-amarelo);
	outline-offset: 3px;
}

.lc-clube-btn--claro {
	background: #fff;
	color: var(--clube-grafite);
}

.lc-clube-btn--marca {
	background: var(--clube-amarelo);
	color: var(--clube-cinza);
}

.lc-clube-btn--marca:hover {
	background: var(--clube-amarelo-medio);
}

.lc-clube-btn__icone {
	flex: none;
	display: block;
	/* altura fixa, largura pela proporção: os dois ícones têm viewBox
	   diferente (23.99x27.18 e 12.22x10) e travar as duas medidas deformaria */
	height: 1.1em;
	width: auto;
}

.lc-clube-btn--marca .lc-clube-btn__icone {
	height: 0.7em;
}

/* ==========================================================================
 * Hero (bloco lecard/clube-hero)
 * Foto de fundo sangrando, gradiente claro por baixo, conteúdo à esquerda.
 * ========================================================================== */

.lc-clube-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* gradiente medido do nó 4:897 */
	background: linear-gradient(141deg, #fff 8%, #f8f8f8 63%);
}

.lc-clube-hero__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.lc-clube-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* a foto é 4095x2486 (1.65) e a caixa do hero é ~2.05 no desktop: o
	   object-position sobe o recorte para não cortar a mão com o celular,
	   que é o assunto da imagem */
	object-position: 50% 22%;
	display: block;
}

.lc-clube-hero__conteudo {
	position: relative;
	padding-block: clamp(48px, 12vw, 162px) clamp(48px, 8vw, 86px);
	max-width: 620px;
}

.lc-clube-hero__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--clube-secao);
	font-weight: 400;
	line-height: 1.1;
	color: var(--clube-cinza);
	/* max-content, nunca a largura medida no Figma: a caixa de 444px foi
	   medida em Montserrat e não sobrevive à troca para Maven Pro (§6.1) */
	width: max-content;
	max-width: 100%;
	/* A QUEBRA DE LINHA É DECISÃO DE DESIGN, não sobra de layout. No frame o
	   título quebra em três linhas ("Economize todos / os dias com o / Clube
	   LeCard!"). Deixar quebrar sozinho muda o ponto de quebra e ninguém
	   percebe que está errado. Então a quebra vem marcada no PRÓPRIO texto
	   traduzível (Enter no campo do editor) e o pre-line a respeita — mesma
	   convenção que os outros blocos do tema já usam. */
	white-space: pre-line;
}

.lc-clube-hero__titulo strong {
	display: block;
	font-weight: 700;
}

.lc-clube-hero__lead {
	margin: 8px 0 0;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--clube-lead);
	line-height: 1.3;
	color: var(--clube-cinza);
	max-width: 564px; /* medido: o lead tem largura própria no design */
}

.lc-clube-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 32px; /* medido: gap de 32 entre o bloco de texto e os botões */
}

/* ==========================================================================
 * Responsivo — SEM frame mobile no Figma. As quebras seguem os breakpoints do
 * tema e o padrão dos outros blocos (§6.3): decisão de implementação, não do
 * design.
 * ========================================================================== */

@media (max-width: 1023px) {
	.lc-clube-header__nav {
		display: none; /* nav vai para o menu do rodapé da LP; sem frame mobile, não invento hambúrguer */
	}
	.lc-clube-hero__conteudo {
		max-width: none;
	}
	/*
	 * Abaixo de 1024 a caixa do hero estreita e o recorte traz a mão com o
	 * celular para debaixo do texto — não cabem os dois. Em vez de empilhar
	 * ou espremer o texto numa coluna, o recorte vai para a ponta esquerda
	 * da foto, que é fundo cinza liso: o hero mantém a textura da própria
	 * foto (não é uma cor chapada inventada) e o texto ocupa a largura toda.
	 * O celular volta a aparecer a partir de 1024, onde as duas colunas do
	 * Figma cabem de verdade.
	 */
	.lc-clube-hero__foto img {
		object-position: 0% 22%;
	}
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
	.lc-clube-header__bar {
		flex-wrap: wrap;
		gap: 12px;
		padding-block: 12px;
	}
	.lc-clube-header__ctas {
		margin-inline-start: 0;
		width: 100%;
	}
	.lc-clube-btn {
		flex: 1 1 auto;
		padding-inline: 20px;
	}
	.lc-clube-hero__titulo {
		width: auto;
	}

	/* Logo sozinha na primeira linha da barra (a nav some abaixo de 1024 e os
	   dois botões ocupam a linha de baixo inteira): centralizada. */
	.lc-clube-header__bar {
		justify-content: center;
	}

	.lc-clube-hero__conteudo {
		padding-block: 40px 36px;
	}
	.lc-clube-hero__lead {
		max-width: none;
	}
	.lc-clube-hero__ctas {
		margin-top: 24px;
	}
	.lc-clube-hero__ctas .lc-clube-btn {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
 * Seção 2 — faixa de parceiros (bloco lecard/clube-parceiros)
 * Faixa #FEC627 de ponta a ponta, frase branca e duas esteiras em sentidos
 * opostos. Medidas do nó 4:665: frase a 18px do topo, esteiras de 43px com
 * 20px entre elas e 16px de respiro em volta.
 * ========================================================================== */

.lc-clube-parc {
	background: var(--clube-amarelo-medio);
	/* 18 no topo e 15 embaixo: o resto da altura do frame (210) vem da frase
	   (29), do respiro até as esteiras (10) e do bloco de esteiras (138, já
	   com os 16 de py que o frame `partners2` tem por dentro). Somar errado
	   aqui foi o desvio de 12% da primeira medição. */
	padding-block: 18px 15px;
	overflow: hidden;
}

.lc-clube-parc__frase {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--clube-destaque);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	padding-inline: var(--clube-gutter);
}

.lc-clube-parc__esteiras {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 16px; /* respiro próprio do frame `partners2` (7:15426) */
}

.lc-clube-parc__esteira {
	display: flex;
	width: 100%;
	overflow: hidden;
	/* as pontas dissolvem na faixa em vez de cortar o logo em seco */
	mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.lc-clube-parc__esteira:hover .lc-clube-parc__trilho {
	animation-play-state: paused;
}

.lc-clube-parc__trilho {
	display: flex;
	flex: none;
	align-items: center;
	gap: 30px; /* medido no nó 2038:1132 */
	margin: 0;
	padding: 0 15px;
	list-style: none;
	/* reaproveita o keyframe que o tema já define para o marquee */
	animation-name: lecard-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

.lc-clube-parc__trilho li {
	flex: none;
	display: flex;
	align-items: center;
	height: 43px;
}

.lc-clube-parc__trilho img {
	display: block;
	/* teto, não medida fixa: cada logo tem proporção própria (de 85x17 a
	   214x25) e travar as duas medidas deformaria — foi o defeito do sip2g
	   no marquee de adquirentes do site */
	max-height: 30px;
	max-width: 130px;
	width: auto;
	height: auto;
	/* NORMALIZA PARA BRANCO. Ver o comentário do render.php: três dos 21 logos
	   vieram coloridos do Figma e o design mostra tudo branco. Assim logo novo
	   entra sem tratamento de arquivo. */
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
	.lc-clube-parc__trilho {
		animation: none;
	}
	/* sem animação a segunda cópia é ruído visual */
	.lc-clube-parc__trilho[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 767px) {
	.lc-clube-parc__trilho {
		gap: 22px;
	}
	.lc-clube-parc__trilho img {
		max-height: 24px;
		max-width: 104px;
	}
}

/* ==========================================================================
 * Seção 3 — vantagens (bloco lecard/clube-vantagens)
 * Medidas do nó 4029:2531 (1280×655): texto 698 de largura em y=85, foto
 * 519×622 em y=33 encostando no rodapé. A foto é alinhada ao FIM da grade em
 * vez de absoluta: assim a seção não precisa de altura fixa e aceita texto
 * mais longo sem estourar.
 * ========================================================================== */

/* esta seção usa o container largo — ver o comentário em .lc-clube */
.lc-clube-vant .lc-clube__container {
	max-width: var(--clube-container-largo);
}

.lc-clube-vant {
	padding-block: 33px 0;
	background: #fff;
	overflow: hidden;
}

.lc-clube-vant__grade {
	display: grid;
	grid-template-columns: minmax(0, 698fr) minmax(0, 519fr); /* proporção medida */
	gap: 24px;
	align-items: end;
}

.lc-clube-vant__texto {
	padding-block: 52px 84px; /* 85-33 no topo; 655-571 embaixo */
}

.lc-clube-vant__titulo {
	margin: 0 0 16px; /* gap medido entre título e lista */
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--clube-secao);
	font-weight: 700;
	line-height: 1.1;
	color: var(--clube-cinza);
	max-width: 678px;
	/* mesma regra do hero: no frame o título ocupa 2 linhas (118px de altura em
	   678 de largura). Solto, ele quebrava em 3 e a seção crescia 20px. A
	   quebra vai marcada no texto traduzível. */
	white-space: pre-line;
}

.lc-clube-vant__lista {
	margin: 0;
	/* o frame tem 10 de respiro em volta da lista (nó 4029:2485) — sem isso a
	   seção fecha 20px mais curta que o design */
	padding: 10px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px; /* medido no nó 4029:2485 */
}

.lc-clube-vant__lista li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
}

.lc-clube-vant__icone {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;   /* 24 do ícone + 8 de padding em volta */
	height: 40px;
	border-radius: 999px;
	background: var(--clube-amarelo);
}

.lc-clube-vant__icone img {
	display: block;
	width: 24px;
	height: 24px;
}

.lc-clube-vant__item-texto {
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--clube-destaque);
	line-height: 1.25;
	color: var(--clube-cinza);
}

.lc-clube-vant__foto {
	align-self: end;
	/*
	 * A JANELA TEM PROPORÇÃO PRÓPRIA. O nó do Figma é 519×622 (0,834) e a
	 * imagem dentro dele tem 0,784 — o nó recorta 6,3% da base. Reproduzi o
	 * recorte porque ele é intenção de design (apara o pé do enquadramento),
	 * e não o corte de assunto que já custou uma correção no benefits do site:
	 * com `object-position: top` a cabeça nunca entra na conta.
	 *
	 * Sem a proporção fixa a foto ficava 643px de altura em vez de 604 e
	 * puxava a seção 3% acima do frame.
	 */
	aspect-ratio: 519 / 622;
	overflow: hidden;
}

.lc-clube-vant__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

@media (max-width: 1023px) {
	.lc-clube-vant {
		padding-block: 40px 0;
	}
	.lc-clube-vant__grade {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.lc-clube-vant__texto {
		padding-block: 0 24px;
	}
	.lc-clube-vant__foto {
		max-width: 420px;
		margin-inline: auto;
		aspect-ratio: auto; /* no empilhado a janela não precisa apertar */
	}
	.lc-clube-vant__foto img {
		height: auto;
		object-fit: contain;
	}
}

@media (max-width: 767px) {
	.lc-clube-vant__lista li {
		padding: 6px 0;
	}
	.lc-clube-vant__icone {
		width: 34px;
		height: 34px;
	}
	.lc-clube-vant__icone img {
		width: 20px;
		height: 20px;
	}
}

/* ==========================================================================
 * Seção 4 — descontos (bloco lecard/clube-descontos)
 * Fundo #FFF1CA. Grade de 3 colunas com cartão de 322,54×388,51, raio 7,33,
 * borda 1,374 em #fbf5ef e gap 19,8 — medidas do nó 2020:3337, cujo container
 * é 1048,6 (mais estreito que o resto da LP).
 * ========================================================================== */

.lc-clube-desc {
	background: var(--clube-amarelo-claro);
	padding-block: 72px 80px;
}

.lc-clube-desc .lc-clube__container {
	max-width: 1049px; /* medido no nó da grade */
}

.lc-clube-desc__topo {
	text-align: center;
	margin-bottom: 40px;
}

.lc-clube-desc__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--clube-secao);
	font-weight: 700;
	line-height: 1.15;
	color: var(--clube-cinza);
}

.lc-clube-desc__sub {
	margin: 16px 0 0; /* gap medido no nó 2019:2289 */
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--clube-destaque);
	line-height: 1.2;
	color: var(--clube-cinza);
}

.lc-clube-desc__grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px; /* 19,8 medido */
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-clube-desc__cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #fbf5ef;
	border-radius: 8px; /* 7,33 medido */
	overflow: hidden;
}

/* o link cobre o cartão inteiro sem aninhar âncora em texto */
.lc-clube-desc__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.lc-clube-desc__foto {
	/* 322,54 × 183,26 = 1,76 — proporção do nó, não do arquivo */
	aspect-ratio: 322 / 183;
	overflow: hidden;
	background: var(--clube-cinza-claro);
}

.lc-clube-desc__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lc-clube-desc__corpo {
	position: relative;
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lc-clube-desc__logo {
	position: absolute;
	top: -34px;   /* o logo cavalga a borda da foto, como no frame */
	right: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
}

.lc-clube-desc__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.lc-clube-desc__off {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0 0 8px;
	line-height: 1;
}

.lc-clube-desc__off strong {
	font-family: var(--font-display);
	font-size: 33px;
	font-weight: 700;
	color: var(--clube-amarelo);
}

.lc-clube-desc__off span {
	font-family: var(--font-body);
	font-size: 20px;
	color: var(--clube-texto-cartao);
	opacity: 0.5;
}

.lc-clube-desc__marca {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--clube-texto-cartao);
}

.lc-clube-desc__condicao {
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.3;
	color: var(--clube-texto-cartao);
	opacity: 0.5;
}

.lc-clube-desc__nota {
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(1, 41, 0, 0.15); /* a divisória do frame */
	font-family: var(--font-body);
	font-size: 10px;
	line-height: 1.3;
	color: var(--clube-texto-cartao);
	opacity: 0.5;
}

@media (max-width: 1023px) {
	.lc-clube-desc__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lc-clube-desc { padding-block: 48px 56px; }
}

@media (max-width: 639px) {
	.lc-clube-desc__grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * Seção 5 — baixe o app (bloco lecard/clube-app)
 * Fundo #fefbfb, título 56px, texto 24px em 3 linhas marcadas, badges e foto
 * circular. Os brilhos amarelos são radial-gradient (ver render.php).
 * ========================================================================== */

.lc-clube-app {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #fefbfb;
	padding-block: 80px;
}

.lc-clube-app__brilhos {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(38% 46% at 8% 42%, rgba(255, 188, 1, 0.34), transparent 70%),
		radial-gradient(30% 40% at 26% 78%, rgba(254, 198, 39, 0.26), transparent 72%),
		radial-gradient(34% 48% at 92% 76%, rgba(255, 188, 1, 0.22), transparent 70%);
}

.lc-clube-app__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
	gap: 32px;
	align-items: center;
}

.lc-clube-app__titulo {
	margin: 0 0 22px;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--clube-titulo);
	font-weight: 700;
	line-height: 1.05;
	color: #000;
}

.lc-clube-app__lead {
	margin: 0 0 26px;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--clube-destaque);
	line-height: 1.3;
	color: #000;
	/* as 3 linhas do frame vêm marcadas no texto, como nos outros títulos */
	white-space: pre-line;
}

.lc-clube-app__lojas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.lc-clube-app__loja img {
	display: block;
	height: 44px;
	width: auto;   /* teto pela altura; a largura segue a proporção do badge */
}

.lc-clube-app__loja:hover img {
	opacity: 0.85;
}

.lc-clube-app__foto {
	position: relative;
}

.lc-clube-app__foto img {
	display: block;
	width: 100%;
	max-width: 460px;
	height: auto;
	margin-inline: auto;
}

/* colchetes da marca em volta do celular (nós 4043:852 e 4043:853) */
.lc-clube-app__canto {
	position: absolute;
	width: 38px;
	height: 37px;
	-webkit-mask: url("../img/clube/marca-canto.svg") no-repeat center / contain;
	mask: url("../img/clube/marca-canto.svg") no-repeat center / contain;
}

.lc-clube-app__canto--topo {
	top: 4%;
	right: 6%;
	background: var(--clube-amarelo);
	transform: rotate(180deg);
}

.lc-clube-app__canto--base {
	bottom: 4%;
	left: 6%;
	background: var(--clube-grafite);
}

@media (max-width: 1023px) {
	.lc-clube-app { padding-block: 56px; }
	.lc-clube-app__grade { grid-template-columns: 1fr; gap: 24px; }
	.lc-clube-app__foto { order: -1; }
	.lc-clube-app__foto img { max-width: 300px; }
}

/* ==========================================================================
 * Rodapé da LP (bloco lecard/clube-footer) — node 7:8512
 * ========================================================================== */

.lc-clube-rodape { background: #fff; padding-block: 32px 24px; border-top: 1px solid #eee; }
/* No frame (nó 2020:3725, 1029 de largura) as três colunas ocupam 303, 279 e 79
   e o resto é respiro. `space-between` reproduz isso sem inventar frações. */
.lc-clube-rodape__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.lc-clube-rodape__marca { flex: 0 1 303px; }
.lc-clube-rodape__centro { flex: 0 1 279px; }
.lc-clube-rodape__topo > .lc-clube-rodape__grupo { flex: 0 1 auto; }
/* `> img` e não `img`: sem o filho direto, esta regra também pegava o ícone
   do contato lá embaixo e o inflava para 46px. */
.lc-clube-rodape__marca > img { display: block; width: auto; height: 46px; }
.lc-clube-rodape__contato { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-clube-rodape__contato a,
.lc-clube-rodape__grupo a { font-family: var(--font-body); font-size: 15px; color: var(--clube-cinza); text-decoration: none; }
.lc-clube-rodape__contato a { display: inline-flex; align-items: center; gap: 10px; }
.lc-clube-rodape__ic { flex: none; width: 20px; height: 20px; display: block; }
.lc-clube-rodape__contato a:hover, .lc-clube-rodape__grupo a:hover { text-decoration: underline; }
.lc-clube-rodape__centro { display: grid; gap: 28px; }
.lc-clube-rodape__titulo { margin: 0 0 12px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--clube-cinza); }
.lc-clube-rodape__grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-clube-rodape__lojas { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-clube-rodape__lojas img { display: block; height: 40px; width: auto; }
.lc-clube-rodape__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 28px; padding-top: 20px; border-top: 1px solid #e6e6e6; }
.lc-clube-rodape__base p { margin: 0; font-family: var(--font-body); font-size: 13px; color: var(--clube-cinza); }
.lc-clube-rodape__redes { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.lc-clube-rodape__redes img { display: block; width: 30px; height: 30px; }

@media (max-width: 1023px) {
	.lc-clube-rodape__topo { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
 * Mobile — alvos de toque
 * Link de texto tem a altura da linha (~20px). No dedo isso erra. Abaixo de
 * 768 os links da LP ganham área de toque sem mudar a aparência no desktop.
 * ========================================================================== */

@media (max-width: 767px) {
	.lc-clube-rodape__contato a,
	.lc-clube-rodape__grupo a,
	.lc-clube-header__nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.lc-clube-rodape__contato a { gap: 10px; }

	.lc-clube-app__loja img,
	.lc-clube-rodape__lojas img { height: 46px; }

	/* a grade de descontos em coluna única não precisa do cartão inteiro
	   clicável ocupando a tela toda sem sinal visual */
	.lc-clube-desc__cartao { max-width: 420px; margin-inline: auto; width: 100%; }
}