/**
 * Site institucional da Preserva-Ação.
 *
 * Arquétipo escolhido: Editorial Luxury (creme quente, serifa variável em
 * títulos grandes, grão de filme sutil), com capa em Editorial Split e seções
 * em bento assimétrico. Foi a combinação que cabe num escritório de
 * administração judicial: sóbrio, caro, sem cara de empresa de tecnologia.
 *
 * A identidade é a da casa, medida no logotipo: verde militar #333a1a e
 * dourado #b38d31. Fontes servidas do próprio servidor (Lora e Plus Jakarta
 * Sans), escolhidas depois de conferir que cobrem todos os acentos do português.
 */

/* ============================== fontes =================================== */

@font-face {
	font-family: "Lora";
	src: url("fontes/lora.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	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;
}

/* o itálico é arquivo separado (a Lora não é variável em estilo), e a capa das
   páginas depende dele: uma palavra em itálico dourado */
@font-face {
	font-family: "Lora";
	src: url("fontes/lora-italico.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
	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: "Jakarta";
	src: url("fontes/jakarta-1.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	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;
}

/* ================================ tokens ================================= */

:root {
	/* verde militar da marca */
	--verde-950: #14180c;
	--verde-900: #1c2110;
	--verde-800: #262d16;
	--verde-700: #333a1a;
	--verde-600: #3f4a22;

	/* dourado da marca; o escuro existe para texto pequeno passar no contraste */
	--ouro: #b38d31;
	--ouro-claro: #d9bb72;
	--ouro-texto: #7d6220;
	--ouro-veu: rgba(179, 141, 49, 0.10);

	/* creme quente, do arquétipo editorial */
	--creme: #fdfbf6;
	--creme-2: #f6f2e8;
	--creme-3: #ece6d8;

	--tinta: #1a1c14;
	--tinta-2: #43483a;
	--tinta-3: #5d6153;

	--sobre-escuro: #ece9dd;
	--sobre-escuro-2: #a8ae96;

	--largura: 1240px;
	--leitura: 660px;

	/* a curva de todo movimento: massa e mola, nunca linear */
	--curva: cubic-bezier(0.32, 0.72, 0, 1);
	--curva-suave: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================= base ================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	/* o verde evita a faixa clara acima da barra flutuante, onde o fundo do
	   documento aparecia entre o topo da tela e o começo da capa */
	background: var(--verde-950);
	color: var(--tinta-2);
	font-family: "Jakarta", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	letter-spacing: -0.011em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* grão de filme: fixo, sem captura de clique, fora do fluxo de rolagem */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
	color: var(--verde-700);
	text-decoration: none;
	transition: color 0.4s var(--curva);
}

a:hover {
	color: var(--ouro-texto);
}

:focus-visible {
	outline: 2px solid var(--ouro);
	outline-offset: 4px;
	border-radius: 4px;
}

.psvar-pula {
	position: absolute;
	left: -9999px;
}

.psvar-pula:focus {
	left: 20px;
	top: 20px;
	z-index: 60;
	background: var(--creme);
	padding: 14px 24px;
	border-radius: 999px;
}

/* ============================== tipografia =============================== */

h1, h2, h3 {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	color: var(--tinta);
	letter-spacing: -0.028em;
	line-height: 1.04;
	margin: 0;
	font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
}

.psvar-realce {
	font-style: italic;
	font-weight: 400;
	color: var(--ouro);
	font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
}

/* etiqueta microscópica acima dos títulos */
.psvar-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 12px;
	border-radius: 999px;
	background: rgba(14, 17, 8, 0.92);
	box-shadow: rgba(217, 187, 114, 0.45) 0 0 0 1px inset;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ouro-claro);
}

.psvar-etiqueta::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ouro-claro);
}

.psvar-etiqueta--clara {
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.32) 0 0 0 1px inset;
	color: var(--ouro-texto);
}

.psvar-etiqueta--clara::before {
	background: var(--ouro-texto);
}

.psvar-sobretitulo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ouro-texto);
	margin: 0 0 18px;
}

.psvar-secao--escura .psvar-sobretitulo,
.psvar-capa .psvar-sobretitulo {
	color: var(--ouro-claro);
}

/* =============================== estrutura =============================== */

.psvar-largura {
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0 32px;
}

.psvar-secao {
	padding: 128px 0;
	position: relative;
}

.psvar-secao--escura {
	background: var(--verde-900);
	color: var(--sobre-escuro);
}

.psvar-secao--escura h2,
.psvar-secao--escura h3 {
	color: var(--creme);
}

.psvar-secao--clara {
	background: var(--creme-2);
}

.psvar-secao__cabeca {
	max-width: var(--leitura);
	margin: 0 0 64px;
}

.psvar-secao h2 {
	font-size: clamp(34px, 4.6vw, 56px);
	margin: 0 0 20px;
}

.psvar-secao__texto {
	font-size: 18px;
	color: var(--tinta-3);
	margin: 0;
}

.psvar-secao--escura .psvar-secao__texto {
	color: var(--sobre-escuro-2);
}

/* ============================== ilha do topo ============================= */
/* barra flutuante, descolada do topo, não colada na borda */

.psvar-topo {
	position: sticky;
	top: 20px;
	z-index: 40;
	margin: 20px auto 0;
	max-width: calc(var(--largura) - 24px);
	padding: 0 16px;
}

.psvar-topo__ilha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 10px 12px 10px 20px;
	border-radius: 999px;
	/* 0,74 é o mais transparente que passa no contraste mínimo com a
	   barra sobre imagem clara (medido no pixel: 4,98 contra 4,5) */
	background: rgba(20, 24, 12, 0.74);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow:
		rgba(255, 255, 255, 0.1) 0 0 0 1px inset,
		rgba(20, 24, 12, 0.18) 0 18px 40px -12px;
}

.psvar-marca {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.psvar-marca__placa {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(253, 251, 246, 0.95);
}

.psvar-marca__placa img {
	height: 26px;
	width: auto;
	display: block;
}

.psvar-marca__nome {
	font-family: "Lora", Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.05;
	color: var(--creme);
}

.psvar-marca__nome span {
	display: block;
	font-family: "Jakarta", sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ouro-claro);
	margin: 4px 0 0;
}

.psvar-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	/* sem isto o menu empurra a ilha e vaza 5px: flex não encolhe filho por
	   padrão, e o recuo de 14px da ilha era ignorado */
	min-width: 0;
	flex-wrap: nowrap;
}

.psvar-menu a {
	/* 11px, não 14: a lupa custa 44px no total e o menu passou a transbordar
	   7px. Com 7 itens, os 3px que cada um devolve dão os 42px que faltavam */
	padding: 9px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sobre-escuro);
	transition: color 0.4s var(--curva), background-color 0.4s var(--curva);
}

.psvar-menu a:hover {
	color: var(--creme);
	background: rgba(255, 255, 255, 0.07);
}

.psvar-menu a[aria-current] {
	color: var(--ouro-claro);
}

/* o hambúrguer vira um X de verdade, sem sumir */
.psvar-abrir-menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
	position: relative;
}

.psvar-abrir-menu span {
	position: absolute;
	left: 12px;
	width: 18px;
	height: 1.5px;
	background: var(--creme);
	border-radius: 2px;
	transition: transform 0.5s var(--curva), opacity 0.3s var(--curva);
}

.psvar-abrir-menu span:nth-child(1) { transform: translateY(-5px); }
.psvar-abrir-menu span:nth-child(2) { transform: translateY(0); }
.psvar-abrir-menu span:nth-child(3) { transform: translateY(5px); }

.psvar-abrir-menu[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.psvar-abrir-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.psvar-abrir-menu[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* ================================ botões ================================= */
/* pílula com o ícone dentro do próprio círculo, nunca solto ao lado */

.psvar-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 26px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tinta);
	font-family: "Jakarta", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: rgba(26, 28, 20, 0.16) 0 0 0 1px inset;
	transition: transform 0.5s var(--curva), background-color 0.5s var(--curva),
		box-shadow 0.5s var(--curva), color 0.5s var(--curva);
}

.psvar-btn:active {
	transform: scale(0.985);
}

.psvar-btn__bolha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 999px;
	background: rgba(26, 28, 20, 0.07);
	font-size: 13px;
	transition: background-color 0.5s var(--curva);
}

/* a bolinha aceita ícone além da seta de texto (o de sair, por exemplo) */
.psvar-btn__bolha svg {
	width: 15px;
	height: 15px;
}

/* Contorno que gira em volta da bolinha, só no hover.

   É um anel cônico: a volta inteira é transparente, menos um trecho de ~90
   graus que fica dourado. A máscara vaza o miolo, então sobra um arco fino na
   borda, e a animação gira o conjunto.

   Fica no ::after do próprio botão, posicionado sobre a bolinha, e não dentro
   dela: a bolinha já anda e cresce no hover (transform acima), e um filho
   herdaria esse movimento, fazendo o anel deslizar junto em vez de só girar.

   O anel nasce e morre com opacidade, para não aparecer cortado no meio da
   volta quando o ponteiro sai. */
.psvar-btn__bolha {
	position: relative;
}

.psvar-btn__bolha::after {
	content: "";
	position: absolute;
	/* -4px: o anel corre por FORA da bolinha, sem encostar nela */
	inset: -4px;
	border-radius: 999px;
	/* o arco começa apagado e termina cheio: dá a sensação de rastro, em vez
	   de um risco solto girando */
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 250deg,
		rgba(216, 180, 92, 0.15) 285deg,
		var(--ouro-claro, #d8b45c) 340deg,
		var(--ouro-claro, #d8b45c) 352deg,
		transparent 356deg
	);
	/* vaza o miolo: sobra só o fio de 1,5px na borda */
	-webkit-mask:
		radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
	mask:
		radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--curva);
}

.psvar-btn:hover .psvar-btn__bolha::after,
.psvar-btn:focus-visible .psvar-btn__bolha::after {
	opacity: 1;
	animation: psvar-gira-bolha 1.1s linear infinite;
}

/* no botão dourado o fio dourado sumiria: ali ele é escuro */
.psvar-btn--ouro .psvar-btn__bolha::after {
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 250deg,
		rgba(20, 24, 12, 0.12) 285deg,
		rgba(20, 24, 12, 0.72) 340deg,
		rgba(20, 24, 12, 0.72) 352deg,
		transparent 356deg
	);
}

@keyframes psvar-gira-bolha {
	to {
		transform: rotate(1turn);
	}
}

/* quem pediu menos movimento no sistema vê o anel parado, não girando */
@media (prefers-reduced-motion: reduce) {
	.psvar-btn:hover .psvar-btn__bolha::after,
	.psvar-btn:focus-visible .psvar-btn__bolha::after {
		animation: none;
	}
}

/* Botão que é filho direto de um formulário em grid.

   O .psvar-btn é inline-flex, mas dentro de um grid isso vira flex e ele estica
   na coluna inteira: no cadastro ficava com 752px de largura e no entrar com
   520px, uma barra dourada atravessando a tela. justify-self devolve o tamanho
   do conteúdo, e o botão fica centralizado na coluna. */
.psvar-contato__forma form > .psvar-btn,
.psvar-contato__forma .psvar-enviar > .psvar-btn,
form.psvar-forma > .psvar-btn,
.psvar-btn--sozinho {
	justify-self: center;
	width: fit-content;
	/* botão que conclui um formulário é o destino da tela: mais largo que os
	   botões de navegação, com a MESMA altura deles. O que cresce é o respiro
	   dos lados, não a caixa inteira */
	padding: 8px 8px 8px 44px;
	gap: 22px;
}

.psvar-btn--ouro {
	background: linear-gradient(135deg, var(--ouro) 0%, var(--ouro-claro) 100%);
	color: var(--verde-950);
	box-shadow: none;
}

.psvar-btn--ouro .psvar-btn__bolha {
	background: rgba(20, 24, 12, 0.16);
}

.psvar-btn--ouro:hover {
	color: var(--verde-950);
	box-shadow: rgba(179, 141, 49, 0.4) 0 10px 30px -8px;
}

.psvar-btn--claro {
	color: var(--creme);
	box-shadow: rgba(255, 255, 255, 0.24) 0 0 0 1px inset;
}

.psvar-btn--claro .psvar-btn__bolha {
	background: rgba(255, 255, 255, 0.12);
}

.psvar-btn--claro:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--creme);
}

.psvar-btn--escuro {
	background: var(--verde-800);
	color: var(--creme);
	box-shadow: none;
}

.psvar-btn--escuro .psvar-btn__bolha {
	background: rgba(255, 255, 255, 0.12);
}

.psvar-btn--escuro:hover {
	background: var(--verde-700);
	color: var(--creme);
	box-shadow: rgba(26, 33, 16, 0.34) 0 12px 30px -10px;
}

/* menu: o botão dourado mantém o texto escuro */
.psvar-menu a.psvar-btn--ouro,
.psvar-menu a.psvar-btn--ouro:hover {
	color: var(--verde-950);
	padding: 7px 7px 7px 20px;
}

.psvar-menu a.psvar-btn--ouro .psvar-btn__bolha {
	width: 28px;
	height: 28px;
	flex-basis: 28px;
}

/* ================================= capa ================================== */

.psvar-capa {
	position: relative;
	background: var(--verde-950);
	color: var(--creme);
	overflow: hidden;
	isolation: isolate;
	margin-top: -102px;
	padding-top: 102px;
}

.psvar-capa__fundo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.psvar-capa__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.66;
}

.psvar-capa::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(70% 90% at 8% 40%, rgba(20, 24, 12, 0.97) 0%, rgba(20, 24, 12, 0.7) 45%, rgba(20, 24, 12, 0.2) 100%),
		linear-gradient(180deg, rgba(20, 24, 12, 0.85) 0%, rgba(20, 24, 12, 0.25) 30%, rgba(20, 24, 12, 0.55) 100%);
}

/* capa em duas colunas: tipografia à esquerda, respiro à direita */
.psvar-capa__miolo {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	gap: 48px;
	align-items: end;
	/* só em cima e embaixo: o recuo lateral é de .psvar-largura, que muda
	   de 32px para 20px no celular. Escrevê-lo aqui desalinhava o título
	   do texto das seções, e no celular colava o título na borda. */
	padding-block: 124px 84px;
}

.psvar-capa h1 {
	font-size: clamp(38px, 4.6vw, 66px);
	line-height: 1.08;
	color: var(--creme);
	margin: 28px 0 26px;
	/* em pixels, não em ch: a Lora é larga e 26ch dava 681px, o que ainda
	   quebrava em três linhas. Com 940 o título cabe em duas */
	max-width: 940px;
	/* balance divide em linhas de largura parecida, e era ele que segurava o
	   título em 681px com espaço de sobra: em três linhas em vez de duas */
	text-wrap: pretty;
}

.psvar-capa__texto {
	font-size: 19px;
	line-height: 1.66;
	color: var(--sobre-escuro-2);
	margin: 0 0 40px;
	max-width: 46ch;
}

.psvar-capa__acoes {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* os números, em cartão de vidro na coluna da direita */
.psvar-numeros {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	padding: 2px;
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: rgba(255, 255, 255, 0.14) 0 0 0 1px inset;
	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
}

.psvar-numero {
	padding: 26px 22px;
	border-radius: 24px;
	/* opaco o bastante para o texto passar no contraste sobre qualquer trecho da foto */
	background: rgba(16, 19, 10, 0.88);
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.psvar-numero__valor {
	font-family: "Lora", Georgia, serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	color: var(--ouro-claro);
	margin: 0;
	font-variation-settings: "opsz" 144;
}

.psvar-numero__rotulo {
	font-size: 12px;
	line-height: 1.4;
	color: var(--sobre-escuro);
	margin: 10px 0 0;
}

/* ================================ grades ================================= */

.psvar-grade {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.psvar-grade--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

.psvar-grade--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

/* bento assimétrico: o primeiro cartão ocupa mais espaço */
.psvar-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
}

.psvar-bento > * {
	grid-column: span 4;
}

.psvar-bento > *:first-child {
	grid-column: span 8;
}

/* ================================ cartões ================================ */
/* moldura dupla: casca externa com folga, miolo com raio menor */

/* a moldura dupla sai sem elemento extra: a casca é o próprio cartão (o padding
   de 6px cria a folga) e o miolo é um pseudo-elemento desenhado por trás */
.psvar-cartao {
	position: relative;
	display: block;
	padding: 38px 36px;
	border-radius: 28px;
	background: rgba(26, 28, 20, 0.035);
	box-shadow: rgba(26, 28, 20, 0.07) 0 0 0 1px inset;
	color: inherit;
	isolation: isolate;
	transition: transform 0.6s var(--curva), background-color 0.6s var(--curva),
		box-shadow 0.6s var(--curva);
}

.psvar-cartao::after {
	content: "";
	position: absolute;
	inset: 6px;
	z-index: -1;
	border-radius: 22px;
	background: var(--creme);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.9),
		rgba(26, 28, 20, 0.05) 0 1px 2px;
}

a.psvar-cartao:hover {
	transform: translateY(-3px);
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.3) 0 0 0 1px inset,
		rgba(26, 28, 20, 0.1) 0 20px 44px -18px;
	color: inherit;
}

/* o realce ao passar o ponteiro é um anel que SEGUE a curva da borda.
   A versão anterior era uma barra reta de 2px no topo, e nas quinas ela cortava
   o arredondado. O anel é feito com máscara: pinta a moldura e vaza o miolo. */
.psvar-cartao::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 28px;
	padding: 1.5px;
	background: conic-gradient(
		from var(--giro, 0deg),
		transparent 0deg,
		var(--ouro) 40deg,
		var(--ouro-claro) 90deg,
		var(--ouro) 140deg,
		transparent 200deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s var(--curva);
}

a.psvar-cartao:hover::before {
	opacity: 1;
	animation: psvar-girar 2.4s linear infinite;
}

@property --giro {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes psvar-girar {
	to {
		--giro: 360deg;
	}
}

/* onde o navegador não anima o ângulo, o anel fica parado, mas ainda acompanha
   a curva: melhor um realce estático do que um traço cortando a quina */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
	.psvar-cartao::before {
		background: var(--ouro);
	}
}

.psvar-cartao--escuro {
	background: rgba(255, 255, 255, 0.045);
	box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 1px inset;
}

.psvar-cartao--escuro {
	color: var(--sobre-escuro);
}

.psvar-cartao--escuro::after {
	background: rgba(20, 24, 12, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

a.psvar-cartao--escuro:hover {
	background: rgba(217, 187, 114, 0.14);
	box-shadow: rgba(217, 187, 114, 0.34) 0 0 0 1px inset;
}

.psvar-cartao--escuro::before {
	background: conic-gradient(
		from var(--giro, 0deg),
		transparent 0deg,
		var(--ouro-claro) 40deg,
		#f0dda8 90deg,
		var(--ouro-claro) 140deg,
		transparent 200deg,
		transparent 360deg
	);
}

.psvar-cartao__marca {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 0 24px;
	border-radius: 14px;
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.22) 0 0 0 1px inset;
	color: var(--ouro-texto);
	font-family: "Lora", Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	transition: background-color 0.45s var(--curva), color 0.45s var(--curva);
}

/* o icone acompanha a cor da marca e cresce um tico quando o cartao e apontado */
.psvar-cartao__marca svg {
	width: 24px;
	height: 24px;
	transition: transform 0.5s var(--curva);
}

.psvar-cartao:hover .psvar-cartao__marca {
	background: rgba(179, 141, 49, 0.2);
}

.psvar-cartao:hover .psvar-cartao__marca svg {
	transform: scale(1.08);
}

.psvar-cartao--escuro .psvar-cartao__marca {
	background: rgba(217, 187, 114, 0.14);
	color: var(--ouro-claro);
	box-shadow: rgba(217, 187, 114, 0.24) 0 0 0 1px inset;
}

.psvar-cartao h3 {
	font-size: 23px;
	margin: 0 0 12px;
}

.psvar-cartao--escuro h3 {
	color: var(--creme);
}

.psvar-cartao__texto {
	font-size: 15px;
	line-height: 1.65;
	color: var(--tinta-3);
	margin: 0;
}

.psvar-cartao--escuro .psvar-cartao__texto {
	color: var(--sobre-escuro-2);
}

.psvar-cartao__pe {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ouro-texto);
}

.psvar-cartao--escuro .psvar-cartao__pe {
	color: var(--ouro-claro);
}

.psvar-cartao__pe span {
	transition: transform 0.5s var(--curva);
}

a.psvar-cartao:hover .psvar-cartao__pe span {
	transform: translateX(4px);
}

/* =============================== processos =============================== */

.psvar-proc {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 8px;
	box-shadow: rgba(26, 28, 20, 0.09) 0 -1px 0 0 inset;
	transition: padding-left 0.5s var(--curva), background-color 0.5s var(--curva);
}

.psvar-proc:hover {
	padding-left: 18px;
	background: var(--ouro-veu);
}

.psvar-proc__nome {
	font-family: "Lora", Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--tinta);
	letter-spacing: -0.02em;
	transition: color 0.4s var(--curva);
}

.psvar-proc:hover .psvar-proc__nome {
	color: var(--ouro-texto);
}

.psvar-proc__meta {
	font-size: 14px;
	color: var(--tinta-3);
	white-space: nowrap;
}

.psvar-selo {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.24) 0 0 0 1px inset;
	color: var(--ouro-texto);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ================================ pessoas ================================ */

.psvar-pessoa {
	display: block;
	color: inherit;
}

.psvar-pessoa__foto {
	position: relative;
	display: block;
	padding: 6px;
	border-radius: 26px;
	background: rgba(26, 28, 20, 0.04);
	box-shadow: rgba(26, 28, 20, 0.07) 0 0 0 1px inset;
	margin: 0 0 20px;
	transition: background-color 0.6s var(--curva), transform 0.6s var(--curva);
}

.psvar-pessoa:hover .psvar-pessoa__foto {
	background: var(--ouro-veu);
	transform: translateY(-3px);
}

.psvar-pessoa__foto img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
	border-radius: 20px;
	filter: grayscale(1) contrast(1.04);
	transition: filter 0.7s var(--curva), transform 0.9s var(--curva-suave);
}

.psvar-pessoa:hover .psvar-pessoa__foto img {
	filter: grayscale(0);
	transform: scale(1.03);
}

.psvar-pessoa__nome {
	font-family: "Lora", Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	color: var(--tinta);
	letter-spacing: -0.022em;
	margin: 0 0 5px;
	line-height: 1.2;
}

.psvar-pessoa__cargo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ouro-texto);
	margin: 0;
}

/* =============================== conteúdo ================================ */

.psvar-conteudo {
	max-width: var(--leitura);
	font-size: 18px;
	line-height: 1.75;
}

.psvar-conteudo h2 {
	font-size: 32px;
	margin: 56px 0 18px;
}

.psvar-conteudo h3 {
	font-size: 22px;
	margin: 40px 0 12px;
}

.psvar-conteudo p {
	margin: 0 0 20px;
}

.psvar-conteudo .psvar-destaque {
	font-family: "Lora", Georgia, serif;
	font-size: 24px;
	line-height: 1.45;
	color: var(--tinta);
	letter-spacing: -0.02em;
}

.psvar-conteudo ul,
.psvar-conteudo ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.psvar-conteudo li {
	margin: 0 0 10px;
}

.psvar-conteudo li::marker {
	color: var(--ouro);
}

/* =============================== perguntas =============================== */

.psvar-pergunta {
	padding: 6px;
	border-radius: 24px;
	margin: 0 0 10px;
	background: transparent;
	transition: background-color 0.5s var(--curva);
}

.psvar-pergunta[open] {
	background: rgba(26, 28, 20, 0.035);
}

.psvar-pergunta summary {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	border-radius: 18px;
	cursor: pointer;
	font-family: "Lora", Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--tinta);
	letter-spacing: -0.02em;
	list-style: none;
	transition: background-color 0.4s var(--curva);
}

.psvar-pergunta summary::-webkit-details-marker {
	display: none;
}

.psvar-pergunta summary:hover {
	background: var(--ouro-veu);
}

.psvar-pergunta summary::after {
	content: "";
	margin-left: auto;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--ouro-veu) no-repeat center;
	box-shadow: rgba(179, 141, 49, 0.24) 0 0 0 1px inset;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%237d6220' stroke-width='1.2'/%3E%3C/svg%3E");
	transition: transform 0.5s var(--curva);
}

.psvar-pergunta[open] summary::after {
	transform: rotate(135deg);
}

.psvar-pergunta__resposta {
	/* o recuo direito acompanha o da pergunta (24px + o circulo de 30px + 20px
	   de vao), para o texto terminar na mesma coluna do sinal de abrir */
	padding: 4px 26px 30px;
	color: var(--tinta-2);
	font-size: 16.5px;
	line-height: 1.72;
}

.psvar-pergunta__resposta p {
	margin: 0 0 14px;
}

/* ================================ chamada ================================ */

.psvar-chamada {
	position: relative;
	background: var(--verde-900);
	color: var(--creme);
	text-align: center;
	padding: 132px 0;
	overflow: hidden;
}

.psvar-chamada::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 120% at 50% 0%, rgba(179, 141, 49, 0.16) 0%, transparent 70%);
	pointer-events: none;
}

.psvar-chamada h2 {
	font-size: clamp(34px, 5vw, 58px);
	color: var(--creme);
	margin: 0 0 20px;
	position: relative;
}

.psvar-chamada p {
	font-size: 19px;
	color: var(--sobre-escuro-2);
	margin: 0 auto 40px;
	max-width: 52ch;
	position: relative;
}

.psvar-chamada__acoes {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}

/* ================================ rodapé ================================= */

.psvar-rodape {
	background: var(--verde-950);
	color: var(--sobre-escuro-2);
	padding: 96px 0 40px;
	font-size: 15px;
}

.psvar-rodape a {
	color: var(--sobre-escuro);
}

.psvar-rodape a:hover {
	color: var(--ouro-claro);
}

.psvar-rodape__grade {
	display: grid;
	gap: 48px;
	/* a marca ocupa mais, e as três listas dividem o resto por igual */
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	margin: 0 0 64px;
}

@media (max-width: 1100px) and (min-width: 701px) {
	.psvar-rodape__grade {
		grid-template-columns: 1fr 1fr;
		gap: 40px 48px;
	}
}

.psvar-rodape__titulo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ouro-claro);
	margin: 0 0 20px;
}

.psvar-rodape ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.psvar-rodape li {
	margin: 0 0 12px;
}

.psvar-rodape__base {
	padding: 28px 0 0;
	box-shadow: rgba(255, 255, 255, 0.09) 0 1px 0 0 inset;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
}

/* ========================== entrada por rolagem ========================== */
/* nada aparece estático: sobe com desfoque leve ao entrar na tela */

.psvar-surge {
	opacity: 0;
	transform: translateY(28px);
	filter: blur(6px);
	transition:
		opacity 0.9s var(--curva-suave),
		transform 0.9s var(--curva-suave),
		filter 0.9s var(--curva-suave);
	will-change: transform, opacity;
}

.psvar-surge.psvar-visivel {
	opacity: 1;
	transform: none;
	filter: blur(0);
	will-change: auto;
}

/* ============================== responsivo =============================== */

@media (max-width: 980px) {
	.psvar-capa__miolo {
		grid-template-columns: 1fr;
		gap: 44px;
		align-items: start;
	}

	.psvar-bento > *,
	.psvar-bento > *:first-child {
		grid-column: span 12;
	}
}

@media (max-width: 1150px) {
	body {
		font-size: 16px;
	}

	.psvar-largura {
		padding: 0 20px;
	}

	.psvar-secao {
		padding: 76px 0;
	}

	.psvar-abrir-menu {
		display: inline-flex;
	}

	.psvar-topo {
		top: 12px;
		margin-top: 12px;
	}

	.psvar-topo__ilha {
		flex-wrap: wrap;
		border-radius: 26px;
		padding: 10px 10px 10px 16px;
	}

	.psvar-menu {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 10px 0 6px;
	}

	.psvar-menu[data-aberto="1"] {
		display: flex;
	}

	/* os itens sobem escalonados quando o menu abre */
	.psvar-menu[data-aberto="1"] a {
		padding: 14px 16px;
		border-radius: 14px;
		animation: psvar-entra 0.6s var(--curva) backwards;
	}

	.psvar-menu[data-aberto="1"] a:nth-child(1) { animation-delay: 0.04s; }
	.psvar-menu[data-aberto="1"] a:nth-child(2) { animation-delay: 0.08s; }
	.psvar-menu[data-aberto="1"] a:nth-child(3) { animation-delay: 0.12s; }
	.psvar-menu[data-aberto="1"] a:nth-child(4) { animation-delay: 0.16s; }
	.psvar-menu[data-aberto="1"] a:nth-child(5) { animation-delay: 0.2s; }
	.psvar-menu[data-aberto="1"] a:nth-child(6) { animation-delay: 0.24s; }
	.psvar-menu[data-aberto="1"] a:nth-child(7) { animation-delay: 0.28s; }
	.psvar-menu[data-aberto="1"] a:nth-child(8) { animation-delay: 0.32s; }
	.psvar-menu[data-aberto="1"] a:nth-child(9) { animation-delay: 0.36s; }

	.psvar-capa {
		margin-top: -74px;
		padding-top: 74px;
	}

	.psvar-capa__miolo {
		padding-block: 92px 64px;
	}

	.psvar-numeros {
		grid-template-columns: repeat(2, 1fr);
	}

	.psvar-rodape__grade {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.psvar-proc {
		flex-direction: column;
		gap: 8px;
	}

	.psvar-secao__cabeca {
		margin-bottom: 44px;
	}
}

@keyframes psvar-entra {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

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

	.psvar-surge {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* a coluna de texto da capa: os quatro blocos empilhados */
.psvar-capa__coluna {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.psvar-capa__coluna > * {
	max-width: 100%;
}

/* a capa interna nao tem coluna de numeros: volta a ser um bloco so, senao os
   filhos caem alternados nas duas colunas e o titulo foge pra direita */
.psvar-capa__miolo:not(:has(.psvar-numeros)) {
	display: block;
}

.psvar-capa__miolo:not(:has(.psvar-numeros)) > * {
	max-width: 1000px;
}


/* ======================= páginas internas em duas colunas ================= */
/* antes o texto ficava numa coluna de 660px e sobravam 580px de tela vazia */

.psvar-duas {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: 72px;
	align-items: start;
}

/* a coluna de apoio acompanha a rolagem: fica à vista enquanto o texto corre */
.psvar-apoio {
	position: sticky;
	top: 120px;
}

.psvar-apoio__frase {
	font-family: "Lora", Georgia, serif;
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--tinta);
	margin: 0 0 32px;
}

.psvar-apoio__nome {
	font-family: "Lora", Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.024em;
	color: var(--tinta);
	margin: 0 0 6px;
}

/* os números de apoio, em lista de definição */
.psvar-fatos {
	margin: 0 0 32px;
	padding: 0;
}

.psvar-fatos > div {
	padding: 16px 0;
	box-shadow: rgba(26, 28, 20, 0.1) 0 -1px 0 0 inset;
}

.psvar-fatos > div:first-child {
	padding-top: 0;
}

.psvar-fatos dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ouro-texto);
	margin: 0 0 6px;
}

.psvar-fatos dd {
	font-family: "Lora", Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--tinta);
	margin: 0;
	line-height: 1.2;
}

/* o texto ocupa a coluna larga, mas a linha continua na medida de leitura */
.psvar-duas .psvar-conteudo {
	max-width: 72ch;
}

/* o currículo é lista longa: colunas duplas nas listas grandes economizam altura */
.psvar-conteudo--curriculo h2:first-child {
	margin-top: 0;
}

.psvar-conteudo--curriculo ul {
	padding-left: 20px;
}

.psvar-conteudo--curriculo ul li {
	padding-left: 4px;
}

/* ============================== contato ================================== */

.psvar-contato {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 64px;
	align-items: start;
}

.psvar-contato__lado {
	position: sticky;
	top: 120px;
	display: grid;
	gap: 16px;
}

/* O formulário ganha um cartão claro, com mais presença que os de apoio.

   Duas tentativas antes desta: solto no creme (parecia perdido no meio da
   página) e escuro da marca (ficou pesado demais para uma tela de login).
   Aqui é branco sobre o creme da página, com fio dourado no topo e sombra
   larga por baixo: destaca sem inverter a cor da tela. */
.psvar-contato__forma {
	position: relative;
	padding: 44px 40px;
	border-radius: 28px;
	background: var(--creme);
	/* três camadas para o cartão parecer solto do fundo, sem pesar: um contato
	   curto logo abaixo da borda, uma sombra média e uma larga e bem aberta.
	   A anterior era só a larga, com -30px de recuo, e quase não aparecia. */
	box-shadow:
		rgba(179, 141, 49, 0.22) 0 0 0 1px inset,
		rgba(26, 28, 20, 0.05) 0 2px 4px -1px,
		rgba(26, 28, 20, 0.07) 0 10px 20px -8px,
		rgba(26, 28, 20, 0.09) 0 30px 55px -24px;
	isolation: isolate;
	overflow: hidden;
}

/* fio dourado que atravessa o topo do cartão */
.psvar-contato__forma::before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ouro), transparent);
	opacity: 0.7;
	pointer-events: none;
}

/* o campo é branco como o cartão: sem um contorno mais firme ele desaparece
   dentro dele */
.psvar-contato__forma .psvar-campo-texto,
.psvar-contato__forma input[type="text"],
.psvar-contato__forma input[type="email"],
.psvar-contato__forma input[type="password"],
.psvar-contato__forma input[type="tel"],
.psvar-contato__forma input[type="search"],
.psvar-contato__forma select,
.psvar-contato__forma textarea {
	background: var(--creme-2);
	box-shadow:
		rgba(26, 28, 20, 0.16) 0 0 0 1px inset,
		inset 0 1px 2px rgba(26, 28, 20, 0.04);
}

.psvar-contato__forma .psvar-campo-texto:focus,
.psvar-contato__forma input:focus,
.psvar-contato__forma select:focus,
.psvar-contato__forma textarea:focus {
	background: var(--creme);
}

@media (max-width: 640px) {
	.psvar-contato__forma {
		padding: 30px 22px;
		border-radius: 22px;
	}
}

.psvar-contato__forma input[type="checkbox"] {
	accent-color: var(--ouro);
}

.psvar-contato__forma label {
	display: block;
}



@media (max-width: 980px) {
	.psvar-duas,
	.psvar-contato {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.psvar-apoio,
	.psvar-contato__lado {
		position: static;
	}

	.psvar-duas .psvar-conteudo {
		max-width: none;
	}
}


/* ============================== formulários ============================== */
/* os campos ficavam invisíveis quando o estilo vinha solto no atributo */

.psvar-campo-texto,
.psvar-contato input[type="text"],
.psvar-contato input[type="email"],
.psvar-contato input[type="search"],
.psvar-contato textarea,
.psvar-busca-larga {
	width: 100%;
	padding: 16px 20px;
	border: 0;
	border-radius: 14px;
	background: var(--creme);
	color: var(--tinta);
	font-family: "Jakarta", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-shadow:
		rgba(26, 28, 20, 0.12) 0 0 0 1px inset,
		inset 0 1px 2px rgba(26, 28, 20, 0.04);
	transition: box-shadow 0.4s var(--curva), background-color 0.4s var(--curva);
}

.psvar-contato textarea {
	resize: vertical;
	min-height: 170px;
}

.psvar-campo-texto:hover,
.psvar-contato input:hover,
.psvar-contato textarea:hover {
	box-shadow:
		rgba(179, 141, 49, 0.34) 0 0 0 1px inset,
		inset 0 1px 2px rgba(26, 28, 20, 0.04);
}

.psvar-campo-texto:focus,
.psvar-contato input:focus,
.psvar-contato textarea:focus {
	outline: none;
	background: #ffffff;
	box-shadow:
		var(--ouro-texto) 0 0 0 1.5px inset,
		rgba(179, 141, 49, 0.18) 0 0 0 4px;
}

.psvar-contato ::placeholder {
	color: var(--tinta-3);
	opacity: 0.8;
}

/* o rótulo do campo */
.psvar-rotulo-campo {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ouro-texto);
	margin: 0 0 10px;
}

.psvar-contato__forma label {
	display: block;
	/* sem margem própria: o espaço entre os campos é da pilha do formulário,
	   senão soma com ela e o vão dobra */
	margin: 0;
}

/* os dois primeiros campos dividem a linha */
.psvar-linha-dupla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 22px;
}

.psvar-linha-dupla label {
	margin: 0;
}

/* a armadilha contra robo: fora da tela e fora da navegacao por teclado,
   sem display:none, que alguns robos detectam */
.psvar-isca {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==================== botão sem o círculo do ícone ======================= */
/* a margem de 8px à direita existe para o círculo encostar na borda; sem ele,
   o texto ficava empurrado para a direita (medido: 26px à esquerda, 8px à
   direita). `:not(:has())` deixa a regra valer só onde não há círculo. */

.psvar-btn:not(:has(.psvar-btn__bolha)) {
	justify-content: center;
	padding-left: 26px;
	padding-right: 26px;
}

.psvar-menu a.psvar-btn--ouro:not(:has(.psvar-btn__bolha)) {
	padding-left: 22px;
	padding-right: 22px;
}

/* onde o navegador não entende `:has`, o botão continua legível, só sem o
   centro perfeito: o texto ganha respiro dos dois lados */
@supports not selector(:has(*)) {
	.psvar-btn {
		padding-right: 20px;
	}

	.psvar-btn .psvar-btn__bolha {
		margin-right: -12px;
	}
}

/* ============================== logotipo ================================= */
/* estava com 58px de largura numa placa apertada: pouca presença para a marca */

.psvar-marca__placa {
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(253, 251, 246, 0.96);
	box-shadow:
		rgba(179, 141, 49, 0.28) 0 0 0 1px inset,
		rgba(20, 24, 12, 0.16) 0 6px 18px -8px;
	transition: transform 0.5s var(--curva), box-shadow 0.5s var(--curva);
}

.psvar-marca:hover .psvar-marca__placa {
	transform: translateY(-1px);
	box-shadow:
		rgba(179, 141, 49, 0.5) 0 0 0 1px inset,
		rgba(20, 24, 12, 0.22) 0 10px 24px -8px;
}

.psvar-marca__placa img {
	height: 32px;
	width: auto;
	display: block;
}

@media (max-width: 768px) {
	.psvar-marca__placa {
		padding: 7px 13px;
	}

	.psvar-marca__placa img {
		height: 27px;
	}
}


/* ============ o botão dourado dentro do menu, no hover =================== */
/* a regra de item de menu apagava o gradiente e o rótulo sumia sobre o escuro */

.psvar-menu a.psvar-btn--ouro,
.psvar-menu a.psvar-btn--ouro:hover,
.psvar-menu a.psvar-btn--ouro:focus-visible {
	background-image: linear-gradient(135deg, var(--ouro) 0%, var(--ouro-claro) 100%);
	background-color: transparent;
	color: var(--verde-950);
}

.psvar-menu a.psvar-btn--ouro:hover {
	background-image: linear-gradient(135deg, var(--ouro-claro) 0%, var(--ouro) 100%);
	box-shadow: rgba(179, 141, 49, 0.42) 0 8px 24px -8px;
}

/* recado de confirmacao ou erro na area do credor */
.psvar-recado {
	padding: 18px 24px;
	border-radius: 16px;
	margin: 0 0 32px;
	font-size: 16px;
}

.psvar-recado--ok {
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.32) 0 0 0 1px inset;
	color: var(--tinta);
}

.psvar-recado--erro {
	background: #fdf0f2;
	box-shadow: rgba(192, 18, 60, 0.24) 0 0 0 1px inset;
	color: #a30f33;
}


/* o corpo é verde para não deixar faixa clara acima da barra; o conteúdo
   depois da capa recupera o creme */
main {
	background: var(--creme);
}

.psvar-capa,
.psvar-secao--escura,
.psvar-chamada {
	background-color: var(--verde-950);
}

.psvar-secao--escura {
	background-color: var(--verde-900);
}

.psvar-chamada {
	background-color: var(--verde-900);
}

/* ============================== logotipo ================================= */
/* o arquivo é um retângulo branco: recortar em círculo deixava as quinas à
   mostra. A placa passa a ter cantos suaves e o mesmo branco do arquivo, de
   modo que a emenda não apareça. */

/* o logotipo tem fundo transparente e contraste próprio: sem placa atrás */
.psvar-marca__logo {
	height: 52px;
	width: auto;
	display: block;
	transition: opacity 0.4s var(--curva), transform 0.4s var(--curva);
}

.psvar-marca:hover .psvar-marca__logo {
	opacity: 0.86;
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	.psvar-marca__logo {
		height: 40px;
	}
}

/* ======================= campos fora da página de contato ================= */
/* estavam sem fundo e sem contorno, parecendo soltos na página */

.psvar-secao input[type="search"],
.psvar-secao input[type="text"],
.psvar-secao select {
	padding: 15px 18px;
	border: 0;
	border-radius: 14px;
	background: var(--creme);
	color: var(--tinta);
	font-family: "Jakarta", system-ui, sans-serif;
	font-size: 15px;
	box-shadow:
		rgba(26, 28, 20, 0.12) 0 0 0 1px inset,
		inset 0 1px 2px rgba(26, 28, 20, 0.04);
	transition: box-shadow 0.4s var(--curva), background-color 0.4s var(--curva);
}

.psvar-secao select {
	cursor: pointer;
}

.psvar-secao input[type="search"]:hover,
.psvar-secao input[type="text"]:hover,
.psvar-secao select:hover {
	box-shadow:
		rgba(179, 141, 49, 0.34) 0 0 0 1px inset,
		inset 0 1px 2px rgba(26, 28, 20, 0.04);
}

.psvar-secao input[type="search"]:focus,
.psvar-secao input[type="text"]:focus,
.psvar-secao select:focus {
	outline: none;
	background: #ffffff;
	box-shadow:
		var(--ouro-texto) 0 0 0 1.5px inset,
		rgba(179, 141, 49, 0.18) 0 0 0 4px;
}

/* a barra de busca da lista de processos */
.psvar-busca-processos {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 44px;
	padding: 10px;
	border-radius: 22px;
	background: rgba(26, 28, 20, 0.035);
	box-shadow: rgba(26, 28, 20, 0.07) 0 0 0 1px inset;
}

.psvar-busca-processos input[type="search"] {
	flex: 1 1 300px;
	min-width: 0;
}

@media (max-width: 768px) {
	.psvar-busca-processos {
		padding: 8px;
	}

	.psvar-busca-processos .psvar-btn {
		width: 100%;
		justify-content: center;
	}
}

/* a lista suspensa usava a seta do navegador, que destoa do resto */
.psvar-secao select,
.psvar-contato select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	background-image: none;
}

/* a seta e desenhada por um elemento irmao, nao por imagem embutida: assim nao
   depende da codificacao do SVG dentro do CSS */
.psvar-campo-lista {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.psvar-campo-lista::after {
	content: "";
	position: absolute;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 1.6px solid var(--ouro-texto);
	border-bottom: 1.6px solid var(--ouro-texto);
	transform: translateY(-2px) rotate(45deg);
	pointer-events: none;
}

.psvar-campo-lista select {
	width: 100%;
}


/* a barra acompanha a altura do logotipo maior */
.psvar-topo__ilha {
	padding: 12px 14px 12px 22px;
}

@media (max-width: 768px) {
	.psvar-topo__ilha {
		padding: 10px 10px 10px 16px;
	}
}

/* com o logotipo maior, o menu precisa de folga: os rotulos nao podem quebrar
   em duas linhas nem apertar contra a marca */
.psvar-menu a {
	white-space: nowrap;
	padding: 9px 11px;
	letter-spacing: 0.06em;
}

.psvar-topo {
	max-width: calc(var(--largura) + 100px);
}

.psvar-topo__ilha {
	gap: 18px;
}

.psvar-marca__logo {
	height: 46px;
}

@media (max-width: 1180px) {
	.psvar-menu a {
		padding: 9px 8px;
		font-size: 11px;
	}

	.psvar-marca__logo {
		height: 40px;
	}
}


/* ========================= reflexo corrido no botão ====================== */
/* mesma mecânica do VLG: uma faixa clara atravessa o botão ao passar o ponteiro */

.psvar-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.psvar-btn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		110deg,
		transparent 0%,
		rgba(255, 255, 255, 0.5) 50%,
		transparent 100%
	);
	transform: translateX(-130%);
	/* mesma cadência do VLG: ease em 0,9s, para o reflexo correr e ser visto */
	transition: transform 0.9s ease;
}

.psvar-btn:hover::after,
.psvar-btn:focus-visible::after {
	transform: translateX(130%);
}

/* no botão claro sobre fundo escuro o brilho é mais discreto */
.psvar-btn--claro::after {
	background: linear-gradient(
		110deg,
		transparent 0%,
		rgba(255, 255, 255, 0.22) 50%,
		transparent 100%
	);
}

/* no botão escuro o brilho é dourado, não branco */
.psvar-btn--escuro::after {
	background: linear-gradient(
		110deg,
		transparent 0%,
		rgba(217, 187, 114, 0.34) 50%,
		transparent 100%
	);
}

/* o conteúdo do botão fica acima da faixa */
.psvar-btn > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.psvar-btn::after {
		display: none;
	}
}


/* a capa das páginas internas acompanha a escala menor */
.psvar-capa__miolo:not(:has(.psvar-numeros)) h1 {
	font-size: clamp(38px, 4.6vw, 66px);
	max-width: 1000px;
	text-wrap: balance;
}


/* ============================ selo ISO 37301 ============================= */
/* ao lado do logotipo, nunca embutido nele: a marca é uma coisa, a
   credencial é outra */

.psvar-selo-iso {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: -6px;
	padding: 4px;
	border-radius: 999px;
	transition: transform 0.5s var(--curva), background-color 0.5s var(--curva);
}

.psvar-selo-iso img {
	width: 58px;
	height: 58px;
	display: block;
}

.psvar-selo-iso:hover {
	transform: translateY(-1px) scale(1.04);
	background: rgba(217, 187, 114, 0.1);
}

/* no rodapé o selo vem com a legenda */
.psvar-selo-rodape {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px 12px 12px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: rgba(217, 187, 114, 0.24) 0 0 0 1px inset;
	text-decoration: none;
	transition: background-color 0.5s var(--curva), box-shadow 0.5s var(--curva);
}

.psvar-selo-rodape:hover {
	background: rgba(217, 187, 114, 0.1);
	box-shadow: rgba(217, 187, 114, 0.5) 0 0 0 1px inset;
}

.psvar-selo-rodape img {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
}

.psvar-selo-rodape > span {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sobre-escuro);
}

.psvar-selo-rodape strong {
	color: var(--ouro-claro);
	font-weight: 700;
}

.psvar-selo-rodape > span > span {
	display: block;
	font-size: 12px;
	color: var(--sobre-escuro-2);
	margin: 2px 0 0;
}

@media (max-width: 1180px) {
	.psvar-selo-iso img {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 768px) {
	.psvar-selo-iso {
		margin-left: auto;
		margin-right: 8px;
	}
}


/* a marca e o selo andam juntos: sem o grupo, o `space-between` da barra
   abria 76px entre os dois */
.psvar-topo__marca-grupo {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.psvar-selo-iso {
	margin-left: 0;
}

@media (max-width: 768px) {
	.psvar-topo__marca-grupo {
		gap: 10px;
	}

	.psvar-selo-iso {
		margin-left: 0;
		margin-right: 0;
	}
}


/* ===================== contraste dos campos =============================== */
/* o campo tinha exatamente a cor do fundo (medido: contraste 1,00) e a caixa
   sumia. Branco puro contra o creme da página resolve, com o anel mais firme. */

.psvar-campo-texto,
.psvar-contato input[type="text"],
.psvar-contato input[type="email"],
.psvar-contato input[type="password"],
.psvar-contato input[type="search"],
.psvar-contato textarea,
.psvar-contato select,
.psvar-secao input[type="search"],
.psvar-secao input[type="text"],
.psvar-secao select {
	background: #ffffff;
	box-shadow:
		rgba(26, 28, 20, 0.2) 0 0 0 1px inset,
		inset 0 1px 2px rgba(26, 28, 20, 0.05);
}

.psvar-campo-texto:hover,
.psvar-contato input:hover,
.psvar-contato textarea:hover,
.psvar-contato select:hover,
.psvar-secao input:hover,
.psvar-secao select:hover {
	box-shadow:
		rgba(179, 141, 49, 0.45) 0 0 0 1px inset,
		inset 0 1px 2px rgba(26, 28, 20, 0.05);
}

/* campo desligado fica claramente diferente de campo que aceita digitação */
.psvar-campo-texto[disabled] {
	background: var(--creme-2);
	color: var(--tinta-3);
	box-shadow: rgba(26, 28, 20, 0.12) 0 0 0 1px inset;
}
/* campo que nunca se edita: mais escuro que o desligado comum, porque o
   creme-2 sobre fundo creme parecia campo normal na tela do Anderson */
.psvar-contato input.psvar-campo-travado[disabled],
.psvar-secao input.psvar-campo-travado[disabled],
.psvar-campo-travado[disabled] {
	background: #ece7d8;
	color: var(--tinta-2);
	box-shadow: rgba(26, 28, 20, 0.18) 0 0 0 1px inset;
	cursor: not-allowed;
}
.psvar-nota-travada {
	margin: -8px 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tinta-3);
}
.psvar-nota-travada a {
	color: var(--tinta-2);
	text-decoration: underline;
	text-decoration-color: var(--ouro);
	text-underline-offset: 3px;
}

/* a contagem de documentos vive dentro da barra de filtro, nao solta ao lado */
.psvar-conta-docs {
	display: inline-flex;
	align-items: center;
	padding: 0 18px 0 6px;
	font-size: 14px;
	color: var(--tinta-3);
	white-space: nowrap;
}

@media (max-width: 768px) {
	.psvar-conta-docs {
		padding: 4px 8px 8px;
		width: 100%;
	}
}


/* ===================== telas de senha (recuperar e trocar) ================ */

/* rotulo em bloco: o titulo do campo em cima, o campo embaixo */
.psvar-secao .psvar-rotulo {
	display: block;
	margin: 0 0 22px;
}

/* formulario de poucos campos nao precisa da largura do de contato */
.psvar-forma-estreita {
	max-width: 520px;
}


/* ======================== a marca no rodape =============================== */
/* mesma imagem do topo (fundo transparente, feita para barra escura) */

.psvar-rodape__marca {
	display: inline-block;
	margin: 0 0 22px;
	line-height: 0;
	opacity: 0.94;
	transition: opacity 0.4s var(--curva);
}

.psvar-rodape__marca:hover {
	opacity: 1;
}

.psvar-rodape__marca img {
	display: block;
	width: auto;
	height: 62px;
}


/* ========================= termos do cadastro ============================= */
/* o texto e longo e juridico; numa caixa rolavel ele nao empurra o botao de
   concluir para fora da tela, como acontecia no site antigo */

.psvar-termos {
	max-height: 230px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 24px;
	margin: 0 0 20px;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: rgba(26, 28, 20, 0.16) 0 0 0 1px inset;
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--tinta-2);
}

.psvar-termos:focus-visible {
	outline: 2px solid var(--ouro);
	outline-offset: 2px;
}

.psvar-termos p {
	margin: 0 0 14px;
}

.psvar-termos p:last-child {
	margin-bottom: 0;
}

/* a barra de rolagem discreta, na cor da marca */
.psvar-termos::-webkit-scrollbar {
	width: 10px;
}

.psvar-termos::-webkit-scrollbar-thumb {
	border: 3px solid #ffffff;
	border-radius: 999px;
	background: rgba(58, 68, 32, 0.28);
}

.psvar-aceite {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 28px;
	font-size: 15px;
	cursor: pointer;
}

.psvar-aceite input[type="checkbox"] {
	width: auto;
	margin-top: 4px;
	accent-color: var(--verde-800);
	flex: 0 0 auto;
}


/* =============== botao sem bolinha: texto centrado na peca ================ */
/* com bolinha o recuo e proposital (26px de um lado, 8px do outro, porque a
   bolinha ocupa a direita). Sem ela, esse desequilibrio deixa o texto torto */

.psvar-btn:not(:has(.psvar-btn__bolha)) {
	justify-content: center;
	padding: 15px 28px;
	text-align: center;
}

/* no topo os botões têm altura própria: sem isto o Protocolo (sem bolinha)
   ficava com 50px e o Área do credor com 34px, lado a lado */
.psvar-menu .psvar-btn:not(:has(.psvar-btn__bolha)) {
	padding: 7px 22px;
	min-height: 34px;
}

/* o menu usa gap de 2px porque o respiro entre os itens vem do recuo interno
   de cada link (14px de cada lado). Os botões não têm esse recuo, então
   ganham o espaço na margem, no mesmo compasso */
.psvar-menu .psvar-btn {
	margin-left: 14px;
}

.psvar-menu .psvar-btn + .psvar-btn {
	margin-left: 10px;
}

/* ===================== a marca de campo opcional ========================= */

.psvar-opcional {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(26, 28, 20, 0.06);
	color: var(--tinta-3);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ======================= a faixa de enderecos ============================ */

.psvar-secao--curta {
	padding-top: 0;
	/* 108 aqui embaixo se somavam aos 128 de cima da seção seguinte: 236px de
	   faixa vazia entre a legenda da foto e o título de baixo. A seção seguinte
	   já traz o próprio respiro, e a mudança de cor marca a divisão */
	padding-bottom: 48px;
}

.psvar-grade--tres {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.psvar-grade--tres {
		grid-template-columns: 1fr;
	}
}

/* cartao de recado: nao e um caminho para clicar, entao nao levanta no hover */
.psvar-cartao--calmo {
	background: rgba(58, 68, 32, 0.045);
	box-shadow: rgba(58, 68, 32, 0.14) 0 0 0 1px inset;
}


/* ======================= pagina de um aviso =============================== */
/* coluna de leitura: linha na medida do olho, alinhada a esquerda como o resto
   do site. O justificado que vinha do texto antigo abria rios de branco */

.psvar-leitura {
	max-width: 900px;
}

.psvar-conteudo--aviso {
	max-width: none;
	font-size: 18.5px;
	line-height: 1.78;
	text-align: left;
}

/* o texto antigo trazia o proprio alinhamento; aqui ele nao vale mais */
.psvar-conteudo--aviso [style*="text-align"],
.psvar-conteudo--aviso [align] {
	text-align: left !important;
}

/* a primeira linha do aviso costuma ser o titulo do comunicado, em negrito */
.psvar-conteudo--aviso > p:first-child strong,
.psvar-conteudo--aviso > p:first-child b {
	display: block;
	margin: 0 0 10px;
	font-family: "Lora", Georgia, serif;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--tinta);
	text-transform: none;
}

/* o :not() protege o link que virou botao: la a cor quem manda e a do botao,
   senao fica dourado escuro sobre verde escuro (medido: contraste 1,7) */
.psvar-conteudo--aviso a:not(.psvar-btn) {
	color: var(--ouro-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
}

/* ============ o documento anexo: cartao, nao mais um botao =============== */
/* e o motivo do aviso existir, entao pesa mais que os outros elementos e diz o
   nome do arquivo, para o credor saber o que vai abrir antes de clicar */

.psvar-anexo {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 32px 0 30px;
	padding: 20px 24px;
	border-radius: 16px;
	background: var(--claro);
	box-shadow: rgba(58, 68, 32, 0.16) 0 0 0 1px inset;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.45s var(--curva), transform 0.45s var(--curva),
		background-color 0.45s var(--curva);
}

.psvar-anexo:hover {
	background: #ffffff;
	box-shadow: var(--ouro) 0 0 0 1px inset, rgba(26, 28, 20, 0.08) 0 10px 26px -14px;
	transform: translateY(-2px);
}

.psvar-anexo__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.22) 0 0 0 1px inset;
	color: var(--ouro-texto);
}

.psvar-anexo__icone svg {
	width: 23px;
	height: 23px;
}

.psvar-anexo__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.psvar-anexo__texto strong {
	display: block;
	font-family: "Jakarta", sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tinta);
	overflow-wrap: anywhere;
}

.psvar-anexo__texto span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--tinta-3);
}

.psvar-anexo__seta {
	flex: 0 0 auto;
	color: var(--ouro-texto);
	font-size: 17px;
	transition: transform 0.45s var(--curva);
}

.psvar-anexo:hover .psvar-anexo__seta {
	transform: translateX(4px);
}

/* ==================== o link de voltar para a lista ====================== */
/* deixou de ser botao: ele nao concorre com o documento, so leva de volta */

.psvar-voltar {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tinta-2);
	text-decoration: none;
	transition: color 0.4s var(--curva), gap 0.4s var(--curva);
}

.psvar-voltar:hover {
	color: var(--ouro-texto);
	gap: 14px;
}

/* ===================== titulo de secao secundaria ======================== */

.psvar-titulo-secao {
	margin: 0 0 30px;
	font-size: 27px;
	letter-spacing: -0.02em;
}

.psvar-leitura__pe {
	margin: 56px 0 0;
	padding-top: 34px;
	border-top: 1px solid var(--fio);
}


/* ======================= o pe do formulario de contato =================== */
/* o aviso de prazo fica ao lado do botao: e lido antes de enviar, nao depois */

.psvar-enviar {
	display: flex;
	gap: 26px;
	align-items: center;
	flex-wrap: wrap;
	margin: 28px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--fio);
}

.psvar-enviar__nota {
	flex: 1 1 260px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tinta-3);
}

/* as duas colunas comecam alinhadas no topo e nenhuma estica sem motivo */
.psvar-contato {
	align-items: start;
}


/* ====================== lista curta dentro de cartao ===================== */

.psvar-lista-simples {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tinta-2);
}

.psvar-lista-simples li {
	position: relative;
	margin: 0 0 11px;
	padding-left: 20px;
}

.psvar-lista-simples li:last-child {
	margin-bottom: 0;
}

.psvar-lista-simples li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--ouro);
}

/* a coluna do cadastro acompanha o formulario, que e longo */
.psvar-lado-cadastro {
	position: sticky;
	top: 118px;
}

@media (max-width: 900px) {
	.psvar-lado-cadastro {
		position: static;
	}
}


/* ================= cartao de aviso na pagina inicial ===================== */
/* quase todo aviso se chama "AVISO 'NOME DA EMPRESA'", entao o titulo sozinho
   nao distingue um do outro: o resumo e quem faz o visitante escolher */

.psvar-cartao--aviso .psvar-cartao__texto {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.62;
}

.psvar-cartao__ponto {
	margin: 0 6px;
	opacity: 0.55;
}

.psvar-cartao__anexo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ouro-texto);
}

.psvar-cartao__anexo svg {
	width: 15px;
	height: 15px;
	display: block;
}


/* ==================== as fotos do escritório ============================= */
/* a vertical (recepção, com o logotipo na parede) ao lado da horizontal
   (sala de reunião): duas proporções diferentes evitam a fileira monótona */

.psvar-fotos {
	display: grid;
	grid-template-columns: 40fr 56fr;
	gap: 26px;
	align-items: start;
}

@media (max-width: 900px) {
	.psvar-fotos {
		grid-template-columns: 1fr;
	}
}

.psvar-foto {
	margin: 0;
}

.psvar-foto picture {
	display: block;
	overflow: hidden;
	border-radius: 18px;
	background: var(--creme-2);
}

.psvar-foto img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.2s var(--curva);
}

.psvar-foto:hover img {
	transform: scale(1.03);
}

.psvar-foto figcaption {
	margin: 14px 2px 0;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tinta-3);
}

/* a horizontal fica mais baixa que a vertical; empurrar um pouco alinha o
   olho pelo meio das duas em vez de pelo topo */
@media (min-width: 901px) {
	.psvar-foto:not(.psvar-foto--alta) {
		margin-top: 58px;
	}
}

/* ================== o texto institucional da empresa ===================== */

.psvar-conteudo--empresa .psvar-abertura {
	font-family: "Lora", Georgia, serif;
	font-size: 21px;
	line-height: 1.58;
	color: var(--tinta);
	margin-bottom: 26px;
}

.psvar-conteudo--empresa h2 {
	font-size: 25px;
	margin: 42px 0 14px;
}

.psvar-conteudo--empresa p {
	margin: 0 0 20px;
}


/* ============ a caixa de mensagem acompanha o que foi escrito =========== */
/* as 11 linhas iniciais são de propósito (caixa grande convida a escrever);
   o que muda é que passar delas faz a caixa crescer, não aparecer barra */

.psvar-contato textarea {
	field-sizing: content;
	min-height: 15em;
	max-height: 60vh;
	resize: vertical;
}


/* ===================== o paginador das listas do site =================== */

.psvar-paginas-site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	margin: 56px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--fio);
}

.psvar-paginas-site__conta {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tinta-3);
}

.psvar-paginas-site__regua {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.psvar-pag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--tinta-2);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: rgba(26, 28, 20, 0.14) 0 0 0 1px inset;
	transition: color 0.3s var(--curva), box-shadow 0.3s var(--curva),
		background-color 0.3s var(--curva);
}

.psvar-pag:hover {
	color: var(--ouro-texto);
	box-shadow: var(--ouro) 0 0 0 1px inset;
}

.psvar-pag--atual {
	background: var(--verde-800);
	color: var(--creme);
	box-shadow: none;
	font-weight: 600;
}

/* as reticências não são clicáveis: sem moldura, para não parecerem botão */
.psvar-pag--vao {
	box-shadow: none;
	min-width: 20px;
	padding: 0 2px;
	color: var(--tinta-3);
}

.psvar-paginas-site__ver {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tinta-3);
	white-space: nowrap;
}

.psvar-paginas-site__ver select {
	min-height: 38px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: rgba(26, 28, 20, 0.16) 0 0 0 1px inset;
	color: var(--tinta);
	font: inherit;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

@media (max-width: 700px) {
	.psvar-paginas-site {
		justify-content: center;
		text-align: center;
	}
}


/* ========================= telas de erro ================================= */
/* o número grande ao fundo faz o papel de ilustração sem precisar de imagem:
   é a tipografia da própria marca, então não destoa nem pesa no carregamento */

.psvar-erro {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(100vh - 220px);
	padding: 100px 0 120px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 12% 0%, rgba(179, 141, 49, 0.09), transparent 62%),
		var(--creme);
}

.psvar-erro__miolo {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.psvar-erro__codigo {
	position: absolute;
	top: 50%;
	right: -2%;
	z-index: 0;
	margin: 0;
	transform: translateY(-50%);
	font-family: "Lora", Georgia, serif;
	font-size: clamp(260px, 38vw, 520px);
	font-weight: 600;
	line-height: 0.8;
	letter-spacing: -0.05em;
	color: rgba(58, 68, 32, 0.055);
	pointer-events: none;
	user-select: none;
}

.psvar-erro__titulo {
	margin: 0 0 22px;
	font-size: clamp(38px, 5.4vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.psvar-erro__texto {
	margin: 0 0 40px;
	max-width: 56ch;
	font-size: 18px;
	line-height: 1.72;
	color: var(--tinta-2);
}

/* a busca fica na própria tela: quase todo endereço errado aqui é um processo
   ou documento que mudou de lugar */
.psvar-erro__busca {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 560px;
	margin: 0 0 44px;
}

.psvar-erro__busca input {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 54px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: rgba(26, 28, 20, 0.18) 0 0 0 1px inset;
	font: inherit;
	font-size: 15px;
	color: var(--tinta);
	transition: box-shadow 0.3s var(--curva);
}

.psvar-erro__busca input:focus {
	outline: none;
	box-shadow: var(--ouro) 0 0 0 1.5px inset, rgba(179, 141, 49, 0.16) 0 0 0 4px;
}

.psvar-erro__saidas {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	padding-top: 30px;
	border-top: 1px solid var(--fio);
}

.psvar-erro__saida {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tinta);
	text-decoration: none;
	transition: color 0.3s var(--curva), gap 0.3s var(--curva);
}

.psvar-erro__saida span {
	color: var(--ouro-texto);
}

.psvar-erro__saida:hover {
	color: var(--ouro-texto);
	gap: 14px;
}

@media (max-width: 700px) {
	.psvar-erro {
		min-height: 0;
		padding: 70px 0 90px;
	}
	.psvar-erro__codigo {
		right: -8%;
		font-size: clamp(180px, 52vw, 300px);
	}
	.psvar-erro__saidas {
		gap: 18px;
		flex-direction: column;
	}
}


/* ================== lista sem resultado, no site ======================== */

.psvar-nada {
	padding: 64px 30px;
	border-radius: 18px;
	background: var(--claro);
	box-shadow: rgba(26, 28, 20, 0.09) 0 0 0 1px inset;
	text-align: center;
}

.psvar-nada h2 {
	margin: 0 0 12px;
	font-size: 25px;
	letter-spacing: -0.02em;
}

.psvar-nada p {
	margin: 0 auto 26px;
	max-width: 44ch;
	color: var(--tinta-2);
	line-height: 1.7;
}

.psvar-nada p:last-child {
	margin-bottom: 0;
}


/* ============== botão de contorno: ação secundária no topo ============== */
/* fica ao lado do "Área do credor", que é dourado cheio: se fosse igual, os
   dois competiriam pelo olho */

.psvar-btn--contorno {
	background: transparent;
	color: var(--creme);
	box-shadow: rgba(244, 242, 232, 0.34) 0 0 0 1px inset;
}

.psvar-btn--contorno:hover {
	background: rgba(244, 242, 232, 0.1);
	color: #ffffff;
	box-shadow: rgba(244, 242, 232, 0.6) 0 0 0 1px inset;
}

/* no menu recolhido do celular ele vira largura cheia, como os outros */
@media (max-width: 1150px) {
	.psvar-menu .psvar-btn--contorno {
		color: var(--tinta);
		box-shadow: rgba(26, 28, 20, 0.2) 0 0 0 1px inset;
	}
	.psvar-menu .psvar-btn--contorno:hover {
		background: rgba(26, 28, 20, 0.06);
		color: var(--tinta);
	}
}


/* ============ chamada de ação em destaque, dentro de uma página ========= */

.psvar-destaque-acao {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 26px 30px;
	border-radius: 18px;
	/* clara, não escura: em verde ela encostava na capa e parecia parte dela,
	   mal cortada (medido: 0px de espaço e as duas quase da mesma cor) */
	background: #ffffff;
	color: var(--tinta);
	text-decoration: none;
	box-shadow: rgba(179, 141, 49, 0.34) 0 0 0 1px inset;
	transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva),
		background-color 0.45s var(--curva);
}

.psvar-destaque-acao:hover {
	transform: translateY(-2px);
	background: #ffffff;
	box-shadow: var(--ouro) 0 0 0 1px inset,
		rgba(26, 28, 20, 0.14) 0 16px 34px -18px;
}

.psvar-destaque-acao__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.22) 0 0 0 1px inset;
	color: var(--ouro-texto);
}

.psvar-destaque-acao__icone svg {
	width: 25px;
	height: 25px;
}

.psvar-destaque-acao__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.psvar-destaque-acao__texto strong {
	display: block;
	font-family: "Lora", Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.psvar-destaque-acao__texto span {
	display: block;
	margin-top: 5px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tinta-2);
}

.psvar-destaque-acao__seta {
	flex: 0 0 auto;
	color: var(--ouro-texto);
	font-size: 19px;
	transition: transform 0.45s var(--curva);
}

.psvar-destaque-acao:hover .psvar-destaque-acao__seta {
	transform: translateX(5px);
}

@media (max-width: 620px) {
	.psvar-destaque-acao {
		flex-wrap: wrap;
		gap: 16px;
	}
	.psvar-destaque-acao__seta {
		display: none;
	}
}


/* ============ faixa apertada do menu: entre 1150 e 1330px =============== */
/* medido em 1280px: o menu terminava 1px depois da borda da ilha. Encolhendo
   um pouco o recuo de cada link, a folga volta sem mudar o desenho */

@media (max-width: 1330px) and (min-width: 1151px) {
	.psvar-menu a {
		padding: 9px 7px;
	}

	.psvar-lupa {
		margin-left: 6px;
	}

	/* a seta do submenu custa 17px: nesta faixa ela encolhe */
	.psvar-menu__seta {
		margin-left: 3px;
	}

	.psvar-menu__seta svg {
		width: 10px;
		height: 10px;
	}

	.psvar-menu .psvar-btn {
		margin-left: 10px;
	}

	.psvar-menu .psvar-btn:not(:has(.psvar-btn__bolha)) {
		padding: 7px 18px;
	}
}


/* ===================== a assinatura de quem fez ========================== */
/* crédito de autoria: pesa menos que o direito autoral e as cidades, que são
   informação do cliente */

.psvar-assinatura {
	color: rgba(244, 242, 232, 0.5);
}

.psvar-assinatura a {
	color: rgba(244, 242, 232, 0.72);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--curva), border-color 0.3s var(--curva);
}

.psvar-assinatura a:hover {
	color: var(--ouro-claro);
	border-bottom-color: currentColor;
}


/* ===================== submenu das fases do processo ==================== */

.psvar-menu__grupo {
	position: relative;
	display: inline-flex;
}

/* a seta indica que há mais coisa; gira quando o submenu abre */
.psvar-menu__seta {
	display: inline-flex;
	margin-left: 5px;
	transition: transform 0.3s var(--curva);
}

.psvar-menu__seta svg {
	width: 12px;
	height: 12px;
}

.psvar-menu__grupo:hover .psvar-menu__seta,
.psvar-menu__grupo:focus-within .psvar-menu__seta {
	transform: rotate(180deg);
}

.psvar-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	min-width: 232px;
	margin-top: 10px;
	padding: 8px;
	border-radius: 16px;
	background: var(--verde-900);
	box-shadow: rgba(244, 242, 232, 0.1) 0 0 0 1px inset,
		rgba(10, 12, 6, 0.4) 0 18px 38px -16px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.3s var(--curva), transform 0.3s var(--curva),
		visibility 0s linear 0.3s;
}

/* o vão entre o item e o submenu engoliria o mouse a caminho: esta faixa
   invisível mantém o hover vivo na travessia */
.psvar-submenu::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.psvar-menu__grupo:hover .psvar-submenu,
.psvar-menu__grupo:focus-within .psvar-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.psvar-submenu a {
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-align: left;
	white-space: nowrap;
	color: rgba(244, 242, 232, 0.82);
}

.psvar-submenu a:hover {
	background: rgba(244, 242, 232, 0.09);
	color: var(--creme);
}

.psvar-submenu__todos {
	margin-top: 4px;
	padding-top: 12px !important;
	box-shadow: rgba(244, 242, 232, 0.12) 0 1px 0 0 inset;
	color: rgba(244, 242, 232, 0.58) !important;
}

/* ---- no menu recolhido: as fases viram itens de segundo nível ---- */
@media (max-width: 1150px) {
	.psvar-menu__grupo {
		display: block;
		width: 100%;
	}

	.psvar-menu__seta {
		display: none;
	}

	.psvar-submenu {
		position: static;
		min-width: 0;
		margin: 2px 0 6px;
		padding: 0 0 0 16px;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.psvar-submenu a {
		padding: 9px 10px;
		color: var(--tinta-2);
	}

	.psvar-submenu a:hover {
		background: rgba(26, 28, 20, 0.06);
		color: var(--tinta);
	}

	.psvar-submenu__todos {
		box-shadow: none;
		color: var(--tinta-3) !important;
		padding-top: 9px !important;
	}
}


/* =========================== a busca única ============================== */

.psvar-busca-geral {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 760px;
}

.psvar-busca-geral input {
	flex: 1 1 320px;
	min-width: 0;
	min-height: 56px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: rgba(26, 28, 20, 0.18) 0 0 0 1px inset;
	font: inherit;
	font-size: 15.5px;
	color: var(--tinta);
	transition: box-shadow 0.3s var(--curva);
}

.psvar-busca-geral input:focus {
	outline: none;
	box-shadow: var(--ouro) 0 0 0 1.5px inset, rgba(179, 141, 49, 0.16) 0 0 0 4px;
}

/* ------------------------- os grupos de resultado ---------------------- */

.psvar-achados {
	margin-top: 52px;
}

.psvar-achados__cabeca {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fio);
}

.psvar-achados__cabeca h2 {
	margin: 0;
	font-size: 24px;
	letter-spacing: -0.02em;
}

.psvar-achados__conta {
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--ouro-veu);
	box-shadow: rgba(179, 141, 49, 0.24) 0 0 0 1px inset;
	color: var(--ouro-texto);
	font-size: 12px;
	font-weight: 600;
}

.psvar-achados__lista {
	display: flex;
	flex-direction: column;
}

.psvar-achado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 20px;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.3s var(--curva), transform 0.3s var(--curva);
}

.psvar-achado:hover {
	background: var(--claro-2, #f6f2e8);
	transform: translateX(3px);
}

.psvar-achado + .psvar-achado {
	box-shadow: var(--fio) 0 1px 0 0 inset;
}

.psvar-achado__corpo {
	min-width: 0;
}

.psvar-achado__corpo strong {
	display: block;
	font-family: "Lora", Georgia, serif;
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tinta);
}

.psvar-achado__meta {
	display: block;
	margin-top: 5px;
	font-size: 13.5px;
	color: var(--tinta-3);
}

.psvar-achado__ponto {
	margin: 0 7px;
	opacity: 0.6;
}

.psvar-achado__lado {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ouro-texto);
	white-space: nowrap;
}

.psvar-achados__mais {
	margin: 18px 0 0;
	padding-left: 20px;
}

.psvar-achados__aviso {
	font-size: 13.5px;
	color: var(--tinta-3);
}

@media (max-width: 620px) {
	.psvar-achado {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}


/* ======================= a lupa de busca no topo ======================== */

.psvar-lupa {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* 4px, não 10: com 10 o menu terminava 7px depois da borda da ilha */
	margin-left: 4px;
	margin-right: 4px;
}

.psvar-lupa__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--creme);
	cursor: pointer;
	box-shadow: rgba(244, 242, 232, 0.24) 0 0 0 1px inset;
	transition: background-color 0.3s var(--curva), box-shadow 0.3s var(--curva);
}

.psvar-lupa__botao svg {
	width: 17px;
	height: 17px;
}

.psvar-lupa__botao:hover,
.psvar-lupa--aberta .psvar-lupa__botao {
	background: rgba(244, 242, 232, 0.12);
	box-shadow: rgba(244, 242, 232, 0.5) 0 0 0 1px inset;
}

/* aberto, o campo ocupa a ilha e o menu some: quem clicou na lupa quer
   buscar, não ler o menu. Antes ele abria POR CIMA dos itens, ilegível */
.psvar-lupa__forma {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}

.psvar-lupa__forma input {
	width: 0;
	min-width: 0;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(244, 242, 232, 0.1);
	box-shadow: rgba(244, 242, 232, 0) 0 0 0 1px inset;
	color: var(--creme);
	font: inherit;
	font-size: 13px;
	opacity: 0;
	transition: width 0.4s var(--curva), padding 0.4s var(--curva),
		opacity 0.3s var(--curva), box-shadow 0.3s var(--curva);
}

.psvar-lupa--aberta .psvar-lupa__forma input {
	width: 268px;
	padding: 0 18px;
	opacity: 1;
	box-shadow: rgba(244, 242, 232, 0.28) 0 0 0 1px inset;
}

.psvar-lupa__forma input::placeholder {
	color: rgba(244, 242, 232, 0.5);
}

.psvar-lupa__forma input:focus {
	outline: none;
	box-shadow: var(--ouro) 0 0 0 1.5px inset;
}

/* ---- no menu recolhido a busca vira um campo comum, sempre visível ---- */
@media (max-width: 1150px) {
	.psvar-lupa {
		display: block;
		width: 100%;
		margin: 10px 0 0;
	}

	.psvar-lupa__botao {
		display: none;
	}

	.psvar-lupa__forma {
		position: static;
		transform: none;
	}

	.psvar-lupa__forma input {
		width: 100%;
		height: 44px;
		padding: 0 18px;
		opacity: 1;
		background: #ffffff;
		box-shadow: rgba(26, 28, 20, 0.18) 0 0 0 1px inset;
		color: var(--tinta);
	}

	.psvar-lupa__forma input::placeholder {
		color: var(--tinta-3);
	}
}


/* enquanto a busca está aberta, os itens do menu saem da frente */
@media (min-width: 1151px) {
	.psvar-menu--buscando > a,
	.psvar-menu--buscando > .psvar-menu__grupo,
	.psvar-menu--buscando > .psvar-btn {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s var(--curva), visibility 0s linear 0.25s;
	}

	.psvar-menu--buscando .psvar-lupa__forma input {
		width: 46vw;
		max-width: 620px;
	}
}


/* ==================== a busca na capa da página inicial ================= */

.psvar-capa__busca {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	/* a coluna tem 805px: sem o width a caixa usava 443 e cortava o texto de
	   exemplo no meio */
	width: 100%;
	max-width: 620px;
	margin: 0 0 26px;
	padding: 7px 7px 7px 8px;
	border-radius: 999px;
	background: rgba(253, 251, 246, 0.07);
	box-shadow: rgba(244, 242, 232, 0.2) 0 0 0 1px inset;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: box-shadow 0.35s var(--curva), background-color 0.35s var(--curva);
}

.psvar-capa__busca:focus-within {
	background: rgba(253, 251, 246, 0.11);
	box-shadow: var(--ouro) 0 0 0 1.5px inset;
}

.psvar-capa__busca-icone {
	display: flex;
	flex: 0 0 auto;
	margin-left: 10px;
	color: rgba(244, 242, 232, 0.55);
}

.psvar-capa__busca-icone svg {
	width: 18px;
	height: 18px;
}

.psvar-capa__busca input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--creme);
	font: inherit;
	font-size: 15px;
}

.psvar-capa__busca input::placeholder {
	color: rgba(244, 242, 232, 0.52);
}

.psvar-capa__busca input:focus {
	outline: none;
}

@media (max-width: 620px) {
	.psvar-capa__busca {
		flex-wrap: wrap;
		border-radius: 22px;
	}

	.psvar-capa__busca .psvar-btn {
		width: 100%;
		justify-content: center;
	}
}


/* ============ os atalhos abaixo da busca, na capa ======================= */
/* eram dois botões cheios competindo com a busca: três chamadas para ação na
   mesma tela, duas delas para o mesmo lugar */

.psvar-capa__atalho {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(244, 242, 232, 0.78);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--curva), border-color 0.3s var(--curva);
}

.psvar-capa__atalho:hover {
	color: var(--ouro-claro);
	border-bottom-color: currentColor;
}

.psvar-capa__ou {
	margin: 0 14px;
	color: rgba(244, 242, 232, 0.34);
}


/* ==================== a capa em uma coluna =============================== */
/* em duas colunas a caixa de números ficava na altura da busca e disputava o
   olho com ela, que é a ação principal. Aqui a leitura desce em linha reta e
   os números viram o fecho */

.psvar-capa__miolo {
	grid-template-columns: 1fr;
	gap: 0;
}

.psvar-capa__coluna {
	max-width: 1000px;
}

.psvar-numeros {
	grid-template-columns: repeat(4, 1fr);
	max-width: none;
	margin-top: 52px;
}

/* o número e o rótulo lado a lado ficariam apertados em quatro colunas:
   aqui cada bloco fica mais baixo e mais largo */
.psvar-numero {
	padding: 22px 24px;
}

@media (max-width: 900px) {
	.psvar-numeros {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 40px;
	}
}

@media (max-width: 520px) {
	.psvar-numeros {
		grid-template-columns: 1fr;
	}
}


/* ===================== barra fina depois de 20% =========================
   Passados 20% da página, a barra encolhe e cola no topo, virando uma régua
   fina que não disputa espaço com o texto. Volta ao tamanho cheio quando a
   pessoa sobe. Tudo animado por transição; o JavaScript só troca a classe. */

.psvar-topo {
	transition:
		top 0.42s var(--curva),
		margin-top 0.42s var(--curva),
		max-width 0.42s var(--curva),
		padding 0.42s var(--curva);
}

.psvar-topo__ilha {
	transition:
		padding 0.42s var(--curva),
		border-radius 0.42s var(--curva),
		background-color 0.42s var(--curva),
		box-shadow 0.42s var(--curva);
}

.psvar-marca__logo,
.psvar-selo-iso img {
	transition: height 0.42s var(--curva), width 0.42s var(--curva);
}

.psvar-menu a {
	transition: padding 0.42s var(--curva), font-size 0.42s var(--curva);
}

/* -- o estado fino -- */

.psvar-topo--fina {
	top: 0;
	margin-top: 0;
	padding: 0;
	max-width: 100%;
}

.psvar-topo--fina .psvar-topo__ilha {
	padding: 4px 22px 4px 26px;
	/* a pílula vira régua: cantos retos, largura cheia */
	border-radius: 0;
	/* mais fechada que a barra solta, porque agora encosta no conteúdo */
	background: rgba(20, 24, 12, 0.9);
	box-shadow:
		rgba(255, 255, 255, 0.08) 0 -1px 0 0 inset,
		rgba(20, 24, 12, 0.28) 0 10px 30px -14px;
}

.psvar-topo--fina .psvar-marca__logo {
	height: 32px;
}

.psvar-topo--fina .psvar-selo-iso img {
	width: 34px;
	height: 34px;
}

.psvar-topo--fina .psvar-menu a {
	padding: 7px 10px;
}

/* quem pediu menos animação no sistema recebe a troca sem transição */
@media (prefers-reduced-motion: reduce) {
	.psvar-topo,
	.psvar-topo__ilha,
	.psvar-marca__logo,
	.psvar-selo-iso img,
	.psvar-menu a {
		transition: none;
	}
}


/* ---- o selo ao lado do texto da certificação (página de compliance) ---- */
.psvar-certificacao {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.psvar-certificacao__selo {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	/* acompanha a altura da primeira linha do título */
	margin-top: 2px;
}

@media (max-width: 640px) {
	.psvar-certificacao {
		flex-direction: column;
		gap: 20px;
	}

	.psvar-certificacao__selo {
		width: 76px;
		height: 76px;
	}
}


/* ---------- convite ao cadastro, no caminho de quem procura documento ------
   Medido: sem isto, o cadastro só existia no rodapé em 6 de 10 páginas, e não
   existia na página de um processo, que é onde a pessoa chega procurando o
   caso dela. */

.psvar-convite-cadastro__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 0;
}

.psvar-secao--clara .psvar-convite-cadastro__botoes {
	justify-content: center;
}

.psvar-lista-cabeca {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0 0 20px;
}

/* Convite ao cadastro no alto da lista.

   Era uma frase solta com um link sublinhado no meio, que sumia ao lado da
   busca e não parecia clicável inteira. Virou uma pastilha: o bloco todo é o
   link, com o ícone à esquerda e a seta à direita. */
.psvar-dica-cadastro {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px 9px 10px;
	border-radius: 999px;
	background: var(--ouro-veu, rgba(179, 141, 49, 0.08));
	box-shadow: rgba(179, 141, 49, 0.26) 0 0 0 1px inset;
	color: var(--tinta);
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.4s var(--curva), box-shadow 0.4s var(--curva),
		transform 0.4s var(--curva);
}

.psvar-dica-cadastro__selo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: rgba(179, 141, 49, 0.16);
	color: var(--ouro-texto, #7a5f1f);
}

.psvar-dica-cadastro__selo svg {
	width: 17px;
	height: 17px;
}

.psvar-dica-cadastro__texto strong {
	font-weight: 700;
}

.psvar-dica-cadastro__seta {
	color: var(--ouro-texto, #7a5f1f);
	transition: transform 0.4s var(--curva);
}

.psvar-dica-cadastro:hover {
	background: rgba(179, 141, 49, 0.16);
	box-shadow: rgba(179, 141, 49, 0.42) 0 0 0 1px inset;
	transform: translateY(-1px);
}

.psvar-dica-cadastro:hover .psvar-dica-cadastro__seta {
	transform: translateX(4px);
}

@media (max-width: 720px) {
	/* na tela estreita a frase inteira não cabe numa pastilha: vira bloco */
	.psvar-dica-cadastro {
		width: 100%;
		border-radius: 16px;
		padding: 12px 16px 12px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psvar-dica-cadastro,
	.psvar-dica-cadastro__seta {
		transition: none;
	}

	.psvar-dica-cadastro:hover {
		transform: none;
	}
}

/* Na tela de processo privado o bloco fica à esquerda, alinhado ao título.
   Regra por classe, e não por parentesco: a anterior dependia do bloco ser
   filho direto de .psvar-largura e quebrou ao envolver o conteúdo. */
.psvar-convite-cadastro--esquerda {
	margin-right: auto;
}

.psvar-convite-cadastro--esquerda .psvar-convite-cadastro__botoes {
	justify-content: flex-start;
}


/* Botão secundário para fundo CLARO.
   O psvar-btn--claro é para seção escura (letra creme): sobre fundo claro ele
   mede 1,09 de contraste e some. Este mede 13,3, sem preenchimento, para não
   disputar com o botão principal ao lado. */
.psvar-btn--secundario {
	color: var(--tinta);
	box-shadow: rgba(26, 28, 20, 0.22) 0 0 0 1px inset;
}

.psvar-btn--secundario:hover {
	background: rgba(26, 28, 20, 0.05);
	color: var(--tinta);
}

.psvar-btn--secundario .psvar-btn__bolha {
	background: rgba(26, 28, 20, 0.1);
}


/* Etiqueta "consulta pública" nos documentos.
   Neutra de propósito: é o caso comum, e uma lista inteira de etiqueta dourada
   viraria ruído. O dourado fica reservado ao "restrito", que é a exceção. */
.psvar-selo--publico {
	background: rgba(26, 28, 20, 0.05);
	box-shadow: rgba(26, 28, 20, 0.12) 0 0 0 1px inset;
	color: var(--tinta-3);
}


/* ---- régua de categorias na página do processo ----
   19 processos passam de 30 documentos e o maior tem 294: sem a régua, chegar
   ao Plano de Recuperação exige rolar por Atas, Editais e Modelos. */
.psvar-regua-tipos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 40px;
}

.psvar-tipo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(26, 28, 20, 0.04);
	box-shadow: rgba(26, 28, 20, 0.1) 0 0 0 1px inset;
	color: var(--tinta-2);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.3s var(--curva), color 0.3s var(--curva),
		box-shadow 0.3s var(--curva);
}

.psvar-tipo:hover {
	background: rgba(26, 28, 20, 0.08);
	color: var(--tinta);
}

.psvar-tipo__conta {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

.psvar-tipo--ativo,
.psvar-tipo--ativo:hover {
	background: var(--verde-800);
	box-shadow: none;
	color: var(--creme);
}

.psvar-tipo:focus-visible {
	outline: 2px solid var(--ouro);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.psvar-tipo {
		font-size: 12px;
		padding: 7px 12px;
	}
}


/* a etiqueta no resultado da busca acompanha o título, sem empurrar a linha */
.psvar-achado__corpo strong .psvar-selo {
	margin-left: 10px;
	vertical-align: middle;
}


/* processo fechado na lista: presente, porém visivelmente diferente do que
   se abre agora. O nome fica um pouco mais apagado, sem esconder. */
.psvar-proc--fechado .psvar-proc__nome {
	color: var(--tinta-2);
}


/* "Entrar para ver" é ação, não informação: ganha o tratamento de chamada,
   diferente do cinza de "294 documentos" que ocupa o mesmo canto da linha. */
.psvar-proc__entrar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ouro-texto);
}

.psvar-proc__seta {
	display: inline-block;
	transition: transform 0.35s var(--curva);
}

.psvar-proc--fechado:hover .psvar-proc__seta,
.psvar-proc--fechado:focus-visible .psvar-proc__seta {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.psvar-proc__seta {
		transition: none;
	}
}


/* ---- trilha de volta, no topo das páginas internas ----
   Sem ela, quem chegava a um processo pelo Google ou pelo WhatsApp só tinha o
   botão do navegador. Fica sobre a capa escura, por isso as cores claras. */
.psvar-trilha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--sobre-escuro-2);
}

.psvar-trilha a {
	color: var(--sobre-escuro-2);
	text-decoration: none;
	transition: color 0.3s var(--curva);
}

.psvar-trilha a:hover {
	color: var(--ouro-claro);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.psvar-trilha [aria-current="page"] {
	color: var(--creme);
}

.psvar-trilha__seta {
	opacity: 0.45;
}

@media (max-width: 640px) {
	.psvar-trilha {
		font-size: 12px;
		gap: 6px;
	}
}


/* O formulário de contato é uma pilha com folga própria entre os blocos.
   Antes, cada bloco cuidava da própria margem, e o campo "Mensagem", que é um
   label solto, ficava sem nenhuma: o rótulo encostava na caixa de cima. */
.psvar-contato__forma form {
	display: grid;
	/* 34px, e nao 26: o rotulo em versalete tem pouca altura visual e o
	   conjunto ainda lia como colado na caixa de cima */
	gap: 34px;
}

/* ======================= janela do vídeo (dialog) ======================== */
/* O vídeo abre por cima da página, e ao fechar o credor continua onde estava.
   O <dialog> traz o fundo, o Esc e a armadilha de foco do próprio navegador. */

.psvar-janela {
	width: min(1040px, 92vw);
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: transparent;
	overflow: visible;
	color: var(--creme);
}

.psvar-janela::backdrop {
	background: rgba(10, 12, 6, 0.82);
	backdrop-filter: blur(3px);
}

.psvar-janela__quadro {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	box-shadow:
		rgba(179, 141, 49, 0.28) 0 0 0 1px,
		rgba(0, 0, 0, 0.5) 0 30px 70px -20px;
}

.psvar-janela__quadro iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.psvar-janela__titulo {
	margin: 16px 4px 0;
	font-family: "Jakarta", system-ui, sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: rgba(253, 251, 246, 0.82);
}

/* o X fica FORA do quadro, no canto de cima: por dentro ele briga com os
   controles do player */
.psvar-janela__fechar {
	position: absolute;
	top: -46px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(253, 251, 246, 0.12);
	color: var(--creme);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.3s var(--curva), transform 0.3s var(--curva);
}

.psvar-janela__fechar:hover {
	background: rgba(253, 251, 246, 0.22);
	transform: scale(1.06);
}

.psvar-janela[open] {
	animation: psvar-janela-entra 0.32s var(--curva);
}

@keyframes psvar-janela-entra {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
}

@media (prefers-reduced-motion: reduce) {
	.psvar-janela[open] {
		animation: none;
	}
}

@media (max-width: 640px) {
	.psvar-janela {
		width: 94vw;
	}

	.psvar-janela__fechar {
		top: -44px;
		right: 0;
	}
}

/* o cartão de vídeo vira um botão de tocar: o cursor precisa dizer isso */
.psvar-cartao[data-video] {
	cursor: pointer;
}

/* capa do vídeo: imagem do YouTube com o triângulo por cima. Nenhum player é
   carregado antes do clique */
.psvar-capa-video {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin: 0 0 20px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--verde-950);
}

.psvar-capa-video img {
	width: 100%;
	height: 100%;
	/* a capa do YouTube vem em 4:3 com tarja preta em cima e embaixo: o corte
	   tira as tarjas e deixa só a imagem */
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--curva);
}

.psvar-cartao--video:hover .psvar-capa-video img {
	transform: scale(1.04);
}

.psvar-capa-video__tocar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	background: rgba(20, 24, 12, 0.72);
	box-shadow: rgba(217, 187, 114, 0.5) 0 0 0 1px inset;
	color: var(--ouro-claro);
	transition: background-color 0.4s var(--curva), transform 0.4s var(--curva);
}

.psvar-capa-video__tocar svg {
	width: 30px;
	height: 30px;
	/* o triângulo tem o peso à esquerda: sem este empurrão ele parece torto */
	margin-left: 2px;
}

.psvar-cartao--video:hover .psvar-capa-video__tocar {
	background: rgba(20, 24, 12, 0.86);
	transform: translate(-50%, -50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.psvar-capa-video img,
	.psvar-capa-video__tocar {
		transition: none;
	}

	.psvar-cartao--video:hover .psvar-capa-video img {
		transform: none;
	}
}

/* três campos lado a lado, como a linha dupla.

   No cadastro: identificação, tipo de processo e empresa. Em duas linhas a
   terceira caía sozinha e deixava um vazio grande à direita. */
.psvar-linha-tripla {
	display: grid;
	/* não são três iguais: "Recuperação Extrajudicial" é o texto mais longo e
	   ficava cortado numa coluna de 211px, enquanto "Sou credor" sobrava espaço */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 1.1fr);
	gap: 20px;
}

@media (max-width: 900px) {
	.psvar-linha-tripla {
		grid-template-columns: 1fr;
	}
}

/* Frase de apoio embaixo de um campo, que muda enquanto a pessoa digita.

   No cadastro ela diz o que o sistema reconheceu (CPF ou CNPJ), para ninguém
   terminar de digitar achando que informou uma coisa e o sistema leu outra. */
.psvar-ajuda-campo {
	display: block;
	margin: 8px 2px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tinta-3);
	transition: color 0.3s var(--curva);
}

.psvar-ajuda-campo--ok {
	color: var(--ouro-texto, #7a5f1f);
	font-weight: 600;
}

.psvar-ajuda-campo--erro {
	color: #b3243c;
}

@media (prefers-reduced-motion: reduce) {
	.psvar-ajuda-campo {
		transition: none;
	}
}

/* Pedido do CPF/CNPJ no alto da área do credor.

   Cadastro herdado do site anterior sem documento aproveitável. Enquanto o
   prazo corre é um aviso dourado; vencido, fica vermelho, porque aí o acesso
   restrito está mesmo suspenso. */
.psvar-pedido-doc {
	margin: 0 0 40px;
	padding: 28px 30px;
	border-radius: 20px;
	background: rgba(179, 141, 49, 0.07);
	box-shadow: rgba(179, 141, 49, 0.3) 0 0 0 1px inset;
}

.psvar-pedido-doc h2 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.25;
}

.psvar-pedido-doc p {
	margin: 0 0 12px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tinta-2);
}

.psvar-pedido-doc__forma {
	display: grid;
	gap: 18px;
	max-width: 420px;
	margin-top: 22px;
}

/* o botão de um formulário em grade estica; aqui ele fica à esquerda, junto
   do campo, e não centralizado como nas telas de cadastro */
.psvar-pedido-doc__forma > .psvar-btn {
	justify-self: start;
}

.psvar-pedido-doc--vencido {
	background: rgba(179, 36, 60, 0.06);
	box-shadow: rgba(179, 36, 60, 0.28) 0 0 0 1px inset;
}

.psvar-pedido-doc--vencido h2 {
	color: #8f1c30;
}

@media (max-width: 640px) {
	.psvar-pedido-doc {
		padding: 22px 20px;
		border-radius: 16px;
	}
}

/* ===================== área do credor: lista de documentos ================ */

/* Abas dos processos, para quem é credor de mais de uma empresa. */
.psvar-abas-processo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 30px;
	padding: 0 0 20px;
	box-shadow: var(--fio, rgba(26, 28, 20, 0.1)) 0 1px 0 0;
}

.psvar-abas-processo a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(26, 28, 20, 0.045);
	color: var(--tinta-2);
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}

.psvar-abas-processo a:hover {
	background: rgba(179, 141, 49, 0.14);
	color: var(--tinta);
}

.psvar-abas-processo a[aria-current] {
	background: var(--verde-950);
	color: var(--creme);
	font-weight: 600;
}

.psvar-abas-processo__novos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ouro);
	color: var(--verde-950);
	font-size: 11px;
	font-weight: 700;
}

/* Busca dentro do acervo do processo. */
.psvar-busca-docs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 28px;
}

.psvar-busca-docs input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
}

.psvar-limpar-busca {
	font-size: 14px;
	color: var(--tinta-3);
}

.psvar-resultado-busca {
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--tinta-2);
}

/* Grupo de documentos, fechado por padrão.

   Com 111 documentos a página passava de 15 mil pixels de altura. Fechado, o
   credor vê a estrutura inteira numa tela e abre só o que interessa. */
.psvar-grupo-docs {
	margin: 0 0 12px;
	border-radius: 14px;
	background: rgba(26, 28, 20, 0.025);
	box-shadow: rgba(26, 28, 20, 0.07) 0 0 0 1px inset;
	overflow: hidden;
}

.psvar-grupo-docs > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.3s var(--curva);
}

.psvar-grupo-docs > summary::-webkit-details-marker {
	display: none;
}

/* a seta é nossa, e gira ao abrir */
.psvar-grupo-docs > summary::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	opacity: 0.5;
	transition: transform 0.3s var(--curva);
}

.psvar-grupo-docs[open] > summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.psvar-grupo-docs > summary:hover {
	background: rgba(179, 141, 49, 0.07);
}

.psvar-grupo-docs__nome {
	font-family: "Lora", Georgia, serif;
	font-size: 19px;
}

.psvar-grupo-docs__conta {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(26, 28, 20, 0.07);
	font-size: 12px;
	font-weight: 600;
	color: var(--tinta-3);
}

.psvar-grupo-docs__lista {
	padding: 0 20px 12px;
}

/* Documento publicado depois da última visita. */
.psvar-selo-novo {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--ouro);
	color: var(--verde-950);
	font-family: "Jakarta", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.psvar-proc--novo {
	background: rgba(179, 141, 49, 0.06);
}

@media (max-width: 640px) {
	.psvar-grupo-docs > summary {
		padding: 14px 16px;
	}

	.psvar-grupo-docs__lista {
		padding: 0 16px 10px;
	}
}

/* Processo que já terminou. Continua na lista, porque quem procura o próprio
   caso precisa achá-lo, mas dito com todas as letras. */
.psvar-selo--encerrado {
	background: rgba(26, 28, 20, 0.1);
	color: var(--tinta-3);
}

.psvar-proc--encerrado .psvar-proc__nome {
	opacity: 0.72;
}

/* ===================== texto corrido de documento ========================= */

/* Usado na política de privacidade. Documento legal se lê inteiro, então a
   medida da linha manda: acima de ~75 caracteres o olho erra a linha ao voltar
   à esquerda. 68ch é a medida confortável, e o resto é ritmo de leitura. */
.psvar-prosa {
	max-width: 68ch;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.72;
	color: var(--tinta-2);
}
.psvar-prosa h2 {
	font-family: "Lora", Georgia, serif;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--tinta);
	/* muito mais ar acima que abaixo: é o que faz o título pertencer ao texto
	   que vem depois, e não ao que veio antes */
	margin: 48px 0 14px;
}
.psvar-prosa h2:first-child {
	margin-top: 0;
}
.psvar-prosa p {
	margin: 0 0 18px;
}
.psvar-prosa ul {
	margin: 0 0 18px;
	padding-left: 22px;
}
.psvar-prosa li {
	margin: 0 0 8px;
}
.psvar-prosa strong {
	color: var(--tinta);
	font-weight: 600;
}
.psvar-prosa a {
	color: var(--ouro-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.psvar-prosa a:hover {
	color: var(--tinta);
}
/* a data da revisão e o encerramento: recado de serviço, não corpo do texto */
.psvar-prosa__nota {
	padding: 14px 18px;
	border-radius: 10px;
	background: var(--ouro-veu, rgba(179, 141, 49, 0.08));
	font-size: 15px;
	margin: 0 0 32px;
}
.psvar-prosa__nota:last-child {
	margin: 36px 0 0;
}
@media (max-width: 640px) {
	.psvar-prosa {
		font-size: 16px;
	}
	.psvar-prosa h2 {
		font-size: 21px;
		margin-top: 38px;
	}
}


/* Aviso no alto do cadastro: quem ja tem conta nao faz outra. Fica ANTES
   dos campos porque o cartao equivalente na coluna da direita so aparece na
   altura da metade do formulario, quando a pessoa ja comecou a preencher. */
.psvar-ja-tenho {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 0 28px;
	padding: 20px 24px;
	border-radius: 14px;
	background: var(--creme-2);
	box-shadow: rgba(179, 141, 49, 0.45) 0 0 0 1px inset;
}
.psvar-ja-tenho h2 {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 1.3;
}
.psvar-ja-tenho p {
	margin: 0;
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tinta-2);
}
.psvar-ja-tenho .psvar-btn {
	flex: none;
	padding: 12px 20px;
}
@media (max-width: 620px) {
	.psvar-ja-tenho {
		flex-direction: column;
		align-items: flex-start;
	}
}
/* Os credores que a conta ja representa, na lateral de acrescentar credor */
.psvar-lista-credores {
	margin: 0;
	padding: 0;
	list-style: none;
}
.psvar-lista-credores li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-top: 1px solid rgba(26, 28, 20, 0.1);
	font-size: 14px;
	line-height: 1.5;
	color: var(--tinta-3);
}
.psvar-lista-credores li:first-child {
	border-top: 0;
	padding-top: 4px;
}
.psvar-lista-credores strong {
	font-size: 15px;
	color: var(--tinta-2);
}

/* Convite a juntar credores na mesma conta, sob as abas da area do credor */
.psvar-acrescentar-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: -6px 0 26px;
	font-size: 14px;
}
.psvar-acrescentar-link a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	font-weight: 600;
	color: var(--tinta-2);
	background: var(--creme-2);
	box-shadow: rgba(179, 141, 49, 0.5) 0 0 0 1px inset;
	text-decoration: none;
	transition: background .18s ease, box-shadow .18s ease;
}
.psvar-acrescentar-link a:hover {
	background: #f0e9d6;
	box-shadow: rgba(179, 141, 49, 0.9) 0 0 0 1px inset;
}
.psvar-acrescentar-link a span {
	font-size: 16px;
	line-height: 1;
	color: var(--ouro);
}
.psvar-acrescentar-link > span {
	color: var(--tinta-3);
}
/* Em nome de quem a pessoa esta olhando, na coluna do processo */
.psvar-credor-atual {
	margin: 0 0 22px;
	padding: 0 0 18px;
	border-bottom: 1px solid rgba(26, 28, 20, 0.12);
}
.psvar-credor-atual__nome {
	margin: 2px 0 0;
	font-family: 'Lora', Georgia, serif;
	font-size: 21px;
	line-height: 1.25;
	color: var(--tinta-1, var(--tinta-2));
}
.psvar-credor-atual__doc {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--tinta-3);
}
/* Resumo do credor na confirmacao de senha do cadastro */
.psvar-resumo-credor {
	margin: 0 0 26px;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--creme-2);
	box-shadow: rgba(26, 28, 20, 0.12) 0 0 0 1px inset;
}
.psvar-resumo-credor p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tinta-3);
}
.psvar-resumo-credor p.psvar-resumo-credor__nome {
	font-family: 'Lora', Georgia, serif;
	font-size: 20px;
	color: var(--tinta-2);
	margin: 4px 0 2px;
}
}