/* =============================================================================
   LP Webinar "Como proteger sua carteira de atletas" | Footure Academy
   Mobile-first. Escopo em .lp-webinar-carteira-atletas, para nao vazar para o
   resto do site. Cores extraidas do KV do webinar. Tipografia oficial da marca:
   Bebas Neue nos titulos, Lexend em textos, labels, botoes e formularios.

   CONTRASTE MEDIDO (WCAG 2.1, sobre o preto #000 do fundo):
     #325EFF azul de acento .................  4.18:1  so titulo grande e bordas
     #6E90FF azul claro .....................  7.02:1  kicker, label, texto pequeno
     #FF5A00 laranja de acao ................  6.71:1  texto pequeno OK
     preto sobre #FF5A00 ....................  6.71:1  texto dos botoes e selos
     preto sobre #25D366 (WhatsApp) ......... 10.60:1  texto do botao do grupo
     #B5B5B5 cinza de corpo ................. 10.24:1
   O azul de acento reprova em texto pequeno, por isso ele nunca e usado em
   corpo, kicker ou label: la entra o branco ou o azul claro.

   Imagens: as desta LP ficam em ../img/. Logo e padroes graficos sao ativos de
   marca compartilhados do plugin, em ../../../assets/img/.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens
   Esta folha e enfileirada apenas no page template da LP, entao os tokens podem
   morar no :root sem risco de vazar para o resto do site.
   -------------------------------------------------------------------------- */
:root {
	/* Paleta real do KV deste webinar. Nenhuma cor fora daqui entra na pagina. */
	--footure-accent: #325EFF;       /* azul royal: titulo do KV, bordas, realces */
	--footure-accent-soft: #6E90FF;  /* azul claro: kicker, label e texto pequeno */
	--footure-action: #FF5A00;       /* laranja: selos, faixas e CTAs */
	--footure-action-ink: #000000;   /* texto PRETO sobre o laranja */
	--footure-action-hover: #FF7526;
	--footure-black: #000000;        /* o fundo do KV e preto puro */
	--footure-black-soft: #14161A;   /* um tom acima do preto, para cards e secoes */
	--footure-white: #FFFFFF;
	--footure-gray: #B5B5B5;         /* texto secundario sobre dark */

	/* Verde do WhatsApp. Unica cor fora da paleta do KV, e so no botao do grupo. */
	--wpp-green: #25D366;
	--wpp-green-hover: #34E27A;

	/* Derivados de superficie e borda */
	--lp-linha: rgba(255, 255, 255, .10);
	--lp-linha-forte: rgba(255, 255, 255, .18);
	--lp-elevado: #191C21;
	--lp-campo-fundo: #0B0C0E;

	/* Tipografia */
	--lp-fonte-titulo: "Bebas Neue", "Arial Narrow", sans-serif;
	--lp-fonte-texto: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Ritmo */
	--lp-raio: 12px;
	--lp-raio-card: 16px;
	--lp-secao-y: clamp(56px, 8vw, 104px);
	--lp-header-h: 68px;
	--lp-sticky-espaco: 0px;
}

/* ------------------------------------------------------------------ Base */
.lp-webinar-carteira-atletas {
	margin: 0;
	background-color: var(--footure-black);
	color: var(--footure-gray);
	font-family: var(--lp-fonte-texto);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/*
   As regras base abaixo usam seletor de elemento puro (especificidade 0,0,1) de
   proposito. Se fossem escritas como ".lp-webinar-carteira-atletas h1" (0,1,1)
   elas venceriam as classes de componente (0,1,0) e engoliriam cor, fonte e
   caixa dos titulos. Como esta folha so e enfileirada no page template da LP,
   nao ha risco de vazar. A excecao e o link, que precisa de blindagem contra
   folhas externas e esta no fim do arquivo.
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Impede que as ancoras parem embaixo do header fixo. */
	scroll-padding-top: calc(var(--lp-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

img,
picture {
	display: block;
	max-width: 100%;
}

p {
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 .4em;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-weight: 400;
	line-height: .95;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Foco visivel em tudo que recebe teclado. */
:focus-visible {
	outline: 3px solid var(--footure-accent-soft);
	outline-offset: 3px;
	border-radius: 4px;
}

.u-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lp-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--footure-action);
	color: var(--footure-action-ink);
	font-weight: 600;
	border-radius: var(--lp-raio);
	transition: top .18s ease;
}

.lp-skip:focus {
	top: 12px;
}

.lp-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.lp-container--estreito {
	max-width: 880px;
}

@media (min-width: 768px) {
	.lp-container {
		padding: 0 32px;
	}
}

.lp-icon {
	width: 24px;
	height: 24px;
	flex: none;
}

/* -------------------------------------------------------------- Tipografia */
.lp-kicker {
	margin: 0 0 12px;
	/* Azul claro, nunca o azul do KV: a .8125rem o royal reprovaria no AA. */
	color: var(--footure-accent-soft);
	font-family: var(--lp-fonte-texto);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lp-titulo {
	font-size: clamp(2.25rem, 6vw, 3.5rem);
}

.lp-lead {
	max-width: 64ch;
	color: var(--footure-gray);
	font-size: 1.0625rem;
}

.lp-fecho {
	max-width: 64ch;
	margin: 32px 0 0;
	padding-left: 18px;
	border-left: 3px solid var(--footure-accent);
	color: var(--footure-white);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.55;
}

/*
   Selo do KV: paralelogramo laranja com texto preto. O skew fica no bloco e e
   desfeito no texto (.lp-txt), para as letras nao entortarem junto.
*/
.lp-selo {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 18px 5px;
	background: var(--footure-action);
	color: var(--footure-action-ink);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.125rem;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	transform: skewX(-12deg);
}

.lp-txt {
	display: inline-block;
	transform: skewX(12deg);
}

/* Marca de dado pendente de validacao pela Footure. */
.lp-validar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 6px 12px;
	background: rgba(255, 90, 0, .12);
	border: 1px dashed var(--footure-action);
	border-radius: 8px;
	color: var(--footure-action);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
}

.lp-validar__ico {
	width: 16px;
	height: 16px;
}

/* Placeholder de imagem ainda ausente, impresso por footure_lp_img(). */
.lp-img-falta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 16px;
	background: var(--footure-black-soft);
	border: 1px dashed var(--footure-action);
	border-radius: var(--lp-raio-card);
	color: var(--footure-action);
	font-size: .8125rem;
	text-align: center;
}

/* -------------------------------------------------------------- Botoes */
/*
   Um unico estilo de botao de inscricao em toda a pagina: laranja de acao com
   texto preto (6.71:1). O verde do WhatsApp e a unica excecao, e so aparece na
   tela de sucesso.
*/
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--lp-raio);
	font-family: var(--lp-fonte-texto);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.lp-btn--primary {
	background: var(--footure-action);
	color: var(--footure-action-ink);
	box-shadow: 0 6px 20px rgba(255, 90, 0, .28);
}

.lp-btn--primary:hover {
	background: var(--footure-action-hover);
	transform: translateY(-2px);
}

.lp-btn--sm {
	padding: 10px 18px;
	font-size: .875rem;
}

.lp-btn--lg {
	padding: 18px 32px;
	font-size: 1.0625rem;
}

.lp-btn--block {
	display: flex;
	width: 100%;
}

.lp-btn__ico {
	width: 18px;
	height: 18px;
}

.lp-btn[disabled] {
	opacity: .6;
	cursor: progress;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lp-btn {
		transition: background-color .18s ease;
	}

	.lp-btn:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------- Header */
/*
   Admin bar do WordPress, visivel so para quem esta logado. Ela e fixa no topo
   e passaria por cima do header da LP. Abaixo de 601px o WordPress muda a barra
   para position: absolute e ela rola junto, entao ali o deslocamento zera.
*/
body.admin-bar {
	--lp-admin-bar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--lp-admin-bar: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar {
		--lp-admin-bar: 0px;
	}
}

.lp-header {
	position: fixed;
	top: var(--lp-admin-bar, 0px);
	right: 0;
	left: 0;
	z-index: 90;
	height: var(--lp-header-h);
	background: rgba(0, 0, 0, .72);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease;
}

.lp-header.is-solido {
	background: rgba(0, 0, 0, .96);
	border-bottom-color: var(--lp-linha);
}

.lp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
}

.lp-header__logo {
	display: inline-flex;
	align-items: center;
}

.lp-header__logo-img {
	width: auto;
	height: 32px;
}

@media (min-width: 768px) {
	.lp-header__logo-img {
		height: 38px;
	}
}

.lp-nav {
	display: none;
}

.lp-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
}

.lp-nav__link {
	display: inline-block;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	color: var(--footure-white);
	font-size: .9375rem;
	font-weight: 500;
	transition: color .18s ease, border-color .18s ease;
}

/* Item ativo na cor de acao, a mesma dos CTAs. Nunca uma terceira cor. */
.lp-nav__link:hover,
.lp-nav__link.is-ativo {
	color: var(--footure-action);
	border-bottom-color: var(--footure-action);
}

.lp-header__acoes {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lp-header__cta {
	display: none;
}

.lp-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--lp-linha-forte);
	border-radius: 10px;
	cursor: pointer;
}

.lp-burger:hover,
.lp-burger:focus-visible {
	background-color: transparent;
	border-color: var(--footure-action);
}

.lp-burger__bar {
	display: block;
	height: 2px;
	background: var(--footure-white);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.lp-burger[aria-expanded="true"] .lp-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.lp-burger[aria-expanded="true"] .lp-burger__bar:nth-child(2) {
	opacity: 0;
}

.lp-burger[aria-expanded="true"] .lp-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile aberto */
.lp-nav.is-aberto {
	display: block;
	position: fixed;
	inset: calc(var(--lp-admin-bar, 0px) + var(--lp-header-h)) 0 auto;
	padding: 8px 20px 24px;
	background: var(--footure-black);
	border-bottom: 1px solid var(--lp-linha);
}

.lp-nav.is-aberto .lp-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.lp-nav.is-aberto .lp-nav__link {
	display: block;
	padding: 16px 4px;
	border-bottom: 1px solid var(--lp-linha);
}

@media (min-width: 1060px) {
	.lp-nav {
		display: block;
	}

	.lp-burger {
		display: none;
	}

	.lp-header__cta {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-burger__bar {
		transition: none;
	}
}

/* -------------------------------------------------------------- Hero */
.lp-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: 92vh;
	min-height: 92svh;
	padding: calc(var(--lp-header-h) + 32px) 0 48px;
	background: var(--footure-black);
	overflow: hidden;
}

.lp-hero__media {
	position: absolute;
	inset: 0;
}

.lp-hero__media picture {
	height: 100%;
}

/*
   Mobile: o recorte 4:5 e mais largo que a caixa do hero, entao o cover corta
   as laterais. A ancoragem em 66% mantem o tecnico no quadro, do jeito que ele
   aparece no KV, em vez de cortar metade dele pelo centro.
*/
.lp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 66% bottom;
}

/*
   Scrim do mobile. Quem escurece a area do titulo e este gradiente, e nao o
   arquivo: a foto ocupa quase todo o quadro para o estadio aparecer atras do
   texto e ao redor do CTA. Ele e forte no topo, onde estao titulo e faixa de
   data, e vai abrindo ate a base.

   Contraste medido no ponto mais claro sob cada bloco de texto: o corpo em
   #B5B5B5 fica acima de 4.5:1 em toda a extensao do paragrafo.
*/
.lp-hero__veu {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .9) 38%, rgba(0, 0, 0, .78) 66%, rgba(0, 0, 0, .55) 86%, rgba(0, 0, 0, .3) 100%);
}

.lp-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

/*
   A caixa externa continua sendo o .lp-container padrao, com a mesma largura e
   o mesmo respiro das outras secoes. Quem limita a medida do texto e este
   bloco interno, entao o titulo do hero nasce na mesma coluna do titulo das
   secoes seguintes.
*/
.lp-hero__conteudo {
	max-width: 100%;
}

.lp-hero__titulo {
	margin: 0 0 16px;
	font-size: clamp(2.75rem, 12vw, 4.25rem);
	line-height: .92;
}

.lp-hero__titulo-a,
.lp-hero__titulo-b {
	display: block;
}

/* Azul do KV em titulo grande: 4.18:1, acima do minimo de 3:1 para texto grande. */
.lp-hero__titulo-b {
	color: var(--footure-accent);
}

.lp-hero__sub {
	max-width: 34ch;
	margin: 0 0 20px;
	color: var(--footure-white);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.45;
}

/* Faixa de data, no formato do KV: rotulo laranja, data em bloco branco, hora em bloco laranja. */
.lp-faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 6px;
	margin: 0 0 24px;
	font-family: var(--lp-fonte-titulo);
	font-size: 1.0625rem;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
}

.lp-faixa__evento,
.lp-faixa__data,
.lp-faixa__hora {
	padding: 9px 14px 7px;
	transform: skewX(-12deg);
}

/* O rotulo nao tem bloco de cor atras, entao nao entra no jogo do skew. */
.lp-faixa__evento {
	padding-left: 0;
	color: var(--footure-action);
	transform: none;
}

.lp-faixa__evento .lp-txt {
	transform: none;
}

/*
   Telas estreitas: o rotulo ocupa a primeira linha sozinho, para a data e a
   hora ficarem juntas embaixo. Sem isso o "20H" e o unico a quebrar e o bloco
   dele fica orfao numa terceira linha.
*/
@media (max-width: 430px) {
	.lp-faixa {
		row-gap: 10px;
	}

	.lp-faixa__evento {
		flex-basis: 100%;
		padding-bottom: 0;
	}
}

.lp-faixa__data {
	background: var(--footure-white);
	color: var(--footure-accent);
}

.lp-faixa__hora {
	background: var(--footure-action);
	color: var(--footure-action-ink);
}

.lp-hero__texto {
	max-width: 56ch;
	margin: 0 0 28px;
	color: var(--footure-gray);
	font-size: .9375rem;
	line-height: 1.7;
}

.lp-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (min-width: 769px) {
	/*
	   Altura limitada de proposito. O fundo fornecido tem 1280px de largura, que
	   e o maximo disponivel: quanto mais alta a caixa, mais o object-fit precisa
	   ampliar o arquivo para cobri-la, e a foto comeca a parecer estourada. Com
	   este teto a ampliacao fica proxima de 1x na maioria das telas.
	*/
	.lp-hero {
		align-items: center;
		min-height: min(86svh, 760px);
	}

	/* Desktop: assunto a direita, area escura a esquerda para o texto. */
	.lp-hero__img {
		object-position: 70% center;
	}

	.lp-hero__veu {
		background:
			linear-gradient(90deg, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .9) 38%, rgba(0, 0, 0, .45) 62%, rgba(0, 0, 0, .25) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 30%);
	}

	.lp-hero__conteudo {
		max-width: 62%;
	}

	.lp-hero__sub {
		font-size: 1.25rem;
	}

	.lp-hero__texto {
		font-size: 1rem;
	}

	.lp-faixa {
		font-size: 1.25rem;
	}
}

@media (min-width: 1100px) {
	.lp-hero__titulo {
		font-size: clamp(3.75rem, 5vw, 4.75rem);
	}

	.lp-hero__conteudo {
		max-width: 640px;
	}
}

/* -------------------------------------------------------- Destaques */
.lp-destaques {
	padding: 28px 0;
	background: var(--footure-black-soft);
	border-top: 1px solid var(--lp-linha);
	border-bottom: 1px solid var(--lp-linha);
}

.lp-destaques__grid {
	display: grid;
	gap: 18px;
}

.lp-destaque {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.lp-destaque__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 90, 0, .14);
	border: 1px solid rgba(255, 90, 0, .35);
	border-radius: 10px;
	color: var(--footure-action);
}

.lp-destaque__texto {
	margin: 0;
	color: var(--footure-white);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.4;
}

@media (min-width: 720px) {
	.lp-destaques__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	/*
	   Icone a esquerda, texto a direita. O texto e a eventual marca de validacao
	   ficam empilhados no proprio bloco: em linha unica o chip de [VALIDAR]
	   roubaria a largura da frase e ela quebraria palavra a palavra.
	*/
	.lp-destaque {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.lp-destaque__corpo {
		min-width: 0;
	}
}

/* -------------------------------------------------------------- Secoes */
.lp-secao {
	padding: var(--lp-secao-y) 0;
}

.lp-secao--soft {
	background: var(--footure-black-soft);
}

.lp-secao__head {
	max-width: 64ch;
	margin-bottom: 36px;
}

/*
   Padrao grafico da marca como textura de fundo, em baixa opacidade. O
   gradiente de mascara faz a textura sumir antes de encostar no texto.
*/
.lp-secao--padrao {
	position: relative;
	isolation: isolate;
}

.lp-secao--padrao::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../../../assets/img/padrao_preto.webp");
	background-size: 560px auto;
	background-position: right -80px top -60px;
	opacity: .5;
	-webkit-mask-image: linear-gradient(200deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 55%);
	mask-image: linear-gradient(200deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

/* -------------------------------------------- O que você vai aprender */
/*
   Duas colunas a partir de 900px. Em coluna unica os seis itens ficariam com
   linha longa demais no desktop, e estreitar so esta secao desalinharia o
   titulo dela em relacao ao das outras.
*/
.lp-aprender {
	display: grid;
	gap: 14px;
}

@media (min-width: 900px) {
	.lp-aprender {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

.lp-aprender__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-left: 3px solid var(--footure-accent);
	border-radius: var(--lp-raio);
}

.lp-aprender__ico {
	display: inline-flex;
	color: var(--footure-action);
}

.lp-aprender__ico .lp-icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.2;
}

.lp-aprender__texto {
	color: var(--footure-white);
	font-size: .9375rem;
	line-height: 1.55;
}

@media (min-width: 768px) {
	.lp-aprender__texto {
		font-size: 1rem;
	}
}

/* ------------------------------------------------------ Para quem é */
.lp-publicos {
	display: grid;
	gap: 16px;
}

.lp-publico {
	padding: 24px 22px;
	background: var(--footure-black);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
	transition: border-color .2s ease, transform .2s ease;
}

.lp-secao--soft .lp-publico {
	background: rgba(0, 0, 0, .5);
}

.lp-publico:hover {
	border-color: rgba(50, 94, 255, .55);
	transform: translateY(-3px);
}

.lp-publico__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	background: rgba(50, 94, 255, .16);
	border: 1px solid rgba(50, 94, 255, .45);
	border-radius: 12px;
	color: var(--footure-accent-soft);
}

.lp-publico__titulo {
	margin: 0 0 8px;
	font-size: 1.375rem;
	color: var(--footure-white);
}

.lp-publico__texto {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.lp-publicos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.lp-publicos {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-publico:hover {
		transform: none;
	}
}

/* --------------------------------------------------- Por que participar */
/* Bloco centralizado: e uma pausa de argumento entre duas secoes em lista. */
.lp-por-que {
	text-align: center;
}

.lp-por-que__texto {
	max-width: 62ch;
	margin: 0 auto 32px;
	color: var(--footure-white);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.7;
}

.lp-por-que__acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

@media (min-width: 768px) {
	.lp-por-que__texto {
		font-size: 1.125rem;
	}
}

/* -------------------------------------------------------- Palestrante */
.lp-palestrante {
	display: grid;
	gap: 28px;
	align-items: center;
}

.lp-palestrante__media {
	width: min(260px, 62vw);
}

.lp-palestrante__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 2px solid rgba(50, 94, 255, .5);
	border-radius: 50%;
}

.lp-palestrante__nome {
	margin: 0 0 14px;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: 2rem;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
}

.lp-palestrante__bio {
	max-width: 62ch;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.7;
}

.lp-palestrante__aviso {
	margin: 18px 0 0;
}

@media (min-width: 860px) {
	.lp-palestrante {
		grid-template-columns: 280px 1fr;
		gap: 48px;
	}

	.lp-palestrante__media {
		width: 100%;
	}

	.lp-palestrante__bio {
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------- CTA final */
.lp-cta-final {
	position: relative;
	padding: var(--lp-secao-y) 0;
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(50, 94, 255, .22) 0%, rgba(0, 0, 0, 0) 60%),
		var(--footure-black);
	border-top: 1px solid var(--lp-linha);
	text-align: center;
}

.lp-cta-final__inner {
	max-width: 820px;
	margin: 0 auto;
}

.lp-cta-final__titulo {
	margin: 0 0 18px;
	font-size: clamp(2.25rem, 7vw, 3.75rem);
}

.lp-cta-final__apoio {
	max-width: 60ch;
	margin: 0 auto 24px;
	font-size: 1rem;
	line-height: 1.7;
}

.lp-cta-final__data {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	padding: 8px 16px;
	background: rgba(255, 90, 0, .12);
	border: 1px solid rgba(255, 90, 0, .4);
	border-radius: 999px;
	color: var(--footure-action);
	font-size: .875rem;
	font-weight: 500;
}

.lp-cta-final__ico {
	width: 18px;
	height: 18px;
}

.lp-cta-final__acoes {
	display: flex;
	justify-content: center;
}

/* ------------------------------------------------------------- Rodapé */
.lp-footer {
	padding: 32px 0;
	/* Espaco reservado pela barra fixa, para ela nao cobrir o rodape. */
	padding-bottom: calc(32px + var(--lp-sticky-espaco, 0px));
	background: var(--footure-black);
	border-top: 1px solid var(--lp-linha);
}

.lp-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.lp-footer__logo {
	width: auto;
	height: 34px;
}

.lp-footer__copy {
	margin: 0;
	font-size: .8125rem;
}

.lp-footer__link {
	font-size: .8125rem;
}

@media (min-width: 768px) {
	.lp-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* --------------------------------------------------------- Barra fixa */
/*
   Fica sobre o fundo escuro da pagina, entao o destaque vem do fio azul no topo
   mais um brilho, e nao de um fundo claro que brigaria com a paleta.
*/
.lp-sticky {
	position: fixed;
	inset: auto 0 0;
	z-index: 80;
	padding: 10px 0;
	background: linear-gradient(180deg, #0B1020 0%, #000000 100%);
	backdrop-filter: blur(10px);
	border-top: 2px solid var(--footure-accent);
	box-shadow: 0 -2px 24px rgba(50, 94, 255, .18), 0 -12px 40px rgba(0, 0, 0, .6);
	transform: translateY(110%);
	transition: transform .28s ease;
}

.lp-sticky.is-visivel {
	transform: translateY(0);
}

/*
   No mobile a faixa vira duas linhas: contador em cima, botao de largura cheia
   embaixo. Tentar encaixar rotulo, quatro blocos e botao na mesma linha a 390px
   espreme o rotulo a ponto de ele quebrar letra a letra.
*/
.lp-sticky__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.lp-sticky__webinar {
	display: none;
	margin: 0;
	line-height: 1.2;
}

.lp-sticky__selo {
	display: block;
	color: var(--footure-action);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lp-sticky__nome {
	display: block;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.375rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.lp-sticky .lp-btn {
	width: 100%;
}

.lp-sticky__contador {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
}

.lp-sticky__contador[hidden] {
	display: none;
}

/*
   Rotulo em laranja, nao no azul do KV: a .6875rem (11px) este texto e pequeno,
   e o azul royal daria 4.18:1 sobre a barra, abaixo do minimo AA. O laranja da
   6.71:1.
*/
.lp-sticky__rotulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--footure-action);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.lp-sticky__pulso {
	position: relative;
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--footure-action);
	border-radius: 50%;
}

.lp-sticky__pulso::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--footure-action);
	border-radius: 50%;
	animation: lp-pulso 1.8s ease-out infinite;
}

@keyframes lp-pulso {
	0% { transform: scale(1); opacity: .7; }
	100% { transform: scale(3); opacity: 0; }
}

/* ----------------------------------------------------------- Contador */
.lp-contador__blocos {
	display: flex;
	align-items: center;
	gap: 5px;
}

.lp-contador__bloco {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: 4px 6px 3px;
	background: rgba(0, 0, 0, .5);
	border: 1px solid rgba(50, 94, 255, .28);
	border-radius: 8px;
}

.lp-contador__num {
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.lp-contador__rot {
	color: var(--footure-gray);
	font-size: .5rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

@media (min-width: 480px) {
	.lp-contador__bloco {
		min-width: 52px;
		padding: 5px 10px 4px;
	}

	.lp-contador__num {
		font-size: 1.375rem;
	}

	.lp-contador__rot {
		font-size: .5625rem;
	}
}

@media (min-width: 640px) {
	.lp-sticky__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.lp-sticky .lp-btn {
		width: auto;
	}

	.lp-sticky__contador {
		gap: 16px;
	}

	.lp-sticky__rotulo {
		font-size: .8125rem;
	}

	/* Sem data configurada, o PHP imprime o nome do webinar no lugar do contador. */
	.lp-sticky__webinar {
		display: block;
	}
}

/*
   A hora chegou com a pagina aberta: o contador se apaga e a barra fica so com
   o CTA, centralizado. Nada de contagem zerada ou negativa na tela.
*/
.lp-sticky.is-sem-contador .lp-sticky__inner {
	justify-content: center;
}

@media (min-width: 900px) {
	.lp-sticky {
		padding: 12px 0;
	}

	.lp-sticky__inner {
		justify-content: center;
		gap: 28px;
	}

	.lp-sticky__rotulo {
		font-size: .875rem;
		letter-spacing: .08em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-sticky {
		transition: none;
	}

	.lp-sticky__pulso::after {
		animation: none;
	}
}

/* --------------------------------------------------------------- Modal */
.lp-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, .8);
	backdrop-filter: blur(3px);
}

.lp-modal[hidden] {
	display: none;
}

.lp-modal__caixa {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: 94vh;
	max-height: 94svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 32px 22px 28px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha-forte);
	border-radius: var(--lp-raio-card) var(--lp-raio-card) 0 0;
	animation: lp-sobe .28s cubic-bezier(.2, .8, .3, 1) both;
}

.lp-modal__fechar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--lp-linha);
	border-radius: 10px;
	color: var(--footure-white);
	cursor: pointer;
}

.lp-modal__fechar:hover {
	border-color: var(--footure-action);
	color: var(--footure-action);
}

.lp-modal__titulo {
	margin: 0 0 10px;
	max-width: 90%;
	color: var(--footure-white);
	font-size: 2rem;
}

.lp-modal__desc {
	margin: 0 0 24px;
	font-size: .9375rem;
	line-height: 1.55;
}

@media (min-width: 640px) {
	.lp-modal {
		align-items: center;
		padding: 24px;
	}

	.lp-modal__caixa {
		padding: 36px 32px 32px;
		border-radius: var(--lp-raio-card);
	}
}

@keyframes lp-sobe {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lp-modal__caixa {
		animation: none;
	}
}

/* ---------------------------------------------------------- Formulário */
.lp-form__linha {
	display: grid;
	gap: 16px;
}

.lp-campo {
	margin-bottom: 16px;
}

.lp-campo__label {
	display: block;
	margin-bottom: 7px;
	color: var(--footure-white);
	font-size: .875rem;
	font-weight: 500;
}

.lp-campo__input {
	width: 100%;
	padding: 13px 14px;
	background: var(--lp-campo-fundo);
	border: 1px solid var(--lp-linha-forte);
	border-radius: 10px;
	color: var(--footure-white);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
	transition: border-color .18s ease;
}

/* #8A8A8A sobre #0B0C0E da 5.55:1. Um cinza mais escuro reprovaria no AA. */
.lp-campo__input::placeholder,
.lp-ddi__busca-input::placeholder {
	color: #8A8A8A;
	opacity: 1;
}

.lp-campo__input:hover {
	border-color: rgba(255, 255, 255, .3);
}

.lp-campo__input[aria-invalid="true"] {
	border-color: var(--footure-action);
}

.lp-campo__erro {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 7px 0 0;
	color: var(--footure-action);
	font-size: .8125rem;
	line-height: 1.4;
}

.lp-campo__erro[hidden] {
	display: none;
}

/* Telefone com seletor de DDI */
.lp-tel {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.lp-tel__input {
	flex: 1;
	min-width: 0;
}

.lp-ddi {
	position: relative;
	flex: none;
}

.lp-ddi__botao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 10px;
	background: var(--lp-campo-fundo);
	border: 1px solid var(--lp-linha-forte);
	border-radius: 10px;
	color: var(--footure-white);
	font-family: inherit;
	font-size: .9375rem;
	cursor: pointer;
}

.lp-ddi__botao:hover {
	border-color: rgba(255, 255, 255, .3);
}

.lp-ddi__bandeira {
	font-size: 1.125rem;
	line-height: 1;
}

.lp-ddi__codigo {
	font-variant-numeric: tabular-nums;
}

.lp-ddi__chevron {
	width: 16px;
	height: 16px;
	color: var(--footure-gray);
}

.lp-ddi__painel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 5;
	width: min(320px, 78vw);
	overflow: hidden;
	background: var(--lp-elevado);
	border: 1px solid var(--lp-linha-forte);
	border-radius: var(--lp-raio);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

.lp-ddi__painel[hidden] {
	display: none;
}

/* O modal rola no proprio eixo: perto da base, o painel abre para cima. */
.lp-ddi__painel--acima {
	top: auto;
	bottom: calc(100% + 6px);
}

.lp-ddi__busca {
	position: relative;
	padding: 10px;
	border-bottom: 1px solid var(--lp-linha);
}

.lp-ddi__busca-ico {
	position: absolute;
	top: 50%;
	left: 20px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	color: var(--footure-gray);
	pointer-events: none;
}

.lp-ddi__busca-input {
	width: 100%;
	padding: 9px 10px 9px 34px;
	background: var(--lp-campo-fundo);
	border: 1px solid var(--lp-linha);
	border-radius: 8px;
	color: var(--footure-white);
	font-family: inherit;
	font-size: .875rem;
}

.lp-ddi__lista {
	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lp-ddi__opcao {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: var(--footure-gray);
	font-size: .875rem;
	cursor: pointer;
}

.lp-ddi__opcao:hover,
.lp-ddi__opcao.is-focada {
	background: rgba(50, 94, 255, .16);
	color: var(--footure-white);
}

.lp-ddi__opcao[aria-selected="true"] {
	color: var(--footure-accent-soft);
	font-weight: 500;
}

.lp-ddi__opcao-bandeira {
	font-size: 1.0625rem;
	line-height: 1;
}

.lp-ddi__opcao-nome {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lp-ddi__opcao-codigo {
	color: var(--footure-gray);
	font-variant-numeric: tabular-nums;
}

.lp-ddi__vazio {
	margin: 0;
	padding: 16px 14px;
	font-size: .875rem;
}

/* Checkbox de aceite */
.lp-campo--check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	margin: 22px 0 20px;
}

.lp-check {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--footure-action);
	cursor: pointer;
}

.lp-check__label {
	font-size: .875rem;
	line-height: 1.5;
	cursor: pointer;
}

.lp-campo--check .lp-campo__erro {
	grid-column: 1 / -1;
	margin-top: 0;
}

.lp-form__resumo {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: rgba(255, 90, 0, .12);
	border: 1px solid rgba(255, 90, 0, .5);
	border-radius: 10px;
	color: var(--footure-action);
	font-size: .875rem;
}

.lp-form__resumo[hidden] {
	display: none;
}

.lp-form__nota {
	margin: 14px 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	text-align: center;
}

@media (min-width: 480px) {
	.lp-form__linha {
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------------------------------------------ Tela de sucesso
   Segundo passo da conversao: entrar no grupo de WhatsApp. Tudo aqui existe
   para levar o olho ao botao verde, que no mobile aparece acima da dobra do
   modal (icone e titulo compactos de proposito).
   -------------------------------------------------------------------------- */
.lp-sucesso {
	padding: 4px 0;
	text-align: center;
}

.lp-sucesso__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	background: var(--footure-action);
	border-radius: 50%;
	color: var(--footure-action-ink);
}

.lp-sucesso__ico .lp-icon {
	width: 28px;
	height: 28px;
	stroke-width: 2.6;
}

.lp-sucesso__titulo {
	max-width: none;
	margin: 0 0 10px;
	font-size: 1.875rem;
}

.lp-sucesso__texto {
	margin: 0 0 22px;
	color: var(--footure-white);
	font-size: 1rem;
	line-height: 1.55;
}

.lp-sucesso__texto strong {
	color: var(--wpp-green);
	font-weight: 600;
}

.lp-sucesso__reforco {
	margin: 16px 0 0;
	font-size: .875rem;
	line-height: 1.5;
}

.lp-sucesso__validar {
	margin: 0 0 8px;
}

/* Sair da tela e secundario: link discreto, nunca um segundo botao. */
.lp-sucesso__voltar {
	margin-top: 18px;
	padding: 6px 4px;
	background: transparent;
	border: 0;
	color: var(--footure-gray);
	font-family: inherit;
	font-size: .875rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.lp-sucesso__voltar:hover {
	color: var(--footure-white);
}

/*
   Trava o scroll do fundo enquanto o modal ou o menu estao abertos.
   A classe entra no <body> (o JS mexe em document.body), e nao no container
   raiz, entao a regra precisa morar no body para valer.
*/
.lp-webinar-carteira-body.is-travado {
	overflow: hidden;
}

/* ---------------------------------------------------- Animações de entrada
   O estado escondido so existe sob .lp-anima, classe que o JS coloca no <html>
   depois de confirmar que consegue animar (IntersectionObserver disponivel e
   prefers-reduced-motion nao ativo). Assim a falha e "aberta": sem JS, com JS
   quebrado ou com movimento reduzido, o conteudo simplesmente aparece.
   -------------------------------------------------------------------------- */
.lp-anima .lp-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
}

.lp-anima .lp-reveal.is-visivel {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lp-anima .lp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   ESCOPO RAIZ E BLINDAGEM DE LINK

   O site pode ter o Elementor ativo globalmente e o tema pode declarar cor de
   link. Mesmo com as folhas desses dois desenfileiradas nesta pagina (a chave
   'isolar' do config.php), qualquer CSS inline de plugin ainda poderia pintar
   os links.

   Um seletor de elemento puro (a{} = 0,0,1) perde para um a:link externo. Por
   isso o bloco abaixo escopa no container raiz e cobre :link e :visited,
   chegando a (0,2,1), e fixa TODAS as propriedades que folhas de terceiros
   costumam sobrescrever em link. Sem !important: a especificidade basta.

   Teste: injetar "a:link{color:#f0f;text-decoration:underline;background:#0f0}"
   numa folha posterior nao deve mudar nenhum link desta LP.
   ========================================================================== */
.lp-webinar-carteira-body {
	margin: 0;
	background-color: var(--footure-black);
}

.lp-webinar-carteira-atletas {
	position: relative;
	isolation: isolate;
}

.lp-webinar-carteira-atletas a,
.lp-webinar-carteira-atletas a:link,
.lp-webinar-carteira-atletas a:visited {
	color: var(--footure-accent-soft);
	text-decoration: none;
	background: transparent;
	border-bottom: 0;
	font-weight: inherit;
	box-shadow: none;
	outline: 0;
}

.lp-webinar-carteira-atletas a:hover,
.lp-webinar-carteira-atletas a:focus {
	color: var(--footure-white);
}

.lp-webinar-carteira-atletas a:focus-visible {
	outline: 2px solid var(--footure-accent-soft);
	outline-offset: 2px;
}

/* ------------------------------------------- Componentes que sao <a>
   Reafirmados DEPOIS da blindagem e com uma classe a mais, para vencerem a
   regra generica acima sem precisar de !important. Cada um repoe tudo que a
   blindagem zerou: cor, fundo, raio, padding e borda.
   -------------------------------------------------------------------------- */

/* Link do rodape e link dentro de texto corrido: sublinhado, para nao depender so da cor. */
.lp-webinar-carteira-atletas .lp-footer__link:link,
.lp-webinar-carteira-atletas .lp-footer__link:visited,
.lp-webinar-carteira-atletas p a:link,
.lp-webinar-carteira-atletas p a:visited,
.lp-webinar-carteira-atletas label a:link,
.lp-webinar-carteira-atletas label a:visited {
	color: var(--footure-accent-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lp-webinar-carteira-atletas .lp-footer__link:hover,
.lp-webinar-carteira-atletas .lp-footer__link:focus,
.lp-webinar-carteira-atletas p a:hover,
.lp-webinar-carteira-atletas p a:focus,
.lp-webinar-carteira-atletas label a:hover,
.lp-webinar-carteira-atletas label a:focus {
	color: var(--footure-white);
}

/* Logo e ancoras de navegacao: sem sublinhado e com a cor propria do componente. */
.lp-webinar-carteira-atletas .lp-header__logo:link,
.lp-webinar-carteira-atletas .lp-header__logo:visited {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
}

.lp-webinar-carteira-atletas .lp-nav__link:link,
.lp-webinar-carteira-atletas .lp-nav__link:visited {
	color: var(--footure-white);
	text-decoration: none;
}

.lp-webinar-carteira-atletas .lp-nav__link:hover,
.lp-webinar-carteira-atletas .lp-nav__link:focus,
.lp-webinar-carteira-atletas .lp-nav__link.is-ativo {
	color: var(--footure-action);
}

.lp-webinar-carteira-atletas .lp-skip:link,
.lp-webinar-carteira-atletas .lp-skip:visited {
	background: var(--footure-action);
	color: var(--footure-action-ink);
	text-decoration: none;
}

/* -------------------------------------------------- Botão do WhatsApp
   Unico elemento verde da pagina e o unico CTA que e um <a>. Fica logo apos a
   blindagem, com classe propria, repondo fundo, cor, raio e padding. Texto
   preto sobre o verde: 10.6:1 medido, contra 1.98:1 do branco.
   -------------------------------------------------------------------------- */
.lp-webinar-carteira-atletas .lp-btn--wpp,
.lp-webinar-carteira-atletas .lp-btn--wpp:link,
.lp-webinar-carteira-atletas .lp-btn--wpp:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 18px 24px;
	background: var(--wpp-green);
	border: 1px solid transparent;
	border-radius: var(--lp-raio);
	box-shadow: 0 8px 26px rgba(37, 211, 102, .3);
	color: #06251A;
	font-family: var(--lp-fonte-texto);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.lp-webinar-carteira-atletas .lp-btn--wpp:hover,
.lp-webinar-carteira-atletas .lp-btn--wpp:focus {
	background: var(--wpp-green-hover);
	color: #06251A;
}

.lp-webinar-carteira-atletas .lp-btn--wpp:focus-visible {
	outline: 3px solid var(--footure-white);
	outline-offset: 3px;
}

.lp-webinar-carteira-atletas .lp-btn--wpp .lp-icon {
	width: 24px;
	height: 24px;
}