/*
	Base do tema Pictore.

	Tudo que é sistema mora aqui: fontes, fichas de cor, escala tipográfica,
	espaçamento e os poucos componentes que se repetem. Folhas de seção (como
	solucoes.css) só acrescentam o que é daquela seção.

	As razões de contraste anotadas ao lado das cores foram calculadas, não
	estimadas. Elas são o que justifica a base escura: ciano sobre branco é
	1,55:1 e reprova. Não mexer em nenhum valor sem recalcular.
*/

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fontes/manrope-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: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fontes/manrope-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;
}

:root {
	/* Cores do manual. */
	--pic-azul: #5481ff;
	--pic-ciano: #12e4ff;
	--pic-grafite: #1d1d24;
	--pic-branco: #ffffff;
	--pic-roxo: #9900ff;

	/* Escala de cinza medida sobre grafite. */
	--pic-cinza-1: #e8e8ed; /* 13,72:1 — texto principal alternativo */
	--pic-cinza-2: #c9c9d2; /* 10,19:1 — texto de apoio */
	--pic-cinza-3: #a8a8b4; /*  7,12:1 — secundário, legendas */
	--pic-cinza-4: #8a8a96; /*  4,91:1 — limite do texto pequeno */
	--pic-borda: #6e6e7a; /*  3,33:1 — só bordas, nunca texto */

	/* Superfícies. O sistema tem duas, e só duas. */
	--pic-fundo: var(--pic-grafite);
	--pic-elevado: #24242d;
	--pic-linha: #2e2e39;
	--pic-claro: #f5f5f7;

	/* Papéis de texto. */
	--pic-texto: var(--pic-branco);
	--pic-texto-2: var(--pic-cinza-2);
	--pic-texto-3: var(--pic-cinza-3);

	/*
		Ciano é a cor de ação do site: botão ciano com texto grafite entrega
		10,82:1. Não trocar por azul, que cai para 4,76:1.
	*/
	--pic-acao: var(--pic-ciano);

	/*
		Gradientes (decisão V5). O institucional é o padrão da marca. O
		expandido é assinatura da página de AI Ready e, fora dela, só entra
		como acento em elemento gráfico — nunca como assinatura de seção e
		nunca duas vezes na mesma tela.

		--pic-grad-destaque é o que os componentes usam. Cada página aponta
		ele para um dos dois; assim o uso fora da regra fica explícito no
		código em vez de virar decisão de momento.
	*/
	--pic-grad-institucional: linear-gradient(135deg, #5481ff, #12e4ff);
	--pic-grad-expandido: linear-gradient(135deg, #9900ff, #5481ff, #12e4ff);
	--pic-grad-destaque: var(--pic-grad-institucional);

	/*
		O gradiente que PODE ficar embaixo de texto escuro, e é por isso que
		ele é um token separado.

		Medido no rasterizador do próprio navegador, amostrando pixel a pixel a
		faixa que o rótulo do botão ocupa, contra o grafite do texto:

		| expandido, como está       | 2,94:1 | reprova |
		| expandido com o roxo em -80% | 4,26:1 | reprova |
		| institucional              | 5,27:1 | passa   |

		O roxo #9900FF é escuro demais para carregar texto grafite, e clarear o
		texto não salva: branco sobre o ciano da outra ponta dá 1,55:1. Não é
		ajuste de gosto, é a ponta do gradiente que não serve de fundo de
		leitura.

		Separar o token é o que impede o acidente: uma seção pode apontar
		`--pic-grad-destaque` para o expandido — e o AI Ready aponta — sem que
		o botão daquela seção vá junto e reprove sem ninguém perceber.
	*/
	--pic-grad-acao: var(--pic-grad-institucional);

	/* Tipografia. Uma família só, usada na amplitude inteira. */
	--pic-fonte: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Ritmo vertical. */
	--pic-esp-1: 0.5rem;
	--pic-esp-2: 1rem;
	--pic-esp-3: 1.5rem;
	--pic-esp-4: 2.5rem;
	--pic-esp-5: 4rem;
	--pic-esp-6: clamp(3.5rem, 9vw, 6.5rem);

	/* Larguras. */
	--pic-medida: 44rem; /* medida de leitura confortável */
	--pic-largo: 76rem;
	--pic-gutter: clamp(1.25rem, 5vw, 3rem);
}

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

html {
	/*
		Sem scroll-behavior: smooth global. A rolagem suave entra caso a caso,
		por JavaScript, e sempre respeitando prefers-reduced-motion — global
		ela atrapalha quem usa teclado e leitor de tela.
	*/
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--pic-fundo);
	color: var(--pic-texto-2);
	font-family: var(--pic-fonte);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--pic-texto);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 7vw, 5.1rem);
	font-weight: 200;
	letter-spacing: -0.035em;
}

h2 {
	font-size: clamp(1.9rem, 4.2vw, 3.1rem);
	letter-spacing: -0.03em;
}

h3 {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 500;
	letter-spacing: -0.015em;
}

h4 {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

p {
	margin: 0;
	text-wrap: pretty;
}

strong {
	color: var(--pic-texto);
	font-weight: 600;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--pic-acao);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/*
	Foco visível em tudo que recebe foco, com folga suficiente para ser visto
	sobre o grafite. WCAG 2.2 cobra isso explicitamente (2.4.11).
*/
:focus-visible {
	outline: 2px solid var(--pic-ciano);
	outline-offset: 3px;
	border-radius: 2px;
}

.pic-pular {
	position: absolute;
	left: var(--pic-gutter);
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--pic-ciano);
	color: var(--pic-grafite);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-120%);
}

.pic-pular:focus {
	transform: translateY(0);
}

/* Só para leitor de tela. */
.pic-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pic-env {
	width: 100%;
	max-width: var(--pic-largo);
	margin-inline: auto;
	padding-inline: var(--pic-gutter);
}

.pic-medida {
	max-width: var(--pic-medida);
}

.pic-rotulo {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--pic-texto-3);
}

/* Botões. Raio quase reto: o sistema não arredonda tudo. */
.pic-botao {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, filter 0.18s ease;
}

/*
	O botão primário carrega o GRADIENTE DA MARCA, e não uma cor chapada —
	pedido do design, para o botão e o título da seção falarem a mesma língua.

	Ele sai de `--pic-grad-acao` e não de `--pic-grad-destaque`: é o mesmo
	azul→ciano do gradiente institucional, na mesma diagonal e terminando no
	mesmo ciano do título, mas sem a ponta roxa, que não sustenta texto escuro
	(2,94:1 medidos). A conta inteira está no bloco do token.

	A cor chapada continua declarada embaixo. Não é enfeite: se o gradiente não
	pintar por qualquer motivo, o texto grafite cai sobre o ciano, que é o par
	de 10,82:1 do manual — nunca sobre transparente.
*/
.pic-botao--primario {
	background-color: var(--pic-ciano);
	background-image: var(--pic-grad-acao);
	color: var(--pic-grafite);
}

/*
	No hover o botão CLAREIA, e não vira branco chapado.

	Antes ele trocava o ciano pelo branco, o que fazia sentido numa cor sólida.
	Com gradiente a troca jogava fora justamente a identidade que ele passou a
	carregar — e pior, em dois tempos: `background-image` não faz transição,
	então o gradiente sumia na hora e só a cor de reserva atravessava os 180 ms.

	`brightness` resolve os dois: mantém o gradiente, transita de verdade e
	clareia o fundo sob um texto escuro, o que só melhora o contraste. A luz que
	passa continua sendo o gesto principal do hover.
*/
.pic-botao--primario:hover {
	filter: brightness(1.14);
}

.pic-botao--secundario {
	color: var(--pic-texto);
	border-color: var(--pic-borda);
}

.pic-botao--secundario:hover {
	border-color: var(--pic-ciano);
	color: var(--pic-ciano);
}

/*
	Faixa clara.

	Aparece no máximo duas vezes por página, sempre marcando virada de
	assunto. Escassez é o que dá valor ao recurso: se acontecesse a cada
	bloco, não se sentiria nada.

	Aqui o ciano sai de cena — sobre branco ele é 1,55:1 e reprova. A cor de
	ação vira o roxo (5,53:1) ou o grafite puro.
*/
.pic-respiro {
	background: var(--pic-claro);
	color: #3a3a46;
}

.pic-respiro h1,
.pic-respiro h2,
.pic-respiro h3,
.pic-respiro h4 {
	color: var(--pic-grafite);
}

.pic-respiro strong {
	color: var(--pic-grafite);
}

.pic-respiro .pic-rotulo {
	color: #6b6b78;
}

.pic-respiro a:not(.pic-botao) {
	color: #7a12b8; /* roxo escurecido: 5,53:1 do manual precisa de margem em link */
}

.pic-respiro :focus-visible {
	outline-color: var(--pic-grafite);
}

/* Botão para as faixas claras, onde o ciano não pode aparecer. */
.pic-botao--escuro {
	background: var(--pic-grafite);
	color: var(--pic-branco);
}

.pic-botao--escuro:hover {
	background: #33333f;
}

/*
	O botão de reabrir cookies do plugin disputa o pé da tela com o botão
	flutuante do Pictore Leads, se os dois ficarem do mesmo lado (o de cookies
	nasce à esquerda; o de contato fica à direita). O plugin expõe esta
	variável justamente para o tema reservar espaço, e só na largura em que os
	dois coexistem.
*/
@media (max-width: 720px) {
	:root:has(.pleads-flutuante) {
		--pcon-reabrir-desvio: 72px;
	}
}

/*
	O assistente de contato (plugin Pictore Leads) com a identidade do site.

	O plugin chega neutro e lê estas variáveis. Superfície grafite, ação no
	ciano com texto grafite (10,82:1, a mesma conta do botão primário) e raio
	quase reto, como o resto do sistema. O erro é um vermelho claro porque o
	vermelho do plugin, pensado para fundo branco, some no grafite.
*/
:root {
	--pleads-fonte: var(--pic-fonte);
	--pleads-fundo: var(--pic-fundo);
	--pleads-elevado: var(--pic-elevado);
	--pleads-texto: var(--pic-texto);
	--pleads-texto-2: var(--pic-cinza-2);
	--pleads-texto-3: var(--pic-cinza-3);
	--pleads-linha: var(--pic-linha);
	--pleads-linha-forte: var(--pic-borda);
	--pleads-acao: var(--pic-ciano);
	--pleads-acao-fundo: var(--pic-grad-acao);
	--pleads-acao-texto: var(--pic-grafite);
	--pleads-destaque: var(--pic-grad-institucional);
	--pleads-erro: #ff9a8f;
	--pleads-veu: rgba(12, 12, 16, 0.72);
	--pleads-raio: 2px;
	--pleads-raio-caixa: 4px;
	--pleads-sombra: 0 40px 120px rgba(0, 0, 0, 0.6);
	--pleads-flutuante-fundo: var(--pic-grad-acao);
	--pleads-flutuante-icone: var(--pic-grafite);
}

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

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

/*
	Fixo no topo, e fora do caminho na descida (aprovado em 24/09/2026).

	O cabeçalho some quando a pessoa rola para baixo e volta ao primeiro gesto
	para cima. Barra sempre visível foi descartada por um motivo do próprio
	site: o palco dos momentos na Home e o percurso de Soluções prendem a tela
	inteira, compostos para ela — uma barra fixa cobriria o topo dos dois, e no
	celular comeria tela durante a leitura.

	Tudo depende de `.e-vivo`, que `cabecalho.js` põe ao iniciar. Sem
	JavaScript o cabeçalho fica no fluxo, como sempre esteve: preso no topo e
	sem saber a direção da rolagem, ele só cobriria conteúdo.

	`--pic-cab-altura` é a altura da barra em cada largura. Os saltos de âncora
	descontam ela, para o título não parar debaixo da barra.
*/
:root {
	--pic-cab-altura: 5.75rem;
}

html {
	scroll-padding-top: var(--pic-cab-altura);
}

.pic-cabecalho {
	position: relative;
	z-index: 50;
	padding-block: var(--pic-esp-3);
	border-bottom: 1px solid var(--pic-linha);
	background: var(--pic-fundo);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
		background-color 0.3s ease, border-color 0.3s ease;
}

.pic-cabecalho.e-vivo {
	position: sticky;
	top: 0;
}

/*
	Quem navega por teclado nunca fica com o foco numa barra escondida.
	`:focus-visible`, e não `:focus-within`: depois de fechar o painel no toque
	o foco volta ao botão "Menu", e com `:focus-within` a barra ficava presa
	na tela até alguém tocar em outra coisa — medido no Firefox.
*/
.pic-cabecalho.e-oculto:not(:has(:focus-visible)) {
	transform: translateY(-100%);
}

/*
	Sobre uma abertura de tela cheia o cabeçalho flutua, sem fundo e sem
	linha. É o que faz a abertura ler como tela cheia em vez de faixa abaixo
	de uma barra; o padding do topo dela reserva o espaço.

	Com `cabecalho.js` ele passa de absoluto a fixo, e ganha o fundo
	(`.e-solto`) quando a abertura termina de passar por baixo dele.

	Nasceu só na Home (`.home`); desde 28/09/2026 vale para toda página que
	tenha `[data-abertura]` — as internas ganharam a mesma abertura.
*/
body:has([data-abertura]) .pic-cabecalho {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: transparent;
	border-bottom-color: transparent;
}

body:has([data-abertura]) .pic-cabecalho.e-vivo {
	position: fixed;
}

body:has([data-abertura]) .pic-cabecalho.e-solto {
	background: var(--pic-fundo);
	border-bottom-color: var(--pic-linha);
}

body:has([data-abertura]) .pic-cabecalho:not(.e-solto) .pic-cabecalho__marca img,
body:has([data-abertura]) .pic-cabecalho:not(.e-solto) .pic-cabecalho__cta,
body:has([data-abertura]) .pic-cabecalho:not(.e-solto) .pic-cabecalho__abrir {
	filter: drop-shadow(0 0.25rem 0.9rem rgba(0, 0, 0, 0.55));
}

/* A lista só leva a sombra em linha: dentro do painel ela está sobre o grafite. */
@media (min-width: 56.01rem) {
	body:has([data-abertura]) .pic-cabecalho:not(.e-solto) .pic-menu__lista {
		filter: drop-shadow(0 0.25rem 0.9rem rgba(0, 0, 0, 0.55));
	}
}

.pic-cabecalho__env {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pic-esp-2) var(--pic-esp-4);
}

.pic-cabecalho__marca {
	display: block;
	flex: none;
	line-height: 0;
}

.pic-cabecalho__marca img {
	width: auto;
	height: 2.6rem;
}

.pic-menu {
	flex: 1 1 auto;
}

/*
	No desktop o menu é a lista em linha. O elemento tem `popover` — é o mesmo
	que vira painel no celular —, então aqui ele desfaz o que o navegador
	aplica a um popover: posição fixa, caixa centrada, borda, fundo de sistema
	e, fechado, `display: none`.
*/
.pic-menu[popover] {
	position: static;
	inset: auto;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	background: none;
	color: inherit;
}

.pic-menu__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pic-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pic-menu__lista a {
	color: var(--pic-texto-2);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
}

.pic-menu__lista a:hover,
.pic-menu__lista a[aria-current="page"] {
	color: var(--pic-texto);
}

.pic-cabecalho__cta {
	flex: none;
}

/* As peças que só existem no celular. */
.pic-menu__topo,
.pic-menu__cta,
.pic-menu__curva,
.pic-cabecalho__abrir {
	display: none;
}

@media (max-width: 56rem) {
	.pic-cabecalho__cta {
		order: 3;
	}
}

/*
	O menu de celular.

	Abaixo de 56rem a lista em linha não cabe (logo, cinco itens e o CTA
	somam ~850 px), e o cabeçalho vira uma barra de 4rem: marca à esquerda,
	"Menu" à direita. O CTA sai da barra — o balão do assistente já faz essa
	chamada em toda página — e reaparece no fim do painel.

	Tudo atrás de `@supports selector(:popover-open)`: sem a API, o painel
	não abriria, então nem o botão aparece e a lista quebra em linhas, como
	antes.
*/
@supports selector(:popover-open) {
	@media (max-width: 56rem) {
		:root {
			--pic-cab-altura: 4rem;
		}

		.pic-cabecalho {
			padding-block: 0;
		}

		.pic-cabecalho__env {
			flex-wrap: nowrap;
			justify-content: space-between;
			height: 4rem;
		}

		.pic-cabecalho__marca img,
		.pic-menu__marca {
			width: auto;
			height: 2.3rem;
		}

		.pic-cabecalho__cta {
			display: none;
		}

		.pic-menu__alternar {
			display: inline-flex;
			align-items: center;
			gap: 0.55rem;
			min-height: 2.75rem;
			margin-inline-end: -0.75rem;
			padding: 0.5rem 0.75rem;
			border: 0;
			background: none;
			color: var(--pic-texto);
			font: inherit;
			font-size: 0.95rem;
			font-weight: 500;
			cursor: pointer;
		}

		.pic-menu__icone {
			width: 1.4rem;
			height: 1.4rem;
			fill: none;
			stroke: currentColor;
			stroke-width: 1.5;
			stroke-linecap: round;
		}

		/* O painel: o mesmo `<nav>`, em tela cheia na camada do topo. */
		.pic-menu[popover] {
			position: fixed;
			inset: 0;
			display: none;
			flex-direction: column;
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			padding: 0 var(--pic-gutter)
				calc(var(--pic-esp-4) + env(safe-area-inset-bottom));
			overflow-x: clip;
			overflow-y: auto;
			overscroll-behavior: contain;
			background: var(--pic-fundo);
		}

		.pic-menu[popover]:popover-open {
			display: flex;
		}

		.pic-menu::backdrop {
			background: transparent;
		}

		/* A página atrás não rola enquanto o painel está aberto. */
		html:has(.pic-menu:popover-open) {
			overflow: hidden;
		}

		/*
			O topo do painel repete a barra, na mesma altura e nas mesmas
			posições: quem abre vê o "Menu" virar "Fechar" no lugar, e não uma
			tela nova.
		*/
		.pic-menu__topo {
			position: relative;
			z-index: 1;
			display: flex;
			flex: none;
			align-items: center;
			justify-content: space-between;
			height: 4rem;
		}

		.pic-menu__lista {
			position: relative;
			z-index: 1;
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 0;
			margin-block: clamp(2rem, 8svh, 4.5rem) var(--pic-esp-4);
		}

		.pic-menu__lista a {
			display: block;
			padding-block: 0.3em;
			color: var(--pic-texto);
			font-size: clamp(2.1rem, 9.5vw, 3rem);
			font-weight: 200;
			letter-spacing: -0.035em;
			line-height: 1.12;
		}

		.pic-menu__lista a[aria-current="page"] {
			background: var(--pic-grad-institucional);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}

		.pic-menu__cta {
			position: relative;
			z-index: 1;
			display: inline-flex;
			align-self: flex-start;
			margin-top: auto;
		}

		/*
			A curva atravessa o painel por trás da lista — traço de 1 px, que
			se desenha quando o painel abre. Grande e delicada: é pena, não
			moldura (regra do cliente, 17/09/2026).
		*/
		.pic-menu__curva {
			position: absolute;
			top: 5.5rem;
			bottom: 7rem;
			right: calc(var(--pic-gutter) + 4%);
			display: block;
			aspect-ratio: 1 / 3;
			--pic-curva-peso: 1;
			pointer-events: none;
		}

		.pic-menu__curva .pic-curva {
			display: block;
			width: 100%;
			height: 100%;
			overflow: visible;
		}
	}
}

/*
	A entrada do painel. O fundo desce como uma cortina curta, os itens sobem
	um depois do outro e a curva se desenha por baixo — o mesmo vocabulário do
	resto do site, em menos de um segundo. Fechar é imediato: quem fecha quer
	a página, não um efeito.
*/
@media (prefers-reduced-motion: no-preference) {
	@supports selector(:popover-open) {
		@media (max-width: 56rem) {
			.pic-menu:popover-open {
				animation: pic-menu-cortina 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
			}

			.pic-menu:popover-open .pic-menu__lista li,
			.pic-menu:popover-open .pic-menu__cta {
				animation: pic-menu-item 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
				animation-delay: 0.12s;
			}

			.pic-menu:popover-open .pic-menu__lista li:nth-child(2) { animation-delay: 0.17s; }
			.pic-menu:popover-open .pic-menu__lista li:nth-child(3) { animation-delay: 0.22s; }
			.pic-menu:popover-open .pic-menu__lista li:nth-child(4) { animation-delay: 0.27s; }
			.pic-menu:popover-open .pic-menu__lista li:nth-child(5) { animation-delay: 0.32s; }
			.pic-menu:popover-open .pic-menu__lista li:nth-child(n + 6) { animation-delay: 0.37s; }
			.pic-menu:popover-open .pic-menu__cta { animation-delay: 0.42s; }

			/*
				O comprimento do traço é em pixels de tela, por causa do
				`non-scaling-stroke`. 2400 cobre o contorno inteiro da curva
				na maior altura que o painel chega a ter.
			*/
			.pic-menu:popover-open .pic-curva__traco {
				stroke-dasharray: 2400;
				stroke-dashoffset: 2400;
				animation: pic-menu-traco 1.6s 0.15s cubic-bezier(0.35, 0.1, 0.15, 1) forwards;
			}
		}
	}
}

@keyframes pic-menu-cortina {
	from {
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes pic-menu-item {
	from {
		opacity: 0;
		transform: translateY(1.2rem);
	}
}

@keyframes pic-menu-traco {
	to {
		stroke-dashoffset: 0;
	}
}

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

/*
	Composição de `telas/vamos_conversar.jpeg` (23/09/2026): quatro colunas —
	marca, dados, políticas e redes — com fios verticais separando os dois
	grupos de links, e uma faixa de base com o direito autoral. Um tom abaixo
	do grafite da página, para o rodapé ler como chão e não como mais uma
	seção.
*/
.pic-rodape {
	margin-top: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
	background: #18181e;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--pic-texto-3);
}

/*
	A Home e Quem somos terminam no fechamento, que já tem borda e fundo
	próprios: ali a margem do rodapé abriria um vão de grafite vazio entre
	os dois.
*/
main:has(> .conversa:last-child) + .pic-rodape {
	margin-top: 0;
}

.pic-rodape__env {
	display: grid;
	gap: var(--pic-esp-4);
	grid-template-columns: 1fr;
	max-width: 90rem;
	padding-block: var(--pic-esp-5);
}

@media (min-width: 40rem) {
	.pic-rodape__env {
		grid-template-columns: 1fr 1fr;
	}

	.pic-rodape__marca,
	.pic-rodape__dados {
		grid-column: 1 / -1;
	}
}

/*
	Quatro colunas só a partir de 75 rem. Em 1024 px a coluna dos dados
	ficava com 336 px e quebrava o CNPJ e o CEP no meio; abaixo daqui vale a
	grade de duas, com marca e dados em cima e os dois grupos de links lado
	a lado.
*/
@media (min-width: 75rem) {
	.pic-rodape__env {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 0;
	}

	.pic-rodape__marca,
	.pic-rodape__dados {
		grid-column: auto;
	}

	.pic-rodape__marca {
		padding-right: clamp(2rem, 5vw, 5.5rem);
	}

	/*
		Os fios verticais: cada grupo de links tem o seu, à esquerda, na
		mesma cor das outras linhas do site.
	*/
	.pic-rodape__legais,
	.pic-rodape__redes {
		align-self: stretch;
		justify-content: center;
		padding-inline: clamp(2rem, 4.5vw, 4.5rem);
		border-left: 1px solid var(--pic-linha);
	}

	.pic-rodape__redes {
		padding-right: 0;
	}
}

.pic-rodape__marca {
	margin: 0;
	line-height: 0;
}

.pic-rodape__marca img {
	width: auto;
	height: 3.6rem;
}

.pic-rodape__dados {
	font-style: normal;
}

.pic-rodape__dados p {
	margin: 0;
}

.pic-rodape__dados a {
	color: var(--pic-acao);
}

.pic-rodape__ponto {
	margin-inline: 0.7rem;
	color: var(--pic-texto-3);
}

.pic-rodape__legais,
.pic-rodape__redes {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.pic-rodape__legais a,
.pic-rodape__redes a {
	color: var(--pic-texto-2);
	text-decoration: none;
	transition: color 0.2s ease;
}

.pic-rodape__legais a:hover,
.pic-rodape__legais a:focus-visible,
.pic-rodape__redes a:hover,
.pic-rodape__redes a:focus-visible {
	color: var(--pic-texto);
}

.pic-rodape__redes a {
	display: inline-flex;
	align-items: center;
	gap: 1.1rem;
}

.pic-rodape__redes svg {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	color: var(--pic-texto);
	transition: color 0.2s ease;
}

.pic-rodape__redes a:hover svg,
.pic-rodape__redes a:focus-visible svg {
	color: var(--pic-acao);
}

.pic-rodape__base {
	border-top: 1px solid var(--pic-linha);
}

.pic-rodape__base .pic-env {
	max-width: 90rem;
	padding-block: var(--pic-esp-3);
}

.pic-rodape__base p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--pic-texto-3);
}

/* ---------- a faixa de cookies do Pictore All in One (29/09/2026) ---------- */

/*
	O plugin nasce neutro, claro, para conviver com qualquer site — e um
	cartão branco no canto deste site escuro lia como peça de outro lugar. O
	tema o veste com as fichas daqui, sem tocar no plugin: as variáveis
	`--pcon-*` que ele expõe, e, onde ele usa cinza fixo, a mesma classe com
	a mesma especificidade (a folha dele carrega antes desta).

	O que NÃO muda é a regra dele: aceitar e recusar têm o mesmo tamanho e o
	mesmo lugar na fila — recusar não pode custar mais esforço que aceitar.

	Sem o plugin, nada disto encontra elemento, e nada acontece.
*/
.pcon,
.pcon-reabrir {
	--pcon-escuro: var(--pic-ciano);
	--pcon-tinta: var(--pic-texto);
	--pcon-tinta-2: var(--pic-texto-2);
	--pcon-borda: var(--pic-linha);
	--pcon-papel: var(--pic-elevado);
}

.pcon__caixa {
	border-color: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	box-shadow: 0 1.4rem 3.2rem rgba(3, 3, 8, 0.6);
}

.pcon__titulo {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.pcon__botao {
	border-radius: 2px;
	font-size: 0.88rem;
}

/* Aceitar e salvar: o primário do site, grafite sobre o gradiente. */
.pcon__botao--escuro {
	border-color: transparent;
	background: var(--pic-grad-institucional);
	color: var(--pic-grafite);
}

/* Recusar: o mesmo tamanho, contorno claro. */
.pcon__botao--claro {
	border-color: var(--pic-borda);
	background: transparent;
	color: var(--pic-texto);
}

.pcon__botao--claro:hover {
	border-color: var(--pic-cinza-3);
	opacity: 1;
}

.pcon__quem {
	color: var(--pic-texto-3);
}

.pcon__sempre {
	background: rgba(255, 255, 255, 0.08);
	color: var(--pic-texto-2);
}

.pcon__chave-trilho {
	background: var(--pic-borda);
}

.pcon__chave[aria-checked="true"] .pcon__chave-trilho {
	background: var(--pic-azul);
}

.pcon-reabrir {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(36, 36, 45, 0.92);
	color: var(--pic-texto-2);
	box-shadow: 0 0.6rem 1.6rem rgba(3, 3, 8, 0.5);
}

.pcon-reabrir:hover {
	border-color: var(--pic-borda);
	color: var(--pic-texto);
}