/*
 * SKYTEC 2 — paginas.css (agente FRONT-2)
 * Peças compartilhadas das páginas editoriais (Dicas, Artigo, Ajuda, A SKYTEC, Contato, 404)
 * e o visual próprio de Ajuda, A SKYTEC, Contato e 404.
 * Só variáveis de tokens.css. Prefixo pg- (página). Nada de /previa-v2/ aqui.
 * Grades sempre com align-items: stretch e sem cartão sobrando.
 */

/* =========================================================
 * 1. PEÇAS COMPARTILHADAS
 * ========================================================= */

/* ---------- Abertura editorial ---------- */
.pg-abre {
	position: relative;
	padding-block: var(--e-10) var(--e-8);
	text-align: center;
}
.pg-abre-dentro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-3);
}
.pg-abre h1 { max-width: 16ch; }
.pg-abre .skx-apoio { margin-inline: auto; }
.pg-abre-acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--e-2) var(--e-4);
	margin-top: var(--e-1);
}

/* migalhas (onde estou) */
.pg-migalhas ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--e-1); }
.pg-migalhas li { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--cor-texto-3); font-size: var(--t-pequeno); }
.pg-migalhas li + li::before { content: "/"; color: var(--cor-linha-2); }
.pg-migalhas a {
	display: inline-flex;
	align-items: center;
	min-height: var(--alvo);
	color: var(--cor-texto-2);
	text-decoration: none;
}
.pg-migalhas [aria-current] { color: var(--cor-azul-claro); }
@media (hover: hover) { .pg-migalhas a:hover { color: var(--cor-texto); text-decoration: underline; } }

/* números grandes em pontinhos (Doto) */
.pg-numeros {
	display: grid;
	grid-template-columns: repeat(var(--colunas-n, 4), minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
.pg-numero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--e-2);
	padding: var(--e-4) var(--e-2);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.pg-numero-valor {
	font-family: var(--fonte-pontos);
	font-size: var(--t-h2);
	font-weight: 900;
	line-height: 1;
	color: var(--cor-texto);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.pg-numero-valor small { font-size: 0.42em; letter-spacing: var(--espaco-letra-rotulo); color: var(--cor-azul-claro); margin-left: 0.2em; }
.pg-numero-texto { color: var(--cor-texto-2); font-size: var(--t-pequeno); line-height: 1.4; max-width: 20ch; }
a.pg-numero { transition: border-color var(--d-micro) var(--curva-troca), transform var(--d-padrao) var(--curva-saida), box-shadow var(--d-padrao) var(--curva-troca); }
@media (hover: hover) { a.pg-numero:hover { border-color: var(--cor-azul); transform: translateY(-4px); box-shadow: var(--brilho-azul); } }
.pg-numeros--3 { --colunas-n: 3; }
@media (max-width: 1023px) { .pg-numeros:not(.pg-numeros--3) { --colunas-n: 2; } }
@media (max-width: 639px) {
	.pg-numeros--3 { gap: var(--e-1); }
	.pg-numeros--3 .pg-numero { padding: var(--e-2) var(--e-1); }
	.pg-numeros--3 .pg-numero-valor { font-size: var(--t-h3); }
}

/* ---------- Cartão de dica (hub, artigo e 404) ---------- */
.pg-dica { display: flex; }
.pg-dica-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--e-2);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
	box-shadow: var(--sombra-1);
	color: inherit;
	text-decoration: none;
	transition: transform var(--d-entrada) var(--curva-saida), border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca);
}
.pg-dica-capa { display: block; overflow: hidden; border-radius: var(--r-2); }
.pg-dica-capa .skx-capa { aspect-ratio: 16 / 10; transition: transform var(--d-cena) var(--curva-saida); }
.pg-dica-corpo { display: flex; flex-direction: column; flex: 1; gap: var(--e-1); padding: var(--e-3) var(--e-1) var(--e-1); }
.pg-dica-titulo {
	font-family: var(--fonte-titulo);
	font-size: var(--t-h4);
	font-weight: var(--peso-titulo);
	line-height: 1.22;
	letter-spacing: -0.01em;
	min-height: 2.44em;
	text-wrap: balance;
}
.pg-dica-frase { color: var(--cor-texto-2); min-height: 3.2em; }
.pg-dica-ler {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	margin-top: auto;
	padding-top: var(--e-2);
	color: var(--cor-azul-claro);
	font-size: var(--t-rotulo);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-menu);
	text-transform: uppercase;
}
.pg-dica-ler svg { width: 18px; height: 18px; transition: transform var(--d-padrao) var(--curva-saida); }
@media (hover: hover) {
	.pg-dica-link:hover { transform: translateY(-6px); border-color: var(--cor-linha-2); box-shadow: var(--brilho-azul); }
	.pg-dica-link:hover .skx-capa { transform: scale(1.04); }
	.pg-dica-link:hover .pg-dica-ler svg { transform: translateX(4px); }
}

/* grade de 3 cartões iguais (artigo: continue aprendendo; 404) */
.pg-grade-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
@media (max-width: 1023px) { .pg-grade-3 { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; } }

/* ---------- Bloco de convite (CTA) com ilustração ---------- */
.pg-cta {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: var(--e-6);
	padding: var(--e-5);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-4);
	background: radial-gradient(80% 120% at 0% 0%, rgba(47, 140, 255, 0.12), transparent 60%), var(--cor-azul-fundo);
}
.pg-cta .skx-capa { aspect-ratio: 16 / 10; }
.pg-cta-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.pg-cta-texto h2 { font-size: var(--t-h3); }
.pg-cta-texto p { color: var(--cor-texto-2); max-width: 38rem; }
.pg-cta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-1); }
@media (max-width: 1023px) {
	.pg-cta { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); padding: var(--e-3); text-align: center; }
	.pg-cta .skx-capa { max-width: 26rem; margin-inline: auto; }
	.pg-cta-texto { align-items: center; }
	.pg-cta-acoes { justify-content: center; }
}
@media (max-width: 639px) {
	.pg-cta-acoes { flex-direction: column; align-items: stretch; width: 100%; }
	.pg-cta-acoes .skx-link { justify-content: center; }
	.pg-cta .skx-botao, .pg-canal .skx-botao, .pg-abre-acoes .skx-botao { white-space: normal; padding-inline: var(--e-2); }
}

/* ---------- Botão de pausar/tocar vídeo (WCAG 2.2.2) ---------- */
.pg-video-pausa {
	position: absolute;
	top: var(--e-1);
	right: var(--e-1);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--alvo);
	height: var(--alvo);
	border: 1px solid rgba(124, 192, 255, 0.35);
	border-radius: var(--r-pilula);
	background: var(--cor-vidro);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--cor-texto);
	transition: transform var(--d-padrao) var(--curva-mola), border-color var(--d-micro) var(--curva-troca);
}
.pg-video-pausa svg { width: 22px; height: 22px; fill: currentColor; }
.pg-video-pausa .pg-icone-tocar { display: none; }
.pg-video-pausa[aria-pressed="true"] .pg-icone-tocar { display: block; }
.pg-video-pausa[aria-pressed="true"] .pg-icone-pausar { display: none; }
@media (hover: hover) { .pg-video-pausa:hover { transform: scale(1.06); border-color: var(--cor-azul-claro); } }

/* ---------- Janela de zoom das imagens (dialog próprio; não usa .skx-janela) ---------- */
.pg-janela {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--e-2);
	border: 0;
	background: transparent;
	color: var(--cor-texto);
}
.pg-janela[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); }
.pg-janela::backdrop { background: rgba(5, 7, 11, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pg-janela-figura {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2);
	max-width: min(1200px, 100%);
	animation: skx-janela-entra var(--d-padrao) var(--curva-saida) both;
}
.pg-janela-figura img {
	width: auto;
	max-width: 100%;
	max-height: calc(100svh - 12rem);
	border-radius: var(--r-3);
	background: var(--gradiente-palco), var(--cor-azul-fundo);
	box-shadow: var(--brilho-azul);
}
.pg-janela-figura figcaption { color: var(--cor-texto-2); text-align: center; max-width: 46rem; }
.pg-janela .skx-fechar { position: fixed; top: var(--e-2); right: var(--e-2); }
.pg-janela-dica { color: var(--cor-texto-3); font-size: var(--t-pequeno); }

/* botão que envolve uma imagem ampliável */
.pg-zoom {
	position: relative;
	display: block;
	width: 100%;
	border-radius: var(--r-3);
	cursor: zoom-in;
}
.pg-zoom::after {
	content: "";
	position: absolute;
	right: var(--e-2);
	bottom: var(--e-2);
	width: var(--alvo);
	height: var(--alvo);
	border-radius: var(--r-pilula);
	border: 1px solid rgba(124, 192, 255, 0.35);
	background: var(--cor-vidro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f6fa' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 24px no-repeat;
	transition: transform var(--d-padrao) var(--curva-mola);
}
@media (hover: hover) { .pg-zoom:hover::after { transform: scale(1.08); } }

/* ---------- Figura com legenda (todas as páginas) ---------- */
.pg-figura { display: flex; flex-direction: column; gap: var(--e-2); }
.pg-figura figcaption { color: var(--cor-texto-3); font-size: var(--t-pequeno); text-align: center; }
.pg-figura .skx-capa { aspect-ratio: 16 / 10; }

/* selo elegante para o que o dono ainda vai preencher */
.pg-preencher {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	padding: 6px var(--e-2);
	border: 1px dashed var(--cor-azul);
	border-radius: var(--r-pilula);
	background: rgba(47, 140, 255, 0.06);
	color: var(--cor-azul-claro);
	font-family: var(--fonte-pontos);
	font-size: var(--t-pequeno);
	font-weight: 800;
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	line-height: 1.3;
}
.pg-preencher { max-width: 100%; }
.pg-preencher::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cor-azul); box-shadow: 0 0 10px var(--cor-brilho); }

/* =========================================================
 * 2. AJUDA (marcação do shortcode [skytec_ajuda] — mesmas classes do plugin)
 *    Tudo com .pg-ajuda na frente para vencer o exp.css do plugin no site real.
 * ========================================================= */
.pg-ajuda .sx-help { display: block; }
.pg-ajuda .sx-topics { margin-block: var(--e-6) var(--e-8); }
.pg-ajuda .sx-tut + .sx-tut { margin-top: var(--e-2); }
.pg-ajuda .sx-help-top { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); text-align: center; }
.pg-ajuda .sx-help-lead { color: var(--cor-texto-2); font-size: var(--t-corpo-g); max-width: 40rem; }
.pg-ajuda .sx-help-search {
	position: relative;
	display: block;
	width: 100%;
	max-width: 46rem;
}
.pg-ajuda .sx-help-search-ico {
	position: absolute;
	left: var(--e-3);
	top: 50%;
	width: 26px;
	height: 26px;
	transform: translateY(-50%);
	color: var(--cor-azul-claro);
	pointer-events: none;
}
.pg-ajuda .sx-help-search-ico svg { width: 100%; height: 100%; }
.pg-ajuda .sx-help-search input {
	width: 100%;
	height: 72px;
	padding: 0 var(--e-3) 0 calc(var(--e-3) + 26px + var(--e-2));
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-pilula);
	background: var(--cor-cartao);
	color: var(--cor-texto);
	font-size: var(--t-corpo-g);
	box-shadow: var(--sombra-2);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--d-micro) var(--curva-troca), box-shadow var(--d-micro) var(--curva-troca);
}
.pg-ajuda .sx-help-search input::placeholder { color: var(--cor-texto-3); opacity: 1; }
.pg-ajuda .sx-help-search input:focus { outline: none; border-color: var(--cor-azul); box-shadow: var(--foco); }
.pg-ajuda .sx-help-none { color: var(--cor-texto-2); }
.pg-ajuda .sx-help-none a { color: var(--cor-azul-claro); font-weight: var(--peso-forte); }

/* cartões ilustrados dos assuntos: 5 × 2 / 2 × 5 (sempre 10, nenhum sobrando) */
.pg-ajuda .sx-topics {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
.pg-ajuda .sx-topic {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--e-1) var(--e-1) var(--e-2);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
	color: inherit;
	text-decoration: none;
	transition: transform var(--d-entrada) var(--curva-saida), border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca), opacity var(--d-padrao) var(--curva-troca);
}
.pg-ajuda .sx-topic-ico { display: block; margin-bottom: var(--e-1); }
.pg-ajuda .sx-topic-ico img,
.pg-ajuda .sx-step-ill img { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-2); background: var(--cor-azul-fundo); object-fit: contain; }
.pg-ajuda .sx-topic-t { padding-inline: var(--e-1); font-family: var(--fonte-titulo); font-size: var(--t-corpo); font-weight: var(--peso-titulo); line-height: 1.25; min-height: 2.5em; }
.pg-ajuda .sx-topic-d { margin-top: auto; padding-inline: var(--e-1); color: var(--cor-azul-claro); font-family: var(--fonte-pontos); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; }
.pg-ajuda .sx-topic.is-hidden { display: none; }
@media (hover: hover) {
	.pg-ajuda .sx-topic:hover { transform: translateY(-6px); border-color: var(--cor-linha-2); box-shadow: var(--brilho-azul); }
}
@media (max-width: 1023px) { .pg-ajuda .sx-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* cada assunto = sanfona com o passo a passo dentro */
.pg-ajuda .sx-tut {
	scroll-margin-top: calc(var(--h-barra) + var(--e-3));
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
	transition: border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca);
}
.pg-ajuda .sx-tut.is-hidden { display: none; }
.pg-ajuda .sx-tut.is-open { border-color: var(--cor-linha-2); box-shadow: var(--sombra-2); }
.pg-ajuda .sx-tut-head {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-3);
	cursor: pointer;
}
.pg-ajuda .sx-tut-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--r-2);
	background: var(--cor-azul-fundo);
	color: var(--cor-azul-claro);
}
.pg-ajuda .sx-tut-head > div { flex: 1 1 auto; min-width: 0; }
.pg-ajuda .sx-tut-ico svg { width: 32px; height: 32px; }
.pg-ajuda .sx-tut-head > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--e-3); }
.pg-ajuda .sx-tut-head h2 { font-size: var(--t-h4); grid-column: 1; }
.pg-ajuda .sx-tut-head p { color: var(--cor-texto-2); grid-column: 1; }
.pg-ajuda .skx-acc-btn {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	min-height: var(--alvo);
	padding: 0 var(--e-3);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-pilula);
	color: var(--cor-texto);
	font-size: var(--t-rotulo);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-menu);
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color var(--d-micro) var(--curva-troca), background-color var(--d-micro) var(--curva-troca);
}
.pg-ajuda .skx-acc-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--d-padrao) var(--curva-troca); }
.pg-ajuda .sx-tut.is-open .skx-acc-btn { border-color: var(--cor-azul); background: var(--cor-azul-fundo); }
.pg-ajuda .sx-tut.is-open .skx-acc-btn svg { transform: rotate(180deg); }
@media (hover: hover) { .pg-ajuda .skx-acc-btn:hover { border-color: var(--cor-azul); } }

/* fechada: só o título. Aberta: os passos entram suaves */
.pg-ajuda .sx-tut.skx-acc:not(.is-open) .sx-steps,
.pg-ajuda .sx-tut.skx-acc:not(.is-open) .sx-tut-help { display: none; }
.pg-ajuda .sx-tut.is-open .sx-steps,
.pg-ajuda .sx-tut.is-open .sx-tut-help { animation: skx-revela var(--d-entrada) var(--curva-saida) both; }

.pg-ajuda .sx-steps { position: relative; padding: 0 var(--e-3) var(--e-3); }
.pg-ajuda .sx-bar {
	height: 4px;
	margin-bottom: var(--e-3);
	border-radius: 2px;
	background: repeating-linear-gradient(90deg, var(--cor-linha-2) 0 10px, transparent 10px 18px);
	overflow: hidden;
}
.pg-ajuda .sx-bar span {
	display: block;
	height: 100%;
	background: repeating-linear-gradient(90deg, var(--cor-azul) 0 10px, transparent 10px 18px);
	filter: drop-shadow(0 0 4px var(--cor-brilho));
	transform-origin: 0 50%;
	transform: scaleX(0.2);
	transition: transform var(--d-cena) var(--curva-saida);
}
/* todos os passos na mesma célula: a caixa tem a altura do maior (nada pula) */
.pg-ajuda .sx-track { display: grid; }
.pg-ajuda .sx-step {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: auto auto 1fr;
	align-content: start;
	gap: var(--e-1) var(--e-5);
	opacity: 0;
	visibility: hidden;
	transform: translateX(var(--desloca));
	transition: opacity var(--d-padrao) var(--curva-troca), transform var(--d-padrao) var(--curva-troca), visibility 0s linear var(--d-padrao);
}
.pg-ajuda .sx-step.is-before { transform: translateX(calc(-1 * var(--desloca))); }
.pg-ajuda .sx-step.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pg-ajuda .sx-step-ill { grid-row: 1 / span 4; align-self: start; }
.pg-ajuda .sx-step-n { align-self: end; color: var(--cor-azul-claro); font-family: var(--fonte-pontos); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; padding-top: var(--e-2); }
.pg-ajuda .sx-step h3 { font-size: var(--t-h3); }
.pg-ajuda .sx-step p { color: var(--cor-texto-2); font-size: var(--t-corpo-g); max-width: 34rem; }
.pg-ajuda .sx-step-link {
	display: inline-flex;
	align-items: center;
	align-self: start;
	justify-self: start;
	gap: var(--e-1);
	min-height: var(--alvo);
	color: var(--cor-azul-claro);
	font-weight: var(--peso-forte);
	text-decoration: underline;
	text-decoration-color: rgba(124, 192, 255, 0.45);
}
.pg-ajuda .sx-step-link svg { width: 20px; height: 20px; }
.pg-ajuda .sx-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2);
	margin-top: var(--e-4);
	padding-top: var(--e-3);
	border-top: 1px solid var(--cor-linha);
}
.pg-ajuda .sx-prev,
.pg-ajuda .sx-next {
	min-height: calc(var(--e-6) + var(--e-1));
	min-width: 9rem;
	padding: 0 var(--e-4);
	border-radius: var(--r-pilula);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-menu);
	text-transform: uppercase;
	transition: transform var(--d-padrao) var(--curva-mola), border-color var(--d-micro) var(--curva-troca), opacity var(--d-micro) var(--curva-troca);
}
.pg-ajuda .sx-prev { border: 1px solid var(--cor-linha-2); color: var(--cor-texto); }
.pg-ajuda .sx-prev:disabled { opacity: 0.4; cursor: default; }
.pg-ajuda .sx-next { background: var(--gradiente-azul); background-size: 200% 200%; background-position: 100% 100%; color: var(--cor-texto); box-shadow: var(--brilho-azul); }
.pg-ajuda .sx-next:active,
.pg-ajuda .sx-prev:not(:disabled):active { transform: scale(0.97); }
.pg-ajuda .sx-dots { display: flex; align-items: center; justify-content: center; gap: 2px; }
.pg-ajuda .sx-dot {
	position: relative;
	width: var(--alvo);
	height: var(--alvo);
	border-radius: var(--r-pilula);
}
.pg-ajuda .sx-dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	border: 2px solid var(--cor-linha-2);
	transition: background-color var(--d-padrao) var(--curva-troca), border-color var(--d-padrao) var(--curva-troca), transform var(--d-padrao) var(--curva-troca);
}
.pg-ajuda .sx-dot.is-done::before { background: var(--cor-azul-forte); border-color: var(--cor-azul-forte); }
.pg-ajuda .sx-dot.is-on::before { background: var(--cor-azul); border-color: var(--cor-azul-claro); transform: scale(1.3); box-shadow: 0 0 10px var(--cor-brilho); }
.pg-ajuda .sx-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pg-ajuda .sx-tut-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2);
	margin: 0 var(--e-3) var(--e-3);
	padding: var(--e-2) var(--e-3);
	border-radius: var(--r-2);
	background: var(--cor-fundo-2);
	color: var(--cor-texto-2);
}
.pg-ajuda .sx-tut-wa {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	min-height: var(--alvo);
	padding: 0 var(--e-3);
	border-radius: var(--r-pilula);
	background: var(--cor-whatsapp);
	color: var(--cor-whatsapp-texto);
	font-weight: var(--peso-forte);
	text-decoration: none;
}
.pg-ajuda .sx-tut-wa svg { width: 22px; height: 22px; }

@media (max-width: 1023px) {
	.pg-ajuda .sx-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--e-1); }
	.pg-ajuda .sx-step-ill { grid-row: auto; max-width: 30rem; margin-bottom: var(--e-1); }
}
@media (max-width: 639px) {
	.pg-ajuda .sx-tut-head { flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-2); }
	.pg-ajuda .sx-tut-head > div { width: 100%; }
	.pg-ajuda .sx-tut-ico { width: 52px; height: 52px; }
	.pg-ajuda .sx-tut-head > div { grid-template-columns: minmax(0, 1fr); }
	.pg-ajuda .skx-acc-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--e-1); }
	.pg-ajuda .sx-steps { padding: 0 var(--e-2) var(--e-2); }
	.pg-ajuda .sx-nav { flex-wrap: wrap; }
	.pg-ajuda .sx-dots { order: -1; width: 100%; }
	.pg-ajuda .sx-prev, .pg-ajuda .sx-next { flex: 1 1 0; min-width: 0; padding: 0 var(--e-2); }
	.pg-ajuda .sx-tut-help { margin: 0 var(--e-2) var(--e-2); flex-direction: column; align-items: stretch; text-align: center; }
	.pg-ajuda .sx-tut-wa { justify-content: center; }
}

/* perguntas frequentes (sanfona do sistema) */
.pg-faq { max-width: 56rem; margin-inline: auto; border-top: 1px solid var(--cor-linha); }
.pg-faq .skx-sanfona summary { font-size: var(--t-corpo-g); }
.pg-faq .skx-sanfona-corpo p { font-size: var(--t-corpo); }

/* =========================================================
 * 3. A SKYTEC
 * ========================================================= */
.pg-sobre .pg-abre h1 { max-width: 14ch; }

/* o que a SKYTEC faz: 4 / 2 / 1 */
.pg-faz {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
.pg-faz li {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	padding: var(--e-2) var(--e-2) var(--e-3);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
}
.pg-faz .skx-capa { aspect-ratio: 16 / 10; margin-bottom: var(--e-2); }
.pg-faz h3 { font-size: var(--t-h4); padding-inline: var(--e-1); min-height: 2.44em; line-height: 1.22; }
.pg-faz p { color: var(--cor-texto-2); padding-inline: var(--e-1); }
@media (max-width: 1023px) { .pg-faz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pg-faz { grid-template-columns: minmax(0, 1fr); } }

/* bloco dividido: foto/ilustração + texto */
.pg-dividido {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--e-8);
}
.pg-dividido-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.pg-dividido-texto p:not(.skx-rotulo) { color: var(--cor-texto-2); font-size: var(--t-corpo-g); }
.pg-dividido .skx-palco { aspect-ratio: 4 / 3; padding: var(--e-4); border: 1px solid var(--cor-linha); border-radius: var(--r-4); }
@media (max-width: 1023px) {
	.pg-dividido { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); text-align: center; }
	.pg-dividido-texto { align-items: center; }
	.pg-dividido-texto p { margin-inline: auto; }
}

/* linha do tempo contada pela rolagem */
/* flex (não grade): palco preso 5/12 + marcos 7/12 é de propósito */
.pg-historia {
	display: flex;
	gap: var(--e-8);
	align-items: flex-start;
}
.pg-historia-palco { flex: 5 1 0; min-width: 0; }
.pg-marcos { flex: 7 1 0; min-width: 0; }
.pg-historia-palco {
	position: sticky;
	top: calc(var(--h-barra) + var(--e-5));
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	padding: var(--e-4);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-4);
	background: radial-gradient(70% 60% at 50% 30%, rgba(47, 140, 255, 0.14), transparent 70%), var(--cor-cartao);
	box-shadow: var(--sombra-2);
}
.pg-historia-quadros { display: grid; }
.pg-historia-quadro {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	opacity: 0;
	transform: translateY(var(--desloca));
	transition: opacity var(--d-entrada) var(--curva-troca), transform var(--d-entrada) var(--curva-saida);
}
.pg-historia-quadro.is-ativo { opacity: 1; transform: none; }
.pg-historia-quadro .skx-capa { aspect-ratio: 16 / 10; }
.pg-historia-ano {
	font-family: var(--fonte-pontos);
	font-size: var(--t-h1);
	font-weight: 900;
	line-height: 1;
	color: var(--cor-texto);
	font-variant-numeric: tabular-nums;
}
.pg-historia-ano--vazio { color: transparent; -webkit-text-stroke: 1px var(--cor-azul); letter-spacing: 0.08em; }
.pg-historia-contador { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); color: var(--cor-texto-3); font-family: var(--fonte-pontos); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: var(--espaco-letra-rotulo); }

.pg-marcos { position: relative; padding-left: var(--e-6); }
/* trilho tracejado + linha azul que se costura conforme a rolagem */
.pg-marcos::before,
.pg-marcos::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--cor-linha-2) 0 10px, transparent 10px 19px);
}
.pg-marcos::after {
	background: repeating-linear-gradient(180deg, var(--cor-azul) 0 10px, transparent 10px 19px);
	filter: drop-shadow(0 0 5px var(--cor-brilho));
	transform-origin: 50% 0;
	transform: scaleY(var(--costurado, 1));
}
.js .pg-marcos::after { transform: scaleY(var(--costurado, 0)); }
.pg-marco {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	min-height: 52vh;
	padding-block: var(--e-2) var(--e-8);
}
.pg-marco:last-child { min-height: 0; padding-bottom: 0; }
.pg-marco::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--e-6) + 4px);
	top: calc(var(--e-2) + 2px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--cor-linha-2);
	background: var(--cor-fundo);
	transition: background-color var(--d-padrao) var(--curva-troca), border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca);
}
.pg-marco.is-ativo::before,
.pg-marco.is-passou::before { border-color: var(--cor-azul-claro); background: var(--cor-azul); box-shadow: 0 0 12px var(--cor-brilho); }
.pg-marco h3 { font-size: var(--t-h3); }
.pg-marco p:not(.skx-rotulo) { color: var(--cor-texto-2); font-size: var(--t-corpo-g); max-width: 34rem; }
.pg-marco .pg-preencher { align-self: flex-start; }
.pg-marco .pg-marco-falta { color: var(--cor-texto-3); font-size: var(--t-corpo); }
.pg-marco .pg-marco-capa { display: none; }
@media (max-width: 1023px) {
	.pg-historia { display: block; }
	.pg-historia-palco { display: none; }
	.pg-marco { min-height: 0; padding-bottom: var(--e-6); }
	.pg-marco .pg-marco-capa { display: block; max-width: 26rem; margin-top: var(--e-2); }
	.pg-marco .pg-marco-capa .skx-capa { aspect-ratio: 16 / 10; }
}

/* loja e equipe: dois cartões iguais */
.pg-dupla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
.pg-dupla > article {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-2) var(--e-4);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-4);
	background: var(--cor-cartao);
}
.pg-dupla-foto { position: relative; }
.pg-dupla-foto .skx-capa { aspect-ratio: 16 / 9; }
.pg-dupla-foto .pg-preencher { position: absolute; left: var(--e-2); bottom: var(--e-2); background: var(--cor-vidro); }
.pg-dupla h3 { font-size: var(--t-h3); padding-inline: var(--e-2); margin-top: var(--e-1); }
.pg-dupla p { color: var(--cor-texto-2); padding-inline: var(--e-2); }
.pg-dupla .skx-link { margin-top: auto; padding-inline: var(--e-2); }
@media (max-width: 1023px) { .pg-dupla { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; } }

/* filme "chega regulada" + 3 passos ligados pela costura */
.pg-filme {
	position: relative;
	max-width: 68rem;
	margin-inline: auto;
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-4);
	overflow: hidden;
	background: var(--cor-cartao);
	box-shadow: var(--sombra-2), var(--brilho-azul);
}
.pg-filme video { width: 100%; height: 100%; object-fit: cover; }
.pg-filme--largo { aspect-ratio: 16 / 9; }
.pg-filme--alto { display: none; aspect-ratio: 9 / 16; max-width: 24rem; }
@media (max-width: 639px) {
	.pg-filme--largo { display: none; }
	.pg-filme--alto { display: block; }
}
.pg-passos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
	margin-top: var(--e-8);
}
.pg-passos::before {
	content: "";
	position: absolute;
	left: 16.66%;
	right: 16.66%;
	top: 27px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--cor-azul) 0 10px, transparent 10px 19px);
	filter: drop-shadow(0 0 5px var(--cor-brilho));
}
.pg-passo { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-align: center; padding-inline: var(--e-2); }
.pg-passo-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid var(--cor-azul);
	border-radius: 50%;
	background: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: var(--fonte-pontos);
	font-size: var(--t-corpo-g);
	font-weight: 900;
	box-shadow: 0 0 18px var(--cor-brilho);
}
.pg-passo h3 { font-size: var(--t-h4); }
.pg-passo p { color: var(--cor-texto-2); max-width: 22rem; }
@media (max-width: 1023px) {
	.pg-passos { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); max-width: 32rem; margin-inline: auto; }
	.pg-passos::before { left: 50%; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--cor-azul) 0 10px, transparent 10px 19px); }
	.pg-passo { background: var(--cor-fundo); padding-block: var(--e-1); }
}

/* dados legais */
.pg-legal { color: var(--cor-texto-3); font-size: var(--t-pequeno); text-align: center; max-width: 52rem; margin: var(--e-5) auto 0; }

/* =========================================================
 * 4. CONTATO
 * ========================================================= */
.pg-canais {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vao);
	align-items: stretch;
}
.pg-canal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-4) var(--e-3);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-4);
	background: var(--cor-cartao);
	text-align: center;
}
.pg-canal-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--cor-azul-fundo);
	color: var(--cor-azul-claro);
	box-shadow: 0 0 0 1px rgba(47, 140, 255, 0.3), 0 0 28px -6px var(--cor-brilho);
}
.pg-canal-icone svg { width: 34px; height: 34px; }
.pg-canal-valor { font-family: var(--fonte-titulo); font-size: var(--t-h4); font-weight: var(--peso-titulo); line-height: 1.25; overflow-wrap: anywhere; }
.pg-canal p { color: var(--cor-texto-2); }
.pg-canal .skx-botao,
.pg-canal .skx-link { margin-top: auto; }
.pg-canal .skx-botao { width: 100%; min-height: var(--alvo); font-size: var(--t-rotulo); padding-inline: var(--e-2); }
.pg-canal--principal { border-color: var(--cor-linha-2); box-shadow: var(--brilho-azul); }
@media (max-width: 1279px) { .pg-canais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pg-canais { grid-template-columns: minmax(0, 1fr); } }

.pg-ajudamos { display: flex; flex-direction: column; border-top: 1px solid var(--cor-linha); width: 100%; }
.pg-ajudamos li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); align-items: baseline; padding: var(--e-2) 0; border-bottom: 1px solid var(--cor-linha); text-align: left; }
.pg-ajudamos .skx-numero { color: var(--cor-azul-claro); font-size: var(--t-corpo); }
.pg-ajudamos p { color: var(--cor-texto-2); }
.pg-ajudamos strong { color: var(--cor-texto); }
.pg-ajudamos a { color: var(--cor-azul-claro); font-weight: var(--peso-forte); }

/* mapa que só carrega ao tocar */
.pg-mapa {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-4);
	overflow: hidden;
	background: var(--cor-azul-fundo);
}
.pg-mapa .skx-capa { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.pg-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; animation: skx-revela var(--d-entrada) var(--curva-saida) both; }
.pg-mapa-abrir {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: var(--e-1);
	padding: var(--e-4);
	background: linear-gradient(180deg, transparent 40%, rgba(5, 7, 11, 0.78));
	color: var(--cor-texto);
}
.pg-mapa-abrir .skx-botao { pointer-events: none; }
.pg-mapa-abrir small { color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.pg-mapa-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1) var(--e-3); margin-top: var(--e-2); }
.pg-endereco { font-style: normal; color: var(--cor-texto); font-size: var(--t-corpo-g); line-height: 1.5; }

/* =========================================================
 * 5. 404 — linha e agulha
 * ========================================================= */
.pg-404 { padding-block: var(--e-8) var(--secao); text-align: center; }
.pg-404-arte { position: relative; width: min(100%, 44rem); margin: 0 auto var(--e-4); }
.pg-404-arte svg { width: 100%; height: auto; overflow: visible; }
.pg-404-fio { fill: none; stroke: var(--cor-azul); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 9 8; filter: drop-shadow(0 0 6px rgba(47, 140, 255, 0.45)); }
.pg-404-traco { fill: none; stroke: var(--cor-azul-claro); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-404-numero { font-family: var(--fonte-pontos); font-weight: 900; fill: var(--cor-texto); }
@media (prefers-reduced-motion: no-preference) {
	.js .pg-404-costura { clip-path: inset(0 100% 0 0); animation: pg-costura-entra var(--d-historia) var(--curva-saida) 300ms forwards; animation-duration: calc(var(--d-historia) * 2); }
	.js .pg-404-agulha { animation: pg-agulha-desce var(--d-cena) var(--curva-troca) 300ms both; }
}
@keyframes pg-costura-entra { to { clip-path: inset(0 0 0 0); } }
@keyframes pg-agulha-desce { from { opacity: 0; transform: translateY(calc(-1 * var(--desloca) * 2)); } }
.pg-404 h1 { max-width: 18ch; margin-inline: auto; }
.pg-404 .skx-apoio { margin: var(--e-2) auto 0; }
.pg-404-busca { max-width: 40rem; margin: var(--e-5) auto 0; }
.pg-404-busca .skx-busca-form { display: flex; gap: var(--e-1); max-width: none; }
.pg-404-busca .skx-busca-campo { height: 64px; font-size: var(--t-corpo); }
.pg-404-busca .skx-botao { flex: none; min-height: 64px; }
@media (max-width: 639px) {
	.pg-404-busca .skx-busca-form { flex-direction: column; }
}

/* rótulo em pontinhos dentro de blocos de texto: nunca herda o cinza nem o tamanho do texto do bloco */
main p.skx-rotulo { color: var(--cor-azul-claro); font-size: var(--t-pequeno); }