/* Estudo da LP, iteração 5 sobre a arquitetura versão 4. Fora do DS. Detalhe em /Users/fabriciotosta/lisix/docs/estudos/lp-v5.md */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
	/* Paleta da marca: as cores medidas no quadro 2133:2992 do Figma (docs/marca/identidade-visual.md). */
	--principal: #362413;
	--profundidade: #1b140b;
	--apoio: #6a4f34;
	--destaque: #b49a75;
	--claro: #efefef;

	/* Os escuros neutros (docs/estudos/lp-v7.md): o marrom não pinta superfície grande. Croma de 0,005 a 0,006 no matiz
	   da marca, perto da Obsidiana das diretrizes. A tinta é o fundo escuro e o texto no claro; a tinta alta, o vidro. */
	--tinta: #141210;
	--tinta-alta: #1e1b19;

	/* Grão: um só, gerado por grao.js (um valor por pixel físico, parado). A força é a opacidade por superfície.
	   Calibrado pelo Daylight (playbook/relatorios/referencia-daylight.md): lá o desvio é 1,62 de 255 no creme e de 4 a 7
	   no escuro. Aqui, medido em captura 2x: cerca de 3,5 no escuro, 4 no vidro e 1,5 no papel. */
	--grao-fundo: 0.034;
	--grao-vidro: 0.065;
	--grao-painel: 0.07;
	--grao-papel: 0.018;

	/* Vidro do estudo de raios, para placas (painel e mídia). Opacidade 0,9: sobre a luz, o texto só fecha 4,5:1 a partir daí.
	   A barra tem o vidro próprio, mais fino: ver "0. Navegação". */
	--vidro-desfoque: 22px;
	--vidro-opacidade: 0.9;
	--vidro-saturacao: 1.2;

	/* Tipografia. A família é pedida pelo nome da marca; sem ela instalada, cai no substituto do sistema.
	   Neue Haas: Helvetica Neue, do mesmo desenho. Neotechnica: DIN Condensed, condensada e geométrica. */
	--font-sans: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text", "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-display: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display", "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-marca: "Neotechnica C50XS", "Neotechnica", "DIN Condensed", "Arial Narrow", sans-serif;

	/* Escala de vitrine, hipótese do estudo. */
	--t-enunciado: clamp(36px, 4.6vw, 64px);
	--t-abertura: clamp(36px, 4.4vw, 64px);
	--t-titulo: clamp(28px, 2.8vw, 40px);
	--t-subtitulo: 22px;
	--t-apoio: 18px;
	--t-corpo: 16px;
	--t-pequeno: 13px;
	--t-rotulo: 15px;

	/* Grade e espaço da arquitetura v4. */
	--margem: 32px;
	--calha: 24px;
	--conteudo: 1152px;
	--entrada-capitulo: 192px;
	--entrada-faixa: 128px;
	--pausa-pilares: 96px;
	--leitura: min(576px, 72ch);

	--barra-topo: 12px;
	--barra-altura: 48px;

	/* Tempos e curvas do DS, como no seletor do estudo de raios. */
	--duration-alternar: 160ms;
	--duration-revelar: 240ms;
	/* A barra que sai e volta: a transição medida na Oura (playbook/relatorios/referencia-oura.md). */
	--duration-barra: 500ms;
	--easing-barra: cubic-bezier(0.4, 0, 0.2, 1);
	--easing-entrada: cubic-bezier(0.16, 1, 0.3, 1);
	--easing-padrao: cubic-bezier(0.22, 1, 0.36, 1);
	--spring-realce-duracao: 610ms;
	--spring-realce-curva: linear(0, 0.0213, 0.0739, 0.1443, 0.2235, 0.305, 0.3849, 0.4606, 0.5305, 0.594, 0.6508, 0.7011, 0.7452, 0.7836, 0.8168, 0.8454, 0.8699, 0.8907, 0.9084, 0.9234, 0.9361, 0.9467, 0.9557, 0.9632, 0.9694, 0.9747, 0.979, 0.9826, 0.9857, 0.9882, 0.9902, 0.992, 0.9934, 0.9946, 0.9955, 0.9963, 1);

	color-scheme: dark;
}
@media (max-width: 1023px) {
	:root {
		--margem: 24px;
	}
}
@media (max-width: 760px) {
	:root {
		--margem: 16px;
		--entrada-capitulo: 96px;
		--entrada-faixa: 64px;
		--pausa-pilares: 64px;
	}
}

/* ── Papéis de cor: o tema mora na superfície (docs/estudos/lp-v7.md) ──
   Os componentes só usam papéis. O escuro é o padrão; .papel redefine os mesmos papéis para o claro.
   Um papel derivado (color-mix) é resolvido onde é declarado: por isso cada superfície declara todos. */
:root,
html[data-fundo="escuro"] .papel {
	--fundo: var(--tinta);
	--fundo-elevado: var(--tinta-alta);
	--texto: var(--claro);
	--texto-apoio: color-mix(in srgb, var(--claro) 64%, var(--tinta)); /* 7,08:1 */
	--fio: color-mix(in srgb, var(--claro) 14%, transparent);
	--fio-forte: color-mix(in srgb, var(--claro) 26%, transparent);
	--acento: var(--destaque); /* 6,96:1 */
}
.papel {
	--fundo: var(--claro);
	--fundo-elevado: var(--claro);
	--texto: var(--tinta);
	--texto-apoio: color-mix(in srgb, var(--tinta) 72%, var(--claro)); /* 7,00:1 */
	--fio: color-mix(in srgb, var(--tinta) 14%, transparent);
	--fio-forte: color-mix(in srgb, var(--tinta) 30%, transparent);
	--acento: var(--apoio); /* 6,57:1 */
}

/* ── Base ───────────────────────────────────────────────────── */
* {
	box-sizing: border-box;
}
html {
	background: var(--fundo);
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--barra-topo) + var(--barra-altura) + 24px);
}
body {
	margin: 0;
	color: var(--texto);
	font: 400 var(--t-corpo) / 1.5 var(--font-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p {
	margin: 0;
}
h1,
h2,
h3 {
	text-wrap: balance;
}
p {
	text-wrap: pretty;
}
a {
	color: inherit;
}
:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
}
[tabindex="-1"]:focus {
	outline: none;
}
[hidden] {
	display: none !important;
}
.so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Grade ──────────────────────────────────────────────────── */
.conteudo {
	width: min(100%, calc(var(--conteudo) + 2 * var(--margem)));
	margin: 0 auto;
	padding: 0 var(--margem);
}
.grade {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--calha);
}
@media (max-width: 1023px) {
	.grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 760px) {
	.grade {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Texto ──────────────────────────────────────────────────── */
/* A primária da marca só em chamada curta, em caixa-alta: rótulo e número. Nunca em frase. */
.rotulo {
	font: 400 var(--t-rotulo) / 1 var(--font-marca);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acento);
}
.titulo {
	font: 300 var(--t-titulo) / 1.1 var(--font-display);
	letter-spacing: -0.02em;
}
.apoio {
	color: var(--texto-apoio);
	font-size: var(--t-apoio);
	line-height: 1.5;
}

/* ── Botões ─────────────────────────────────────────────────── */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--destaque);
	color: var(--tinta);
	font: 500 var(--t-corpo) / 1 var(--font-sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duration-alternar) var(--easing-padrao);
}
.botao:hover {
	background: color-mix(in srgb, var(--destaque) 86%, var(--claro));
}
.botao-secundario {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--fio-forte);
	color: var(--texto);
	font: 500 var(--t-corpo) / 1 var(--font-sans);
	text-decoration: none;
	transition: box-shadow var(--duration-alternar) var(--easing-padrao);
}
.botao-secundario:hover {
	box-shadow: inset 0 0 0 1px var(--texto-apoio);
}

/* ── Espaço reservado: conteúdo que ainda não existe ────────── */
.reservado {
	border: 1px dashed var(--fio-forte);
	border-radius: 8px;
	padding: 12px 14px;
	color: var(--texto-apoio);
	font-size: var(--t-pequeno);
	line-height: 1.45;
}

/* ── Logotipo: o SVG da marca como máscara, na cor do texto ─── */
.logotipo {
	display: block;
	aspect-ratio: 1598 / 365;
	background: currentColor;
	-webkit-mask: url("../abertura/assets/logotipo-neutro-frio.svg") center / contain no-repeat;
	mask: url("../abertura/assets/logotipo-neutro-frio.svg") center / contain no-repeat;
}

/* ── Materiais ──────────────────────────────────────────────── */
/* Luz: o canvas que luz.js põe no palco ([data-luz]). Sem WebGL2, fica o degradê de cada palco. */
.luz {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* Por cima da cena, mais fraca (docs/estudos/lp-v8.md): em "screen", o escuro da luz não muda a cena e o claro soma. */
	mix-blend-mode: screen;
	opacity: var(--luz-forca, 1);
}
[data-luz="abertura"] {
	--luz-forca: 0.5;
}
[data-luz="avaliacao"] {
	--luz-forca: 0.3;
}
/* Cena: foto ou vídeo da Dreamina atrás de tudo no palco (docs/lp/arquitetura.md, "Cenas e respiros").
   z-index negativo: dentro do palco isolado, fica acima do fundo e abaixo da luz, do pé escuro e do grão. */
.cena {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
/* O vídeo da abertura espelhado na horizontal, a pedido do usuário: as faixas de luz descem da esquerda para a direita.
   A luz de luz.js segue a mesma direção (docs/estudos/lp-v8.md, "A luz segue o vídeo"). */
.abertura .cena {
	transform: scaleX(-1);
}
/* Respiro: uma cena de largura total entre capítulos. Corte seco contra o papel. */
.respiro {
	position: relative;
	overflow: clip;
	isolation: isolate;
	margin: 0;
	aspect-ratio: 21 / 9;
	min-height: 320px;
	background: var(--tinta);
}
.respiro img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.respiro > .grao {
	z-index: 1;
}
/* Traçado: o símbolo da marca em fio, muito ampliado e recortado, como no quadro 2133:2750 do Figma.
   A marca aparece como estrutura ao fundo, não como logotipo. Cada palco diz o tamanho e onde fica.
   O fio vale uma unidade do desenho e cresce com ele: cerca de 5 px na abertura larga, por isso a força baixa
   (docs/estudos/lp-v8.md, "O símbolo vira o traçado"). */
.tracado {
	position: absolute;
	z-index: 0;
	aspect-ratio: 379 / 329;
	pointer-events: none;
	overflow: visible;
	fill: none;
	/* A cor do traço vem do atributo stroke de cada <svg> (o claro, liso ou em degradê); aqui só a força. */
	stroke-width: 1px;
	stroke-linejoin: round;
	stroke-opacity: 0.15;
}
/* Grão: o ladrilho de grao.js, em pixels físicos exatos e sem suavizar. Nunca sobre texto: fica por baixo do conteúdo.
   Acompanha a superfície em que está, como o grão do monopo, que mora dentro do canvas do hero. */
.grao {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--grao-imagem, none);
	background-size: var(--grao-tamanho, 256px) var(--grao-tamanho, 256px);
	image-rendering: pixelated;
	opacity: var(--grao-forca, var(--grao-fundo));
}
/* Vidro: um só desfoque por pilha; a borda faz o vidro. */
.vidro {
	isolation: isolate;
	background: color-mix(in srgb, var(--fundo-elevado) calc(var(--vidro-opacidade) * 100%), transparent);
	-webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
	backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--claro) 20%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--claro) 7%, transparent),
		0 24px 48px -24px rgb(0 0 0 / 0.7);
}
.vidro > .grao {
	z-index: -1;
	border-radius: inherit;
	--grao-forca: var(--grao-vidro);
}

/* ── 0. Navegação: vidro fosco com grão ─────────────────────────
   O vidro da barra é mais fino que o das placas: a luz e o conteúdo passam por ele, desfocados.
   Dois tons: o escuro, sobre a luz e os capítulos escuros; o claro, sobre o papel (barra.js põe data-tom).
   Descendo, sai; subindo, volta (barra.js põe data-recolhida). */
.barra {
	--barra-tinta: var(--tinta);
	/* Vidro fosco (docs/estudos/lp-v7.md, "O vidro fosco"): pouca tinta, para a luz atravessar, e um véu claro, que dá o
	   fosco. O que passa por trás escurece 32%, e o rótulo em repouso é o claro cheio: medido sem o texto, o fundo mais
	   claro atrás dos links (o núcleo da luz) dá 4,94:1. O link sob o ponteiro se destaca pela pílula. */
	--barra-tinta-forca: 28%;
	--barra-veu: color-mix(in srgb, var(--claro) 7%, transparent);
	--barra-brilho: 0.68;
	--barra-texto: var(--claro);
	--barra-texto-apoio: var(--claro);
	--barra-pilula: color-mix(in srgb, var(--claro) 12%, transparent);
	--barra-luz: color-mix(in srgb, var(--claro) 18%, transparent);
	--barra-anel: color-mix(in srgb, var(--claro) 8%, transparent);
	position: fixed;
	top: var(--barra-topo);
	left: var(--margem);
	right: var(--margem);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--barra-altura);
	padding: 6px;
	border-radius: 14px;
	color: var(--barra-texto);
	transition:
		transform var(--duration-barra) var(--easing-barra),
		background-color var(--duration-revelar) var(--easing-padrao),
		box-shadow var(--duration-revelar) var(--easing-padrao),
		color var(--duration-revelar) var(--easing-padrao);
}
.barra.vidro {
	background: color-mix(in srgb, var(--barra-tinta) var(--barra-tinta-forca), var(--barra-veu));
	-webkit-backdrop-filter: blur(40px) saturate(1.6) brightness(var(--barra-brilho));
	backdrop-filter: blur(40px) saturate(1.6) brightness(var(--barra-brilho));
	box-shadow:
		inset 0 1px 0 var(--barra-luz),
		inset 0 0 0 1px var(--barra-anel),
		0 12px 32px -18px rgb(0 0 0 / 0.55);
}
.barra[data-tom="claro"] {
	--barra-tinta: var(--claro);
	--barra-tinta-forca: 66%;
	--barra-brilho: 1;
	--barra-texto: var(--tinta);
	--barra-texto-apoio: color-mix(in srgb, var(--tinta) 76%, var(--claro));
	--barra-pilula: color-mix(in srgb, var(--tinta) 8%, transparent);
	--barra-luz: color-mix(in srgb, white 60%, transparent);
	--barra-anel: color-mix(in srgb, var(--tinta) 10%, transparent);
}
.barra[data-recolhida] {
	transform: translateY(calc(-100% - var(--barra-topo) - 8px));
	/* Fora da tela, o vidro não desfoca: o desfoque é o único custo de GPU que se mede na rolagem (lp-v5.md, seção 7).
	   Ele sai quando a barra termina de sair e volta no instante em que ela começa a voltar. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition:
		transform var(--duration-barra) var(--easing-barra),
		-webkit-backdrop-filter 0s var(--duration-barra),
		backdrop-filter 0s var(--duration-barra);
}
/* Depois da barra: com o mesmo peso de seletor, a regra que vem depois vence. */
@media (prefers-reduced-transparency: reduce) {
	.vidro,
	.barra.vidro {
		background: var(--fundo-elevado);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.vidro .grao {
		display: none;
	}
}
.marca {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	color: var(--barra-texto);
}
.marca .logotipo {
	height: 16px;
}
.barra nav {
	flex: 1;
}
.lista {
	position: relative;
	width: fit-content;
}
.lista ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lista a {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--barra-texto-apoio);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--duration-alternar) var(--easing-padrao);
}
.lista a:hover,
.lista a:focus-visible,
.lista a[aria-current="true"] {
	color: var(--barra-texto);
}
.pilula {
	position: absolute;
	top: 0;
	left: 0;
	height: 36px;
	width: var(--w, 0);
	transform: translateX(var(--x, 0));
	border-radius: 8px;
	background: var(--barra-pilula);
	box-shadow: inset 0 1px 0 var(--barra-luz);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-alternar) var(--easing-padrao);
}
.lista[data-pilula] .pilula {
	opacity: 1;
}
.lista[data-pronto]:not([data-pulo]) .pilula {
	transition:
		opacity var(--duration-alternar) var(--easing-padrao),
		transform var(--spring-realce-duracao) var(--spring-realce-curva),
		width var(--spring-realce-duracao) var(--spring-realce-curva);
}
.acoes-barra {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
.entrar {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--barra-texto-apoio, var(--texto-apoio));
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	transition: color var(--duration-alternar) var(--easing-padrao);
}
.entrar:hover {
	color: var(--barra-texto, var(--texto));
}
.barra .botao {
	min-height: 36px;
	padding: 0 14px;
	font-size: 14px;
}
.botao .curto,
.abrir-menu {
	display: none;
}
.abrir-menu,
.fechar {
	height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--barra-pilula, color-mix(in srgb, var(--claro) 8%, transparent));
	color: inherit;
	font: 500 14px/1 var(--font-sans);
	cursor: pointer;
}
.gaveta {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(320px, 86vw);
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 12px 12px 24px;
	border: 0;
	border-radius: 0 20px 20px 0;
	color: var(--texto);
}
.gaveta[open] {
	display: flex;
	flex-direction: column;
	gap: 24px;
	animation: gaveta-entra var(--duration-revelar) var(--easing-entrada);
}
@keyframes gaveta-entra {
	from {
		transform: translateX(-100%);
	}
}
.gaveta::backdrop {
	background: color-mix(in srgb, var(--tinta) 60%, transparent);
}
.gaveta-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.gaveta-topo .logotipo {
	height: 16px;
	margin-left: 10px;
	color: var(--texto);
}
.gaveta ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gaveta li a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 10px;
	border-radius: 8px;
	color: var(--texto-apoio);
	font: 500 17px/1.3 var(--font-sans);
	text-decoration: none;
}
.gaveta li a[aria-current="true"] {
	color: var(--texto);
}
.gaveta .entrar {
	height: 48px;
	padding: 0 10px;
	font-size: 15px;
	border-top: 1px solid var(--fio);
	border-radius: 0;
}
@media (max-width: 760px) {
	.barra nav,
	.barra .entrar,
	.botao .longo {
		display: none;
	}
	.botao .curto,
	.abrir-menu {
		display: inline;
	}
}

/* ── 1. Abertura: a luz e a promessa ──────────────────────────
   Sem logotipo: a marca está na luz, no grão, no rótulo e nos fios. A luz cai do alto; o texto fica embaixo, no escuro. */
.abertura {
	position: relative;
	overflow: clip; /* recorta sem rolar: o foco num campo não arrasta a seção */
	isolation: isolate;
	min-height: max(100svh, 720px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 72px;
	/* Fundo estático: escuro neutro e sólido. O calor da marca no escuro vem só do artefato vivo, a luz (luz.js);
	   sem WebGL2, a abertura fica no fundo, sem um leque parado (docs/estudos/lp-v7.md, "O degradê no escuro"). */
	background: var(--fundo);
}
/* O escuro guarda o texto: a cena e a luz ficam no alto e à direita, o texto fica no escuro (docs/estudos/lp-v8.md).
   Em tela larga, a coluna do texto escurece da esquerda e o pé sobe do fundo; no celular, onde o texto ocupa a largura
   toda, só o pé, que sobe mais. O rótulo dourado é o texto mais exigente: ele dita a força da coluna. */
.abertura::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(
			to right,
			color-mix(in srgb, var(--fundo) 90%, transparent) 0%,
			color-mix(in srgb, var(--fundo) 86%, transparent) 34%,
			transparent 62%
		),
		linear-gradient(
			to bottom,
			transparent 18%,
			color-mix(in srgb, var(--fundo) 70%, transparent) 46%,
			var(--fundo) 80%
		);
}
@media (max-width: 760px) {
	.abertura::after {
		background: linear-gradient(
			to bottom,
			transparent 0%,
			color-mix(in srgb, var(--fundo) 88%, transparent) 24%,
			var(--fundo) 46%
		);
	}
}
.abertura > .grao {
	z-index: 1;
}

/* O traçado à direita, do alto ao pé; a luz entra pelo alto à esquerda e desce para a direita. Na chegada, o fio se desenha uma vez.
   O tempo do desenho é de cada roteiro do prólogo, e a regra de base usa os mesmos valores: o desenho não recomeça
   quando a classe "intro" sai. */
.abertura .tracado {
	--tracar-duracao: 2.8s;
	--tracar-curva: var(--easing-entrada);
	--tracar-atraso: 0.3s;
	top: -38%;
	right: -58%;
	height: 176%;
	/* O fio some antes da zona do texto: é o degradê #fio-desce, no traço. */
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: tracar var(--tracar-duracao) var(--tracar-curva) var(--tracar-atraso) forwards;
}
/* Na assinatura, o traçado se delineia depois que o símbolo some: devagar no começo, longo no fim. */
html:not([data-intro="manifesto"]) .abertura .tracado {
	--tracar-duracao: 2.6s;
	--tracar-curva: cubic-bezier(0.45, 0, 0.15, 1);
	--tracar-atraso: 0.35s;
}
@keyframes tracar {
	to {
		stroke-dashoffset: 0;
	}
}
/* O ponto de luz da assinatura: um traço curto que corre à frente do fio, com a mesma curva e o mesmo tempo da ponta
   (o fio vai de 1 a 0; o ponto, 3,5% do caminho, vai junto e apaga no fim). Tem luz própria, o claro sólido, e não o
   degradê do fio: os dois traços do símbolo começam embaixo, onde o fio é transparente, e o ponto revela por um
   instante a forma inteira. Só na assinatura. */
.abertura .tracado .rastro {
	display: none;
}
html:not([data-intro="manifesto"]) .abertura .tracado .rastro {
	display: inline;
	stroke: var(--claro);
	stroke-width: 0.6;
	stroke-dasharray: 0.035 1;
	stroke-dashoffset: 0.035;
	stroke-opacity: 0;
	animation:
		rastrear var(--tracar-duracao) var(--tracar-curva) var(--tracar-atraso) forwards,
		rastro-acende var(--tracar-duracao) linear var(--tracar-atraso) forwards;
}
@keyframes rastrear {
	from {
		stroke-dashoffset: 0.035;
	}
	to {
		stroke-dashoffset: -0.965;
	}
}
@keyframes rastro-acende {
	0% {
		stroke-opacity: 0;
	}
	6%,
	82% {
		stroke-opacity: 0.7;
	}
	100% {
		stroke-opacity: 0;
	}
}
.abertura > .conteudo {
	position: relative;
	z-index: 2;
}
.abertura h1 {
	max-width: 24ch;
	margin-top: 24px;
	font: 300 var(--t-abertura) / 1.06 var(--font-display);
	letter-spacing: -0.03em;
}
.abertura .faixa {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--fio);
	row-gap: 28px;
	align-items: end;
}
.abertura .lado {
	grid-column: 1 / span 6;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.abertura .acoes {
	grid-column: 8 / span 5;
	justify-content: flex-end;
}
.acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
@media (max-width: 1023px) {
	.abertura .lado,
	.abertura .acoes {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}
@media (max-width: 760px) {
	.abertura {
		min-height: 100svh;
		padding-bottom: 48px;
	}
	.abertura .tracado {
		top: -14%;
		right: -150%;
		height: 84%;
	}
	.abertura .faixa {
		margin-top: 36px;
		padding-top: 24px;
	}
	.acoes > * {
		flex: 1 1 100%;
	}
}

/* ── Capítulos ──────────────────────────────────────────────── */
.capitulo {
	padding-top: var(--entrada-capitulo);
}
.cabeca {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Papel: a tese e a diferença. Com ?fundo=escuro, ficam no escuro sem outra mudança.
   Num capítulo em papel, a faixa fecha por dentro com a mesma entrada de capítulo. */
.papel {
	position: relative;
	isolation: isolate;
	background: var(--fundo);
	color: var(--texto);
	color-scheme: light;
	padding-bottom: var(--entrada-capitulo);
}
.papel > .grao {
	z-index: -1;
	--grao-forca: var(--grao-papel);
}
html[data-fundo="escuro"] .papel > .grao {
	display: none;
}
.legenda {
	color: var(--texto-apoio);
}
html[data-fundo="escuro"] .papel {
	color-scheme: dark;
	padding-bottom: 0;
}

/* ── 2. A tese ──────────────────────────────────────────────── */
.tese .enunciado {
	grid-column: 1 / span 10;
	margin-top: 24px;
	font: 300 var(--t-enunciado) / 1.06 var(--font-display);
	letter-spacing: -0.025em;
}
.tese .manifesto {
	grid-column: 5 / span 7;
	margin-top: 56px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: var(--leitura);
	font-size: var(--t-apoio);
	line-height: 1.55;
}
.tese .manifesto .fecho {
	font-weight: 500;
}
.provas {
	grid-column: 1 / -1;
	margin-top: 88px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}
.prova {
	padding-top: 16px;
	border-top: 1px solid var(--fio);
}
.prova .reservado {
	min-height: 96px;
}
@media (max-width: 1023px) {
	.tese .enunciado,
	.tese .manifesto {
		grid-column: 1 / -1;
	}
}
@media (max-width: 760px) {
	.tese .manifesto {
		margin-top: 32px;
	}
	.provas {
		margin-top: 48px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
}

/* ── 3. A diferença ─────────────────────────────────────────── */
.diferenca .cabeca {
	grid-column: 1 / span 4;
}
.quadro {
	grid-column: 5 / span 8;
	margin: 0;
	border-collapse: collapse;
	width: 100%;
	font-size: var(--t-corpo);
}
.quadro caption {
	text-align: left;
}
.quadro th,
.quadro td {
	padding: 18px 16px 18px 0;
	border-top: 1px solid var(--fio);
	text-align: left;
	vertical-align: top;
	line-height: 1.45;
}
.quadro thead th {
	padding-top: 0;
	border-top: 0;
	font: 400 var(--t-rotulo) / 1 var(--font-marca);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acento);
}
.quadro tbody th {
	width: 24%;
	font-weight: 500;
}
.quadro .mercado {
	color: var(--texto-apoio);
}
/* Com ?diferenca=lisix, só a coluna da Lisix. */
html[data-diferenca="lisix"] .quadro .mercado {
	display: none;
}
@media (max-width: 1023px) {
	.diferenca .cabeca,
	.quadro {
		grid-column: 1 / -1;
	}
	.diferenca .cabeca {
		margin-bottom: 32px;
	}
}
/* No celular, cada linha vira um bloco: o tema, depois "No mercado" e "Na Lisix". */
@media (max-width: 760px) {
	.quadro thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.quadro tr {
		display: block;
		padding: 18px 0;
		border-top: 1px solid var(--fio);
	}
	.quadro th,
	.quadro td {
		display: block;
		width: auto !important;
		padding: 0;
		border: 0;
	}
	.quadro td {
		margin-top: 10px;
	}
	.quadro td::before {
		content: attr(data-coluna);
		display: block;
		margin-bottom: 4px;
		font: 400 var(--t-pequeno) / 1 var(--font-marca);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--acento);
	}
}

/* ── 4. Os quatro pilares ───────────────────────────────────── */
.cabeca .titulo {
	max-width: 22ch;
}
.pilar {
	margin-top: var(--pausa-pilares);
	padding-top: 32px;
	border-top: 1px solid var(--fio);
	align-items: start;
}
.pilares .cabeca + .pilar {
	margin-top: 72px;
}
.pilar .texto {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-right: 24px;
}
.pilar h3 {
	margin-top: 12px;
	font: 400 var(--t-subtitulo) / 1.2 var(--font-display);
	letter-spacing: -0.01em;
}
.pilar p {
	color: var(--texto-apoio);
}
.pilar .reservado {
	margin-top: 6px;
}
.pilar figure {
	grid-column: 6 / span 7;
	margin: 0;
}
/* A moldura dos pilares: a cena cobre a moldura e perde as bordas, não encolhe. */
.midia {
	overflow: clip;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	background: var(--tinta-alta);
}
.midia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1023px) {
	.pilar .texto,
	.pilar figure {
		grid-column: 1 / -1;
	}
	.pilar figure {
		margin-top: 28px;
	}
	.pilar .texto {
		padding-right: 0;
	}
}

/* ── 5. O método ────────────────────────────────────────────── */
.metodo .texto {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.metodo .texto p {
	color: var(--texto-apoio);
	max-width: var(--leitura);
}
.metodo figure {
	grid-column: 7 / span 6;
	margin: 0;
}
.diagrama text {
	font-family: var(--font-marca);
	font-size: 15px;
	letter-spacing: 0.08em;
	fill: var(--texto);
}
.diagrama .legenda-diagrama {
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0;
	fill: var(--texto-apoio);
}
@media (max-width: 1023px) {
	.metodo .texto,
	.metodo figure {
		grid-column: 1 / -1;
	}
	.metodo figure {
		margin-top: 40px;
	}
}

/* ── 6. O rito de admissão ──────────────────────────────────── */
/* Os passos: uma linha do tempo em traço fino, sem números (docs/estudos/lp-v7.md). Um fio atravessa os três e cada
   passo tem um marcador no fio, como os nós dos diagramas do método. A ordem está no desenho e na lista ordenada. */
.passos {
	position: relative;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--calha);
}
.passos::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-top: 1px solid var(--fio-forte);
}
.passos li {
	position: relative;
	padding-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.passos li::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 9px;
	height: 9px;
	border: 1px solid var(--acento);
	background: var(--fundo);
}
.passos h3 {
	margin-top: 0;
	font: 400 var(--t-subtitulo) / 1.2 var(--font-display);
}
.passos p {
	color: var(--texto-apoio);
}
.rito .porque {
	margin-top: 40px;
	max-width: var(--leitura);
	color: var(--texto-apoio);
}
.rito .acoes {
	margin-top: 32px;
}
/* Tablet: três frações próprias, com a calha; abaixo de 200px por fração, empilham. */
@media (max-width: 720px) {
	/* Empilhados, o fio desce pela esquerda. */
	.passos {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.passos::before {
		top: 4px;
		bottom: 0;
		right: auto;
		left: 4px;
		border-top: 0;
		border-left: 1px solid var(--fio-forte);
	}
	.passos li {
		padding-top: 0;
		padding-left: 28px;
	}
	.passos li::before {
		top: 4px;
	}
}

/* ── 8. Perguntas ───────────────────────────────────────────── */
.perguntas .cabeca {
	grid-column: 1 / span 4;
}
.perguntas .cabeca a {
	margin-top: 12px;
	color: var(--texto-apoio);
	text-underline-offset: 4px;
}
.sanfona {
	grid-column: 5 / span 8;
}
.sanfona details {
	border-top: 1px solid var(--fio);
}
.sanfona details:last-child {
	border-bottom: 1px solid var(--fio);
}
.sanfona summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding: 16px 0;
	font: 400 18px/1.35 var(--font-display);
	cursor: pointer;
	list-style: none;
}
.sanfona summary::-webkit-details-marker {
	display: none;
}
.sanfona summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 1px solid var(--texto-apoio);
	border-bottom: 1px solid var(--texto-apoio);
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--duration-alternar) var(--easing-padrao);
}
.sanfona details[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}
.sanfona .resposta {
	padding: 0 40px 24px 0;
}
@media (max-width: 1023px) {
	.perguntas .cabeca,
	.sanfona {
		grid-column: 1 / -1;
	}
	.sanfona {
		margin-top: 32px;
	}
	.perguntas {
		display: flex;
		flex-direction: column;
	}
	/* No celular, a linha para o formulário vem por último. */
	.perguntas .cabeca a {
		order: 3;
	}
}

/* ── 9. Avaliação de aderência ──────────────────────────────── */
.avaliacao {
	position: relative;
	overflow: clip; /* recorta sem rolar: o foco num campo não arrasta a seção */
	isolation: isolate;
	margin-top: var(--entrada-capitulo);
	padding: 160px 0;
	background: var(--fundo);
}
/* Depois de um capítulo em papel, o respiro já está dentro do papel: a margem só mostraria uma faixa do fundo. */
.papel + .avaliacao {
	margin-top: 0;
}
html[data-fundo="escuro"] .papel + .avaliacao {
	margin-top: var(--entrada-capitulo);
}
/* A luz passa por trás do painel e chega desfocada pelo vidro. Sem WebGL2, o fundo sólido. */
.avaliacao > .grao {
	z-index: 1;
}
.avaliacao .conteudo {
	position: relative;
	z-index: 2;
}
/* O painel: vidro fosco com grão, embutido nas margens da página. Não flutua: tem a largura do conteúdo e não tem sombra.
   Um vidro só, dividido por um fio: a explicação num vidro aberto, por onde a luz passa desfocada; o formulário num
   vidro mais denso, que segura a leitura dos campos (docs/estudos/lp-v7.md, "O vidro fosco"). */
.painel {
	position: relative;
	display: grid;
	grid-template-columns: 5fr 7fr;
	border-radius: 20px;
	overflow: clip;
}
/* Sobre o vidro, a luz que atravessa clareia o fundo: o texto de apoio sobe para 84% de claro, e o que passa por trás
   escurece 32%. Medido sem o texto, no ponto mais claro: apoio 4,5:1 ou mais nas duas metades; claro, 6,8:1. */
.painel.vidro {
	--texto-apoio: color-mix(in srgb, var(--claro) 84%, var(--tinta));
	background: color-mix(in srgb, var(--claro) 4%, transparent);
	-webkit-backdrop-filter: blur(44px) saturate(1.5) brightness(0.68);
	backdrop-filter: blur(44px) saturate(1.5) brightness(0.68);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--claro) 22%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--claro) 12%, transparent);
}
.painel.vidro > .grao {
	--grao-forca: var(--grao-painel);
}
.painel .explica {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 56px;
}
.painel .area-formulario {
	padding: 56px;
	background: color-mix(in srgb, var(--tinta) 42%, transparent);
	box-shadow: inset 1px 0 0 color-mix(in srgb, var(--claro) 12%, transparent);
}
.painel .explica .titulo {
	font-size: clamp(26px, 2.4vw, 34px);
}
.painel .explica p,
.painel .explica li {
	color: var(--texto-apoio);
}
@media (max-width: 1023px) {
	/* Empilhados, o fio fica entre a explicação e o formulário. */
	.painel {
		grid-template-columns: minmax(0, 1fr);
	}
	.painel .explica,
	.painel .area-formulario {
		padding: 32px;
	}
	.painel .area-formulario {
		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--claro) 12%, transparent);
	}
}
@media (max-width: 760px) {
	.avaliacao {
		padding: 64px 0;
	}
	.painel {
		border-radius: 16px;
	}
	.painel .explica,
	.painel .area-formulario {
		padding: 24px 20px;
	}
}

/* ── O formulário ───────────────────────────────────────────── */
.formulario {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
}
.campo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.campo.largo {
	grid-column: 1 / -1;
}
.campo label {
	font-weight: 500;
	font-size: 14px;
}
.campo .opcional {
	color: var(--texto-apoio);
	font-weight: 400;
}
.campo .dica-campo {
	color: var(--texto-apoio);
	font-size: var(--t-pequeno);
}
/* 16px no campo: o celular não amplia a tela ao focar. */
.campo input,
.campo select {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: color-mix(in srgb, var(--tinta) 55%, transparent);
	box-shadow: inset 0 0 0 1px var(--fio-forte);
	color: var(--texto);
	font: 400 16px/1.2 var(--font-sans);
	appearance: none;
}
.campo select {
	padding-right: 40px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--texto-apoio) 50%),
		linear-gradient(135deg, var(--texto-apoio) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) 50%,
		calc(100% - 15px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}
.campo input:focus-visible,
.campo select:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 1px;
}
/* O erro não depende só da cor: borda mais grossa e texto que diz como corrigir. */
.campo [aria-invalid="true"] {
	box-shadow: inset 0 0 0 2px var(--destaque);
}
.erro-campo {
	display: flex;
	gap: 6px;
	color: var(--texto);
	font-size: var(--t-pequeno);
}
.erro-campo::before {
	content: "Corrija:";
	color: var(--destaque);
	font-weight: 500;
}
.erro-campo:empty {
	display: none;
}
.resumo-erros,
.falha {
	padding: 16px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 2px var(--destaque);
	background: color-mix(in srgb, var(--tinta) 40%, transparent);
}
.resumo-erros h3,
.falha h3 {
	font: 500 16px/1.3 var(--font-sans);
}
.resumo-erros ul {
	margin: 8px 0 0;
	padding-left: 18px;
}
.resumo-erros a {
	color: var(--texto);
	text-underline-offset: 3px;
}
.falha p {
	margin-top: 6px;
	color: var(--texto-apoio);
}
.privacidade {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--texto-apoio);
	font-size: var(--t-pequeno);
	line-height: 1.5;
}
.falha .reservado {
	margin-top: 10px;
}
.privacidade a {
	color: var(--texto);
	text-underline-offset: 3px;
}
.formulario .botao {
	align-self: flex-start;
	min-width: 220px;
}
.formulario .botao[aria-disabled="true"] {
	cursor: progress;
	background: color-mix(in srgb, var(--destaque) 70%, var(--tinta));
}
.confirmacao {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.confirmacao h3 {
	font: 300 28px/1.15 var(--font-display);
}
.confirmacao p {
	color: var(--texto-apoio);
}
@media (max-width: 760px) {
	.campos {
		grid-template-columns: minmax(0, 1fr);
	}
	.formulario .botao {
		align-self: stretch;
	}
}

/* ── 10. Rodapé ─────────────────────────────────────────────── */
.rodape {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding: var(--entrada-faixa) 0 40px;
	background: var(--fundo);
}
.rodape .tracado {
	top: -30%;
	right: -6%;
	height: 190%;
	stroke-opacity: 0.09;
}
.rodape > .conteudo {
	position: relative;
	z-index: 1;
}
.rodape .topo {
	row-gap: 40px;
}
.rodape .identidade {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--texto-apoio);
}
.rodape .identidade .logotipo {
	width: 88px;
	color: var(--texto);
}
.rodape nav {
	grid-column: 7 / span 6;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--calha);
}
.rodape h2 {
	margin-bottom: 14px;
}
.rodape ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rodape nav a {
	color: var(--texto-apoio);
	text-decoration: none;
}
.rodape nav a:hover {
	color: var(--texto);
}
.rodape .base {
	margin-top: 72px;
	padding-top: 20px;
	border-top: 1px solid var(--fio);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	color: var(--texto-apoio);
	font-size: var(--t-pequeno);
}
@media (max-width: 1023px) {
	.rodape .identidade,
	.rodape nav {
		grid-column: 1 / -1;
	}
}
@media (max-width: 520px) {
	.rodape nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}
}

/* ── A rolagem mexe nos componentes (rolagem.js) ────────────────
   Tudo aqui depende de "viva" na raiz. Sem ela (sem JavaScript ou com movimento reduzido), nada se esconde nem se move. */

/* Abertura que sai e traçado da admissão: animações CSS ligadas à rolagem. Rodam no compositor, sem script e sem
   recalcular estilo a cada quadro. Onde o navegador não as tem, a página fica parada nesses dois pontos, inteira. */
@supports (animation-timeline: view()) {
	/* Abertura: ao sair, o texto sobe um pouco e esmaece, sem sumir; o traçado desce devagar. A luz fica. */
	html.viva .abertura {
		view-timeline: --abertura block;
	}
	html.viva .abertura > .conteudo {
		animation: abertura-texto linear both;
		animation-timeline: --abertura;
		animation-range: exit 0% exit 100%;
	}
	html.viva .abertura .tracado {
		animation-name: tracar, abertura-fio;
		animation-duration: var(--tracar-duracao), auto;
		animation-timing-function: var(--tracar-curva), linear;
		animation-delay: var(--tracar-atraso), 0s;
		animation-fill-mode: forwards, both;
		animation-timeline: auto, --abertura;
		animation-range: normal, exit 0% exit 100%;
	}
	/* Admissão: uma cortina da cor do fundo desce e descobre o traçado enquanto a seção atravessa a tela.
	   É uma transformação, composta fora da thread principal; desenhar o fio pelo comprimento do traço repintaria
	   o SVG inteiro a cada quadro. */
	html.viva .rito {
		view-timeline: --rito block;
	}
	html.viva .rito::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: var(--fundo);
		animation: rito-cortina linear both;
		animation-timeline: --rito;
		animation-range: cover 14% cover 60%;
	}
}
@keyframes abertura-texto {
	to {
		opacity: 0.3;
		transform: translateY(-32px);
	}
}
@keyframes abertura-fio {
	to {
		translate: 0 9%;
	}
}
@keyframes rito-cortina {
	to {
		transform: translateY(100%);
	}
}

/* A tese acende palavra por palavra: só opacidade, 0,25s ease-in-out, como na Equator. */
html.viva .palavra {
	opacity: 0.26;
	transition: opacity 0.25s ease-in-out;
}
html.viva .palavra.acesa {
	opacity: 1;
}

/* Aparições: uma vez. Os irmãos entram em sequência. */
html.viva .revela {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 600ms var(--easing-entrada),
		transform 800ms var(--easing-entrada);
	transition-delay: calc(min(var(--ordem, 0), 6) * 70ms);
}
html.viva tr.revela {
	transform: none;
}
html.viva .revela.visto {
	opacity: 1;
	transform: none;
}

/* O traçado da admissão: a cortina que o descobre está acima, nas animações ligadas à rolagem. */
.rito {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding-bottom: 72px;
}
.rito > .conteudo {
	position: relative;
	z-index: 1;
}
.rito .tracado {
	right: -46%;
	bottom: -50%;
	height: 160%;
	/* O fio fica à direita e some antes da coluna do texto: é o degradê #fio-direita, no traço. */
	stroke-opacity: 0.09;
}
@media (max-width: 760px) {
	.rito .tracado {
		right: -60%;
		bottom: -20%;
		height: 80%;
	}
}

/* Pilares: uma moldura só, presa à tela, enquanto os quatro textos passam. Só em tela larga. */
@media (min-width: 1024px) {
	html.viva .pilares .palco {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--calha);
		margin-top: 48px;
	}
	html.viva .pilar {
		display: contents;
	}
	html.viva .pilar .texto {
		grid-column: 1 / span 5;
		min-height: 76vh;
		justify-content: center;
		opacity: 0.4;
		transition: opacity 0.25s ease-in-out;
	}
	html.viva .pilar[data-ativo] .texto {
		opacity: 1;
	}
	html.viva .pilar figure {
		grid-column: 6 / span 7;
		grid-row: 1 / span 4;
		position: sticky;
		top: calc(50vh - min(15.5vw, 222px));
		align-self: start;
		opacity: 0;
		transition: opacity 400ms var(--easing-padrao);
	}
	html.viva .pilar[data-ativo] figure {
		opacity: 1;
	}
}

/* ── O prólogo (intro.js) ───────────────────────────────────────
   A abertura narrativa da iteração 6: a página começa no escuro, a luz nasce de um ponto, as frases sobem
   por máscara, a luz abre e o conteúdo chega. Tudo aqui depende da classe "intro", que só o intro.js põe:
   sem ele, com movimento reduzido ou na segunda carga da sessão, a abertura nasce pronta.
   Enquanto o HTML carrega, a classe está na raiz; no DOMContentLoaded, passa para a .abertura e a .barra, e a
   troca no fim só invalida essas duas. Por isso as regras de espera valem para as duas formas (:is), e o resto
   só para a segunda. As fases, em data-intro-fase na .abertura e na .barra: escuro, fala, abre, chega. */
.prologo,
.roteiro {
	display: none;
}
.abertura.intro .prologo {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* As frases ficam onde a promessa vai chegar: na zona escura, longe da fonte da luz. */
	padding-bottom: clamp(200px, 32svh, 340px);
	pointer-events: none;
}
/* A assinatura é a entrada padrão: vale para tudo que não é o manifesto, também sem o parâmetro e sem ferramenta.js. */
html[data-intro="manifesto"] .roteiro[data-roteiro="manifesto"],
html:not([data-intro="manifesto"]) .roteiro[data-roteiro="assinatura"] {
	display: block;
}
.fala {
	max-width: 27ch;
	font: 300 clamp(28px, 3.3vw, 48px) / 1.14 var(--font-display);
	letter-spacing: -0.025em;
	color: var(--texto);
	text-wrap: balance;
}
.fala + .fala {
	margin-top: 0.55em;
}
/* O slogan do billboard: três linhas de uma frase só, sem pausa entre elas. */
[data-roteiro="assinatura"] .fala + .fala {
	margin-top: 0;
}
/* Os colchetes são o gesto tipográfico da marca (peça clara do quadro da paleta). */
.junto {
	white-space: nowrap;
}
.chave {
	color: var(--destaque);
}
/* A linha que sobe por máscara: o mesmo gesto nas frases do prólogo e na promessa. */
.abertura.intro .l {
	display: block;
	overflow: clip;
	/* folga para as descendentes, sem mudar a altura da linha */
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}
.abertura.intro .l > span {
	display: block;
	transform: translateY(125%);
	transition: transform 1100ms var(--easing-entrada);
	transition-delay: calc(var(--i, 0) * 75ms);
}
.abertura.intro .fala.dentro .l > span {
	transform: none;
}
.abertura.intro .fala.fora .l > span {
	transform: translateY(-125%);
	transition: transform 800ms cubic-bezier(0.87, 0, 0.13, 1);
	transition-delay: calc(var(--i, 0) * 40ms);
}
/* A assinatura no meio da hero: o símbolo, a palavra "LISIX" e o slogan, centralizados. Quando a luz abre, o símbolo
   cresce acelerando e some (intro.js) e o traçado do fundo se delineia (docs/estudos/lp-v8.md). */
html:not([data-intro="manifesto"]) .abertura.intro .prologo {
	justify-content: center;
	padding-bottom: 0;
}
html:not([data-intro="manifesto"]) .prologo .roteiro[data-roteiro="assinatura"] {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.prologo .simbolo,
.prologo .palavra {
	display: block;
	fill: var(--texto);
	opacity: 0;
	transition: opacity 800ms linear;
}
.prologo .simbolo {
	height: 44px;
	aspect-ratio: 379 / 329;
}
.prologo .palavra {
	height: 15px;
	aspect-ratio: 1072.11 / 299.586;
	margin: 20px 0 36px;
}
.prologo :is(.simbolo, .palavra).dentro {
	opacity: 1;
}
.prologo :is(.simbolo, .palavra).fora {
	opacity: 0;
	transition-duration: 240ms;
}

/* Enquanto o prólogo fala, a cena fica no escuro e a luz nasce com força cheia. Os feixes se mesclam com os do vídeo,
   num crossfade: um segundo antes de a luz abrir ("cena-surge", intro.js), a cena começa a subir devagar, visível só
   pela fenda ao longo do eixo dos feixes; quando a luz abre, a fenda se alarga até cobrir a hero e a luz desce, com a
   mesma curva macia, para a força do palco. Tudo termina antes de a classe "intro" sair.
   Detalhe em docs/estudos/lp-v8.md, "A luz segue o vídeo". */
:is(html.intro .abertura, .abertura.intro) .cena {
	opacity: 0;
}
:is(html.intro .abertura, .abertura.intro) .luz {
	opacity: 1;
}
.abertura.intro.cena-surge .cena {
	opacity: 1;
	transition: opacity 3000ms cubic-bezier(0.45, 0, 0.25, 1);
}
/* A fenda: o fundo sólido sobre a cena, com uma faixa transparente e macia no eixo dos feixes. Ela passa pelo centro
   da luz do vídeo espelhado (x 40%, y 35% na tela larga) a 19,5° da horizontal, descendo para a direita, como os
   feixes de luz.js. Para abrir, só cresce na altura (scaleY): roda no compositor. Fica acima da cena e abaixo da luz,
   do pé escuro e do grão. Só existe no prólogo. */
.abertura .fenda {
	display: none;
}
:is(html.intro .abertura, .abertura.intro) .fenda {
	position: absolute;
	z-index: -1;
	display: block;
	left: 40%;
	top: 35%;
	width: 200vmax;
	height: 200vmax;
	pointer-events: none;
	--fenda-angulo: 19.5deg;
	background: linear-gradient(
		to bottom,
		var(--fundo) 48.6%,
		transparent 49.8%,
		transparent 50.2%,
		var(--fundo) 51.4%
	);
	transform: translate(-50%, -50%) rotate(var(--fenda-angulo)) scaleY(1);
}
.abertura.intro:is([data-intro-fase="abre"], [data-intro-fase="chega"]) .fenda {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(var(--fenda-angulo)) scaleY(30);
	transition:
		transform 2200ms cubic-bezier(0.45, 0, 0.2, 1),
		opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1) 1200ms;
}
@media (max-width: 760px) {
	/* No celular, o cover mostra o meio do vídeo, onde as faixas descem a 26°, e o pé escuro cobre a tela abaixo de
	   24% da altura: a fenda passa pelo alto, onde a cena aparece. */
	:is(html.intro .abertura, .abertura.intro) .fenda {
		--fenda-angulo: 26deg;
		left: 50%;
		top: 20%;
	}
}
.abertura.intro:is([data-intro-fase="abre"], [data-intro-fase="chega"]) .luz {
	opacity: var(--luz-forca);
	transition: opacity 2400ms cubic-bezier(0.45, 0, 0.25, 1);
}

/* Enquanto o prólogo fala, a abertura espera: sem conteúdo, sem traçado, sem barra. */
:is(html.intro .abertura, .abertura.intro) > .conteudo > * {
	opacity: 0;
}
:is(html.intro .abertura, .abertura.intro) > .conteudo > :not(h1) {
	transform: translateY(18px);
}
:is(html.intro .abertura, .abertura.intro) .tracado {
	animation: none;
}
:is(html.intro .barra, .barra.intro) {
	opacity: 0;
	pointer-events: none;
}
/* A luz abre: o símbolo se desenha em fio (na assinatura, com o ponto de luz). Os mesmos valores da regra de base,
   para o desenho não recomeçar quando a classe "intro" sair. */
:is(html.intro .abertura, .abertura.intro) .tracado .rastro {
	animation: none;
}
.abertura.intro:is([data-intro-fase="abre"], [data-intro-fase="chega"]) .tracado {
	animation: tracar var(--tracar-duracao) var(--tracar-curva) var(--tracar-atraso) forwards;
}
html:not([data-intro="manifesto"]) .abertura.intro:is([data-intro-fase="abre"], [data-intro-fase="chega"]) .tracado .rastro {
	animation:
		rastrear var(--tracar-duracao) var(--tracar-curva) var(--tracar-atraso) forwards,
		rastro-acende var(--tracar-duracao) linear var(--tracar-atraso) forwards;
}
/* O conteúdo chega: rótulo, promessa linha a linha, apoio e ações; por último, a barra. */
.abertura.intro[data-intro-fase="chega"] > .conteudo > * {
	opacity: 1;
	transform: none;
	transition:
		opacity 600ms var(--easing-entrada),
		transform 800ms var(--easing-entrada);
}
.abertura.intro[data-intro-fase="chega"] > .conteudo > h1 {
	transition: none;
}
.abertura.intro[data-intro-fase="chega"] h1 .l > span {
	transform: none;
	transition-delay: calc(75ms + var(--i, 0) * 75ms);
}
.abertura.intro[data-intro-fase="chega"] > .conteudo > .faixa {
	transition-delay: 380ms;
}
.barra.intro[data-intro-fase="chega"] {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 700ms var(--easing-entrada) 450ms;
}
/* Um gesto encerrou o prólogo: tudo vai ao quadro final em 240 ms. */
.abertura.intro-pula > .conteudo > *,
.abertura.intro-pula .cena,
.abertura.intro-pula .fenda,
.abertura.intro-pula .luz,
.abertura.intro-pula h1 .l > span,
.abertura.intro-pula .fala .l > span,
.barra.intro-pula {
	transition-duration: 240ms !important;
	transition-delay: 0ms !important;
}
/* No pulo, as frases e o título ocupam o mesmo lugar: as frases somem primeiro (100 ms) e o título sobe depois,
   terminando nos mesmos 240 ms. As duas camadas de texto nunca se cruzam (vídeo do usuário, 14/11). */
.abertura.intro-pula .fala {
	opacity: 0;
	transition: opacity 100ms linear !important;
}
.abertura.intro-pula h1 .l > span {
	transition-duration: 140ms !important;
	transition-delay: 100ms !important;
}
@media (max-width: 760px) {
	.abertura.intro .prologo {
		padding-bottom: clamp(220px, 40svh, 360px);
	}
}

/* ── Ferramenta do estudo: comparar fundo, diferença e envio. Não é desenho da LP. ── */
.ferramenta {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	max-width: calc(100vw - 24px);
	padding: 8px 10px;
	border-radius: 10px;
	background: rgb(0 0 0 / 0.72);
	color: #ddd;
	font: 12px/1.2 system-ui, sans-serif;
}
.ferramenta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ferramenta button {
	padding: 4px 8px;
	border: 1px solid #555;
	border-radius: 6px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.ferramenta button[aria-pressed="true"] {
	background: #ddd;
	color: #111;
}
html.limpo .ferramenta {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.pilula,
	.lista[data-pronto]:not([data-pulo]) .pilula,
	.lista a,
	.entrar,
	.botao,
	.sanfona summary::after {
		transition: none;
	}
	.gaveta[open] {
		animation: none;
	}
	.barra {
		transition: none;
	}
	.abertura .tracado {
		animation: none;
		stroke-dashoffset: 0;
	}
	html:not([data-intro="manifesto"]) .abertura .tracado .rastro {
		animation: none;
		stroke-opacity: 0;
	}
}