/*
 * SKYTEC 2 — artigo.css (agente FRONT-2): página de artigo (single.php).
 * Capa grande, índice lateral fixo, barra de leitura costurada, ilustração em cada seção,
 * zoom nas imagens, antes/depois arrastável, checklist e "Próximo artigo".
 * Depende de paginas.css (migalhas, .pg-figura, .pg-zoom, .pg-janela, .pg-cta, .pg-dica, .pg-faq).
 */

/* ---------- Barra de leitura costurada (fixa no topo da tela) ---------- */
.pg-leitura {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: calc(var(--z-cabecalho) + 1);
	height: 4px;
	pointer-events: none;
}
.pg-leitura-fio {
	position: absolute;
	inset: 1px 0 auto;
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--cor-azul-claro) 0 10px, transparent 10px 17px);
	filter: drop-shadow(0 0 4px var(--cor-brilho));
	clip-path: inset(0 calc(100% - var(--lido, 0) * 100%) 0 0);
}
.pg-leitura-agulha {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 12px;
	border-radius: 2px;
	background: var(--cor-azul-gelo);
	box-shadow: 0 0 10px 2px var(--cor-brilho);
	transform: translateX(calc(var(--lido, 0) * (100vw - 3px)));
	opacity: var(--agulha, 0);
	transition: opacity var(--d-padrao) var(--curva-troca);
}

/* ---------- Capa ---------- */
.pg-art-capa { padding-top: var(--e-6); text-align: center; }
.pg-art-capa .pg-abre-dentro { gap: var(--e-3); }
.pg-art-capa h1 { max-width: 20ch; }
.pg-art-capa .skx-apoio { margin-inline: auto; }
.pg-art-autor { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--cor-texto-3); font-size: var(--t-pequeno); }
.pg-art-autor img { width: 32px; height: 32px; border-radius: 50%; background: var(--cor-cartao); padding: 4px; border: 1px solid var(--cor-linha); }
.pg-art-capa-figura { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-6); }
.pg-art-capa-foto {
	aspect-ratio: 21 / 9;
	width: 100%;
	max-width: 68rem;
	margin-inline: auto;
	padding: var(--e-5) var(--e-6);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-4);
	background: var(--gradiente-palco), var(--cor-fundo-2);
}
.pg-art-capa-figura figcaption { color: var(--cor-texto-3); font-size: var(--t-pequeno); }
@media (max-width: 639px) {
	.pg-art-capa-foto { aspect-ratio: 16 / 10; padding: var(--e-2); }
}

/* ---------- Corpo: índice + texto, o conjunto centralizado ---------- */
/* flex (não grade): índice estreito + texto largo é de propósito, o conjunto fica no eixo */
.pg-art-corpo {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--e-10);
	padding-top: var(--e-10);
}
.pg-indice { flex: 0 0 17rem; }
.pg-art-texto { flex: 0 1 var(--largura-texto); min-width: 0; }
.pg-art-texto > .skx-costura { width: 100%; margin-block: var(--e-2) var(--e-8); }

/* índice lateral fixo */
.pg-indice { position: sticky; top: calc(var(--h-barra) + var(--e-4)); }
.pg-indice-caixa { border-left: 1px solid var(--cor-linha); }
.pg-indice-caixa summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-1);
	min-height: var(--alvo);
	padding-left: var(--e-3);
	list-style: none;
	pointer-events: none;
}
.pg-indice-caixa summary::-webkit-details-marker { display: none; }
.pg-indice-caixa summary svg { display: none; width: 22px; height: 22px; transition: transform var(--d-padrao) var(--curva-troca); }
.pg-indice-lido { color: var(--cor-texto-3); font-size: var(--t-pequeno); white-space: nowrap; }
.pg-indice-lido .skx-numero { color: var(--cor-azul-claro); }
.pg-indice-lista { display: flex; flex-direction: column; margin-top: var(--e-1); }
.pg-indice-lista a {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--e-2);
	min-height: var(--alvo);
	padding: 6px 0 6px var(--e-3);
	color: var(--cor-texto-3);
	font-size: var(--t-pequeno);
	line-height: 1.35;
	text-decoration: none;
	transition: color var(--d-micro) var(--curva-troca);
}
.pg-indice-lista .skx-numero { font-size: var(--t-pequeno); color: var(--cor-texto-3); transition: color var(--d-micro) var(--curva-troca); }
/* marcador costurado da seção atual */
.pg-indice-lista a::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	background: repeating-linear-gradient(180deg, var(--cor-azul) 0 6px, transparent 6px 10px);
	filter: drop-shadow(0 0 4px var(--cor-brilho));
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform var(--d-padrao) var(--curva-saida);
}
.pg-indice-lista a[aria-current="true"] { color: var(--cor-texto); font-weight: var(--peso-forte); }
.pg-indice-lista a[aria-current="true"] .skx-numero { color: var(--cor-azul-claro); }
.pg-indice-lista a[aria-current="true"]::before { transform: none; }
.pg-indice-lista a.is-lida .skx-numero { color: var(--cor-azul-claro); }
@media (hover: hover) { .pg-indice-lista a:hover { color: var(--cor-texto); } }

/* ---------- Seções do texto ---------- */
.pg-art-secao { scroll-margin-top: calc(var(--h-barra) + var(--e-4)); padding-bottom: var(--e-10); }
.pg-art-secao > .skx-rotulo { margin-bottom: var(--e-2); }
.pg-art-secao h2 { font-size: var(--t-h3); margin-bottom: var(--e-4); }
.pg-art-secao p { color: var(--cor-texto-2); }
.pg-art-secao p + p { margin-top: var(--e-2); }
.pg-art-secao p strong { color: var(--cor-texto); }
.pg-art-secao p a:not(.skx-botao):not(.skx-link) { color: var(--cor-azul-claro); font-weight: var(--peso-forte); text-decoration-color: rgba(124, 192, 255, 0.45); }
.pg-art-figura { margin-bottom: var(--e-4); }
.pg-art-legenda { margin-top: var(--e-2); text-align: center; color: var(--cor-texto-3) !important; font-family: var(--fonte-pontos); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; }

/* resposta rápida: tabela com o desenho de cada tecido */
.pg-resposta { border: 1px solid var(--cor-linha); border-radius: var(--r-3); overflow: hidden; background: var(--cor-cartao); }
.pg-resposta-cabeca,
.pg-resposta-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3); align-items: center; padding: var(--e-2) var(--e-3); }
.pg-resposta-cabeca { background: var(--cor-fundo-2); 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-resposta-linha { border-top: 1px solid var(--cor-linha); color: var(--cor-texto-2); }
.pg-resposta-tecido { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-2); align-items: center; }
.pg-resposta-tecido img { width: 96px; height: 60px; border-radius: var(--r-1); }
.pg-resposta-tecido strong { color: var(--cor-texto); }
@media (max-width: 639px) {
	.pg-resposta-cabeca { display: none; }
	.pg-resposta-linha { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); padding: var(--e-2); }
	.pg-resposta-linha > span:last-child::before { content: "Comece por: "; color: var(--cor-azul-claro); font-weight: var(--peso-forte); }
}

/* tipos: lista numerada em 2 colunas, linhas da mesma altura */
.pg-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vao); margin-bottom: var(--e-4); align-items: stretch; }
.pg-tipos li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--cor-linha); border-radius: var(--r-3); background: var(--cor-cartao); color: var(--cor-texto-2); }
.pg-tipos .skx-numero { color: var(--cor-azul-claro); font-size: var(--t-h4); }
.pg-tipos strong { display: block; color: var(--cor-texto); font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); margin-bottom: 4px; }
@media (max-width: 639px) { .pg-tipos { grid-template-columns: minmax(0, 1fr); } }

.pg-fotos-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); align-items: stretch; }
.pg-fotos-tipos li { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); }
.pg-fotos-tipos .pg-zoom { aspect-ratio: 1 / 1; padding: var(--e-2); border: 1px solid var(--cor-linha); border-radius: var(--r-3); }
.pg-fotos-tipos .pg-zoom::after { width: 40px; height: 40px; right: 6px; bottom: 6px; background-size: 20px; }
@media (max-width: 639px) { .pg-fotos-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* foto + texto lado a lado */
.pg-art-lado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-5); align-items: center; }
.pg-art-palco { aspect-ratio: 4 / 3; padding: var(--e-3); border: 1px solid var(--cor-linha); }
@media (max-width: 639px) { .pg-art-lado { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Checklist ---------- */
.pg-checklist { margin-top: var(--e-4); padding: var(--e-3); border: 1px solid var(--cor-linha-2); border-radius: var(--r-4); background: var(--cor-cartao); }
.pg-checklist-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; }
.pg-checklist-topo .skx-capa { aspect-ratio: 16 / 10; max-width: 15rem; }
.pg-checklist-conta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.pg-checklist-conta .skx-numero { font-size: var(--t-h2); color: var(--cor-texto); }
.pg-checklist-fio { position: relative; height: 2px; margin: var(--e-3) 0 var(--e-2); background: repeating-linear-gradient(90deg, var(--cor-linha-2) 0 10px, transparent 10px 18px); }
.pg-checklist-fio span { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--cor-azul) 0 10px, transparent 10px 18px); filter: drop-shadow(0 0 4px var(--cor-brilho)); clip-path: inset(0 calc(100% - var(--feito, 0) * 100%) 0 0); transition: clip-path var(--d-cena) var(--curva-saida); }
.pg-checklist ul { display: flex; flex-direction: column; }
.pg-checklist li + li { border-top: 1px solid var(--cor-linha); }
.pg-checklist label { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-2); align-items: start; min-height: var(--alvo); padding: var(--e-2) 0; cursor: pointer; color: var(--cor-texto-2); }
.pg-checklist label strong { color: var(--cor-texto); }
/* a caixa invisível cobre a linha inteira: alvo de toque grande */
.pg-checklist input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pg-check-caixa {
	position: relative;
	width: 32px;
	height: 32px;
	border: 2px solid var(--cor-linha-2);
	border-radius: var(--r-1);
	background: var(--cor-fundo);
	transition: border-color var(--d-micro) var(--curva-troca), background-color var(--d-padrao) var(--curva-troca);
}
.pg-check-caixa::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 3px;
	width: 9px;
	height: 17px;
	border: solid var(--cor-texto);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--d-padrao) var(--curva-mola);
}
.pg-checklist input:checked + .pg-check-caixa { border-color: var(--cor-azul); background: var(--cor-azul-forte); box-shadow: 0 0 12px var(--cor-brilho); }
.pg-checklist input:checked + .pg-check-caixa::after { transform: rotate(45deg) scale(1); }
.pg-checklist input:focus-visible + .pg-check-caixa { box-shadow: var(--foco); }
.pg-checklist.is-completo { border-color: var(--cor-azul); box-shadow: var(--brilho-azul); }
@media (hover: hover) { .pg-checklist label:hover .pg-check-caixa { border-color: var(--cor-azul); } }
@media (max-width: 639px) {
	.pg-checklist { padding: var(--e-2); }
	.pg-checklist-topo .skx-capa { max-width: 10rem; }
}

/* ---------- Antes / depois arrastável ---------- */
.pg-antes-depois {
	position: relative;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-3);
	overflow: hidden;
	background: var(--cor-azul-fundo);
	touch-action: pan-y;
	user-select: none;
}
.pg-antes-depois img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pg-ad-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pg-ad-rotulo { position: absolute; top: var(--e-2); padding: 6px var(--e-2); border-radius: var(--r-pilula); background: var(--cor-vidro); pointer-events: none; }
.pg-ad-rotulo--antes { left: var(--e-2); color: var(--cor-texto-2); }
.pg-ad-rotulo--depois { right: var(--e-2); }
.pg-ad-alca { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, var(--cor-azul-claro) 0 10px, transparent 10px 16px); pointer-events: none; }
.pg-ad-alca span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border: 2px solid var(--cor-azul-claro);
	border-radius: 50%;
	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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 26px no-repeat;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 0 18px var(--cor-brilho);
}
.pg-ad-controle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.pg-ad-controle:focus-visible ~ .pg-ad-alca span,
.pg-antes-depois:has(.pg-ad-controle:focus-visible) .pg-ad-alca span { box-shadow: var(--foco); }

/* ---------- Máquinas recomendadas: 2 cartões iguais ---------- */
.pg-art-maquinas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vao); align-items: stretch; margin-top: var(--e-4); }
@media (max-width: 639px) { .pg-art-maquinas { grid-template-columns: minmax(0, 1fr); } }

/* próximo passo dentro da coluna do texto: empilhado */
.pg-cta--coluna { grid-template-columns: minmax(0, 1fr); text-align: left; padding: var(--e-4); gap: var(--e-4); }
.pg-cta--coluna .skx-capa { max-width: 22rem; }
.pg-cta--coluna h2 { margin-bottom: 0; }

/* ---------- Continue aprendendo ---------- */
.pg-art-continua { border-top: 1px solid var(--cor-linha); background: var(--cor-fundo-2); }
.pg-dica--proximo .pg-dica-link { border-color: var(--cor-azul); box-shadow: var(--brilho-azul); }
.pg-art-voltar { display: flex; justify-content: center; margin-top: var(--e-5); }

/* ---------- Tablet e celular: índice vira sanfona no topo ---------- */
@media (max-width: 1023px) {
	.pg-art-corpo { flex-direction: column; align-items: stretch; gap: var(--e-5); padding-top: var(--e-6); max-width: calc(var(--largura-texto) + 2 * var(--margem)); }
	.pg-art-texto { flex: none; }
	.pg-indice { flex: none; position: sticky; top: var(--h-barra); z-index: 2; margin-inline: calc(-1 * var(--margem)); }
	html:not(.skx-compacto) .pg-indice { top: calc(var(--h-faixa) + var(--h-barra) + var(--h-busca)); }
	.pg-indice-caixa { border: 0; border-bottom: 1px solid var(--cor-linha); background: var(--cor-vidro); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
	.pg-indice-caixa summary { pointer-events: auto; cursor: pointer; padding: 0 var(--margem); }
	.pg-indice-caixa summary svg { display: block; }
	.pg-indice-caixa[open] summary svg { transform: rotate(180deg); }
	.pg-indice-lista { max-height: 60vh; overflow: auto; margin: 0; padding: 0 var(--margem) var(--e-2); }
	.pg-indice-lista a::before { left: calc(-1 * var(--e-1)); }
	.pg-indice-lista a { padding-left: var(--e-1); }
}