/**
 * Livra.Me · CSS da landing page.
 *
 * Todo número vem direto da prancheta: no desktop o valor do XD (base 1920)
 * multiplicado por --u; abaixo de 768px, o valor da prancheta de celular
 * (base 390) multiplicado por --um. Nada de valor "a olho" fora das
 * adaptações comentadas.
 */

:root {
	--u: clamp(0.399px, 100vw / 1920, 1px);
	--um: clamp(1px, 100vw / 390, 1.55px);
	--espresso: #26110F;
	--creme: #F1E9DF;
	--azul: #436073;
	--menta: #E6FCF6;
	--bege: #DCC8B8;
	--borda-faq: #593528;
	--pill: #7B9AA6;
}

/* ------------------------------------------------------------- fontes */

@font-face {
	font-family: 'Neuton';
	font-weight: 200;
	font-display: swap;
	src: url('../fontes/neuton-200.woff2') format('woff2');
}
@font-face {
	font-family: 'Neuton';
	font-weight: 300;
	font-display: swap;
	src: url('../fontes/neuton-300.woff2') format('woff2');
}
/* O Google entrega a DM Sans como fonte variável: um arquivo cobre 300–800. */
@font-face {
	font-family: 'DM Sans';
	font-weight: 300 800;
	font-display: swap;
	src: url('../fontes/dmsans-300.woff2') format('woff2');
}

/* --------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body.lm-body {
	background: #fff;
	color: var(--espresso);
	font-family: 'DM Sans', system-ui, sans-serif;
	font-weight: 300;
	font-size: calc(18 * var(--u));
	line-height: 1.45;
	overflow-x: clip;
}

img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: inherit; }
figure { margin: 0; }
svg { display: block; }

.lm-pular {
	position: absolute; left: -9999px; top: 0;
	background: var(--espresso); color: var(--creme); padding: 12px 20px; z-index: 200;
}
.lm-pular:focus { left: 0; }

.lm-visualmente-oculto {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

.lm-so-movel { display: none; }

/* O main fica acima do rodapé fixo da cortina e com fundo próprio. */
.lm-main { position: relative; z-index: 2; background: #fff; }

/* Miolo: a caixa de 1720 do arquivo (x 100 a 1820), centralizada. */
.lm-miolo { width: calc(1720 * var(--u)); margin-inline: auto; }

/* Título de seção: Neuton ExtraLight 130, caixa alta, linhas coladas. */
.lm-titulo {
	font-family: 'Neuton', serif;
	font-weight: 200;
	font-size: calc(130 * var(--u));
	line-height: 0.84;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Kicker: DM Sans SemiBold 20, tracking de 300/1000em, caixa alta. */
.lm-kicker {
	font-weight: 600;
	font-size: calc(20 * var(--u));
	letter-spacing: 0.3em;
	line-height: 1.6;
	text-transform: uppercase;
}

.lm-negrito { font-weight: 700; }

p + p { margin-top: 1em; }

.lm-centro { text-align: center; }

/* Botão azul do arquivo: 75 de altura, raio 30, rótulo em caixa alta. */
.lm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(75 * var(--u));
	padding-inline: calc(48 * var(--u));
	border-radius: calc(30 * var(--u));
	background: var(--azul);
	color: var(--creme);
	font-weight: 600;
	font-size: calc(20 * var(--u));
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}
.lm-btn:hover {
	background: #37505f;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(38, 17, 15, 0.18);
}

/* Bola que abre as notas do hero. */
.lm-bola {
	display: inline-block;
	width: calc(11 * var(--u));
	height: calc(11 * var(--u));
	border-radius: 50%;
	background: currentColor;
	margin-right: calc(14 * var(--u));
	vertical-align: baseline;
}

/* Revelação ao rolar. */
.lm-revela {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lm-revela.lm-vis { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.lm-revela { opacity: 1; transform: none; transition: none; }
	.lm-hero-foto img,
	.lm-hero-marca svg path,
	.lm-hero-titulo .lm-linha > span,
	.lm-hero-nota-direita,
	.lm-hero-nota-direita .lm-bola,
	.lm-selo-svg,
	.lm-selo-svg path,
	.lm-hero-nota-direita .lm-nota-miolo,
	.lm-hero-nota-esquerda > p,
	.lm-hero-nota-esquerda .lm-btn,
	[data-lm-hero-passo] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
	.lm-hero-dica { display: none; }
}

/* Grão sutil por cima de tudo, na linha editorial das outras peças da marca. */
body.lm-body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 96;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- selo fixo */

.lm-selo {
	position: fixed;
	right: calc(55 * var(--u));
	bottom: calc(45 * var(--u));
	width: calc(174 * var(--u));
	z-index: 100;
	filter: drop-shadow(0 10px 24px rgba(38, 17, 15, 0.28));
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0;
	animation: lm-selo-entra 0.8s ease 1.9s forwards;
}
.lm-selo:hover { transform: scale(1.07) rotate(6deg); }
.lm-selo-svg {
	width: 100%;
	height: auto;
	overflow: visible;
	transform: scale(0.7) rotate(-10deg);
	transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s;
}
body.lm-entrada .lm-selo-svg { transform: none; }

/* Os grupos do Illustrator trazem clip-paths retangulares que decapitavam a
   pedra girada; inline, podemos desligá-los sem perda. */
.lm-selo-svg g { clip-path: none; }

/* Só a pedra escura do selo gira; o texto circular e a flor ficam parados. */
.lm-selo-svg path[fill='#26110f'] {
	transform-box: fill-box;
	transform-origin: center;
	animation: lm-selo-gira 26s linear infinite;
}
/* O from explícito importa: de none para rotate(360deg) o navegador
   interpola por matriz, e a matriz de 360° é a identidade — nada gira. */
@keyframes lm-selo-gira {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes lm-selo-entra { to { opacity: 1; } }

/* ----------------------------------------------------------------- hero */

/* A seção guarda espaço para a coreografia: a foto (1935 de altura no
   arquivo) fica presa na tela enquanto os textos entram, e o excedente
   dela rola antes de liberar o resto da página. */
.lm-hero { position: relative; height: calc(1935 * var(--u) + 90vh); }

.lm-hero-palco {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

/* O rolo carrega a composição inteira (foto + textos por cima) e é ele que
   desliza na fase final da coreografia. */
.lm-hero-rolo {
	position: relative;
	height: calc(1935 * var(--u));
	transform: translateY(var(--lm-hero-desloc, 0px));
	will-change: transform;
}

.lm-hero-foto img {
	width: 100%;
	height: auto;
}

.lm-hero-marca {
	position: absolute;
	top: calc(40 * var(--u));
	right: calc(88 * var(--u));
	display: flex;
	align-items: flex-start;
	gap: calc(14 * var(--u));
}
.lm-hero-marca > svg:first-child { width: calc(268 * var(--u)); height: auto; }
.lm-hero-marca-icone { width: calc(46 * var(--u)); height: auto; }

.lm-hero-titulo {
	position: absolute;
	left: calc(100 * var(--u));
	top: calc(233 * var(--u));
	width: max-content;
	font-family: 'Neuton', serif;
	font-weight: 200;
	font-size: calc(80 * var(--u));
	line-height: 1.0;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.lm-hero-nota {
	position: absolute;
	font-weight: 600;
	font-size: calc(20 * var(--u));
	line-height: 1.3;
	text-transform: uppercase;
}
.lm-hero-nota-direita {
	left: calc(1271 * var(--u));
	top: calc(550 * var(--u));
	width: calc(330 * var(--u));
}
.lm-hero-nota-esquerda {
	left: calc(100 * var(--u));
	top: calc(1240 * var(--u));
	width: calc(285 * var(--u));
	font-weight: 700;
}
.lm-hero-nota-esquerda .lm-btn { margin-top: calc(36 * var(--u)); }
.lm-hero-p2 .lm-hero-nota-esquerda .lm-btn {
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s, transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

/* ------------------- entrada coreografada do topo -------------------
   Cada peça chega na sua vez, quando o body ganha .lm-entrada:
   foto (zoom lento) → letras do logo → linhas do título (máscara) →
   nota da direita (bola + texto) → selo → indicador de rolagem.
   A nota da esquerda continua entrando com o deslize da foto (passo 2). */

.lm-hero-foto img { opacity: 0; transform-origin: 50% 18%; }
body.lm-entrada .lm-hero-foto img {
	animation: lm-foto-entra 2.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lm-foto-entra {
	from { opacity: 0; transform: scale(1.07); }
	to { opacity: 1; transform: none; }
}

/* As letras do lockup (L, I, V, R, A, M, E e a flor) pingam em sequência. */
.lm-hero-marca svg path {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
body.lm-entrada .lm-hero-marca svg path { opacity: 1; transform: none; }
.lm-hero-marca svg path:nth-of-type(1) { transition-delay: 0.35s; }
.lm-hero-marca svg path:nth-of-type(2) { transition-delay: 0.43s; }
.lm-hero-marca svg path:nth-of-type(3) { transition-delay: 0.51s; }
.lm-hero-marca svg path:nth-of-type(4) { transition-delay: 0.59s; }
.lm-hero-marca svg path:nth-of-type(5) { transition-delay: 0.67s; }
.lm-hero-marca svg path:nth-of-type(6) { transition-delay: 0.75s; }
.lm-hero-marca svg path:nth-of-type(7) { transition-delay: 0.83s; }
.lm-hero-marca svg path:nth-of-type(8) { transition-delay: 0.91s; }
.lm-hero-marca svg path:nth-of-type(9) { transition-delay: 0.99s; }

/* O título sobe linha a linha, cada uma dentro da própria máscara. */
.lm-hero-titulo .lm-linha { display: block; overflow: hidden; }
.lm-hero-titulo .lm-linha > span {
	display: block;
	transform: translateY(112%);
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
body.lm-entrada .lm-hero-titulo .lm-linha > span { transform: none; }
.lm-hero-titulo .lm-linha:nth-child(1) > span { transition-delay: 0.55s; }
.lm-hero-titulo .lm-linha:nth-child(2) > span { transition-delay: 0.67s; }
.lm-hero-titulo .lm-linha:nth-child(3) > span { transition-delay: 0.79s; }
.lm-hero-titulo .lm-linha:nth-child(4) > span { transition-delay: 0.91s; }

/* Camada de texto com parallax: título, logo e notas derivam para cima com a
   rolagem (fase presa) e andam ~15% mais devagar que a foto no deslize,
   criando profundidade. O drift vem do JS via --lm-drift. */
.lm-hero-titulo,
.lm-hero-marca,
.lm-hero-nota-direita,
.lm-hero-nota-esquerda { transform: translateY(var(--lm-drift, 0px)); }

/* A nota da direita sobe com a rolagem (passo 1): o gate fica no miolo,
   para não brigar com o transform do drift no contêiner. */
.lm-hero-nota-direita .lm-nota-miolo {
	display: block;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lm-hero-nota-direita .lm-bola {
	transform: scale(0);
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
.lm-hero-p1 .lm-hero-nota-direita .lm-nota-miolo { opacity: 1; transform: none; }
.lm-hero-p1 .lm-hero-nota-direita .lm-bola { transform: scale(1); }

/* Indicador de rolagem: aparece por último e some na primeira rolagem. */
.lm-hero-dica {
	position: absolute;
	left: 50%;
	bottom: calc(38 * var(--u));
	transform: translateX(-50%);
	width: calc(35 * var(--u));
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}
body.lm-entrada .lm-hero:not(.lm-rolando) .lm-hero-dica { opacity: 0.85; transition-delay: 2.3s; }
.lm-hero.lm-rolando .lm-hero-dica { opacity: 0; transition-delay: 0s; }
.lm-hero-dica svg { width: 100%; height: auto; animation: lm-dica-salta 2.2s ease-in-out infinite; }
@keyframes lm-dica-salta {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(9px); }
}

/* A nota da esquerda entra com o deslize da composição (fase final):
   primeiro o texto, depois o botão. */
.lm-hero-nota-esquerda > p,
.lm-hero-nota-esquerda .lm-btn {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lm-hero-nota-esquerda .lm-btn { transition-delay: 0.18s; }
.lm-hero-p2 .lm-hero-nota-esquerda > p,
.lm-hero-p2 .lm-hero-nota-esquerda .lm-btn { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- o nome */

.lm-nome { padding-top: calc(263 * var(--u)); }

.lm-nome-grade {
	display: grid;
	grid-template-columns: calc(868 * var(--u)) calc(590 * var(--u));
	align-items: center;
}

.lm-nome-marca {
	display: flex;
	align-items: flex-start;
	gap: calc(18 * var(--u));
	margin-left: calc(250 * var(--u));
}
.lm-nome-marca > svg:first-child { width: calc(400 * var(--u)); height: auto; }
.lm-nome-marca-icone { width: calc(56 * var(--u)); height: auto; }

.lm-nome-cartao {
	background: var(--creme);
	border-radius: calc(70 * var(--u));
	padding: calc(88 * var(--u)) calc(64 * var(--u)) calc(74 * var(--u));
}
.lm-nome-cartao .lm-negrito { margin-top: calc(28 * var(--u)); }
.lm-nome-cartao p:last-child { margin-top: calc(24 * var(--u)); }

/* --------------------------------------- por que estou fazendo isso */

.lm-porque { padding-top: calc(397 * var(--u)); }

.lm-porque-titulo { position: relative; margin-left: calc(262 * var(--u)); }
.lm-porque-titulo span { display: block; }
.lm-porque-l2 { margin-left: calc(404 * var(--u)); }
.lm-porque-icone {
	position: absolute;
	left: calc(-152 * var(--u));
	top: calc(52 * var(--u));
	width: calc(66 * var(--u));
}
.lm-porque-icone svg { width: 100%; height: auto; }

.lm-porque-grade {
	display: grid;
	grid-template-columns: calc(549 * var(--u)) 1fr;
	gap: calc(117 * var(--u));
	margin-top: calc(25 * var(--u));
}

.lm-porque-foto img {
	width: 100%;
	height: calc(768 * var(--u));
	object-fit: cover;
	border-radius: calc(70 * var(--u));
}

.lm-porque-colunas > div:last-child { margin-top: calc(104 * var(--u)); }

.lm-porque-colunas {
	display: grid;
	grid-template-columns: calc(364 * var(--u)) calc(364 * var(--u));
	gap: calc(40 * var(--u));
	margin-top: calc(50 * var(--u));
}

/* ------------------------------------------------------------ a jornada */

.lm-jornada { padding-top: calc(214 * var(--u)); }

.lm-jornada-titulo { position: relative; margin-left: calc(262 * var(--u)); }
.lm-jornada-icone {
	position: absolute;
	right: calc(180 * var(--u));
	top: calc(-20 * var(--u));
	width: calc(66 * var(--u));
	display: inline-block;
}
.lm-jornada-icone svg { width: 100%; height: auto; }

.lm-jornada-intro {
	display: grid;
	grid-template-columns: calc(364 * var(--u)) calc(364 * var(--u)) calc(364 * var(--u));
	gap: calc(40 * var(--u));
	margin-left: calc(262 * var(--u));
	margin-top: calc(46 * var(--u));
}

.lm-jornada-chamada {
	text-align: center;
	font-weight: 700;
	margin-top: calc(50 * var(--u));
}

.lm-jornada-grade {
	display: grid;
	grid-template-columns: repeat(3, calc(388 * var(--u)));
	column-gap: calc(16 * var(--u));
	row-gap: calc(39 * var(--u));
	justify-content: center;
	margin-top: calc(32 * var(--u));
}

.lm-jornada-cartao {
	position: relative;
	height: calc(346 * var(--u));
	background: var(--creme);
	border-radius: calc(70 * var(--u));
	padding: calc(55 * var(--u)) calc(50 * var(--u)) calc(40 * var(--u)) calc(132 * var(--u));
}

.lm-jornada-evento { display: flex; gap: calc(25 * var(--u)); margin-left: calc(-54 * var(--u)); line-height: 1.25; }
.lm-jornada-cal { width: calc(29 * var(--u)); flex: none; margin-top: calc(2 * var(--u)); }
.lm-jornada-cal svg { width: 100%; height: auto; }

.lm-jornada-livro {
	position: absolute;
	left: calc(132 * var(--u));
	bottom: calc(46 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: 1.3;
}
.lm-jornada-livro { max-width: calc(175 * var(--u)); }
.lm-jornada-livro strong { display: block; font-weight: 700; text-transform: uppercase; }

.lm-jornada-mes {
	position: absolute;
	left: calc(55 * var(--u));
	bottom: calc(48 * var(--u));
	font-weight: 700;
	font-size: calc(22 * var(--u));
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* --------------------------------------------------------- temporada #1 */

.lm-temporada { padding-top: calc(160 * var(--u)); text-align: center; }

.lm-temporada-icone { display: inline-block; width: calc(66 * var(--u)); }
.lm-temporada-icone svg { width: 100%; height: auto; }
.lm-temporada-kicker { margin-top: calc(40 * var(--u)); }
.lm-temporada .lm-titulo { margin-top: calc(10 * var(--u)); }

.lm-temporada-intro { width: calc(712 * var(--u)); margin: calc(38 * var(--u)) auto 0; }
.lm-temporada-intro + .lm-temporada-intro { width: calc(590 * var(--u)); margin-top: calc(20 * var(--u)); }

/* Acordeão de largura: a fileira tem a largura fixa do arquivo e cada carta
   divide o espaço por flex; a carta sob o mouse cresce e as vizinhas cedem. */
.lm-livros {
	display: flex;
	gap: calc(16 * var(--u));
	width: calc(1196 * var(--u));
	margin: calc(142 * var(--u)) auto 0;
	text-align: left;
}

.lm-livro {
	flex: 1 1 0;
	min-width: 0;
	transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.lm-livro:hover { flex-grow: 1.75; }

.lm-livro-carta { position: relative; }

.lm-livro-foto {
	width: 100%;
	height: calc(720 * var(--u));
	object-fit: cover;
	border-radius: calc(70 * var(--u));
}

.lm-livro-capa {
	position: absolute;
	left: 50%;
	top: calc(526 * var(--u));
	width: calc(197 * var(--u));
	max-width: none;
	transform: translateX(-50%);
	box-shadow: 0 calc(18 * var(--u)) calc(38 * var(--u)) rgba(38, 17, 15, 0.3);
}

.lm-livro-titulo {
	margin-top: calc(153 * var(--u));
	font-size: calc(15 * var(--u));
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
	text-align: center;
}
.lm-livro-titulo span {
	display: block;
	font-weight: 300;
	font-size: calc(16 * var(--u));
	text-transform: none;
	text-align: center;
}

.lm-temporada-fecho { width: calc(700 * var(--u)); margin: calc(80 * var(--u)) auto 0; }
.lm-temporada .lm-centro { margin-top: calc(52 * var(--u)); }

/* ---------------------------------------------------------- para quem é */

.lm-paraquem { position: relative; margin-top: calc(257 * var(--u)); }

.lm-paraquem-grade { position: relative; height: calc(1126 * var(--u)); }

.lm-paraquem-kicker { position: absolute; left: calc(262 * var(--u)); top: calc(57 * var(--u)); }

.lm-paraquem-livra {
	position: absolute;
	left: calc(262 * var(--u));
	top: calc(148 * var(--u));
	width: calc(390 * var(--u));
}
.lm-paraquem-livra svg { width: 100%; height: auto; }

.lm-paraquem-me {
	position: absolute;
	left: calc(1282 * var(--u));
	top: calc(167 * var(--u));
	width: calc(176 * var(--u));
}
.lm-paraquem-me svg { width: 100%; height: auto; }

.lm-paraquem-foto {
	position: absolute;
	left: calc(713 * var(--u));
	top: 0;
	width: calc(644 * var(--u));
}
.lm-paraquem-foto img {
	width: 100%;
	height: calc(863 * var(--u));
	object-fit: cover;
	border-radius: calc(70 * var(--u));
}

.lm-paraquem-texto {
	position: absolute;
	left: calc(262 * var(--u));
	top: calc(316 * var(--u));
	width: calc(390 * var(--u));
}
.lm-paraquem-texto > div { margin-top: calc(26 * var(--u)); }
.lm-paraquem-texto .lm-btn { margin-top: calc(46 * var(--u)); }

/* ------------------------------------------------------- o investimento */

.lm-investimento { padding-top: 0; }

.lm-investimento-cartao {
	width: calc(1720 * var(--u));
	margin-inline: auto;
	background: var(--menta);
	border-radius: calc(70 * var(--u));
	padding: calc(156 * var(--u)) 0 calc(155 * var(--u));
	text-align: center;
}

.lm-investimento-pill {
	display: inline-flex;
	align-items: center;
	height: calc(45 * var(--u));
	padding-inline: calc(34 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--pill);
	color: var(--azul);
	font-weight: 600;
	font-size: calc(16 * var(--u));
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.lm-investimento-10x {
	font-family: 'Neuton', serif;
	font-weight: 300;
	font-size: calc(60 * var(--u));
	line-height: 1;
	margin-top: calc(28 * var(--u));
}

.lm-investimento-preco {
	font-family: 'Neuton', serif;
	font-weight: 200;
	font-size: calc(130 * var(--u));
	line-height: 1;
	margin-top: calc(6 * var(--u));
}

.lm-investimento-avista {
	font-weight: 700;
	font-size: calc(20 * var(--u));
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-top: calc(22 * var(--u));
}

.lm-investimento-tres {
	display: grid;
	grid-template-columns: repeat(3, calc(388 * var(--u)));
	gap: calc(16 * var(--u));
	justify-content: center;
	margin-top: calc(75 * var(--u));
}

.lm-investimento-icone {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: calc(74 * var(--u));
	margin-bottom: calc(38 * var(--u));
}
.lm-investimento-icone svg { width: auto; }
.lm-investimento-tres li:nth-child(1) .lm-investimento-icone svg { height: calc(44 * var(--u)); }
.lm-investimento-tres li:nth-child(2) .lm-investimento-icone svg { height: calc(62 * var(--u)); }
.lm-investimento-tres li:nth-child(3) .lm-investimento-icone svg { height: calc(66 * var(--u)); }

.lm-investimento-tres .lm-negrito { font-size: calc(18 * var(--u)); line-height: 1.35; }
.lm-investimento-tres p + p { margin-top: calc(14 * var(--u)); }

.lm-investimento-cartao .lm-centro { margin-top: calc(40 * var(--u)); }

/* ------------------------------------------------------------- quem sou */

.lm-quemsou { padding-top: calc(189 * var(--u)); text-align: center; }

.lm-quemsou-icone { display: inline-block; width: calc(66 * var(--u)); }
.lm-quemsou-icone svg { width: 100%; height: auto; }
.lm-quemsou .lm-titulo { margin-top: calc(36 * var(--u)); }
.lm-quemsou-kicker { margin-top: calc(28 * var(--u)); font-size: calc(20 * var(--u)); }

.lm-quemsou-grade {
	display: grid;
	grid-template-columns: calc(430 * var(--u)) calc(691 * var(--u));
	gap: calc(75 * var(--u));
	justify-content: center;
	margin-top: calc(100 * var(--u));
	text-align: left;
}

.lm-quemsou-foto img {
	width: 100%;
	height: calc(1037 * var(--u));
	object-fit: cover;
	border-radius: calc(70 * var(--u));
}

/* ------------------------------------------------------------------ FAQ */

.lm-faq {
	background: var(--creme);
	margin-top: calc(263 * var(--u));
	padding: calc(173 * var(--u)) 0 calc(320 * var(--u));
}

.lm-faq-titulo {
	position: relative;
	margin-left: calc(375 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(58 * var(--u));
}
.lm-faq-icone { width: calc(70 * var(--u)); }
.lm-faq-icone svg { width: 100%; height: auto; }

.lm-faq-lista {
	width: calc(1196 * var(--u));
	margin-left: calc(260 * var(--u));
	margin-top: calc(96 * var(--u));
	display: grid;
	gap: calc(17 * var(--u));
}

.lm-faq-item {
	background: var(--bege);
	border: 1px solid var(--borda-faq);
	border-radius: calc(20 * var(--u));
	overflow: hidden;
}

.lm-faq-pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(30 * var(--u));
	width: 100%;
	min-height: calc(81 * var(--u));
	padding: calc(18 * var(--u)) calc(28 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u));
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: inherit;
	font-family: inherit;
	font-weight: 600;
	font-size: calc(26 * var(--u));
	line-height: 1.2;
}

.lm-faq-seta { width: calc(35 * var(--u)); flex: none; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.lm-faq-seta svg { width: 100%; height: auto; }
.lm-faq-item.lm-aberto .lm-faq-seta { transform: rotate(180deg); }

.lm-faq-resposta {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.lm-faq-resposta > p {
	overflow: hidden;
	min-height: 0;
	padding-inline: calc(32 * var(--u)) calc(120 * var(--u));
}
.lm-faq-item.lm-aberto .lm-faq-resposta { grid-template-rows: 1fr; }
.lm-faq-item.lm-aberto .lm-faq-resposta > p { padding-bottom: calc(30 * var(--u)); }

/* --------------------------------------------------------------- rodapé */

/* Cortina: o rodapé real fica fixo ao viewport, atrás do main; a tag
   <footer> é só uma janela com recorte que o revela conforme a página
   termina — o conteúdo sobe como um pano descobrindo o rodapé parado. */
.lm-rodape {
	position: relative;
	height: calc(1080 * var(--u));
	clip-path: inset(0 0 0 0);
}

.lm-rodape-fixo {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

.lm-rodape-marca {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: calc(16 * var(--u));
}
.lm-rodape-marca > svg:first-child { width: calc(306 * var(--u)); height: auto; }
.lm-rodape-marca-icone { width: calc(58 * var(--u)); height: auto; }

.lm-rodape-foto { position: relative; }
.lm-rodape-foto img {
	width: 100%;
	height: calc(1080 * var(--u));
	object-fit: cover;
}

.lm-rodape-dados {
	position: absolute;
	left: calc(100 * var(--u));
	bottom: calc(60 * var(--u));
	font-weight: 500;
	font-size: calc(16 * var(--u));
	line-height: 1.5;
}

.lm-rodape-logos {
	display: flex;
	align-items: center;
	gap: calc(40 * var(--u));
	margin-top: calc(28 * var(--u));
}
.lm-rodape-logos svg { height: calc(20 * var(--u)); width: auto; }

/* =================================================================== */
/* ======================= PRANCHETA DE CELULAR ====================== */
/* =================================================================== */

@media (max-width: 767px) {

	.lm-so-desktop { display: none !important; }
	.lm-so-movel { display: block; }

	body.lm-body { font-size: calc(18 * var(--um)); }

	.lm-miolo { width: calc(350 * var(--um)); }

	.lm-titulo { font-size: calc(40 * var(--um)); line-height: 0.95; }
	.lm-kicker { font-size: calc(16 * var(--um)); letter-spacing: 0.2em; }

	.lm-btn {
		height: calc(75 * var(--um));
		width: calc(348 * var(--um));
		padding-inline: 0;
		border-radius: calc(30 * var(--um));
		font-size: calc(20 * var(--um));
	}

	.lm-bola { width: calc(9 * var(--um)); height: calc(9 * var(--um)); margin-right: calc(12 * var(--um)); }

	/* selo fixo */
	.lm-selo { right: calc(16 * var(--um)); bottom: calc(16 * var(--um)); width: calc(88 * var(--um)); }

	/* hero: no celular a foto tem 618 de altura e os textos correm abaixo. */
	.lm-hero { height: auto; }
	.lm-hero-palco { position: relative; height: calc(618 * var(--um)); }
	.lm-hero-rolo { position: relative; height: 100%; transform: none; }
	/* Véu que garante a leitura do logo e do título: vive DENTRO da foto
	   (acima da imagem, abaixo dos textos — o rolo tem transform e vira um
	   contexto de empilhamento, então um véu no palco cobriria tudo).
	   Cobre a lateral esquerda inteira, mais denso em cima. */
	.lm-hero-foto { position: relative; }
	.lm-hero-foto::after {
		content: '';
		position: absolute;
		inset: 0;
		background:
			linear-gradient(180deg, rgba(241, 233, 223, 0.7), rgba(241, 233, 223, 0) 38%),
			linear-gradient(100deg, rgba(241, 233, 223, 0.8) 0%, rgba(241, 233, 223, 0.4) 42%, rgba(241, 233, 223, 0) 68%);
		pointer-events: none;
	}
	.lm-hero-marca { z-index: 2; }
	.lm-hero-titulo { z-index: 2; }
	.lm-hero-foto { display: block; height: 100%; }
	/* A prancheta mostra mais paisagem, com a Karina na metade direita: a
	   imagem entra 22% mais larga, ancorada à esquerda (o palco corta a
	   sobra à direita), e o recorte vertical favorece o terço de cima. */
	.lm-hero-foto img { width: 138%; max-width: none; height: 100%; object-fit: cover; object-position: left 100%; }

	.lm-hero-marca { top: 0; right: auto; left: 0; gap: calc(10 * var(--um)); }
	.lm-hero-marca > svg:first-child { width: calc(118 * var(--um)); }
	.lm-hero-marca-icone { width: calc(30 * var(--um)); }

	.lm-hero-titulo {
		left: calc(20 * var(--um));
		top: calc(309 * var(--um));
		width: calc(205 * var(--um));
		font-size: calc(36 * var(--um));
	}

	[data-lm-hero-passo] { opacity: 1; transform: none; }
	.lm-hero-titulo, .lm-hero-marca, .lm-hero-nota-direita, .lm-hero-nota-esquerda { transform: none; }
	.lm-hero-nota-direita .lm-nota-miolo, .lm-hero-nota-esquerda > p, .lm-hero-nota-esquerda .lm-btn { opacity: 1; transform: none; }
	.lm-hero-titulo .lm-linha, .lm-hero-titulo .lm-linha > span { display: inline; transform: none; transition: none; }
	.lm-hero-titulo { opacity: 0; transform: translateY(20px); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; }
	body.lm-entrada .lm-hero-titulo { opacity: 1; transform: none; }
	.lm-hero-dica { display: none; }

	.lm-hero-movel { padding: calc(47 * var(--um)) calc(20 * var(--um)) 0; }
	.lm-hero-movel-kicker {
		font-weight: 600;
		font-size: calc(16 * var(--um));
		text-transform: uppercase;
		margin-bottom: calc(14 * var(--um));
	}
	.lm-hero-movel .lm-btn { margin-top: calc(36 * var(--um)); }

	/* o nome */
	.lm-nome { padding-top: calc(62 * var(--um)); }
	.lm-nome-grade { display: block; width: 100vw; margin-left: calc(50% - 50vw); }
	.lm-nome-marca { display: none; }
	.lm-nome-cartao {
		border-radius: calc(70 * var(--um));
		padding: calc(53 * var(--um)) calc(34 * var(--um)) calc(60 * var(--um));
		text-align: center;
	}

	/* por que */
	.lm-porque { padding-top: calc(120 * var(--um)); }
	.lm-porque-titulo { margin-left: 0; }
	.lm-porque-titulo .lm-porque-l2 { margin-left: calc(111 * var(--um)); }
	.lm-porque-icone { position: static; display: block; width: calc(40 * var(--um)); margin-bottom: calc(24 * var(--um)); }
	.lm-porque-grade { display: block; margin-top: calc(51 * var(--um)); }
	.lm-porque-texto { display: contents; }
	.lm-porque-texto .lm-kicker { display: block; margin-bottom: calc(30 * var(--um)); }
	.lm-porque-colunas { display: block; margin-top: 0; }
	.lm-porque-foto { width: 100vw; margin-left: calc(50% - 50vw); }
	.lm-porque-foto img { height: calc(535 * var(--um)); border-radius: calc(70 * var(--um)); }
	.lm-porque-colunas > div:first-child { margin-top: calc(42 * var(--um)); }
	.lm-porque-foto-b { margin-top: calc(45 * var(--um)); margin-bottom: calc(42 * var(--um)); }

	/* No arquivo de celular a segunda foto entra entre as duas colunas de
	   texto; aqui a ordem do DOM é foto A, foto B, textos — o grid do
	   desktop vira fluxo e a foto B é reposicionada por order via flex. */
	.lm-porque-grade { display: flex; flex-direction: column; }
	.lm-porque-colunas { display: contents; }
	.lm-porque-foto { order: 1; }
	.lm-porque-texto .lm-kicker { order: 0; }
	.lm-porque-colunas > div:first-child { order: 2; }
	.lm-porque-foto-b { order: 3; }
	.lm-porque-colunas > div:last-child { order: 4; margin-top: 0; }
	.lm-porque-titulo .lm-porque-l2 { white-space: nowrap; }

	/* jornada */
	.lm-jornada { padding-top: calc(120 * var(--um)); }
	.lm-jornada-titulo { margin-left: 0; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: calc(24 * var(--um)); }
	.lm-jornada-icone { position: static; display: block; width: calc(40 * var(--um)); margin-bottom: calc(24 * var(--um)); }
	.lm-jornada-intro { display: block; margin-left: 0; margin-top: calc(36 * var(--um)); }
	.lm-jornada-intro p + p { margin-top: calc(28 * var(--um)); }
	.lm-jornada-chamada { margin-top: calc(60 * var(--um)); font-size: calc(16 * var(--um)); }
	.lm-jornada-grade {
		grid-template-columns: 100vw;
		row-gap: calc(17 * var(--um));
		margin-left: calc(50% - 50vw);
		margin-top: calc(22 * var(--um));
	}
	.lm-jornada-cartao {
		height: calc(346 * var(--um));
		border-radius: calc(70 * var(--um));
		padding: calc(55 * var(--um)) calc(40 * var(--um)) calc(40 * var(--um)) calc(133 * var(--um));
	}
	.lm-jornada-cal { width: calc(29 * var(--um)); }
	.lm-jornada-evento { margin-left: calc(-78 * var(--um)); gap: calc(49 * var(--um)); }
	.lm-jornada-livro { left: calc(133 * var(--um)); bottom: calc(46 * var(--um)); font-size: calc(16 * var(--um)); max-width: calc(200 * var(--um)); }
	.lm-jornada-mes { left: calc(56 * var(--um)); bottom: calc(48 * var(--um)); font-size: calc(22 * var(--um)); }

	/* temporada */
	.lm-temporada { padding-top: calc(120 * var(--um)); }
	.lm-temporada-icone { width: calc(40 * var(--um)); }
	.lm-temporada-kicker { margin-top: calc(28 * var(--um)); }
	.lm-temporada-intro { width: 100%; margin-top: calc(30 * var(--um)); }
	.lm-temporada-intro + .lm-temporada-intro { width: 100%; }

	.lm-livros {
		flex-direction: column;
		width: 100%;
		gap: calc(80 * var(--um));
		margin-top: calc(80 * var(--um));
		text-align: left;
	}
	.lm-livro-composto { width: calc(287 * var(--um)); margin-inline: auto; }
	.lm-livro-titulo {
		width: calc(287 * var(--um));
		margin: calc(28 * var(--um)) auto 0;
		font-size: calc(15 * var(--um));
		white-space: normal;
		text-align: center;
	}
	.lm-livro-titulo span { font-size: calc(16 * var(--um)); }

	.lm-temporada-fecho { width: 100%; margin-top: calc(94 * var(--um)); }
	.lm-temporada .lm-centro { margin-top: calc(45 * var(--um)); }

	/* para quem */
	.lm-paraquem { margin-top: calc(110 * var(--um)); text-align: center; }
	.lm-paraquem-grade { height: auto; display: flex; flex-direction: column; align-items: center; }
	.lm-paraquem-kicker { position: static; }
	.lm-paraquem-livra { display: none; }
	.lm-paraquem-marca { display: block; width: calc(225 * var(--um)); margin-top: calc(40 * var(--um)); }
	.lm-paraquem-marca svg { width: 100%; height: auto; }
	.lm-paraquem-me { display: none; }
	.lm-paraquem-texto { position: static; width: 100%; }
	.lm-paraquem-texto .lm-negrito { margin-top: calc(40 * var(--um)); width: calc(318 * var(--um)); margin-inline: auto; }
	.lm-paraquem-foto { position: static; width: 100vw; order: 3; margin-top: calc(45 * var(--um)); }
	.lm-paraquem-foto img { height: calc(390 * var(--um)); border-radius: calc(70 * var(--um)); }
	.lm-paraquem-texto { display: contents; }
	.lm-paraquem-texto > div { order: 4; margin-top: calc(42 * var(--um)); text-align: left; }
	.lm-paraquem-texto .lm-btn { order: 5; margin-top: calc(40 * var(--um)); }

	/* investimento */
	.lm-investimento { padding-top: calc(46 * var(--um)); }
	.lm-investimento-cartao {
		width: calc(390 * var(--um));
		border-radius: calc(40 * var(--um));
		padding: calc(30 * var(--um)) calc(20 * var(--um)) calc(60 * var(--um));
	}
	.lm-investimento-pill { height: calc(40 * var(--um)); padding-inline: calc(24 * var(--um)); font-size: calc(16 * var(--um)); letter-spacing: 0.2em; border-radius: calc(16 * var(--um)); }
	.lm-investimento-10x { font-size: calc(60 * var(--um)); margin-top: calc(30 * var(--um)); }
	.lm-investimento-preco { font-size: calc(90 * var(--um)); }
	.lm-investimento-avista { font-size: calc(20 * var(--um)); margin-top: calc(8 * var(--um)); }
	.lm-investimento-tres { grid-template-columns: 1fr; gap: calc(70 * var(--um)); margin-top: calc(90 * var(--um)); }
	.lm-investimento-icone { height: calc(70 * var(--um)); margin-bottom: calc(30 * var(--um)); }
	.lm-investimento-tres li:nth-child(1) .lm-investimento-icone svg { height: calc(44 * var(--um)); }
	.lm-investimento-tres li:nth-child(2) .lm-investimento-icone svg { height: calc(62 * var(--um)); }
	.lm-investimento-tres li:nth-child(3) .lm-investimento-icone svg { height: calc(66 * var(--um)); }
	.lm-investimento-tres .lm-negrito { font-size: calc(18 * var(--um)); }
	.lm-investimento-tres p + p { margin-top: calc(14 * var(--um)); }
	.lm-investimento-cartao .lm-centro { margin-top: calc(80 * var(--um)); }

	/* quem sou */
	.lm-quemsou { padding-top: calc(120 * var(--um)); }
	.lm-quemsou-icone { width: calc(40 * var(--um)); }
	.lm-quemsou .lm-titulo { margin-top: calc(24 * var(--um)); }
	.lm-quemsou-kicker { font-size: calc(16 * var(--um)); }
	.lm-quemsou-grade { display: flex; flex-direction: column; margin-top: calc(50 * var(--um)); gap: 0; }

	/* No arquivo a foto entra no meio da bio; aqui ela fecha a seção. */
	.lm-quemsou-foto { width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(50 * var(--um)); }
	.lm-quemsou-foto img { height: calc(585 * var(--um)); border-radius: calc(70 * var(--um)); }

	/* FAQ */
	.lm-faq { margin-top: calc(110 * var(--um)); padding: calc(88 * var(--um)) 0 calc(110 * var(--um)); }
	.lm-faq-titulo { margin-left: 0; gap: 0; justify-content: space-between; }
	.lm-faq-icone { width: calc(44 * var(--um)); }
	.lm-faq-lista { width: 100%; margin-left: 0; margin-top: calc(58 * var(--um)); gap: calc(18 * var(--um)); }
	.lm-faq-item { border-radius: calc(20 * var(--um)); }
	.lm-faq-pergunta {
		min-height: calc(81 * var(--um));
		padding: calc(16 * var(--um)) calc(18 * var(--um)) calc(16 * var(--um)) calc(16 * var(--um));
		font-size: calc(18 * var(--um));
		gap: calc(16 * var(--um));
	}
	.lm-faq-seta { width: calc(30 * var(--um)); }
	.lm-faq-resposta > p { padding-inline: calc(22 * var(--um)) calc(30 * var(--um)); }
	.lm-faq-item.lm-aberto .lm-faq-resposta > p { padding-bottom: calc(26 * var(--um)); }

	/* rodapé: no celular a cortina sai de cena e volta o fluxo normal */
	.lm-rodape { height: auto; clip-path: none; padding-top: 0; }
	.lm-rodape-fixo { position: static; }
	.lm-rodape-marca {
		position: static;
		margin: calc(110 * var(--um)) 0 calc(70 * var(--um)) calc(75 * var(--um));
		gap: calc(12 * var(--um));
	}
	.lm-rodape-marca > svg:first-child { width: calc(200 * var(--um)); }
	.lm-rodape-marca-icone { width: calc(46 * var(--um)); }
	.lm-rodape-foto img { height: calc(527 * var(--um)); border-radius: calc(70 * var(--um)); }
	.lm-rodape-foto .lm-rodape-dados { display: none; }
	.lm-rodape-dados-movel {
		position: static;
		text-align: center;
		padding: calc(45 * var(--um)) 0 calc(55 * var(--um));
		font-size: calc(16 * var(--um));
	}
	.lm-rodape-dados-movel .lm-rodape-logos { justify-content: center; margin-top: calc(24 * var(--um)); }
	.lm-rodape-logos svg { height: calc(18 * var(--um)); }
}