/* =============================================================================
   LP Especializacao em Analise de Desempenho | Footure Academy
   Mobile-first. Escopo em .lp-pais 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 deste curso: azul e ciano, sem laranja.
	   Nenhuma cor fora daqui entra na pagina.
	*/
	--footure-accent: #325EFF;      /* azul royal: headlines, destaques, borda de card ativo */
	--footure-action: #00BCFF;      /* ciano: fundo dos CTAs e estados ativos */
	--footure-action-ink: #000000;  /* texto PRETO sobre o ciano, para contraste AA */
	--footure-blue-deep: #163DC9;   /* azul escuro: labels sobre fundo claro */
	--footure-black: #000000;       /* fundo dominante */
	--footure-black-soft: #101113;  /* 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: #15171A;

	/* 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 */
.lp-pais {
	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-pais 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(50, 94, 255, .14);
	color: var(--footure-accent);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 999px;
}

/* Selo ciano da marca. Texto preto sobre ciano garante 9.5:1. */
.lp-selo {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 16px 5px;
	background: var(--footure-action);
	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(0, 188, 255, .12);
	border: 1px dashed var(--footure-action);
	border-radius: 8px;
	color: #66D9FF;
	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-action);
	color: var(--footure-black);
	box-shadow: 0 6px 20px rgba(0, 188, 255, .25);
}

.lp-btn--primary:hover {
	background: #33CBFF;
	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(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;
	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(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 26%, rgba(0, 0, 0, .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(3rem, 12vw, 7rem);
	font-weight: 700;
	letter-spacing: .01em;
}

/*
   Duas cores no H1: "Futebol" em branco, o resto no azul de acento herdado do
   proprio .lp-hero__titulo. Os spans sao inline para o titulo continuar
   quebrando como uma frase so, sem forcar linha entre as duas partes.
*/
.lp-hero__titulo-a {
	color: var(--footure-white);
}

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

	/*
	   O 32% vertical existe para nao cortar a cabeca das pessoas.

	   O hero tem a altura travada em min(94vh, 860px), mas a largura acompanha a
	   tela. Como o object-fit:cover escala pela maior dimensao, a partir de uns
	   1600px quem manda e a largura, e a sobra vertical cresce sem parar: em
	   1920px o recorte centralizado ja comia 27,6% do topo da imagem, e em 2560px
	   chegava a 33,2%. As cabecas ficam entre 26% e 33% da altura do arquivo,
	   entao sumiam.

	   Ancorar em 32% (em vez de center) joga o recorte para baixo. Conferido de
	   1280x800 a 3840x2160: as cabecas sobrevivem em toda a faixa. O preco e o
	   corte na altura da coxa, o que num hero e o enquadramento desejavel mesmo.

	   Atencao: diminuir a altura do hero PIORA isso, nao resolve. Menos altura e
	   mais sobra vertical para o cover cortar.
	*/
	.lp-hero__img {
		object-position: right 32%;
	}

	/* Desktop: a imagem funde no #000000 do centro para a esquerda. */
	.lp-hero__veu {
		background:
			linear-gradient(90deg, var(--footure-black) 0%, rgba(0, 0, 0, .96) 32%, rgba(0, 0, 0, .55) 54%, rgba(0, 0, 0, 0) 76%),
			linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .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(50, 94, 255, .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: #0B0C0E;
}

.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(50, 94, 255, .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: #000000;
}

.lp-persona__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 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(0, 188, 255, .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: #000000;
}

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

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

	.lp-professor {
		grid-template-rows: auto 1fr;
	}

	.lp-professor__media {
		aspect-ratio: 16 / 10;
	}
}

/* ---------------------------------------------------- 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(50, 94, 255, .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.
   #12182B e o equivalente solido de rgba(50, 94, 255, .05) sobre o card.
*/
.lp-modulo__botao[aria-expanded="true"] {
	background-color: #12182B;
	border-radius: 15px 15px 0 0;
	box-shadow: 0 1px 0 rgba(50, 94, 255, .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(50, 94, 255, .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(50, 94, 255, .07);
	border: 1px solid rgba(50, 94, 255, .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(0, 0, 0, .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-action);
}

.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(50, 94, 255, .35);
}

.lp-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	background: rgba(50, 94, 255, .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(50, 94, 255, .06);
	color: var(--footure-white);
}

.lp-faq__botao[aria-expanded="true"] {
	background-color: rgba(50, 94, 255, .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;
	padding-top: 16px;
	font-size: .9375rem;
	line-height: 1.65;
	border-top: 1px solid var(--lp-linha);
}

/* ---------------------------------------------------- 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(0, 0, 0, .72) 0%, rgba(0, 0, 0, .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: #000000;
	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 azul royal no topo mais um brilho, e nao de um fundo claro que
   brigaria com a paleta. O CTA continua ciano, igual ao resto da pagina.
*/
.lp-sticky {
	position: fixed;
	inset: auto 0 0;
	z-index: 80;
	padding: 10px 0;
	background: linear-gradient(180deg, #0B1020 0%, #000000 100%);
	backdrop-filter: blur(10px);
	border-top: 2px solid var(--footure-accent);
	box-shadow: 0 -2px 24px rgba(50, 94, 255, .18), 0 -12px 40px rgba(0, 0, 0, .6);
	transform: translateY(110%);
	transition: transform .28s ease;
}

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

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

.lp-sticky__curso {
	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%;
}

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

/*
   Rotulo em ciano, nao no azul royal. Alem da leitura de marca, e o que a
   pagina exige de contraste: a .6875rem (11px) este texto e pequeno, e o azul
   royal sobre o fundo escuro da barra da 4.18:1, abaixo do minimo AA de 4.5:1.
   O ciano da 9.55:1.
*/
.lp-sticky__rotulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--footure-action);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Ponto pulsante, o mesmo recurso de urgencia da referencia. */
.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;
	border-radius: 50%;
	background: var(--footure-action);
	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(50, 94, 255, .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: #0B0C0E;
	border: 1px solid var(--lp-linha-forte);
	border-radius: 10px;
	color: var(--footure-white);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
	transition: border-color .18s ease;
}

/* #8A8A8A sobre #0B0C0E da 5.55:1. 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: #66D9FF;
	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: #0B0C0E;
	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: #0B0C0E;
	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(50, 94, 255, .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(0, 188, 255, .12);
	border: 1px solid rgba(0, 188, 255, .5);
	border-radius: 10px;
	color: #66D9FF;
	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.
   A classe entra no <body> (o JS mexe em document.body), e nao no container
   .lp-pais, entao a regra precisa morar no body para valer.
*/
.lp-pais-body.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;
}

/* ==========================================================================
   COMPONENTES DESTA LP
   Tudo abaixo e especifico do curso Futebol para Pais de Atletas: escopo raiz,
   blindagem contra o CSS global do Elementor, oferta de lancamento unica,
   co-producao e os estados de placeholder enquanto os assets nao chegam.
   ========================================================================== */

/* --------------------------------------------------- Escopo e blindagem
   O site pode ter o Elementor ativo globalmente. Mesmo esta LP nao usando
   Elementor, o kit injeta regras como ".elementor-kit-N a { color }" e as
   variaveis --e-global-color-*, que redefinem a cor dos links. Tres camadas
   resolvem isso, nesta ordem:
     1. functions.php desenfileira o kit neste page template (raiz do problema);
     2. a folha da LP entra depois do Elementor na cascata (prioridade 20);
     3. as regras abaixo declaram cor de link explicita sob .lp-pais.
   Nenhum !important e necessario enquanto as tres camadas estiverem de pe.
   -------------------------------------------------------------------------- */
.lp-pais-body {
	margin: 0;
	background-color: var(--footure-black);
}

/* O container raiz carrega o fundo e a tipografia da pagina inteira. */
.lp-pais {
	position: relative;
	isolation: isolate;
}

/* Cor de link explicita: nunca o azul padrao do navegador nem o do kit. */
.lp-pais a,
.lp-pais a:link,
.lp-pais a:visited {
	color: inherit;
	text-decoration: none;
}

.lp-pais a:hover,
.lp-pais a:focus {
	color: var(--footure-action);
}

/* Links dentro de corpo de texto ganham sublinhado, para nao depender so da cor. */
.lp-pais p a:link,
.lp-pais p a:visited,
.lp-pais label a:link,
.lp-pais label a:visited {
	color: var(--footure-action);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lp-pais p a:hover,
.lp-pais p a:focus,
.lp-pais label a:hover,
.lp-pais label a:focus {
	color: var(--footure-white);
}

.lp-main {
	display: block;
}

/*
   Kickers e labels pequenos usam o CIANO, nao o azul royal.
   #325EFF sobre preto da 4.18:1, abaixo do minimo AA de 4.5:1 para texto
   pequeno. O ciano #00BCFF da 9.55:1. O azul royal fica reservado para titulo
   grande e elementos nao textuais (bordas, selos), onde 3:1 ja basta.
*/
.lp-kicker {
	color: var(--footure-action);
}

/* ------------------------------------------------------- Padrao grafico */
.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.png");
	background-size: 420px;
	opacity: .14;
	mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.lp-secao__apoio {
	max-width: 62ch;
	margin: 16px auto 0;
	color: var(--footure-gray);
	font-size: .9375rem;
}

.lp-secao__aviso {
	margin: 0 0 28px;
	text-align: center;
}

/* ----------------------------------------------------------- Co-producao */
.lp-coprod {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--lp-linha);
}

.lp-coprod__rotulo {
	color: var(--footure-gray);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lp-coprod__logos {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.lp-coprod__logo {
	display: block;
	width: auto;
	height: 26px;
	object-fit: contain;
}

/*
   O logo do Base de Campeao e um escudo: a marca ocupa so a parte central da
   arte, entao na mesma altura do logo do Footure ele parece bem menor. A altura
   maior compensa a proporcao e equilibra o peso visual dos dois.
*/
.lp-coprod__logo--bc {
	height: 58px;
}

/* Acompanha a altura do maior dos dois logos, para nao virar um tracinho solto. */
.lp-coprod__sep {
	width: 1px;
	height: 36px;
	background: var(--lp-linha-forte);
}

/* ------------------------------------------------- Contexto: bullets */
.lp-contexto__texto {
	max-width: 60ch;
}

.lp-contexto__bullets {
	display: grid;
	gap: 18px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.lp-bullet {
	display: flex;
	gap: 14px;
	padding: 20px;
	background: var(--footure-black-soft);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-card);
}

.lp-bullet__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--footure-action);
	background: rgba(0, 188, 255, .12);
	border-radius: 50%;
}

.lp-bullet__ico .lp-icon {
	width: 18px;
	height: 18px;
}

.lp-bullet__texto {
	margin: 0;
	font-size: .9375rem;
}

.lp-bullet__titulo {
	display: block;
	margin-bottom: 4px;
	color: var(--footure-white);
	font-weight: 600;
}

@media (min-width: 900px) {
	.lp-contexto {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: start;
	}

	.lp-contexto__bullets {
		margin-top: 0;
	}
}

/* ------------------------------------------- Persona sem foto (fallback) */
.lp-persona__media--ico {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, rgba(50, 94, 255, .18), rgba(0, 0, 0, .5));
}

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

.lp-persona__ico .lp-icon {
	width: 44px;
	height: 44px;
}

/* --------------------------------------------- Depoimentos: placeholders */
.lp-depoimento--vazio {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-style: dashed;
}

.lp-depoimento__slot {
	display: grid;
	gap: 10px;
}

.lp-depoimento__foto {
	width: 48px;
	height: 48px;
	margin-bottom: 6px;
	background: var(--lp-linha-forte);
	border-radius: 50%;
}

.lp-depoimento__linha {
	height: 10px;
	background: var(--lp-linha);
	border-radius: 4px;
}

.lp-depoimento__linha--curta {
	width: 55%;
}

.lp-depoimento__aviso {
	margin: 0;
	color: var(--footure-gray);
	font-size: .8125rem;
	font-style: italic;
}

/* ------------------------------------------------------------------ FAQ */
.lp-faq__pergunta {
	flex: 1 1 auto;
	text-align: left;
}

/* ------------------------------------------------------------ Autoridade */
.lp-autoridade {
	max-width: 74ch;
	text-align: center;
}

.lp-autoridade__texto {
	margin: 0 auto;
	color: var(--footure-gray);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.lp-autoridade__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 36px;
}

.lp-autoridade__logo {
	display: block;
	width: auto;
	height: 42px;
	object-fit: contain;
}

.lp-autoridade__logo--bc {
	height: 72px;
}

.lp-autoridade__sep {
	width: 1px;
	height: 44px;
	background: var(--lp-linha-forte);
}

/* --------------------------------------------------------------- Oferta */
.lp-oferta {
	display: grid;
	gap: 28px;
	align-items: start;
}

@media (min-width: 900px) {
	.lp-oferta {
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
		gap: 44px;
	}
}

/* Card em destaque, com a borda no acento da marca. */
.lp-oferta__card {
	position: relative;
	padding: 32px 28px;
	background: var(--footure-black-soft);
	border: 2px solid var(--footure-accent);
	border-radius: var(--lp-raio-card);
	box-shadow: 0 18px 50px rgba(50, 94, 255, .18);
	text-align: center;
}

.lp-oferta__selo {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 6px 16px;
	background: var(--footure-action);
	color: var(--footure-action-ink);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	white-space: nowrap;
}

.lp-oferta__rotulo {
	margin: 8px 0 0;
	color: var(--footure-gray);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lp-oferta__preco {
	margin: 6px 0 0;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: clamp(2.75rem, 8vw, 3.75rem);
	line-height: 1;
	letter-spacing: .01em;
}

/*
   Valor de referencia apresentado de forma sobria: cinza e menor, sem risco
   agressivo. O <s> nao entra para nao dramatizar a comparacao.
*/
.lp-oferta__referencia {
	margin: 10px 0 0;
	color: var(--footure-gray);
	font-size: .875rem;
}

.lp-oferta__acoes {
	margin-top: 24px;
}

.lp-oferta__nota {
	margin: 14px 0 0;
	color: var(--footure-gray);
	font-size: .8125rem;
	line-height: 1.5;
}

.lp-oferta__lado {
	display: grid;
	gap: 28px;
}

.lp-oferta__sub {
	margin: 0 0 16px;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: 1.5rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- Garantia */
.lp-garantia {
	display: flex;
	gap: 16px;
	padding: 22px;
	background: rgba(50, 94, 255, .07);
	border: 1px solid rgba(50, 94, 255, .22);
	border-radius: var(--lp-raio-card);
}

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

.lp-garantia__ico .lp-icon {
	width: 30px;
	height: 30px;
}

.lp-garantia__titulo {
	margin: 0 0 4px;
	color: var(--footure-white);
	font-family: var(--lp-fonte-texto);
	font-size: 1rem;
	font-weight: 600;
}

.lp-garantia__texto {
	margin: 0;
	color: var(--footure-gray);
	font-size: .9375rem;
}

/* ----------------------------------------------------- Contador: extras */
.lp-contador__prazo {
	margin: 12px 0 0;
	color: var(--footure-gray);
	font-size: .8125rem;
}

.lp-contador__texto {
	margin: 12px 0 0;
	color: var(--footure-action);
	font-size: .875rem;
}

/*
   A barra fixa usa os blocos compactos do contador
   (.lp-contador__blocos--sm), definidos mais acima. O rotulo e o ponto pulsante
   herdam de .lp-sticky__rotulo e .lp-sticky__pulso, tambem acima. Nada a
   acrescentar aqui: sobrescrever a cor do .lp-sticky__rotulo-txt apagaria o
   acento que identifica a urgencia.
*/

/* ------------------------------------------------------------- CTA final */
.lp-cta-final__titulo {
	margin: 0 0 24px;
	color: var(--footure-white);
	font-family: var(--lp-fonte-titulo);
	font-size: clamp(2rem, 6vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.lp-cta-final__bullets {
	display: grid;
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	text-align: left;
}

.lp-cta-final__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--footure-white);
	font-size: 1rem;
}

.lp-cta-final__ico {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--footure-action);
}

@media (min-width: 700px) {
	.lp-cta-final__bullets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 28px;
	}
}

/* ---------------------------------------------------------- Formulario */
.lp-form {
	display: grid;
	gap: 18px;
	margin-top: 24px;
}

/* --------------------------------------------------- Imagem ainda ausente
   Os assets do KV e as imagens geradas chegam depois do codigo. Ate la o
   helper footure_pa_img() imprime este bloco no lugar do <img>, preservando a
   proporcao do slot para o layout nao pular quando o arquivo real entrar.
   -------------------------------------------------------------------------- */
.lp-img-falta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 120px;
	padding: 16px;
	background: repeating-linear-gradient(
		45deg,
		rgba(50, 94, 255, .06),
		rgba(50, 94, 255, .06) 10px,
		transparent 10px,
		transparent 20px
	);
	border: 1px dashed rgba(50, 94, 255, .45);
	border-radius: var(--lp-raio);
	color: var(--footure-gray);
	text-align: center;
}

.lp-img-falta__txt {
	font-family: var(--lp-fonte-texto);
	font-size: .75rem;
	letter-spacing: .04em;
	word-break: break-word;
}

/* No hero o placeholder ocupa o bloco inteiro, para o titulo seguir legivel. */
.lp-hero__media .lp-img-falta {
	height: 100%;
	min-height: 320px;
	border: 0;
	border-radius: 0;
}

/* --------------------------------------------------- <picture> nos logos
   Com o WebP ao lado, footure_pa_img() passa a envolver todo <img> num
   <picture>. Nos containers de midia (hero, persona, professor, CTA final) ja
   existe regra para o wrapper. Nos logos, que vivem dentro de flex e sao
   dimensionados pela propria <img>, o wrapper viraria o item flex e a altura
   deixaria de valer. display:contents remove a caixa do <picture> e devolve a
   <img> a posicao de filha direta do flex, mantendo as regras existentes.
   -------------------------------------------------------------------------- */
.lp-header__logo picture,
.lp-coprod__logos picture,
.lp-autoridade__logos picture,
.lp-footer__inner picture {
	display: contents;
}

/* ------------------------------------------------------ Professor (1 pessoa)
   As regras herdadas de .lp-professor foram desenhadas para DOIS professores
   lado a lado, cada um num card com a foto empilhada em cima em 16:10. Esta LP
   tem um professor so, e ali aquele mesmo 16:10 esticava a foto na largura
   inteira do container: cerca de 1200x750 no desktop.

   Aqui o bloco vira um layout de duas colunas, foto a esquerda numa moldura de
   largura fixa e o texto a direita. Como estas regras vem depois no arquivo,
   elas vencem as herdadas por ordem, sem precisar subir especificidade.
   -------------------------------------------------------------------------- */
.lp-professor {
	display: grid;
	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, como era antes. So no
   desktop ela passa a ser uma moldura estreita ao lado do texto.
   A foto tem 800x800: em 1/1 nao ha corte, o enquadramento original e mantido.
*/
.lp-professor__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--lp-raio-card);
	overflow: hidden;
}

.lp-professor__corpo {
	padding: 0;
}

@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 {
		/* Vence o 16/10 herdado, que era o que esticava a foto. */
		aspect-ratio: 1 / 1;
		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);
	}
}

/* ====================================================== HERO NO MOBILE
   Art direction: abaixo de 768px o <picture> serve hero-mobile.jpg, com o topo
   escuro e a familia embaixo, no lugar do hero.jpg de desktop, que tem a area
   escura a esquerda. O breakpoint aqui e o mesmo de FOOTURE_PA_MOBILE_MEDIA em
   functions.php: os dois precisam andar juntos.

   O desktop nao e tocado. As regras de la vivem em @media (min-width: 900px) e
   nao alcancam esta faixa. Entre 769px e 899px continua valendo o comportamento
   base de antes, intocado.

   O empilhamento ja vem pronto da base e nao e redeclarado aqui:
   .lp-hero__media e absolute inset:0, e .lp-hero__inner e relative com
   z-index:2, entao a foto e o scrim ficam atras do conteudo.
   ========================================================================== */
@media (max-width: 768px) {

	/* Conteudo no topo, sobre a faixa escura da foto. Na base ele ia para o pe. */
	.lp-pais .lp-hero {
		align-items: flex-start;
	}

	/*
	   A foto deixa de cobrir o hero e passa a ser um bloco ancorado no canto
	   inferior direito, com a proporcao original 1:1.

	   A largura sai de conta, nao de tentativa: a familia ocupa 50% da largura
	   do arquivo (medido). Para ela ocupar 2/3 da tela e encostar na direita:

	       0,50 x largura_exibida = 2/3 x largura_da_tela
	       largura_exibida = 4/3 = 133,333%

	   O excedente sai pela esquerda e e cortado pelo overflow:hidden do .lp-hero.
	   Como a altura acompanha a largura (1:1), num celular sobra cerca de um
	   terco de hero em preto no topo, que e onde o selo e o titulo se apoiam.
	*/
	.lp-pais .lp-hero__media {
		/*
		   Ancorada logo abaixo do header, e nao no pe do hero. Assim a faixa
		   escura que a propria foto tem no topo encosta na barra do header e
		   emenda uma coisa na outra, em vez de deixar um bloco de preto chapado
		   entre as duas. O que sobra de hero vai para baixo da foto, justamente
		   onde ficam o rotulo de co-producao e os logos.
		*/
		top: var(--lp-header-h);
		right: 0;
		bottom: auto;
		left: auto;
		width: 133.333%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Bloco e arquivo tem a mesma proporcao, entao nao ha recorte a posicionar. */
	.lp-pais .lp-hero__img {
		object-position: center;
	}

	/*
	   O veu cobre so o bloco da foto, nao o hero inteiro. As porcentagens abaixo
	   sao da ALTURA DA FOTO, e nao da secao: 0% e o topo da imagem, logo abaixo
	   do header.

	   Com a foto subindo, o rotulo de co-producao e os logos passaram a cair
	   ABAIXO dela, sobre o preto do hero. Por isso a rampa escura que existia no
	   pe saiu: ela so existia para dar contraste aquele rotulo cinza, e agora o
	   fundo dele ja e preto solido. O pe da foto fica claro e as pernas aparecem.

	   O que sobra e escurecer o meio, onde o subtitulo passa por cima do corpo
	   das pessoas. O titulo quase nao precisa de veu: e texto grande, exige so
	   3:1, e a faixa onde ele cai (21-41%) e a parte escura da foto.

	     0-40%   leve (.28 -> .30)   cabecas visiveis, faixa do titulo
	     56-74%  .54 -> .56          faixa do subtitulo, o gargalo
	     88-100% .34 -> .24          pernas e pes de volta a vista

	   Conferido no 95o percentil de luminancia, sub-faixa a sub-faixa:
	     titulo    pior ponto 3.23:1 (exige 3.0:1)
	     subtitulo pior ponto 4.63:1 (exige 4.5:1)

	   O segundo gradiente costura o pe do hero no fundo da pagina, para a secao
	   seguinte nao comecar num corte seco.
	*/
	.lp-pais .lp-hero__veu {
		background:
			linear-gradient(180deg,
				rgba(0, 0, 0, .28) 0%,
				rgba(0, 0, 0, .24) 20%,
				rgba(0, 0, 0, .30) 40%,
				rgba(0, 0, 0, .54) 56%,
				rgba(0, 0, 0, .56) 74%,
				rgba(0, 0, 0, .34) 88%,
				rgba(0, 0, 0, .24) 100%),
			linear-gradient(0deg, var(--footure-black) 0%, rgba(0, 0, 0, 0) 10%);
	}
}

/* ------------------------------------------------ Aulas do programa (mobile)
   A regra base de .lp-aula vem da LP de Analise de Desempenho, onde cada aula
   tinha o numero numa coluna e o corpo na outra, por isso o
   "grid-template-columns: auto 1fr".

   Esta LP nao tem numero de aula: o <h4> e o <p> sao filhos diretos do <li>.
   Com aquele grid, o titulo caia na primeira coluna e o texto na segunda, lado
   a lado. Em tela estreita a coluna "auto" ainda assumia a largura natural do
   titulo e empurrava o texto para fora da viewport.

   Abaixo de 700px a aula passa a ser uma coluna so, com o texto de apoio na
   linha debaixo. A faixa complementa exatamente o @media (min-width: 700px)
   que ja existe acima.
   -------------------------------------------------------------------------- */
@media (max-width: 699px) {
	.lp-aula {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}