/* =============================================================================
   LP Aula Aberta "Descubra a profissão de Analista de Desempenho"
   | Footure Academy
   Mobile-first. Escopo em .lp-webinar-aula-aberta-analise-desempenho, para nao
   vazar para o resto do site. Identidade visual herdada da LP do curso
   "Especializacao em Analise de Desempenho" (mesmo publico e mesmo funil), nao
   de um KV proprio deste webinar. Tipografia oficial da marca: Bebas Neue nos
   titulos, Lexend em textos, labels, botoes e formularios.

   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 da LP "Analise de Desempenho", reaproveitada aqui de proposito. */
	--footure-accent: #60F030;       /* verde neon: titulo de destaque, bordas, realces */
	--footure-accent-soft: #60F030;  /* mesmo verde: contraste alto tambem em texto pequeno */
	--footure-action: #F85800;       /* laranja: selos, faixas e CTAs */
	--footure-action-ink: #101010;   /* texto PRETO sobre o laranja */
	--footure-action-hover: #FF6A16;
	--footure-black: #101010;        /* fundo dominante */
	--footure-black-soft: #181818;   /* cards e blocos sobre o preto */
	--footure-white: #FFFFFF;
	--footure-gray: #B5B5B5;         /* texto secundario sobre dark */

	/* Verde do WhatsApp. Unica cor fora da paleta da LP, 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: #1F1F1F;
	--lp-campo-fundo: #0B0B0B;

	/* 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-aula-aberta-analise-desempenho {
	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-aula-aberta-analise-desempenho 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;
	/* Verde neon da marca: alto contraste mesmo em texto pequeno, ao contrario do azul da outra LP de webinar. */
	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(248, 88, 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(248, 88, 0, .28);
}

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

/* Botao secundario: contorno, sem preenchimento. So o link para a LP do curso usa. */
.lp-btn--ghost {
	background: transparent;
	border-color: var(--lp-linha-forte);
	color: var(--footure-white);
}

.lp-btn--ghost:hover {
	border-color: var(--footure-accent);
	color: var(--footure-accent);
}

.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) + 40px) 0 60px;
	background: var(--footure-black);
	overflow: hidden;
}

/* Grafismos geometricos decorativos, na cor de acento da marca */
.lp-hero__geo {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.lp-hero__geo--top-left {
	top: calc(var(--lp-header-h) + 10px);
	left: 10px;
}

.lp-hero__geo--top-right {
	top: calc(var(--lp-header-h) + 10px);
	right: 15px;
}

.lp-hero__geo--bottom {
	bottom: 10px;
	left: 30%;
}

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

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

.lp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Scrim / gradiente escuro sobre o background para garantir contraste, na cor de fundo da marca. */
.lp-hero__veu {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(16, 16, 16, 0.94) 0%, rgba(16, 16, 16, 0.88) 45%, rgba(16, 16, 16, 0.72) 75%, rgba(16, 16, 16, 0.5) 100%);
}

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

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

/* Titulo H1. Peso 700 para um traco mais solido, ja que a Bebas Neue so tem a variante regular. */
.lp-hero__titulo {
	margin: 0 0 18px;
	font-family: var(--lp-fonte-titulo);
	font-weight: 700;
	line-height: .92;
	text-transform: uppercase;
}

/* "Aula aberta": a chamada, um pouco menor que o tema abaixo dela. */
.lp-hero__titulo-a {
	display: block;
	color: var(--footure-white);
	font-size: clamp(2.1rem, 7.5vw, 3.6rem);
	letter-spacing: .02em;
}

/* "Análise de Desempenho no Futebol": o tema, em destaque. */
.lp-hero__titulo-b {
	display: block;
	color: var(--footure-accent);
	font-size: clamp(2.6rem, 9.5vw, 4.6rem);
	letter-spacing: .02em;
	text-shadow: 0 0 24px rgba(96, 240, 48, 0.25);
}

/* Subtitulo */
.lp-hero__sub {
	max-width: 36ch;
	margin: 0 0 28px;
	color: var(--footure-white);
	font-size: clamp(1.1rem, 3.5vw, 1.4rem);
	font-weight: 500;
	line-height: 1.35;
}

/*
   Data e CTA lado a lado, no mesmo padrao visual do restante da pagina: chip
   escuro com icone laranja (como .lp-destaque__ico) ao lado do botao primario
   padrao (.lp-btn--primary, o mesmo de toda a pagina), em vez de uma caixa com
   moldura neon propria.
*/
.lp-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
}

.lp-hero__data {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 18px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha-forte);
	border-radius: var(--lp-raio);
	color: var(--footure-white);
	font-family: var(--lp-fonte-texto);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
}

.lp-hero__data-ico {
	flex-shrink: 0;
	color: var(--footure-action);
}

/* Palestrante */
.lp-hero__palestrante {
	margin: 0;
	font-family: var(--lp-fonte-titulo);
	font-size: clamp(1.25rem, 3.5vw, 1.55rem);
	letter-spacing: .08em;
	color: var(--footure-white);
	text-transform: uppercase;
	line-height: 1.2;
}

@media (max-width: 480px) {
	.lp-hero__acoes {
		flex-direction: column;
		align-items: stretch;
	}

	.lp-hero__data {
		justify-content: center;
	}
}

/*
   Mobile: a tentativa anterior tentava empurrar o conteudo para o rodape do
   hero com align-items: flex-end, mas o conteudo desta pagina (titulo de duas
   linhas + subtitulo longo + chip + CTA) e mais alto que os 92vh do hero, e
   um flex container cresce para caber o conteudo. Sem sobra de altura,
   flex-end nao tinha para onde empurrar nada: o texto continuava colado no
   topo, por cima da cabeca.

   A solucao agora tem duas partes fisicamente separadas, como um cartao
   colado sobre a foto:
   1. .lp-hero__media vira um bloco de altura fixa (aspect-ratio) logo abaixo
      do header, mostrando so da cabeca a cintura de Higor Santos, sem nada
      sobreposto.
   2. .lp-hero__inner sobe por cima do fim dessa foto via margin-top negativa,
      comecando exatamente sobre a parte escura do degrade (a cintura). Da
      cintura para baixo o conteudo corre livre sobre o preto de .lp-hero, ja
      que so o INICIO do conteudo precisa estar sobre a foto escurecida.

   aspect-ratio 6/5 e object-position 40% enquadram hero-mobile.jpg
   (896x1200) da cabeca a cintura; se a foto for trocada, reajuste os dois
   valores (e o -72px de margin-top) juntos.
*/
@media (max-width: 768px) {
	.lp-hero {
		display: block;
		min-height: 0;
		padding: var(--lp-header-h) 0 0;
	}

	/* Grafismos decorativos: pensados para flutuar sobre uma foto de fundo
	   ja escurecida. Sobre a parte limpa da foto (onde fica a cabeca), so
	   dividiriam atencao com a pessoa. */
	.lp-hero__geo {
		display: none;
	}

	.lp-hero__media {
		position: relative;
		inset: auto;
		aspect-ratio: 6 / 5;
	}

	.lp-hero__img {
		object-position: center 40%;
	}

	/* Limpo ate pouco antes do fim do bloco: a cabeca, os ombros e o peito
	   ficam sem nenhum veu. So a faixa final (onde entra a cintura) escurece,
	   ate fechar no preto solido bem no ponto em que .lp-hero__inner comeca a
	   sobrepor. */
	.lp-hero__veu {
		background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 0) 55%, rgba(16, 16, 16, .7) 80%, var(--footure-black) 100%);
	}

	/* Puxa o conteudo para cima, para o selo/titulo comecarem sobrepostos a
	   parte escura da foto (a cintura), em vez de comecarem so depois dela. */
	.lp-hero__inner {
		margin-top: -72px;
		padding-bottom: 48px;
	}
}

@media (min-width: 769px) {
	.lp-hero {
		align-items: center;
		min-height: min(88svh, 780px);
		padding: calc(var(--lp-header-h) + 24px) 0 48px;
	}

	/*
	   Desktop: nesta foto (1376x768), a proporcao da secao de hero fica perto
	   da proporcao da propria imagem, entao object-position sozinho nao tem
	   folga de recorte horizontal para deslocar o assunto (efeito nulo, na
	   pratica). Por isso o deslocamento e feito com transform: um leve zoom
	   para criar sobra, mais um translateX para empurrar os dois personagens
	   para a direita, para fora da coluna de texto.

	   No eixo vertical ha folga: em telas largas a secao fica proporcionalmente
	   mais larga que a foto, entao object-fit: cover escala a imagem pela
	   largura e recorta em cima/embaixo. Sem ajuste, o recorte cortava a cabeca
	   da pessoa; 25% (em vez do centro, 50%) empurra a janela de recorte para
	   cima, revelando a cabeca as custas de mais recorte na parte de baixo.
	*/
	.lp-hero__img {
		transform: none;
		object-position: right 25%;
	}

	.lp-hero__veu {
		background:
			linear-gradient(90deg, rgba(16, 16, 16, 0.95) 0%, rgba(16, 16, 16, 0.85) 42%, rgba(16, 16, 16, 0.35) 70%, rgba(16, 16, 16, 0.1) 100%),
			linear-gradient(180deg, rgba(16, 16, 16, 0.5) 0%, rgba(16, 16, 16, 0) 30%);
	}

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

	.lp-hero__geo--top-left {
		top: calc(var(--lp-header-h) + 20px);
		left: 30px;
	}

	.lp-hero__geo--top-right {
		top: calc(var(--lp-header-h) + 20px);
		right: 40px;
	}

	.lp-hero__geo--bottom {
		bottom: 30px;
		left: 45%;
	}
}

@media (min-width: 1100px) {
	.lp-hero__titulo-a {
		font-size: clamp(3rem, 4vw, 4.2rem);
	}

	.lp-hero__titulo-b {
		font-size: clamp(3.8rem, 4.8vw, 5.2rem);
	}

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

/* -------------------------------------------------------- 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(248, 88, 0, .14);
	border: 1px solid rgba(248, 88, 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(96, 240, 48, .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(96, 240, 48, .16);
	border: 1px solid rgba(96, 240, 48, .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;
	}
}

/* -------------------------------------------------------------- O curso */
/* Mesmo padrao visual de .lp-por-que: bloco centralizado, pausa de argumento. */
.lp-curso {
	text-align: center;
}

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

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

@media (min-width: 768px) {
	.lp-curso__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(96, 240, 48, .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(96, 240, 48, .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(248, 88, 0, .12);
	border: 1px solid rgba(248, 88, 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 verde 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, #101010 0%, #000000 100%);
	backdrop-filter: blur(10px);
	border-top: 2px solid var(--footure-accent);
	box-shadow: 0 -2px 24px rgba(96, 240, 48, .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, para reforcar urgencia na contagem regressiva. */
.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(96, 240, 48, .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 #0B0B0B da ~5.5: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(96, 240, 48, .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(248, 88, 0, .12);
	border: 1px solid rgba(248, 88, 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-aula-aberta-analise-desempenho {
	position: relative;
	isolation: isolate;
}

.lp-webinar-aula-aberta-analise-desempenho a,
.lp-webinar-aula-aberta-analise-desempenho a:link,
.lp-webinar-aula-aberta-analise-desempenho 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-aula-aberta-analise-desempenho a:hover,
.lp-webinar-aula-aberta-analise-desempenho a:focus {
	color: var(--footure-white);
}

.lp-webinar-aula-aberta-analise-desempenho 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-aula-aberta-analise-desempenho .lp-footer__link:link,
.lp-webinar-aula-aberta-analise-desempenho .lp-footer__link:visited,
.lp-webinar-aula-aberta-analise-desempenho p a:link,
.lp-webinar-aula-aberta-analise-desempenho p a:visited,
.lp-webinar-aula-aberta-analise-desempenho label a:link,
.lp-webinar-aula-aberta-analise-desempenho label a:visited {
	color: var(--footure-accent-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lp-webinar-aula-aberta-analise-desempenho .lp-footer__link:hover,
.lp-webinar-aula-aberta-analise-desempenho .lp-footer__link:focus,
.lp-webinar-aula-aberta-analise-desempenho p a:hover,
.lp-webinar-aula-aberta-analise-desempenho p a:focus,
.lp-webinar-aula-aberta-analise-desempenho label a:hover,
.lp-webinar-aula-aberta-analise-desempenho label a:focus {
	color: var(--footure-white);
}

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

.lp-webinar-aula-aberta-analise-desempenho .lp-nav__link:link,
.lp-webinar-aula-aberta-analise-desempenho .lp-nav__link:visited {
	color: var(--footure-white);
	text-decoration: none;
}

.lp-webinar-aula-aberta-analise-desempenho .lp-nav__link:hover,
.lp-webinar-aula-aberta-analise-desempenho .lp-nav__link:focus,
.lp-webinar-aula-aberta-analise-desempenho .lp-nav__link.is-ativo {
	color: var(--footure-action);
}

.lp-webinar-aula-aberta-analise-desempenho .lp-skip:link,
.lp-webinar-aula-aberta-analise-desempenho .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-aula-aberta-analise-desempenho .lp-btn--wpp,
.lp-webinar-aula-aberta-analise-desempenho .lp-btn--wpp:link,
.lp-webinar-aula-aberta-analise-desempenho .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-aula-aberta-analise-desempenho .lp-btn--wpp:hover,
.lp-webinar-aula-aberta-analise-desempenho .lp-btn--wpp:focus {
	background: var(--wpp-green-hover);
	color: #06251A;
}

.lp-webinar-aula-aberta-analise-desempenho .lp-btn--wpp:focus-visible {
	outline: 3px solid var(--footure-white);
	outline-offset: 3px;
}

.lp-webinar-aula-aberta-analise-desempenho .lp-btn--wpp .lp-icon {
	width: 24px;
	height: 24px;
}

/* -------------------------------------------- Botão "Ver o curso completo"
   O unico outro CTA que e um <a> (leva para fora da pagina, para a LP de
   venda do curso). Sem esta reafirmacao, a blindagem de link acima zera
   border-bottom e o contorno do botao fica aberto embaixo.
   -------------------------------------------------------------------------- */
.lp-webinar-aula-aberta-analise-desempenho .lp-btn--ghost,
.lp-webinar-aula-aberta-analise-desempenho .lp-btn--ghost:link,
.lp-webinar-aula-aberta-analise-desempenho .lp-btn--ghost:visited {
	background: transparent;
	border: 1px solid var(--lp-linha-forte);
	border-radius: var(--lp-raio);
	color: var(--footure-white);
	text-decoration: none;
}

.lp-webinar-aula-aberta-analise-desempenho .lp-btn--ghost:hover,
.lp-webinar-aula-aberta-analise-desempenho .lp-btn--ghost:focus {
	border-color: var(--footure-accent);
	color: var(--footure-accent);
}