/* INSS acima do teto — Lins Damasceno Advocacia
   Paleta fechada do guia da marca. Sem degradê, sem sombra projetada,
   sem vidro fosco, sem tom médio fora da lista.

   Contrastes medidos sobre os dois fundos usados na página:
     tinta   sobre marfim ......... 15,4:1
     verde   sobre marfim .......... 9,3:1
     terracota sobre marfim ........ 5,3:1  (serve para texto pequeno)
     marfim  sobre verde-negro ..... 13,3:1
     pedra   sobre verde-negro ...... 4,4:1  (reprova em AA: fica só em fio)
   Por isso, no fundo escuro, todo texto é marfim; a hierarquia vem do tamanho,
   do peso e do espacejamento, não de um cinza mais apagado.

   As fontes são servidas pelo próprio domínio: some uma requisição bloqueante
   para host externo e o IP do visitante não vai para o Google — o que importa
   num site com aviso de LGPD. */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Libre Caslon Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/libre-caslon-display-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Libre Caslon Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/libre-caslon-display-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--verde: #184733;
	--verde-negro: #0F2E2A;
	--marfim: #F2F1EC;
	--osso: #FCFCFA;
	--terracota: #A0492C;
	--tinta: #1A1A18;
	--pedra: #8C8B84;
	--linha: #E0DED5;

	--serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
	--sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--max: 76rem;
	--gutter: clamp(1.25rem, 5vw, 4rem);
	--secao-y: clamp(4rem, 9vw, 7.5rem);
	--topo-h: 5.5rem;
}

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

body.ldit-lp-page {
	margin: 0;
	background: var(--marfim);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

img { max-width: 100%; height: auto; display: block; }

/* O <picture> não pode existir para o layout.
   Três contêineres desta página são flex (a marca do topo, a tira do hero e o
   retrato do escritório) e esperam a IMAGEM como filha direta. Envolver a
   imagem num <picture> punha um elemento inline no meio, e aí `width: 100%`
   passava a medir a caixa encolhida do picture em vez da coluna. `display:
   contents` faz a caixa do picture sumir e devolve a imagem ao contêiner. */
picture { display: contents; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Foco sempre visível, e na cor que contrasta com o fundo de cada seção. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--terracota);
	outline-offset: 3px;
	border-radius: 1px;
}

.lp-secao--verde a:focus-visible,
.lp-secao--verde button:focus-visible,
.lp-secao--verde input:focus-visible,
.lp-secao--verde select:focus-visible,
.lp-hero a:focus-visible,
.lp-hero button:focus-visible,
.lp-rodape a:focus-visible {
	outline-color: var(--marfim);
}

.lp-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .75rem 1.25rem;
	background: var(--marfim);
	color: var(--verde-negro);
	font-size: .875rem;
}
.lp-pular:focus { left: 0; }

/* ---------------------------------------------------------------- estrutura */

.lp-interno {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.lp-interno--estreito { max-width: 48rem; }

.lp-secao { padding-block: var(--secao-y); }
.lp-secao--marfim { background: var(--marfim); }
.lp-secao--osso   { background: var(--osso); }
.lp-secao--verde  { background: var(--verde-negro); color: var(--marfim); }

/* O cabeçalho é fixo: sem isto a âncora encosta o título embaixo dele. */
[id] { scroll-margin-top: calc(var(--topo-h) + 1rem); }

/* ---------------------------------------------------------------- tipografia */

.lp-h1 {
	margin: 0 0 1.25rem;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.1rem, 1.15rem + 3.9vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.lp-h2 {
	margin: 0 0 1.5rem;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.7rem);
	line-height: 1.14;
	letter-spacing: -.01em;
	color: var(--verde-negro);
	text-wrap: balance;
}

.lp-h2--claro { color: var(--marfim); }

.lp-etiqueta {
	margin: 0 0 1rem;
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--terracota);
}

/* No fundo escuro a terracota dá 2,4:1 e não pode carregar texto:
   a etiqueta vira marfim e o acento passa para o fio ao lado. */
.lp-etiqueta--claro {
	color: var(--marfim);
	display: flex;
	align-items: center;
	gap: .75rem;
}
.lp-etiqueta--claro::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--terracota);
	flex: none;
}

.lp-cabeca { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lp-cabeca--centro { margin-inline: auto; text-align: center; }
.lp-cabeca--centro .lp-etiqueta--claro { justify-content: center; }

.lp-fecho {
	max-width: 42rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
	line-height: 1.4;
	color: var(--verde);
}
.lp-fecho--claro { color: var(--marfim); }

/* ------------------------------------------------------------------ botões */

.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .95rem 1.6rem;
	border: 1px solid transparent;
	background: none;
	font-family: var(--sans);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.lp-btn--solido {
	background: var(--verde-negro);
	border-color: var(--verde-negro);
	color: var(--marfim);
}
.lp-btn--solido:hover { background: var(--verde); border-color: var(--verde); }

/* Sobre o fundo escuro a relação se inverte: a massa clara é que avança. */
.lp-btn--claro {
	background: var(--marfim);
	border-color: var(--marfim);
	color: var(--verde-negro);
}
.lp-btn--claro:hover { background: var(--osso); border-color: var(--osso); }

.lp-btn--contorno {
	background: none;
	border-color: var(--verde-negro);
	color: var(--verde-negro);
}
.lp-btn--contorno:hover { background: var(--verde-negro); color: var(--marfim); }

/* Contorno sobre o verde-negro do hero: o de cima é desenhado em verde e
   sumiria ali. */
.lp-btn--claro-contorno {
	background: none;
	border-color: rgba(242, 241, 236, .55);
	color: var(--marfim);
}
.lp-btn--claro-contorno:hover { background: var(--marfim); border-color: var(--marfim); color: var(--verde-negro); }

/* Os dois caminhos do hero, lado a lado quando cabe. Empilhados no celular:
   dois botões de 44px na mesma linha ficariam estreitos demais para o polegar. */
.lp-hero__botoes { display: flex; flex-wrap: wrap; gap: .65rem; }
.lp-hero__botoes > .lp-btn { flex: 1 1 15rem; }

.lp-btn--bloco { width: 100%; }

.lp-btn--topo {
	padding: .8rem 1.35rem;
	font-size: .875rem;
}

/* Link-CTA: mesma intenção do botão, peso visual menor. Existe para não haver
   dois botões cheios disputando a atenção dentro da mesma seção. */
.lp-link-cta {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: .6rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--terracota);
	color: var(--verde-negro);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: gap .22s ease, color .22s ease;
}
.lp-link-cta:hover { gap: .95rem; color: var(--terracota); }

.lp-link-cta__seta {
	width: 1.15rem;
	height: 1px;
	background: currentColor;
	position: relative;
	flex: none;
}
.lp-link-cta__seta::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

/* ---------------------------------------------------------------- cabeçalho */

/* O cabeçalho usa o mármore do cabeçalho do site, e por isso a marca aqui é a
   VERDE, não a marfim: sobre pedra clara a marfim desapareceria, que é o
   inverso do problema que criou a versão marfim. A cor sólida fica declarada
   antes da textura para o texto nunca aparecer sobre transparente enquanto a
   imagem carrega. */
.lp-topo {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: #F3F0E7;
	background-image: url('marmore.png');
	background-image: image-set(
		url('marmore.avif') type('image/avif'),
		url('marmore.webp') type('image/webp'),
		url('marmore.png') type('image/png'));
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--linha);
}

.lp-topo__interno {
	max-width: var(--max);
	margin: 0 auto;
	padding-inline: var(--gutter);
	height: var(--topo-h);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.lp-topo__marca { display: flex; align-items: center; flex: none; padding-block: .6rem; }

/* O arquivo servido pelo plugin já vem recortado do vazio transparente que o
   PNG do site tem em cima e embaixo (26,7% de cada lado, medido no original):
   aqui a altura é a da marca de verdade, sem margem negativa para compensar. */
.lp-topo__marca img {
	height: clamp(2.1rem, 5.5vw, 2.75rem);
	width: auto;
	object-fit: contain;
}

.lp-topo__nav {
	display: none;
	margin-left: auto;
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.lp-topo__nav a {
	color: var(--verde-negro);
	font-size: .9375rem;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color .22s ease;
}
.lp-topo__nav a:hover { border-bottom-color: var(--terracota); }

.lp-btn--topo { margin-left: auto; }

@media (min-width: 64rem) {
	.lp-topo__nav { display: flex; }
	.lp-btn--topo { margin-left: 0; }
}

/* No celular o botão do topo daria duas chamadas iguais na mesma dobra:
   quem cumpre esse papel ali é a barra fixa de baixo. */
@media (max-width: 47.99rem) {
	.lp-btn--topo { display: none; }
}

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

.lp-hero {
	background: var(--verde-negro);
	color: var(--marfim);
	padding-block: clamp(2rem, 7vw, 6rem) clamp(2.5rem, 7vw, 6.5rem);
	position: relative;
	overflow: hidden;
}

/* Detalhe gráfico da marca: dois fios verticais — os dois vínculos — cortados
   por um fio horizontal, o teto. Desenhado em régua, sem ilustração e sem
   degradê, que o guia da marca não admite. */
.lp-hero__grafismo {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 16rem;
	pointer-events: none;
	display: none;
}

.lp-hero__grafismo span {
	position: absolute;
	background: var(--terracota);
	opacity: .38;
}

.lp-hero__grafismo span:nth-child(1) { top: 0; bottom: 34%; left: 3.5rem; width: 1px; }
.lp-hero__grafismo span:nth-child(2) { top: 0; bottom: 34%; left: 9.5rem; width: 1px; }
.lp-hero__grafismo span:nth-child(3) { bottom: 34%; left: 0; right: 0; height: 1px; opacity: .6; }

@media (min-width: 64rem) {
	.lp-hero__grafismo { display: block; }
}

.lp-hero__interno {
	max-width: var(--max);
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	position: relative;
	z-index: 1;
}

/* Composição assimétrica: a copy tem mais campo que o formulário. */
@media (min-width: 64rem) {
	.lp-hero__interno {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
		align-items: start;
	}
}

.lp-sobretitulo {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 0 1.5rem;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--marfim);
}

.lp-sobretitulo__fio {
	width: 2.25rem;
	height: 2px;
	background: var(--terracota);
	flex: none;
}

.lp-hero__sub {
	max-width: 34rem;
	margin: 0 0 2rem;
	font-size: clamp(1.02rem, .97rem + .3vw, 1.175rem);
	line-height: 1.6;
	color: var(--marfim);
}

.lp-hero__acao { margin-bottom: 2.25rem; }

.lp-micro {
	margin: .9rem 0 0;
	max-width: 26rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--marfim);
	opacity: .82;
}

.lp-confianca {
	display: flex;
	align-items: baseline;
	gap: .85rem;
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(242, 241, 236, .18);
	font-size: .8125rem;
	letter-spacing: .01em;
	color: var(--marfim);
}

.lp-confianca__fio {
	width: .35rem;
	height: .35rem;
	background: var(--terracota);
	flex: none;
	transform: translateY(-2px);
}

/* Tira de identificação do hero: rosto pequeno, nome e inscrição.
   Sem raio e sem sombra — a página inteira é de cantos retos e o guia da marca
   não admite sombra projetada; quem separa a foto do fundo é um fio de marfim. */
.lp-assinatura {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 1.15rem 0 0;
}

/* 5rem. Começou em 3,25rem (52px) e subiu duas vezes a pedido dele. Neste
   tamanho a foto passa da altura do bloco de texto ao lado e vira o elemento
   dominante da tira. Cada aumento empurra o topo do formulário para baixo na
   mesma medida no celular, que é 88% do tráfego — é o preço, e foi escolhido. */
.lp-assinatura__foto {
	width: 5rem;
	height: 5rem;
	flex: none;
	object-fit: cover;
	border: 1px solid rgba(242, 241, 236, .28);
}

.lp-assinatura__texto {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

/* .7 e não menos: sobre o verde-negro, o marfim a 70% ainda passa em AA para
   texto pequeno. Abaixo disso o rótulo reprova. */
.lp-assinatura__rotulo {
	font-size: .6875rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--marfim);
	opacity: .7;
}

.lp-assinatura__nome {
	font-size: .875rem;
	line-height: 1.35;
	color: var(--marfim);
}

.lp-assinatura__oab {
	font-size: .75rem;
	line-height: 1.35;
	color: var(--marfim);
	opacity: .78;
}

/* A mesma tira sobre a folha clara do formulário do fim. Herda tudo menos a
   cor, que sobre marfim tem de ser tinta. */
.lp-assinatura--clara {
	margin: 1.15rem 0 0;
	padding-top: 1.15rem;
	border-top: 1px solid var(--linha);
}

.lp-assinatura--clara .lp-assinatura__foto { border-color: var(--linha); }

.lp-assinatura--clara .lp-assinatura__rotulo,
.lp-assinatura--clara .lp-assinatura__nome,
.lp-assinatura--clara .lp-assinatura__oab { color: var(--tinta); }

.lp-assinatura--clara .lp-assinatura__rotulo { opacity: .64; }
.lp-assinatura--clara .lp-assinatura__oab { opacity: .74; }

/* ---------------------------------------------------------------- formulário */

.lp-forma {
	background: var(--marfim);
	color: var(--tinta);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	position: relative;
}

/* O único acento cheio de terracota do bloco, na aresta de cima —
   mesma assinatura da folha da página de atendimento. */
.lp-forma::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--terracota);
}

.lp-forma__titulo {
	margin: 0 0 1.5rem;
	font-family: var(--serif);
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--verde-negro);
}

.lp-campo { margin: 0 0 1.15rem; border: 0; padding: 0; }

.lp-campo label,
.lp-campo legend {
	display: block;
	margin: 0 0 .45rem;
	padding: 0;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--tinta);
}

.lp-campo input[type="text"],
.lp-campo input[type="tel"],
.lp-campo select {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid var(--linha);
	border-radius: 0;
	background: var(--osso);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 1rem; /* 16px: abaixo disso o iOS dá zoom ao focar */
	line-height: 1.4;
	transition: border-color .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.lp-campo input:hover,
.lp-campo select:hover { border-color: var(--pedra); }

.lp-campo input:focus,
.lp-campo select:focus {
	border-color: var(--verde);
	outline: 2px solid var(--terracota);
	outline-offset: 1px;
}

.lp-campo input[aria-invalid="true"],
.lp-campo select[aria-invalid="true"] { border-color: var(--terracota); }

.lp-select { position: relative; }

.lp-select__seta {
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1.5px solid var(--verde-negro);
	border-bottom: 1.5px solid var(--verde-negro);
	transform: rotate(45deg);
	pointer-events: none;
}

.lp-campo--escolha legend { margin-bottom: .6rem; line-height: 1.4; }

.lp-opcoes {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
}

@media (min-width: 26rem) {
	.lp-opcoes { grid-template-columns: repeat(3, 1fr); }
}

.lp-opcao__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* label.lp-opcao, e não só .lp-opcao: a regra genérica `.lp-campo label`
   tem especificidade maior e estava impondo display:block, o que deixava o
   texto grudado no topo da caixa em vez de centrado. */
label.lp-opcao {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
	margin: 0;
	padding: .55rem .5rem;
	border: 1px solid var(--linha);
	background: var(--osso);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

label.lp-opcao:hover { border-color: var(--pedra); }

.lp-opcao__input:checked + .lp-opcao {
	background: var(--verde-negro);
	border-color: var(--verde-negro);
	color: var(--marfim);
	font-weight: 500;
}

.lp-opcao__input:focus-visible + .lp-opcao {
	outline: 2px solid var(--terracota);
	outline-offset: 2px;
}

.lp-consentimento {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	margin: 1.35rem 0 1.35rem;
}

.lp-consentimento input {
	width: 1.15rem;
	height: 1.15rem;
	margin: .15rem 0 0;
	accent-color: var(--verde-negro);
	flex: none;
}

.lp-consentimento label {
	margin: 0;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tinta);
	cursor: pointer;
}

.lp-consentimento .lp-erro { grid-column: 1 / -1; }

/* Ocupa a coluna do texto, alinhado com o rótulo do consentimento. */
.lp-consentimento__link { grid-column: 2; margin: .3rem 0 0; font-size: .75rem; }

.lp-consentimento__link a {
	color: var(--verde);
	text-decoration: none;
	border-bottom: 1px solid var(--linha);
	padding-bottom: 1px;
}
.lp-consentimento__link a:hover { border-bottom-color: var(--verde); }

.lp-erro {
	margin: .4rem 0 0;
	font-size: .78125rem;
	line-height: 1.4;
	color: var(--terracota);
}

.lp-erro--geral {
	margin: 0 0 .9rem;
	padding: .7rem .85rem;
	border-left: 2px solid var(--terracota);
	background: var(--osso);
}

.lp-aviso {
	margin: 1rem 0 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--tinta);
	opacity: .72;
}

.lp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lp-noscript {
	margin: 1rem 0 0;
	padding: .8rem;
	border-left: 2px solid var(--terracota);
	font-size: .8125rem;
}

/* ----- sucesso ----- */

.lp-sucesso {
	padding: clamp(1.75rem, 3vw, 2.5rem) 0 .5rem;
	animation: lp-entra .34s ease both;
}

.lp-sucesso__marca {
	width: 2.5rem;
	height: 2px;
	margin: 0 0 1.35rem;
	background: var(--terracota);
}

.lp-sucesso__titulo {
	margin: 0 0 .65rem;
	font-family: var(--serif);
	font-size: 1.45rem;
	line-height: 1.2;
	color: var(--verde-negro);
}

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

@keyframes lp-entra {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- identificação */

.lp-colunas { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 64rem) {
	.lp-colunas { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

.lp-colunas__texto {
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 34rem;
}

.lp-ressalva-inline {
	margin-top: 1.6rem;
	padding-left: 1.15rem;
	border-left: 2px solid var(--terracota);
	font-size: .9375rem;
	line-height: 1.6;
}

/* Lista com fio, e não uma fileira de caixas iguais: o ritmo vem da régua
   horizontal que separa os itens, não de uma moldura em volta de cada um. */
.lp-situacoes {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--linha);
}

.lp-situacoes li {
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--linha);
}

.lp-situacoes h3 {
	margin: 0 0 .3rem;
	font-family: var(--sans);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--verde-negro);
}

.lp-situacoes p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--tinta);
}

/* ------------------------------------------------------------ gráfico do teto */

.lp-graf { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }

.lp-graf__quadro {
	--h-graf: clamp(12rem, 28vw, 16rem);
	/* Espaço reservado para os rótulos, que ficam fora do fluxo. Na tela
	   estreita "Total descontado no mês" quebra em três linhas e encostava na
	   nota de baixo; a folga acompanha a largura disponível. */
	--h-rotulo: 4.9rem;
	position: relative;
	max-width: 46rem;
	margin: 0 auto;
	padding: 2rem 0 0;
}

/* A altura é do trilho das barras. Os rótulos saem do fluxo, logo abaixo, para
   que a barra de 100% ocupe a altura inteira sem empurrar o texto para fora. */
.lp-graf__colunas {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(.5rem, 2.5vw, 1.75rem);
	height: var(--h-graf);
	margin-bottom: var(--h-rotulo);
}

.lp-graf__col {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	width: clamp(3.75rem, 13vw, 6.5rem);
	flex: none;
}

.lp-graf__barra {
	height: var(--altura);
	background: var(--marfim);
	transform-origin: bottom;
}

.lp-anima .lp-graf__barra {
	transform: scaleY(0);
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.lp-graf__col--total .lp-graf__barra {
	display: flex;
	flex-direction: column;
	background: none;
}

/* Dois blocos sólidos empilhados, e não um degradê: a fatia de cima é o que
   passou do limite. Ela é a única área cheia de terracota da seção. */
.lp-graf__seg { display: block; width: 100%; }
.lp-graf__seg--excesso { height: 26%; background: var(--terracota); }
.lp-graf__seg--dentro  { height: 74%; background: var(--marfim); }

.lp-anima [data-reveal].is-in .lp-graf__barra { transform: scaleY(1); }
.lp-anima [data-reveal].is-in .lp-graf__col:nth-child(3) .lp-graf__barra { transition-delay: .12s; }
.lp-anima [data-reveal].is-in .lp-graf__col--total .lp-graf__barra { transition-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
	.lp-anima .lp-graf__barra { transform: scaleY(1); }
}

/* Os sinais ficam na altura média das duas parcelas, não no meio do trilho.
   A conta é sobre --h-graf de propósito: margem em porcentagem se resolve pela
   LARGURA do container, e num container largo isso jogava os sinais para fora
   do gráfico. */
.lp-graf__op {
	align-self: flex-end;
	margin-bottom: calc(var(--h-graf) * .22);
	font-family: var(--serif);
	font-size: clamp(1.1rem, 3vw, 1.6rem);
	color: var(--marfim);
	opacity: .7;
}

.lp-graf__rotulo {
	position: absolute;
	top: calc(100% + .85rem);
	left: -.4rem;
	right: -.4rem;
	margin: 0;
	font-size: clamp(.6875rem, 1.6vw, .78125rem);
	line-height: 1.35;
	text-align: center;
	color: var(--marfim);
}

/* A régua do teto cruza o trilho a 74% da base — exatamente onde termina a
   fatia "dentro do limite" da coluna do total. */
.lp-graf__teto {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 74%;
	height: 0;
	border-top: 1px dashed rgba(242, 241, 236, .6);
	pointer-events: none;
}

/* O rótulo vai para a ponta esquerda da régua: à direita ele caía justamente
   em cima da coluna do total, que é o que a régua precisa deixar ver. */
.lp-graf__teto-rotulo {
	position: absolute;
	left: 0;
	bottom: .4rem;
	padding: .15rem .5rem;
	background: var(--verde-negro);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--marfim);
	white-space: nowrap;
}

.lp-graf__nota-excesso {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin: 1.75rem 0 0;
	font-size: .8125rem;
	color: var(--marfim);
}

.lp-graf__ponto {
	width: .6rem;
	height: .6rem;
	background: var(--terracota);
	flex: none;
}

@media (min-width: 40rem) {
	.lp-graf__quadro { --h-rotulo: 3.5rem; }
}

.lp-graf__legenda {
	max-width: 38rem;
	margin: 1.5rem auto 0;
	font-size: .78125rem;
	line-height: 1.6;
	text-align: center;
	color: var(--marfim);
	opacity: .78;
}

.lp-notas {
	list-style: none;
	max-width: 44rem;
	margin: 0 auto;
	padding: 0;
	border-top: 1px solid rgba(242, 241, 236, .18);
}

.lp-notas li {
	padding: .95rem 0 .95rem 1.5rem;
	border-bottom: 1px solid rgba(242, 241, 236, .18);
	font-size: .9375rem;
	line-height: 1.55;
	position: relative;
	color: var(--marfim);
}

.lp-notas li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.5rem;
	width: .5rem;
	height: 1px;
	background: var(--terracota);
}

/* ------------------------------------------------------- quando vale conferir */

.lp-lista-ritmo {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 54rem;
}

.lp-lista-ritmo li {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 0 1.25rem;
	align-items: baseline;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--linha);
}

.lp-lista-ritmo li:first-child { border-top: 1px solid var(--linha); }

/* Um recuo crescente e discreto dá cadência à lista sem virar decoração. */
@media (min-width: 48rem) {
	.lp-lista-ritmo li:nth-child(even) { padding-left: 2rem; }
}

.lp-lista-ritmo__num {
	font-family: var(--serif);
	font-size: 1.05rem;
	color: var(--terracota);
	letter-spacing: .04em;
}

.lp-lista-ritmo p {
	margin: 0;
	font-size: clamp(1rem, .97rem + .2vw, 1.125rem);
	line-height: 1.5;
	color: var(--verde-negro);
}

.lp-ressalva {
	max-width: 46rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: clamp(1.35rem, 3vw, 1.85rem);
	background: var(--osso);
	border-left: 3px solid var(--terracota);
}

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


/* ------------------------------------------------------------- verificação */

.lp-cabeca__apoio {
	max-width: 38rem;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--tinta);
}

.lp-verifica { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 64rem) {
	.lp-verifica {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		align-items: start;
	}
}

.lp-verifica__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--linha);
}

.lp-verifica__lista li { border-bottom: 1px solid var(--linha); }

.lp-verifica__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* A linha inteira é o alvo do clique, e não uma caixinha de 18px ao lado. */
.lp-verifica__item {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1rem .5rem 1rem 0;
	cursor: pointer;
	transition: padding-left .2s ease;
}

.lp-verifica__item:hover { padding-left: .35rem; }

.lp-verifica__marca {
	position: relative;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .15rem;
	border: 1px solid var(--pedra);
	background: var(--osso);
	transition: background-color .18s ease, border-color .18s ease;
}

/* O sinal de marcado é desenhado em fio, sem ícone de biblioteca. */
.lp-verifica__marca::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: .52rem;
	height: .28rem;
	margin: -.18rem 0 0 -.28rem;
	border-left: 1.5px solid var(--marfim);
	border-bottom: 1.5px solid var(--marfim);
	transform: rotate(-45deg) scale(.4);
	opacity: 0;
	transition: opacity .16s ease, transform .16s ease;
}

.lp-verifica__input:checked + .lp-verifica__item .lp-verifica__marca {
	background: var(--verde-negro);
	border-color: var(--verde-negro);
}

.lp-verifica__input:checked + .lp-verifica__item .lp-verifica__marca::after {
	opacity: 1;
	transform: rotate(-45deg) scale(1);
}

.lp-verifica__input:focus-visible + .lp-verifica__item .lp-verifica__marca {
	outline: 2px solid var(--terracota);
	outline-offset: 2px;
}

.lp-verifica__texto {
	font-size: clamp(.9375rem, .92rem + .15vw, 1.0625rem);
	line-height: 1.5;
	color: var(--verde-negro);
}

.lp-verifica__input:checked + .lp-verifica__item .lp-verifica__texto { font-weight: 500; }

/* ----- painel de resultado ----- */

.lp-painel {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--osso);
	border-top: 3px solid var(--terracota);
}

@media (min-width: 64rem) {
	.lp-painel { position: sticky; top: calc(var(--topo-h) + 2rem); }
}

.lp-painel__vazio {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--tinta);
}

.lp-painel__titulo {
	margin: 0 0 1.1rem;
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
	line-height: 1.25;
	color: var(--verde-negro);
}

.lp-painel__itens {
	list-style: none;
	margin: 0 0 1.35rem;
	padding: 0;
}

.lp-painel__itens li {
	position: relative;
	padding: .7rem 0 .7rem 1.4rem;
	border-bottom: 1px solid var(--linha);
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--tinta);
	animation: lp-entra .3s ease both;
}

.lp-painel__itens li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.25rem;
	width: .5rem;
	height: 1px;
	background: var(--terracota);
}

.lp-painel__nota {
	margin: 0 0 1.5rem;
	font-size: .78125rem;
	line-height: 1.55;
	color: var(--tinta);
	opacity: .78;
}

.lp-painel__btn { width: 100%; }

/* ------------------------------------------------- acréscimos do formulário */

/* Dica de formato fixa. Substitui o placeholder, que some justamente quando a
   pessoa precisa dele — a recomendação 5 do NN/g sobre formulários. */
.lp-dica {
	margin: -.2rem 0 .45rem;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--tinta);
	opacity: .75;
}

.lp-pontos-aviso {
	margin: 0 0 1.1rem;
	padding: .65rem .8rem;
	background: var(--osso);
	border-left: 2px solid var(--terracota);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--tinta);
}

/* O que acontece depois de enviar. */
.lp-depois {
	counter-reset: passo;
	list-style: none;
	margin: 1.15rem 0 0;
	padding: 0;
}

.lp-depois li {
	counter-increment: passo;
	position: relative;
	padding: 0 0 .55rem 1.75rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--tinta);
}

.lp-depois li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.15rem;
	height: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--linha);
	font-size: .6875rem;
	color: var(--verde);
}

.lp-depois li:last-child { padding-bottom: 0; }

/* Como você prefere seguir: duas opções com uma linha de apoio cada.

   Uma coluna até 30rem, e não as 26rem das outras opções: lado a lado num
   celular estreito, a linha de apoio quebra em quatro e as duas caixas saem
   com alturas diferentes. Vem depois da regra de três colunas na folha, então
   é a ordem do arquivo que decide — não mova este bloco para cima. */
.lp-opcoes--duas { grid-template-columns: 1fr; }

@media (min-width: 30rem) {
	.lp-opcoes--duas { grid-template-columns: repeat(2, 1fr); }
}

label.lp-opcao--dupla {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .18rem;
	min-height: 3.4rem;
	padding: .75rem .85rem;
	text-align: left;
}

.lp-opcao__titulo {
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.3;
}

.lp-opcao__apoio {
	font-size: .75rem;
	font-weight: 400;
	line-height: 1.4;
	opacity: .7;
}

/* Sobre o verde-negro da opção marcada, 0,7 de opacidade derrubaria o marfim
   para perto de 6:1. Em 0,88 o texto de apoio continua secundário e continua
   passando com folga. */
.lp-opcao__input:checked + .lp-opcao .lp-opcao__apoio { opacity: .88; }

/* ------------------------------------------------------------------ documentos */

.lp-interno--split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 64rem) {
	.lp-interno--split {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		align-items: start;
	}
	.lp-split__lado { position: sticky; top: calc(var(--topo-h) + 2.5rem); }
}

.lp-split__apoio {
	max-width: 26rem;
	font-size: .9375rem;
	line-height: 1.65;
}

.lp-docs { margin: 0; padding: 0; border-top: 1px solid var(--linha); }

.lp-docs__item {
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--linha);
}

.lp-docs dt {
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--verde-negro);
}

.lp-docs dd {
	margin: .25rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--tinta);
}

.lp-destaque {
	margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--terracota);
	font-family: var(--serif);
	font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
	line-height: 1.45;
	color: var(--verde);
}

/* ---------------------------------------------------------------- como funciona */

.lp-etapas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid rgba(242, 241, 236, .18);
}

@media (min-width: 56rem) {
	.lp-etapas {
		grid-template-columns: repeat(3, 1fr);
		border-top: 1px solid rgba(242, 241, 236, .18);
	}
}

.lp-etapa {
	padding: clamp(1.75rem, 3vw, 2.5rem) 0;
	border-bottom: 1px solid rgba(242, 241, 236, .18);
}

@media (min-width: 56rem) {
	.lp-etapa {
		padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
		border-bottom: 0;
		border-right: 1px solid rgba(242, 241, 236, .18);
	}
	.lp-etapa:first-child { padding-left: 0; }
	.lp-etapa:last-child { border-right: 0; padding-right: 0; }
}

.lp-etapa__num {
	display: block;
	margin-bottom: .9rem;
	font-family: var(--serif);
	font-size: 2.15rem;
	line-height: 1;
	color: var(--terracota);
}

.lp-etapa__titulo {
	margin: 0 0 .55rem;
	font-family: var(--serif);
	font-size: 1.28rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--marfim);
}

.lp-etapa p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--marfim);
}

/* ------------------------------------------------------------------ escritório */

.lp-interno--retrato { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 64rem) {
	.lp-interno--retrato {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		align-items: start;
	}
}

.lp-retrato { margin: 0; position: relative; }

/* A foto é enquadrada em retrato alto e ancorada no topo: o corte fica no
   enquadramento, e não numa moldura decorativa em volta. */
.lp-retrato img {
	width: 100%;
	height: auto;
	/* A proporção é a MESMA do recorte gerado por `preparar-foto.py` (2:3).
	   Se as duas divergirem, o object-fit recorta de novo por cima do
	   enquadramento já escolhido — e o corte que aparece na tela deixa de ser
	   o que foi decidido no arquivo. */
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: 50% 50%;
	filter: saturate(.92);
}

/* Fio de terracota encostado na aresta inferior esquerda — o mesmo gesto do
   topo da folha do formulário, virado de lado. */
.lp-retrato::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 4.5rem;
	height: 3px;
	background: var(--terracota);
}

.lp-retrato__texto { font-size: 1.0625rem; line-height: 1.7; max-width: 40rem; }

.lp-marcas {
	list-style: none;
	margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
	padding: 0;
	border-top: 1px solid var(--linha);
}

.lp-marcas li {
	position: relative;
	padding: .8rem 0 .8rem 1.5rem;
	border-bottom: 1px solid var(--linha);
	font-size: .9375rem;
	line-height: 1.5;
}

.lp-marcas li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: .5rem;
	height: 1px;
	background: var(--terracota);
}

.lp-citacao {
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--verde);
}

.lp-citacao p {
	margin: 0 0 .9rem;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
	line-height: 1.4;
	color: var(--verde-negro);
}

.lp-citacao footer {
	font-size: .8125rem;
	color: var(--tinta);
}

.lp-citacao footer span {
	display: block;
	margin-top: .15rem;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--verde);
}

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

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

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

.lp-faq__item summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.15rem 0;
	cursor: pointer;
	list-style: none;
}

.lp-faq__item summary::-webkit-details-marker { display: none; }

.lp-faq__pergunta {
	font-size: clamp(1rem, .97rem + .2vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.45;
	color: var(--verde-negro);
}

/* Cruz que vira traço quando aberto: um sinal, e não um ícone de biblioteca. */
.lp-faq__sinal {
	position: relative;
	flex: none;
	width: .875rem;
	height: .875rem;
	margin-top: .3rem;
}
.lp-faq__sinal::before,
.lp-faq__sinal::after {
	content: "";
	position: absolute;
	background: var(--terracota);
	transition: transform .24s ease, opacity .24s ease;
}
.lp-faq__sinal::before { left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; }
.lp-faq__sinal::after  { top: 0; left: 50%; height: 100%; width: 1.5px; margin-left: -.75px; }

.lp-faq__item[open] .lp-faq__sinal::after { transform: scaleY(0); opacity: 0; }

.lp-faq__resposta {
	padding: 0 0 1.35rem;
	max-width: 42rem;
}

.lp-faq__resposta p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--tinta);
}

.lp-faq__item[open] .lp-faq__resposta { animation: lp-entra .28s ease both; }

/* ------------------------------------------------------------------ CTA final */

.lp-final__grade { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 64rem) {
	.lp-final__grade {
		grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
		align-items: center;
	}
}

.lp-sobretitulo--claro { color: var(--marfim); }

.lp-final__h2 { max-width: 22ch; }

.lp-final__sub {
	max-width: 32rem;
	margin: 0 0 2rem;
	font-size: clamp(1rem, .97rem + .25vw, 1.125rem);
	line-height: 1.65;
	color: var(--marfim);
}

/* No desktop o formulário está ao lado: repetir ali um botão cheio criaria
   duas chamadas idênticas lado a lado. O botão é para o celular, onde o
   formulário vem abaixo. */
@media (min-width: 64rem) {
	.lp-final__btn { display: none; }
}

.lp-final__zap {
	margin: 1.5rem 0 0;
	font-size: .875rem;
	color: var(--marfim);
}

.lp-final__zap a {
	display: inline-block;
	color: var(--marfim);
	text-decoration: none;
	padding-block: .3rem 2px;
	border-bottom: 1px solid var(--terracota);
	margin-left: .35rem;
}
.lp-final__zap a:hover { border-bottom-color: var(--marfim); }

.lp-final__prazo { display: block; margin-top: .45rem; font-size: .8125rem; opacity: .78; }

/* ---------------------------------------------------------------------- vídeos */

/* Seção secundária, e o espaçamento diz isso: ela respira menos que as
   outras, para não competir com o formulário que vem logo antes. */
.lp-veja { padding-block: clamp(2.75rem, 5vw, 4rem); }
.lp-veja__h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }

.lp-videos {
	list-style: none;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.15rem, 3vw, 2rem);
}

.lp-videos li { flex: 0 1 13.5rem; max-width: 13.5rem; }

.lp-video {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	text-decoration: none;
	color: var(--tinta);
}

.lp-video__capa {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--verde-negro);
	border: 1px solid var(--linha);
}

.lp-video__capa img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	transition: transform .3s ease;
}

.lp-video:hover .lp-video__capa img { transform: scale(1.03); }

/* Triângulo de play em massa de cor: sem sombra e sem degradê, que o guia da
   marca não admite. O disco de marfim é o que garante a leitura sobre
   qualquer quadro de vídeo. */
.lp-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3rem;
	height: 3rem;
	margin: -1.5rem 0 0 -1.5rem;
	border-radius: 50%;
	background: var(--marfim);
}

.lp-video__play::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .5rem 0 .5rem .8rem;
	border-color: transparent transparent transparent var(--verde-negro);
}

.lp-video__rotulo {
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--verde-negro);
}

.lp-video__meta {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--terracota);
}

.lp-video:hover .lp-video__rotulo { text-decoration: underline; text-underline-offset: 3px; }

.lp-video:focus-visible {
	outline: 2px solid var(--terracota);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.lp-video__capa img { transition: none; }
	.lp-video:hover .lp-video__capa img { transform: none; }
}

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

.lp-rodape {
	background: var(--verde-negro);
	color: var(--marfim);
	padding-block: clamp(3rem, 6vw, 4.5rem) 0;
	border-top: 1px solid rgba(242, 241, 236, .14);
}

.lp-rodape__grade {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 48rem) {
	.lp-rodape__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
	/* A quarta coluna passou a ser "Redes", que é curta: a proporção antiga
	   sobrava lá e faltava no endereço, que quebrava "Avenida Tancredo Neves,"
	   e "2227" em duas linhas. */
	.lp-rodape__grade { grid-template-columns: 1.15fr 1.2fr 1.15fr .95fr; }
}

/* Sozinha na coluna, a marca é impressa por largura, e não por altura: assim
   ela ocupa a mesma faixa das colunas de texto ao lado em vez de flutuar
   pequena num bloco vazio. */
/* A coluna da marca é centrada: a logo e a assinatura têm a mesma largura e
   ficam empilhadas, então alinhá-las pela borda esquerda deixava a placa solta. */
.lp-rodape__marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* A assinatura sobre a mesma textura de mármore do cabeçalho do site
   (`8ec3c4e7…png`, recortada e reduzida para 600x140 aqui dentro).
   Não é só estética: em terracota sobre o verde-negro o texto dava **2,49:1** e
   sumia; sobre este mármore dá **5,29:1**, e **5,08:1** na veia mais escura da
   textura — passa em AA. O `image-set` entrega AVIF (0,5 KB) ou WebP, e a
   primeira declaração é o PNG, para quem não conhece a função. */
.lp-rodape__assinatura {
	width: min(100%, 15rem);
	margin: 1.1rem 0 0;
	padding: .75rem 1rem;
	background-image: url('marmore.png');
	background-image: image-set(
		url('marmore.avif') type('image/avif'),
		url('marmore.webp') type('image/webp'),
		url('marmore.png') type('image/png'));
	background-size: cover;
	background-position: center;
	font-family: var(--serif);
	font-size: 1.05rem;
	line-height: 1.3;
	letter-spacing: .01em;
	text-align: center;
	color: var(--terracota);
}

.lp-rodape__logo {
	width: min(100%, 15rem);
	height: auto;
	margin: 0;
	object-fit: contain;
}

.lp-rodape__rotulo {
	margin: 0 0 .6rem;
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--marfim);
	opacity: .7;
}

.lp-rodape__bloco p {
	margin: 0;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--marfim);
}

.lp-rodape__redes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lp-rodape__redes li {
	position: relative;
	padding-left: 1rem;
	font-size: .875rem;
	line-height: 1.7;
}

.lp-rodape__redes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .85rem;
	width: .45rem;
	height: 1px;
	background: var(--terracota);
}

/* O aviso agora vive na faixa de baixo, acima do copyright. */
.lp-rodape__aviso {
	max-width: 46rem;
	margin: 0 0 1.15rem;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--marfim);
	opacity: .78;
}

.lp-rodape a {
	display: inline-block;
	padding-block: .2rem;
	color: var(--marfim);
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 241, 236, .3);
}
.lp-rodape a:hover { border-bottom-color: var(--terracota); }

.lp-rodape__base {
	padding-block: 1.35rem;
	border-top: 1px solid rgba(242, 241, 236, .14);
}

.lp-rodape__creditos {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
}

.lp-rodape__creditos p {
	margin: 0;
	font-size: .78125rem;
	color: var(--marfim);
	opacity: .78;
}

/* -------------------------------------------------------- barra fixa (celular) */

.lp-barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: flex;
	align-items: stretch;
	gap: .55rem;
	padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
	background: var(--marfim);
	border-top: 1px solid var(--linha);
	transform: translateY(110%);
	transition: transform .28s ease;
}

.lp-barra[hidden] { display: none; }
.lp-barra.is-visivel { transform: none; }

.lp-barra__cta {
	flex: 1 1 auto;
	padding: .85rem 1rem;
	font-size: .875rem;
}

/* O WhatsApp fica disponível, mas em contorno: não disputa com o CTA. */
.lp-barra__zap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	flex: none;
	border: 1px solid var(--linha);
	color: var(--verde);
	background: var(--osso);
}
.lp-barra__zap:hover { border-color: var(--verde); }

@media (min-width: 48rem) {
	.lp-barra { display: none !important; }
}

/* --------------------------------------------------------------- revelação */

/* A revelação é opcional por construção: só existe depois que o JS marca o
   documento com .lp-anima. Sem script — ou se o script falhar — o conteúdo
   nasce visível. Esconder texto atrás de opacity:0 dependendo de JavaScript
   é como uma seção inteira some sem ninguém perceber. */
.lp-anima [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s ease;
}

.lp-anima [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.lp-anima [data-reveal] { opacity: 1; transform: none; }
}

/* A barra de administração desloca o cabeçalho fixo para quem está logado. */
body.admin-bar .lp-topo { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .lp-topo { top: 46px; }
}