/* =============================================================================
   LP Especializacao em Analise de Desempenho | Footure Academy
   Mobile-first. Escopo em .footure-lp para nao vazar para o resto do site.
   Cores extraidas do KV do curso. Tipografia oficial: Bebas Neue + Lexend.

   Imagens: as proprias desta LP ficam em ../img/. Os padroes graficos e o logo
   sao ativos de marca compartilhados entre todas as LPs e ficam na raiz do tema,
   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 */
	--footure-accent: #60F030;      /* verde neon: titulos de destaque e detalhes */
	--footure-orange: #F85800;      /* laranja de acao: selo e CTAs */
	--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 */

	/* Derivados de superficie e borda */
	--lp-linha: rgba(255, 255, 255, .10);
	--lp-linha-forte: rgba(255, 255, 255, .18);
	--lp-elevado: #1F1F1F;

	/* 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;
}

/* ------------------------------------------------------------------ Base */
.footure-lp {
	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 ".footure-lp 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.
*/
*,
*::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;
}

a {
	color: var(--footure-accent);
	text-underline-offset: 3px;
}

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. Verde neon tem 12.6:1 sobre o preto. */
:focus-visible {
	outline: 3px solid var(--footure-accent);
	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-accent);
	color: var(--footure-black);
	font-weight: 600;
	text-decoration: none;
	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: 860px;
}

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

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

/* -------------------------------------------------------------- Tipografia */
.lp-kicker {
	margin: 0 0 12px;
	color: var(--footure-accent);
	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.75rem);
}

.lp-titulo--xl {
	font-size: clamp(2.5rem, 7vw, 4.5rem);
}

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

.lp-fecho {
	margin-top: 24px;
	color: var(--footure-white);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
	border-left: 3px solid var(--footure-accent);
	padding-left: 18px;
}

.lp-nota {
	max-width: 78ch;
	margin: 32px auto 0;
	color: var(--footure-gray);
	font-size: .875rem;
	text-align: center;
}

.lp-tag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 12px;
	background: rgba(96, 240, 48, .14);
	color: var(--footure-accent);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 999px;
}

/* Selo laranja da marca. Texto preto sobre laranja garante 5.8:1. */
.lp-selo {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 16px 5px;
	background: var(--footure-orange);
	color: var(--footure-black);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.125rem;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	border-radius: 6px;
}

.lp-selo--sm {
	font-size: .9375rem;
	padding: 6px 12px 4px;
	margin-bottom: 12px;
}

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

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

/* -------------------------------------------------------------- Botoes */
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	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-orange);
	color: var(--footure-black);
	box-shadow: 0 6px 20px rgba(248, 88, 0, .25);
}

.lp-btn--primary:hover {
	background: #FF6A16;
	transform: translateY(-2px);
}

.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: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. A variavel desloca o header e, junto com
   ele, o ponto onde o cabecalho do modulo gruda.
   Abaixo de 601px o WordPress muda a barra para position: absolute e ela rola
   junto com a pagina, entao ali o deslocamento volta a zero.
*/
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(16, 16, 16, .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(16, 16, 16, .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;
	text-decoration: none;
}

.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: 28px;
}

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

.lp-nav__link:hover,
.lp-nav__link.is-ativo {
	color: var(--footure-accent);
	border-bottom-color: var(--footure-accent);
}

.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-accent);
}

.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: 1000px) {
	.lp-nav {
		display: block;
	}

	.lp-burger {
		display: none;
	}

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

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

.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: 72% center;
}

/* Mobile: escurece bem a base para o texto respirar sobre a imagem. */
.lp-hero__veu {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(16, 16, 16, .55) 0%, rgba(16, 16, 16, .25) 26%, rgba(16, 16, 16, .88) 62%, var(--footure-black) 94%);
}

.lp-hero__inner {
	position: relative;
	z-index: 2;
}

.lp-hero__titulo {
	max-width: 14ch;
	margin: 0 0 20px;
	color: var(--footure-accent);
	font-size: clamp(3.5rem, 15vw, 8.5rem);
	font-weight: 700;
	letter-spacing: .01em;
}

.lp-hero__sub {
	max-width: 56ch;
	margin: 0 0 32px;
	color: var(--footure-white);
	font-size: 1.0625rem;
	line-height: 1.6;
}

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

.lp-hero__apoio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 46ch;
	margin: 22px 0 0;
	color: var(--footure-gray);
	font-size: .9375rem;
}

.lp-hero__apoio-ico {
	width: 19px;
	height: 19px;
	margin-top: 3px;
	color: var(--footure-accent);
}

@media (min-width: 900px) {
	.lp-hero {
		align-items: center;
		min-height: min(94vh, 860px);
		padding: calc(var(--lp-header-h) + 32px) 0 64px;
	}

	.lp-hero__img {
		object-position: right center;
	}

	/* Desktop: a imagem funde no #101010 do centro para a esquerda. */
	.lp-hero__veu {
		background:
			linear-gradient(90deg, var(--footure-black) 0%, rgba(16, 16, 16, .96) 32%, rgba(16, 16, 16, .55) 54%, rgba(16, 16, 16, 0) 76%),
			linear-gradient(180deg, rgba(16, 16, 16, .5) 0%, rgba(16, 16, 16, 0) 30%, rgba(16, 16, 16, .6) 100%);
	}

	.lp-hero__inner {
		max-width: 1200px;
	}

	.lp-hero__titulo,
	.lp-hero__sub,
	.lp-hero__apoio {
		max-width: min(56ch, 52%);
	}

	.lp-hero__titulo {
		max-width: 9ch;
	}
}

/* ----------------------------------------------------- Destaques do curso */
.lp-destaques {
	position: relative;
	z-index: 3;
	padding: 8px 0 var(--lp-secao-y);
	background: var(--footure-black);
}

.lp-destaques__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

.lp-destaque {
	padding: 24px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
}

.lp-destaque__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	background: rgba(96, 240, 48, .12);
	color: var(--footure-accent);
	border-radius: 10px;
}

.lp-destaque__titulo {
	margin: 0 0 8px;
	font-size: 1.5rem;
	letter-spacing: .03em;
}

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

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

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

/* -------------------------------------------------------------- Secoes */
.lp-secao {
	position: relative;
	padding: var(--lp-secao-y) 0;
	background: var(--footure-black);
}

.lp-secao--soft {
	background: #131313;
}

/*
   Padrao grafico da marca como textura de fundo, em opacidade baixa.
   Alterna com secoes escuras lisas e nunca compete com o texto.
*/
.lp-secao--padrao-verde::before,
.lp-secao--padrao-laranja::before,
.lp-secao--padrao-preto::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: repeat;
	background-size: 360px auto;
	pointer-events: none;
	z-index: 0;
	mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.lp-secao--padrao-verde::before {
	background-image: url("../../../assets/img/padrao_verde.png");
	opacity: .08;
}

.lp-secao--padrao-laranja::before {
	background-image: url("../../../assets/img/padrao_laranja.png");
	opacity: .10;
}

.lp-secao--padrao-preto::before {
	background-image: url("../../../assets/img/padrao_preto.png");
	opacity: .14;
}

.lp-secao > .lp-container {
	position: relative;
	z-index: 1;
}

.lp-secao__head {
	max-width: 46ch;
	margin-bottom: 44px;
}

.lp-secao__intro {
	margin: 14px 0 0;
	font-size: 1.0625rem;
}

/* ---------------------------------------------------------- Lista check */
.lp-lista-check {
	display: grid;
	gap: 14px;
	margin: 28px 0 0;
}

.lp-lista-check li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.lp-lista-check__ico {
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: var(--footure-accent);
	stroke-width: 2.4;
}

.lp-lista-check--grande li {
	font-size: 1.0625rem;
	color: var(--footure-white);
}

/* ---------------------------------------------------- 2. Contexto */
.lp-contexto {
	display: grid;
	gap: 40px;
	align-items: center;
}

.lp-contexto__media {
	margin: 0;
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
	overflow: hidden;
}

.lp-contexto__img {
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.lp-contexto {
		grid-template-columns: 1.15fr .85fr;
		gap: 64px;
	}
}

/* ---------------------------------------------------- 3. Conquistas */
.lp-conquistas {
	display: grid;
	gap: 16px;
}

.lp-conquista {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 24px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
}

.lp-conquista__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	background: rgba(96, 240, 48, .12);
	color: var(--footure-accent);
	border-radius: 10px;
}

.lp-conquista__texto {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.lp-conquista__texto strong {
	color: var(--footure-white);
	font-weight: 600;
}

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

	.lp-conquista:last-child {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------- 4. Personas */
.lp-personas {
	display: grid;
	gap: 20px;
}

.lp-persona {
	display: flex;
	flex-direction: column;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
	overflow: hidden;
}

.lp-persona__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #0B0B0B;
}

.lp-persona__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 16, 16, 0) 45%, rgba(24, 24, 24, .9) 100%);
}

.lp-persona__media picture,
.lp-persona__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}

.lp-persona__corpo {
	padding: 22px;
}

.lp-persona__titulo {
	margin: 0 0 8px;
	font-size: 1.375rem;
	letter-spacing: .03em;
	color: var(--footure-accent);
}

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

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

@media (min-width: 1100px) {
	.lp-personas {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------------------------------------------------- 5. Depoimentos */
.lp-depoimentos {
	display: grid;
	gap: 20px;
}

.lp-depoimento {
	position: relative;
	padding: 28px 24px 24px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
}

.lp-depoimento--vazio {
	border-style: dashed;
	border-color: rgba(248, 88, 0, .45);
}

.lp-depoimento__aspas {
	font-family: var(--lp-fonte-titulo);
	font-size: 3rem;
	line-height: .6;
	color: var(--footure-accent);
}

.lp-depoimento__texto {
	margin: 16px 0 22px;
	min-height: 96px;
}

.lp-depoimento__autor {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--lp-linha);
}

.lp-depoimento__foto {
	width: 46px;
	height: 46px;
	flex: none;
	background: var(--lp-elevado);
	border: 1px dashed var(--lp-linha-forte);
	border-radius: 50%;
}

.lp-depoimento__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.lp-depoimento__nome {
	color: var(--footure-white);
	font-weight: 600;
	font-size: .9375rem;
}

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

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

/* ---------------------------------------------------- 6. Professores */
.lp-professores {
	display: grid;
	gap: 24px;
}

.lp-professor {
	display: grid;
	gap: 0;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
	overflow: hidden;
}

.lp-professor__media {
	position: relative;
	background: #0B0B0B;
}

/* As fotos ja vem reenquadradas em 16:10 no plano do peito, entao basta preencher
   a area sem reposicionar. */
.lp-professor__media picture,
.lp-professor__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lp-professor__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 24px;
	text-align: center;
}

.lp-professor__corpo {
	padding: 26px 24px 28px;
}

.lp-professor__nome {
	margin: 0 0 4px;
	font-size: 2rem;
	color: var(--footure-accent);
}

.lp-professor__papel {
	margin: 0 0 16px;
	color: var(--footure-white);
	font-size: .9375rem;
	font-weight: 500;
}

.lp-professor__bio {
	margin: 0 0 .9em;
	font-size: .9375rem;
	line-height: 1.65;
}

.lp-professor__bio:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------- Professor (uma pessoa)
   As regras acima foram desenhadas para DOIS professores lado a lado, cada um
   num card com a foto empilhada em cima em 16:10. O curso tem um professor so,
   e ali aquela grade de duas colunas deixava metade da secao vazia.

   Aqui o bloco adota a mesma diagramacao da LP de Pais de Atletas: foto a
   esquerda numa moldura quadrada de largura fixa e o texto a direita. Como
   estas regras vem depois no arquivo, vencem as herdadas por ordem, sem
   precisar subir especificidade.
   -------------------------------------------------------------------------- */
.lp-professores {
	grid-template-columns: minmax(0, 1fr);
}

.lp-professor {
	gap: 24px;
	align-items: start;
	/* Neutraliza o card herdado: aqui o unico elemento emoldurado e a foto. */
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/*
   No mobile a foto ocupa a largura toda da coluna. So no desktop ela vira uma
   moldura estreita ao lado do texto. A foto e 800x800: em 1/1 nao ha corte, o
   enquadramento entregue e mantido.
*/
.lp-professor__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--lp-raio-card);
	overflow: hidden;
}

.lp-professor__corpo {
	padding: 0;
}

/*
   O titulo da secao mora dentro desta coluna. A margem herdada de h2 (.4em de
   um tipo enorme) abria um buraco antes da etiqueta, entao vem uma menor.
*/
.lp-professor__secao-titulo {
	margin: 0 0 22px;
}

@media (min-width: 900px) {
	.lp-professor {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		/* Anula o "auto 1fr" herdado, que deixaria uma segunda linha vazia. */
		grid-template-rows: auto;
		gap: 48px;
		align-items: center;
	}

	.lp-professor__media {
		border: 1px solid var(--lp-linha);
	}
}

/* Acima de 1200px a coluna da foto cresce um pouco, sem dominar o bloco. */
@media (min-width: 1200px) {
	.lp-professor {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	}
}

/* ---------------------------------------------------- 7. Diferenciais */
.lp-diferenciais {
	display: grid;
	gap: 18px;
}

.lp-diferencial {
	padding: 26px 24px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
	border-top: 3px solid var(--footure-accent);
}

.lp-diferencial__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	background: rgba(96, 240, 48, .12);
	color: var(--footure-accent);
	border-radius: 10px;
}

.lp-diferencial__titulo {
	margin: 0 0 10px;
	font-size: 1.5rem;
	letter-spacing: .03em;
}

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

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

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

	.lp-diferencial:nth-child(4),
	.lp-diferencial:nth-child(5) {
		grid-column: span 1;
	}
}

/* ---------------------------------------------------- 8. Programa */
.lp-programa {
	display: grid;
	gap: 32px;
	align-items: start;
}

.lp-programa__modulos {
	display: grid;
	gap: 14px;
}

.lp-programa__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/*
   Sem overflow: hidden aqui. Qualquer overflow diferente de visible em um
   ancestral transforma esse elemento no container de rolagem do sticky e o
   cabecalho para de grudar. O arredondamento passa a ser feito pelo proprio
   botao, que e o unico filho que encosta nos cantos de cima.
*/
.lp-modulo {
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
}

/*
   O cabecalho acompanha a rolagem enquanto o modulo aberto estiver na tela.
   Ele encosta na base do header fixo, com 1px de sobreposicao: qualquer folga
   aqui vira uma fresta por onde as aulas aparecem enquanto rolam por tras, e
   1px cobre tambem o arredondamento de subpixel em telas com DPR fracionario.
*/
.lp-modulo__cabecalho {
	position: sticky;
	top: calc(var(--lp-admin-bar, 0px) + var(--lp-header-h) - 1px);
	z-index: 2;
	margin: 0;
	font-family: var(--lp-fonte-texto);
}

.lp-modulo__botao {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"num chevron"
		"titulo chevron"
		"qtd chevron";
	align-items: center;
	gap: 4px 16px;
	width: 100%;
	padding: 20px;
	/*
	   Fundo opaco, e nao transparente: quando o cabecalho gruda no topo, o
	   conteudo das aulas passa por tras dele. O tom e o mesmo do card, entao
	   fora do estado grudado ele continua invisivel.
	*/
	background: var(--footure-black-soft);
	border: 0;
	border-radius: 15px;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.lp-modulo__num {
	grid-area: num;
	color: var(--footure-accent);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lp-modulo__titulo {
	grid-area: titulo;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.5rem;
	line-height: 1.05;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.lp-modulo__qtd {
	grid-area: qtd;
	font-size: .8125rem;
}

/*
   Modulo aberto: o cabecalho vira uma barra grudada no topo, entao ganha um tom
   proprio e um fio de separacao embaixo. As cores sao opacas de proposito, ja
   que uma camada translucida deixaria as aulas aparecerem por tras.
   #1C2319 e o equivalente solido de rgba(96, 240, 48, .05) sobre o card.
*/
.lp-modulo__botao[aria-expanded="true"] {
	background-color: #1C2319;
	border-radius: 15px 15px 0 0;
	box-shadow: 0 1px 0 rgba(96, 240, 48, .22);
}

/*
   Estado proprio de hover/foco, depois do estado aberto para valer nos dois.
   Sem isso o botao herda o reset do Hello Elementor, que pinta button:hover de
   #c36 (rosa) com especificidade (0,1,1) e vence a classe do componente (0,1,0).
*/
.lp-modulo__botao:hover,
.lp-modulo__botao:focus-visible {
	background-color: #1C2519;
	color: inherit;
}

.lp-modulo__chevron {
	grid-area: chevron;
	color: var(--footure-accent);
	transition: transform .25s ease;
}

.lp-modulo__botao[aria-expanded="true"] .lp-modulo__chevron {
	transform: rotate(180deg);
}

/* Sem border-top: a separacao agora vem do box-shadow do cabecalho, que
   acompanha ele quando gruda no topo. */
.lp-modulo__painel {
	padding: 0 20px 8px;
}

.lp-aulas {
	display: grid;
}

.lp-aula {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--lp-linha);
}

.lp-aula:last-child {
	border-bottom: 0;
}

.lp-aula__num {
	grid-row: 1 / span 2;
	color: var(--footure-accent);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.5rem;
	line-height: 1;
	opacity: .75;
}

/* Com o container em 1200px a coluna de texto ficaria larga demais para leitura
   confortavel, entao o corpo da aula tem o proprio teto de medida. */
.lp-aula__corpo {
	max-width: 74ch;
}

.lp-aula__titulo {
	margin: 0 0 6px;
	font-family: var(--lp-fonte-texto);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--footure-white);
}

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

.lp-aula__convidado {
	margin: 8px 0 0;
	color: var(--footure-accent);
	font-size: .8125rem;
	font-weight: 500;
}

.lp-badge {
	grid-column: 2;
	justify-self: start;
	margin-top: 12px;
	padding: 4px 10px;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
}

.lp-badge--ao-vivo {
	background: var(--footure-accent);
	color: var(--footure-black);
}

.lp-badge--gravada {
	background: transparent;
	border: 1px solid var(--lp-linha-forte);
	color: var(--footure-gray);
}

@media (min-width: 700px) {
	.lp-aula {
		grid-template-columns: auto 1fr auto;
	}

	.lp-badge {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: start;
		margin-top: 2px;
	}
}

@media (min-width: 1100px) {
	.lp-modulo__botao {
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas: "num titulo qtd chevron";
		gap: 20px;
		padding: 24px 26px;
	}

	.lp-modulo__titulo {
		font-size: 1.75rem;
	}
}

/* ---------------------------------------------------- 9. Academy */
.lp-academy__inner {
	max-width: 68ch;
	margin: 0 auto;
	text-align: center;
}

.lp-academy .lp-lead {
	margin-inline: auto;
}

.lp-academy__validar {
	margin: 24px 0 0;
}

/* ---------------------------------------------------- 10. Oferta e lotes */
.lp-lotes {
	display: grid;
	gap: 18px;
}

.lp-lote {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 24px 26px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
	text-align: center;
}

/* O destaque acompanha o lote em vigor, calculado pela data no PHP. */
.lp-lote--ativo {
	background: var(--lp-elevado);
	border-color: var(--footure-accent);
	box-shadow: 0 0 0 1px rgba(96, 240, 48, .35), 0 18px 44px rgba(0, 0, 0, .5);
}

/* Lote que ja virou continua visivel, so recua para o segundo plano. */
.lp-lote--encerrado {
	opacity: .55;
}

.lp-lote--encerrado .lp-lote__preco {
	color: var(--footure-gray);
}

.lp-lote__selo {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 5px 14px;
	background: var(--footure-accent);
	color: var(--footure-black);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
}

.lp-lote__selo--encerrado {
	background: var(--lp-elevado);
	border: 1px solid var(--lp-linha-forte);
	color: var(--footure-gray);
}

.lp-lote__nome {
	margin: 0 0 14px;
	font-size: 1.5rem;
	letter-spacing: .06em;
	color: var(--footure-gray);
}

.lp-lote--ativo .lp-lote__nome {
	color: var(--footure-accent);
}

.lp-lote__preco {
	margin: 0 0 6px;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: 2.75rem;
	line-height: 1;
}

.lp-lote__parcela {
	margin: 0 0 16px;
	color: var(--footure-white);
	font-size: .9375rem;
	font-weight: 500;
}

/* margin-top auto encosta o prazo na base do card. */
.lp-lote__condicao {
	margin: 0;
	padding-top: 16px;
	margin-top: auto;
	border-top: 1px solid var(--lp-linha);
	font-size: .875rem;
	line-height: 1.5;
}

/* ------------------------------------------------ Contador regressivo */
.lp-contador {
	margin: 0 0 18px;
	padding: 16px 12px 14px;
	background: rgba(96, 240, 48, .07);
	border: 1px solid rgba(96, 240, 48, .3);
	border-radius: var(--lp-raio);
}

.lp-contador__rotulo {
	margin: 0 0 12px;
	color: var(--footure-accent);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
}

.lp-contador__blocos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.lp-contador__bloco {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 2px 6px;
	background: rgba(16, 16, 16, .55);
	border-radius: 8px;
}

.lp-contador__num {
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.75rem;
	line-height: 1;
	/* Largura tabular evita o numero "pular" a cada segundo. */
	font-variant-numeric: tabular-nums;
}

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

.lp-contador--fim .lp-contador__rotulo {
	color: var(--footure-orange);
}

.lp-lotes__encerrado {
	max-width: 60ch;
	margin: 26px auto 0;
	padding: 14px 18px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha-forte);
	border-radius: var(--lp-raio);
	font-size: .9375rem;
	text-align: center;
}

.lp-lotes__condicoes {
	max-width: 70ch;
	margin: 26px auto 0;
	font-size: .9375rem;
	text-align: center;
}

.lp-oferta__detalhes {
	display: grid;
	gap: 18px;
	margin-top: 44px;
}

.lp-card {
	padding: 28px 24px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
}

.lp-card--garantia {
	border-color: rgba(96, 240, 48, .35);
}

.lp-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	background: rgba(96, 240, 48, .12);
	color: var(--footure-accent);
	border-radius: 10px;
}

.lp-card__titulo {
	margin: 0 0 10px;
	font-size: 1.5rem;
	letter-spacing: .03em;
}

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

.lp-card .lp-lista-check {
	margin-top: 18px;
}

.lp-card .lp-lista-check li {
	font-size: .9375rem;
}

.lp-oferta__cta {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

@media (min-width: 800px) {
	.lp-lotes {
		grid-template-columns: repeat(3, 1fr);
		/*
		   Cada card tem a altura do proprio conteudo e fica centralizado na linha.
		   Esticar todos ate a altura do card ativo abriria um vazio no meio dos
		   lotes inativos, que nao tem contador, e roubaria destaque do lote em vigor.
		*/
		align-items: center;
	}

	.lp-lote--ativo {
		padding-block: 40px 34px;
	}

	.lp-oferta__detalhes {
		grid-template-columns: 1.3fr 1fr;
		gap: 24px;
		align-items: start;
	}
}

/* ---------------------------------------------------- 11. FAQ */
.lp-faq {
	display: grid;
	gap: 12px;
}

.lp-faq__item {
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio);
	overflow: hidden;
}

.lp-faq__cabecalho {
	margin: 0;
	font-family: var(--lp-fonte-texto);
}

.lp-faq__botao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 20px;
	background: transparent;
	border: 0;
	color: var(--footure-white);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

/* Mesmo motivo do acordeao de modulos: neutraliza o button:hover rosa do pai. */
.lp-faq__botao:hover,
.lp-faq__botao:focus-visible {
	background-color: rgba(96, 240, 48, .06);
	color: var(--footure-white);
}

.lp-faq__botao[aria-expanded="true"] {
	background-color: rgba(96, 240, 48, .05);
	color: var(--footure-accent);
}

.lp-faq__chevron {
	color: var(--footure-accent);
	transition: transform .25s ease;
}

.lp-faq__botao[aria-expanded="true"] .lp-faq__chevron {
	transform: rotate(180deg);
}

.lp-faq__painel {
	padding: 0 20px 20px;
}

.lp-faq__resposta {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.65;
}

/*
   A linha e o respiro acima separam o cabecalho da resposta, entao pertencem so
   ao primeiro paragrafo. Quando a resposta passou a aceitar varios paragrafos,
   aplicar em todos desenhava um risco no meio do texto.
*/
.lp-faq__resposta:first-child {
	padding-top: 16px;
	border-top: 1px solid var(--lp-linha);
}

/* Paragrafos seguintes: respiro entre eles, sem linha. */
.lp-faq__resposta + .lp-faq__resposta {
	margin-top: .9em;
}

/* ---------------------------------------------------- 12. CTA final */
.lp-cta-final {
	position: relative;
	padding: var(--lp-secao-y) 0;
	background: var(--footure-black);
	overflow: hidden;
	text-align: center;
}

.lp-cta-final__fundo {
	position: absolute;
	inset: 0;
}

.lp-cta-final__fundo picture {
	height: 100%;
}

.lp-cta-final__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .28;
}

.lp-cta-final__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(16, 16, 16, .72) 0%, rgba(16, 16, 16, .94) 58%, var(--footure-black) 100%);
}

.lp-cta-final__inner {
	position: relative;
	z-index: 1;
	max-width: 820px;
}

.lp-cta-final .lp-lista-check {
	max-width: 620px;
	margin-inline: auto;
	text-align: left;
}

.lp-cta-final__acoes {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.lp-cta-final__nota {
	margin: 18px 0 0;
	font-size: .875rem;
}

/* ---------------------------------------------------- 13. Rodape */
.lp-footer {
	padding: 40px 0 calc(40px + var(--lp-sticky-espaco, 0px));
	background: #0B0B0B;
	border-top: 1px solid var(--lp-linha);
}

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

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

.lp-footer__links a {
	font-size: .875rem;
}

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

/* ---------------------------------------------------- Sticky CTA */
/*
   Barra fixa de urgencia. 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. O CTA continua laranja, igual ao resto da pagina.
*/
.lp-sticky {
	position: fixed;
	inset: auto 0 0;
	z-index: 80;
	padding: 10px 0;
	background: linear-gradient(180deg, #161B14 0%, #101010 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__curso {
	display: none;
	margin: 0;
	line-height: 1.2;
}

.lp-sticky__selo {
	display: block;
	color: var(--footure-orange);
	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%;
}

/* ---------------------------------------- Contador dentro da barra fixa */
.lp-sticky__contador {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
}

.lp-sticky__rotulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--footure-accent);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Ponto pulsante, o mesmo recurso de urgencia da referencia. */
.lp-sticky__pulso {
	position: relative;
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--footure-accent);
	border-radius: 50%;
}

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

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

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

/* Blocos compactos, para caber junto do botao na mesma faixa. */
.lp-contador__blocos--sm {
	gap: 5px;
}

.lp-contador__blocos--sm .lp-contador__bloco {
	padding: 4px 6px 3px;
	background: rgba(0, 0, 0, .5);
	border: 1px solid rgba(96, 240, 48, .22);
}

.lp-contador__blocos--sm .lp-contador__num {
	font-size: 1.125rem;
}

.lp-contador__blocos--sm .lp-contador__rot {
	font-size: .5rem;
}

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

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

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

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

	/* Espaco suficiente: contador e botao voltam para a mesma linha. */
	.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;
	}
}

@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;
	}
}

/* ---------------------------------------------------- Modal */
.lp-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}

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

.lp-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .78);
	backdrop-filter: blur(3px);
	animation: lp-fade .22s ease both;
}

.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-accent);
	color: var(--footure-accent);
}

.lp-modal__titulo {
	margin: 0 0 10px;
	font-size: 2.25rem;
	color: var(--footure-white);
}

.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-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

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

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

/* ---------------------------------------------------- Formulario */
.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: #0F0F0F;
	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 #0F0F0F da 5.55:1. O cinza mais escuro que se usaria por
   estetica (#7A7A7A) fica em 4.47:1 e reprovaria no AA. */
.lp-campo__input::placeholder,
.lp-ddi__busca-input::placeholder {
	color: #8A8A8A;
}

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

.lp-campo__input[aria-invalid="true"] {
	border-color: #FF7A45;
}

.lp-campo__erro {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 7px 0 0;
	color: #FF9457;
	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: #0F0F0F;
	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);
	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);
	overflow: hidden;
}

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

/* O modal rola no proprio eixo, entao o painel abre para cima quando o campo
   de WhatsApp esta perto da base e nao ha espaco abaixo. */
.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: #0F0F0F;
	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;
	font-size: .875rem;
	color: var(--footure-gray);
	cursor: pointer;
}

.lp-ddi__opcao:hover,
.lp-ddi__opcao.is-focada {
	background: rgba(96, 240, 48, .12);
	color: var(--footure-white);
}

.lp-ddi__opcao[aria-selected="true"] {
	color: var(--footure-accent);
	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-accent);
	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: #FF9457;
	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;
	}
}

/* Estado de sucesso */
.lp-sucesso {
	padding: 12px 0 4px;
	text-align: center;
}

.lp-sucesso__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	background: var(--footure-accent);
	color: var(--footure-black);
	border-radius: 50%;
}

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

.lp-sucesso .lp-btn {
	margin-top: 24px;
}

/* Trava o scroll do fundo enquanto o modal ou o menu estao abertos */
.footure-lp.is-travado {
	overflow: hidden;
}

/* ---------------------------------------------------- Animacoes 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, em vez
   de a pagina ficar em branco esperando um observer que nunca disparou.
   -------------------------------------------------------------------------- */
.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;
	}
}

/* Sem JS os paineis de acordeao ficam abertos, para o conteudo continuar legivel. */
.no-js .lp-modulo__painel[hidden],
.no-js .lp-faq__painel[hidden] {
	display: block;
}

/* ==========================================================================
   BLINDAGEM DA COR DE LINK

   O CSS acima define a cor dos links num seletor de elemento puro, "a { }",
   de especificidade (0,0,1). Isso so se sustenta se absolutamente nada mais
   na pagina falar sobre links. Em producao nao foi o caso: uma folha externa
   com "a:link" (0,1,1) venceu, e todos os links da LP viraram azul.

   Dequeue nao basta como unica defesa, porque nem toda folha passa pela fila
   de handles: ha CSS inline de plugin e de theme.json que o wp_dequeue_style
   nao alcanca.

   As regras abaixo declaram a cor sob o escopo raiz .footure-lp e com o
   pseudo :link, chegando a (0,2,1). Isso vence o kit do Elementor
   (".elementor-kit-N a" = (0,1,1)) e qualquer "a:link" solto, sem precisar de
   !important. Os componentes que tem cor propria sao reafirmados logo em
   seguida, com uma classe a mais, para nao serem engolidos por esta blindagem.
   ========================================================================== */
.footure-lp a,
.footure-lp a:link,
.footure-lp a:visited {
	color: var(--footure-accent);
	text-underline-offset: 3px;
}

/* Nav: branco em repouso, acento no hover e no item da secao visivel. */
.footure-lp .lp-nav__link,
.footure-lp .lp-nav__link:link,
.footure-lp .lp-nav__link:visited {
	color: var(--footure-white);
}

.footure-lp .lp-nav__link:hover,
.footure-lp .lp-nav__link:focus,
.footure-lp .lp-nav__link.is-ativo {
	color: var(--footure-accent);
}

/* Logo do header: o conteudo e uma imagem, mas evita heranca inesperada. */
.footure-lp .lp-header__logo,
.footure-lp .lp-header__logo:link,
.footure-lp .lp-header__logo:visited {
	color: inherit;
}

/* Skip link: texto escuro sobre o fundo de acento. */
.footure-lp .lp-skip,
.footure-lp .lp-skip:link,
.footure-lp .lp-skip:visited {
	color: var(--footure-black);
}