/*
	Pictore AI Ready, a página (28/09/2026).

	A assinatura (aura, chuva, composição) vem de `ai.css`, a mesma da Home; a
	abertura é o componente das internas (`interna.css`). Aqui ficam a posição
	dessas peças nesta página e as seções dela.

	O gradiente de destaque aponta para o EXPANDIDO na página inteira (decisão
	V5): é a página dele. O botão continua no `--pic-grad-acao`, que não passa
	pela ponta roxa — ver os tokens em `base.css`.
*/

main {
	--pic-grad-destaque: var(--pic-grad-expandido);
}

/* ---------- abertura: chuva e aura em tela cheia ---------- */

/*
	Sem foto não há cabeça para proteger: a cena cobre a tela inteira, por
	baixo da barra também. A chuva ocupa tudo e se apaga onde o texto senta —
	no canto de baixo à esquerda —, pela mesma regra da Home: o efeito ocupa
	o espaço que sobra, nunca o do conteúdo.
*/
.interna-abertura__cena--chuva {
	inset: 0;
	isolation: isolate;
}

.interna-abertura__cena--chuva .chuva {
	inset: 0;
	opacity: 0.55;
	-webkit-mask-image: radial-gradient(ellipse 62% 58% at 24% 78%, rgba(0, 0, 0, 0.08), #000 78%);
	mask-image: radial-gradient(ellipse 62% 58% at 24% 78%, rgba(0, 0, 0, 0.08), #000 78%);
	-webkit-mask-composite: source-over;
	mask-composite: add;
}

.interna-abertura__cena--chuva .ai-ready__aura {
	z-index: -1;
}

/* O véu aqui só fecha a base no grafite da seção seguinte. */
.interna-abertura__cena--chuva .interna-abertura__veu {
	background: linear-gradient(to top, var(--pic-fundo) 0%, rgba(29, 29, 36, 0.6) 22%, rgba(29, 29, 36, 0) 48%);
}

/* ---------- a pergunta ---------- */

.air-pergunta {
	padding-block: var(--pic-esp-6);
}

.air-pergunta__antes {
	margin-bottom: var(--pic-esp-2);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	color: var(--pic-texto-3);
}

.air-pergunta__frase {
	max-width: 58rem;
	font-size: clamp(1.7rem, 4vw, 3.3rem);
	font-weight: 200;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: var(--pic-texto);
	text-wrap: pretty;
}

.air-pergunta__resposta {
	display: grid;
	gap: var(--pic-esp-3) var(--pic-esp-5);
	margin-top: var(--pic-esp-5);
	padding-top: var(--pic-esp-4);
	border-top: 1px solid var(--pic-linha);
}

@media (min-width: 56rem) {
	.air-pergunta__resposta {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: start;
	}
}

.air-pergunta__tese {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 300;
	line-height: 1.35;
	color: var(--pic-texto);
}

.air-pergunta__tese strong {
	font-weight: 500;
	background: var(--pic-grad-institucional);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* ---------- as quatro camadas ---------- */

.air-camadas {
	position: relative;
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.air-camadas__titulo {
	margin-bottom: var(--pic-esp-5);
	font-size: clamp(1.8rem, 3.8vw, 3rem);
	font-weight: 200;
	letter-spacing: -0.03em;
}

.air-camadas__env {
	display: grid;
	gap: var(--pic-esp-5);
}

.air-camadas__lista {
	display: grid;
	gap: var(--pic-esp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.air-camada__marca {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: var(--pic-esp-2);
}

.air-camada__selo {
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	border: 1px solid var(--pic-linha);
	border-radius: 50%;
	color: var(--pic-texto-2);
	transition: color 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
}

.air-camada__icone {
	width: 1.55rem;
	height: 1.55rem;
}

.air-camada__n {
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--pic-texto-3);
}

.air-camada__nome {
	margin-bottom: 0.4rem;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--pic-texto);
}

.air-camada__frase {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.1rem, 1.9vw, 1.35rem);
	font-weight: 300;
	background: var(--pic-grad-institucional);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.air-camada__texto {
	max-width: 34rem;
	color: var(--pic-texto-2);
}

.air-camada__texto + .air-camada__texto {
	margin-top: var(--pic-esp-2);
}

.air-camada__sinal {
	margin-top: var(--pic-esp-3);
	font-size: 0.95rem;
	color: var(--pic-texto);
}

.air-camada__sinal span {
	margin-right: 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pic-texto-3);
}

/*
	Com o script, a camada que não está na altura da leitura recua, e a que
	está acende o selo. Sem ele (sem a classe na raiz), as quatro estão
	inteiras — nenhum estado de repouso esconde texto.

	As camadas NÃO levam `data-mov="entra"`: a entrada anima a opacidade com
	`fill: both` e venceria este esmaecimento para sempre — medido, as quatro
	em 1 com a camada 2 ativa. Aqui o acender é a entrada.
*/
.pic-air-js .air-camada {
	opacity: 0.4;
	transition: opacity 0.6s ease;
}

.pic-air-js .air-camada.e-ativa {
	opacity: 1;
}

.pic-air-js .air-camada.e-ativa .air-camada__selo {
	color: var(--pic-ciano);
	border-color: rgba(18, 228, 255, 0.5);
	background: rgba(18, 228, 255, 0.1);
}

/*
	Tela larga: o texto à esquerda, a composição presa à direita. Cada camada
	ocupa quase uma tela, para a leitura dela ter tempo de acender a peça
	correspondente antes da próxima chegar.
*/
@media (min-width: 72rem) {
	.air-camadas__env {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: clamp(3rem, 6vw, 6rem);
	}

	.air-camadas__lista {
		gap: 0;
	}

	.air-camada {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 72svh;
	}

	.air-camadas__palco {
		position: sticky;
		top: max(6rem, calc(50svh - 17rem));
	}

	.air-camadas__palco .composicao {
		width: 100%;
	}
}

@media (max-width: 71.99rem) {
	.air-camadas__palco {
		order: -1;
	}
}

/*
	A ligação entre os dois lados, pela leitura: `ai-ready.js` escreve
	`data-aceso` na composição com a camada que está na altura da leitura. É o
	mesmo acendimento que o ponteiro dispara na Home (`ai.css`, "os dois lados
	acendem juntos"), só que aqui quem conduz é a rolagem — e por isso vale
	também sem ponteiro.
*/
.composicao[data-aceso="identidade"] :is(.peca--identidade, .arco--identidade, .sinal--identidade),
.composicao[data-aceso="conteudo"] :is(.peca--conteudo, .arco--conteudo, .sinal--conteudo),
.composicao[data-aceso="estrutura"] :is(.peca--estrutura, .arco--estrutura, .sinal--estrutura),
.composicao[data-aceso="descoberta"] :is(.peca--descoberta, .arco--descoberta, .sinal--descoberta) {
	--pic-aceso: 1;
}

.composicao[data-aceso="identidade"] .peca--identidade,
.composicao[data-aceso="conteudo"] .peca--conteudo,
.composicao[data-aceso="estrutura"] .peca--estrutura,
.composicao[data-aceso="descoberta"] .peca--descoberta {
	animation-play-state: paused;
}

.composicao[data-aceso="identidade"] .peca--identidade > .peca__face,
.composicao[data-aceso="conteudo"] .peca--conteudo > .peca__face,
.composicao[data-aceso="estrutura"] .peca--estrutura > .peca__face,
.composicao[data-aceso="descoberta"] .peca--descoberta > .peca__face {
	--pic-prumo: 0;

	animation-play-state: paused;
	scale: 1.07;
}

/* ---------- da busca para a resposta ---------- */

.air-resposta {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
	overflow: clip;
}

.air-resposta__env {
	display: grid;
	gap: var(--pic-esp-5);
	align-items: center;
}

@media (min-width: 56rem) {
	.air-resposta__env {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3rem, 6vw, 6rem);
	}
}

.air-resposta__texto h2 {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.8rem, 3.8vw, 3rem);
	font-weight: 200;
	letter-spacing: -0.03em;
}

.air-resposta__texto p + p {
	margin-top: var(--pic-esp-2);
}

.air-resposta__virada {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 300;
	color: var(--pic-texto);
}

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

/*
	A cena: cinco resultados de busca, em esqueleto, e o balão de uma
	resposta por cima deles. Tudo em barras de 1 px de raio largo — desenho,
	não interface falsa: nada ali tem texto para ser lido, a não ser "Sua
	empresa".
*/
.air-resposta__cena {
	position: relative;
	min-height: 22rem;
}

.air-busca {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.air-busca__item {
	display: grid;
	gap: 0.45rem;
}

.air-busca__item span {
	display: block;
	height: 0.5rem;
	border-radius: 99px;
	background: var(--pic-linha);
}

.air-busca__url {
	width: 30%;
	height: 0.35rem !important;
	background: color-mix(in srgb, var(--pic-azul) 35%, var(--pic-linha)) !important;
}

.air-busca__titulo {
	width: calc(62% - var(--i, 0) * 4%);
	height: 0.75rem !important;
	background: #3a3a47 !important;
}

.air-busca__linha {
	width: calc(88% - var(--i, 0) * 6%);
}

.air-balao {
	position: absolute;
	right: 0;
	bottom: -0.5rem;
	display: grid;
	gap: 0.7rem;
	width: min(80%, 24rem);
	padding: 1.3rem 1.4rem;
	border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
	background: #26262f;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 1.6rem 3.4rem rgba(3, 3, 8, 0.6);
}

/* O fio do balão no gradiente expandido: a borda de luz da resposta. */
.air-balao::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: var(--pic-grad-expandido);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0.8;
	pointer-events: none;
}

.air-balao__linha {
	display: block;
	width: 92%;
	height: 0.5rem;
	border-radius: 99px;
	background: #3a3a47;
}

.air-balao__linha--curta {
	width: 64%;
}

.air-balao__marca {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	justify-self: start;
	padding: 0.45rem 0.9rem 0.45rem 0.7rem;
	border: 1px solid rgba(18, 228, 255, 0.45);
	border-radius: 99px;
	background: rgba(18, 228, 255, 0.08);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pic-texto);
	box-shadow: 0 0 1.4rem rgba(18, 228, 255, 0.25);
}

.air-balao__curva {
	width: auto;
	height: 1.2rem;
}

/*
	Os resultados se apagam enquanto a seção passa, e o balão assenta por
	cima (`data-mov="assenta"`). Só opacidade: o que some é a relevância da
	lista, não a lista. Reserva no Firefox: `rolagem.js`.
*/
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.air-busca {
			animation: air-busca-apaga linear both;
			animation-timeline: view();
			animation-range: entry 40% cover 60%;
		}
	}
}

@keyframes air-busca-apaga {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.28;
	}
}

/* ---------- a prova ---------- */

.air-prova {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.air-prova__intro {
	max-width: 44rem;
	margin-bottom: var(--pic-esp-5);
}

.air-prova__intro h2 {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.8rem, 3.8vw, 3rem);
	font-weight: 200;
	letter-spacing: -0.03em;
}

/*
	Sem script: os quatro prints lado a lado (dois por linha na tela larga),
	cada um com a sua pergunta em cima. Nada escondido.
*/
.air-prova__palco {
	display: grid;
	gap: var(--pic-esp-5) var(--pic-esp-4);
}

@media (min-width: 56rem) {
	.air-prova__palco {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.air-print {
	margin: 0;
	max-width: 30rem;
}

.air-print__pergunta {
	justify-self: end;
	width: fit-content;
	max-width: 90%;
	margin: 0 0 1rem auto;
	padding: 0.7rem 1rem;
	border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
	background: #2b3350;
	font-size: 0.95rem;
	color: var(--pic-texto);
}

.air-print__tela {
	position: relative;
	display: block;
	overflow: clip;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 2rem 4rem rgba(3, 3, 8, 0.55);
}

.air-print__tela img {
	display: block;
	width: 100%;
	height: auto;
}

/*
	O destaque: moldura de 1 px no ciano da marca, com brilho, no trecho que
	cita o cliente. Substitui as setas desenhadas à mão dos arquivos
	anotados — é a linguagem do site fazendo o trabalho que a caneta fazia.
*/
.air-print__destaque {
	position: absolute;
	border: 1px solid rgba(18, 228, 255, 0.95);
	border-radius: 10px;
	background: rgba(18, 228, 255, 0.1);
	box-shadow: 0 0 0 4px rgba(18, 228, 255, 0.14), 0 0 1.6rem rgba(18, 228, 255, 0.45);
	pointer-events: none;
}

.air-print__varre {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(to bottom, rgba(18, 228, 255, 0) 0%, rgba(18, 228, 255, 0.16) 48%, rgba(18, 228, 255, 0) 52%);
	background-size: 100% 240%;
}

.air-print__legenda {
	margin-top: 1rem;
	font-size: 0.95rem;
	color: var(--pic-texto-2);
}

.air-print__legenda strong {
	color: var(--pic-texto);
}

.air-print__fonte {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	color: var(--pic-texto-3);
}

/*
	Com script (`.e-palco`): as perguntas viram as abas à esquerda e o palco
	mostra um print por vez, trocando sozinho a cada 7 s enquanto a seção
	está na tela e ninguém mexe. A pergunta sai de cima do print — ela já está
	na aba — e o print chega com a varredura de luz e o destaque acendendo.
*/
.air-prova__env.e-palco {
	display: grid;
	gap: var(--pic-esp-4);
}

@media (min-width: 60rem) {
	.air-prova__env.e-palco {
		grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
		gap: clamp(3rem, 7vw, 7rem);
		align-items: center;
	}
}

.air-prova__perguntas {
	display: grid;
	gap: 0.8rem;
}

.air-pergunta-b {
	position: relative;
	display: grid;
	gap: 0.35rem;
	justify-items: end;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: right;
	cursor: pointer;
}

.air-pergunta-b__balao {
	padding: 0.8rem 1.1rem;
	border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
	background: #24242d;
	box-shadow: inset 0 0 0 1px var(--pic-linha);
	font-size: clamp(0.98rem, 1.4vw, 1.1rem);
	color: var(--pic-texto-2);
	transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.air-pergunta-b__quem {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--pic-texto-3);
}

.air-pergunta-b:hover .air-pergunta-b__balao,
.air-pergunta-b:focus-visible .air-pergunta-b__balao {
	color: var(--pic-texto);
}

.air-pergunta-b[aria-selected="true"] .air-pergunta-b__balao {
	background: #2b3350;
	box-shadow: inset 0 0 0 1px rgba(18, 228, 255, 0.5), 0 0 1.4rem rgba(18, 228, 255, 0.15);
	color: var(--pic-texto);
}

.air-pergunta-b[aria-selected="true"] .air-pergunta-b__quem {
	color: var(--pic-ciano);
}

/* O tempo até a próxima: um fio de 1 px que corre sob a aba escolhida. */
.air-pergunta-b__tempo {
	justify-self: stretch;
	height: 1px;
	background: var(--pic-linha);
	transform-origin: 100% 50%;
	transform: scaleX(0);
}

.air-prova__env.e-palco .air-prova__palco {
	display: block;
}

.air-prova__env.e-palco .air-print {
	max-width: none;
}

.air-prova__env.e-palco .air-print__pergunta {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.air-prova__env.e-palco .air-print:not([hidden]) .air-print__tela {
		animation: air-print-chega 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.air-prova__env.e-palco .air-print:not([hidden]) .air-print__varre {
		animation: air-varre 1.4s ease-out 0.15s both;
	}

	.air-prova__env.e-palco .air-print:not([hidden]) .air-print__destaque {
		animation: air-destaque-acende 0.7s ease-out 0.9s both,
			air-destaque-pulsa 2.8s ease-in-out 1.6s infinite;
	}

	.air-prova__env.e-palco.e-andando .air-pergunta-b[aria-selected="true"] .air-pergunta-b__tempo {
		background: var(--pic-ciano);
		animation: air-tempo var(--air-ciclo, 7s) linear both;
	}
}

@keyframes air-print-chega {
	from {
		opacity: 0;
		transform: translate3d(0, 1.4rem, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
	A varredura termina APAGADA. Parada em `background-position: 0 0`, a
	metade de cima do gradiente continuava sobre o print, e ele ficava com um
	véu ciano — medido no print da Dra. Elaine.
*/
@keyframes air-varre {
	0% {
		opacity: 1;
		background-position: 0 100%;
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		background-position: 0 0;
	}
}

@keyframes air-destaque-acende {
	from {
		opacity: 0;
		scale: 1.04;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes air-destaque-pulsa {
	0%,
	100% {
		box-shadow: 0 0 0 4px rgba(18, 228, 255, 0.14), 0 0 1.6rem rgba(18, 228, 255, 0.45);
	}

	50% {
		box-shadow: 0 0 0 6px rgba(18, 228, 255, 0.08), 0 0 2.4rem rgba(18, 228, 255, 0.6);
	}
}

@keyframes air-tempo {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ---------- fecho ---------- */

.air-fecho {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: clamp(5rem, 14vw, 10rem);
	border-top: 1px solid var(--pic-linha);
	text-align: center;
}

.air-fecho__env {
	display: grid;
	justify-items: center;
	gap: var(--pic-esp-4);
}

.air-fecho__titulo {
	max-width: 44rem;
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* ---------- perguntas frequentes (29/09/2026) ---------- */

/*
	O título preso à esquerda enquanto as perguntas passam à direita — o mesmo
	desenho dos capítulos de um case. Uma aberta por vez, pelo `<details name>`
	nativo: o navegador fecha a anterior, e sem JavaScript nada muda.
*/
.air-perguntas {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.air-perguntas__env {
	display: grid;
	gap: var(--pic-esp-4);
}

@media (min-width: 60rem) {
	.air-perguntas__env {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(2.5rem, 6vw, 6rem);
		align-items: start;
	}

	.air-perguntas__titulo {
		position: sticky;
		top: calc(var(--pic-cab-altura) + var(--pic-esp-4));
	}
}

.air-perguntas__titulo {
	margin: 0;
	font-size: clamp(1.8rem, 3.8vw, 3rem);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--pic-texto);
}

.air-pergunta-item {
	position: relative;
	border-top: 1px solid var(--pic-linha);
}

.air-pergunta-item:last-child {
	border-bottom: 1px solid var(--pic-linha);
}

/* O fio da aberta: acende no gradiente expandido, a cor desta página. */
.air-pergunta-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 100%;
	height: 1px;
	background: var(--pic-grad-expandido);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.air-pergunta-item[open]::before {
	transform: scaleX(1);
}

.air-pergunta-item__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pic-esp-3);
	padding-block: var(--pic-esp-3);
	cursor: pointer;
	list-style: none;
}

.air-pergunta-item__pergunta::-webkit-details-marker {
	display: none;
}

.air-pergunta-item__pergunta h3 {
	margin: 0;
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	font-weight: 300;
	line-height: 1.3;
	color: var(--pic-texto-2);
	transition: color 0.35s;
}

.air-pergunta-item__pergunta:hover h3,
.air-pergunta-item__pergunta:focus-visible h3,
.air-pergunta-item[open] .air-pergunta-item__pergunta h3 {
	color: var(--pic-texto);
}

.air-pergunta-item__pergunta:focus-visible {
	outline: 2px solid var(--pic-ciano);
	outline-offset: 4px;
}

/*
	O sinal: um "+" em que o traço vertical recolhe ao abrir, e sobra o "−".
	Sem giro — o sinal muda de forma, não de ângulo.
*/
.air-pergunta-item__sinal {
	position: relative;
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
}

.air-pergunta-item__sinal::before,
.air-pergunta-item__sinal::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 1px;
	background: var(--pic-texto-2);
	translate: -50% -50%;
}

.air-pergunta-item__sinal::after {
	width: 1px;
	height: 100%;
	transition: scale 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.air-pergunta-item[open] .air-pergunta-item__sinal::after {
	scale: 1 0;
}

.air-pergunta-item__resposta p {
	max-width: 40rem;
	margin: 0;
	padding-bottom: var(--pic-esp-4);
	font-size: clamp(1.02rem, 1.4vw, 1.12rem);
	line-height: 1.7;
	color: var(--pic-texto-2);
}

/*
	A resposta desliza ao abrir onde o navegador sabe animar a altura do
	conteúdo do `<details>` (`::details-content` + `interpolate-size`). Onde
	não sabe, ela aparece de uma vez — e está inteira do mesmo jeito.
*/
@media (prefers-reduced-motion: no-preference) {
	@supports selector(::details-content) {
		.air-perguntas {
			interpolate-size: allow-keywords;
		}

		.air-pergunta-item::details-content {
			block-size: 0;
			overflow: clip;
			opacity: 0;
			transition: block-size 0.5s cubic-bezier(0.22, 1, 0.36, 1),
				opacity 0.4s ease,
				content-visibility 0.5s allow-discrete;
		}

		.air-pergunta-item[open]::details-content {
			block-size: auto;
			opacity: 1;
		}
	}
}