/*
 * SKYTEC 2 — componentes.css (carregado depois do CSS crítico)
 * Cartões, blocos de categoria, pílulas, sanfona, moldura de vídeo, janela (dialog),
 * busca em tela cheia, mega menu, menu do celular, aviso (toast), formulários e rodapé.
 * Grades: itens sempre com align-items: stretch (mesma altura na linha). Sem cartão sobrando.
 */

/* ---------- Palco (fundo azul das fotos de máquina) ---------- */
.skx-palco {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradiente-palco);
	border-radius: var(--r-2);
	overflow: hidden;
}
.skx-palco img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--brilho-maquina);
	transition: transform var(--d-entrada) var(--curva-saida);
}

/* ---------- Cartão de máquina ---------- */
.skx-grade-cartoes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vao);
}
@media (max-width: 1279px) { .skx-grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .skx-grade-cartoes { grid-template-columns: minmax(0, 1fr); } }

.skx-cartao { display: flex; }
.skx-cartao-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;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sobe, 0px));
	transition: transform var(--d-entrada) var(--curva-saida), border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca);
}
.skx-cartao-foto { aspect-ratio: 4 / 3; padding: var(--e-2); }
.skx-cartao-corpo { display: flex; flex-direction: column; flex: 1; gap: var(--e-1); padding: var(--e-3) var(--e-1) var(--e-1); }
.skx-cartao-nome {
	font-family: var(--fonte-titulo);
	font-size: var(--t-h4);
	font-weight: var(--peso-titulo);
	line-height: 1.2;
	letter-spacing: -0.01em;
	min-height: 2.4em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.skx-cartao-preco { font-size: var(--t-corpo-g); font-weight: var(--peso-forte); white-space: nowrap; margin-top: var(--e-1); }
.skx-cartao-parcela { color: var(--cor-texto-2); font-size: var(--t-pequeno); white-space: nowrap; }
.skx-cartao-acao { margin-top: auto; padding-top: var(--e-2); }
.skx-cartao-acao .skx-botao { width: 100%; min-height: var(--alvo); font-size: var(--t-rotulo); }
@media (hover: hover) {
	.skx-cartao-link:hover { --sobe: -6px; border-color: var(--cor-linha-2); box-shadow: var(--brilho-azul); }
	.skx-cartao-link:hover .skx-palco img { transform: scale(1.04) translateY(-4px); }
}

/* ---------- Bloco de categoria ---------- */
.skx-grade-categorias {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vao);
}
@media (max-width: 1023px) { .skx-grade-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .skx-grade-categorias { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); } }

.skx-categoria { display: flex; }
.skx-categoria-link {
	position: relative;
	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);
	color: inherit;
	text-decoration: none;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sobe, 0px));
	transition: transform var(--d-entrada) var(--curva-saida), border-color var(--d-padrao) var(--curva-troca), box-shadow var(--d-padrao) var(--curva-troca);
}
.skx-categoria-foto { aspect-ratio: 4 / 3; padding: var(--e-2); }
.skx-categoria-foto video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--d-padrao) var(--curva-troca);
}
.skx-categoria-link.is-video video { opacity: 1; }
.skx-categoria-texto { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: var(--e-3) var(--e-1) var(--e-1); }
.skx-categoria-nome { font-family: var(--fonte-titulo); font-size: var(--t-h4); font-weight: var(--peso-titulo); line-height: 1.15; }
.skx-categoria-frase { color: var(--cor-texto-2); font-size: var(--t-pequeno); line-height: 1.45; }
.skx-categoria-ver {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: auto;
	min-height: 40px;
	padding: 0 var(--e-2);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-pilula);
	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);
}
.skx-categoria-ver svg { width: 16px; height: 16px; }
.skx-categoria-texto .skx-categoria-ver { margin-top: auto; }
.skx-categoria-texto > .skx-categoria-frase { margin-bottom: var(--e-2); }
@media (hover: hover) {
	.skx-categoria-link:hover { --sobe: -6px; border-color: var(--cor-linha-2); box-shadow: var(--brilho-azul); }
	.skx-categoria-link:hover .skx-palco img { transform: scale(1.05) translateY(-4px); }
	.skx-categoria-link:hover .skx-categoria-ver { border-color: var(--cor-azul); background: var(--cor-azul-fundo); }
}
@media (max-width: 639px) {
	.skx-categoria-link { flex-direction: row; align-items: center; gap: var(--e-2); padding: var(--e-1); }
	.skx-categoria-foto { flex: none; width: 38%; aspect-ratio: 1 / 1; padding: var(--e-1); }
	.skx-categoria-texto { min-width: 0; padding: var(--e-1) var(--e-1) var(--e-1) 0; }
	.skx-categoria-ver { white-space: normal; min-height: var(--alvo); padding-block: 6px; line-height: 1.25; }
	.skx-categoria-texto > .skx-categoria-frase { margin-bottom: var(--e-1); }
}

/* ---------- Pílulas (filtros e sugestões) ---------- */
.skx-pilulas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.skx-pilula {
	display: inline-flex;
	align-items: center;
	min-height: var(--alvo);
	padding: 0 var(--e-3);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-pilula);
	background: var(--cor-cartao);
	color: var(--cor-texto);
	font-size: var(--t-pequeno);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--d-micro) var(--curva-troca), background-color var(--d-micro) var(--curva-troca), transform var(--d-micro) var(--curva-mola);
}
.skx-pilula[aria-pressed="true"] { border-color: var(--cor-azul); background: var(--cor-azul-fundo); }
.skx-pilula:active { transform: scale(0.96); }
@media (hover: hover) { .skx-pilula:hover { border-color: var(--cor-azul); } }

/* ---------- Sanfona (details/summary, altura animada com grid 0fr → 1fr) ---------- */
.skx-sanfona { border-bottom: 1px solid var(--cor-linha); }
.skx-sanfona summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2);
	min-height: calc(var(--alvo) + var(--e-2));
	padding: var(--e-2) 0;
	font-family: var(--fonte-titulo);
	font-size: var(--t-h4);
	font-weight: var(--peso-titulo);
	list-style: none;
	cursor: pointer;
}
.skx-sanfona summary::-webkit-details-marker { display: none; }
.skx-sanfona summary svg { width: 24px; height: 24px; flex: none; transition: transform var(--d-padrao) var(--curva-troca); }
.skx-sanfona[open] summary svg { transform: rotate(45deg); }
.skx-sanfona-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-padrao) var(--curva-troca); }
.skx-sanfona[open] .skx-sanfona-corpo { grid-template-rows: 1fr; }
.skx-sanfona-corpo > div { overflow: hidden; color: var(--cor-texto-2); }
.skx-sanfona-corpo > div > :last-child { padding-bottom: var(--e-3); }

/* ---------- Moldura de vídeo (contrato 7.2) ---------- */
.skx-video-moldura {
	position: relative;
	aspect-ratio: 9 / 16;
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
	overflow: hidden;
	box-shadow: var(--sombra-2);
	container-type: inline-size;
}
.skx-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.skx-video-abrir {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--e-2);
	color: var(--cor-texto);
	background: linear-gradient(180deg, transparent 62%, rgba(5, 7, 11, 0.72));
	border-radius: inherit;
}
.skx-video-abrir-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	min-height: var(--alvo);
	padding: 0 var(--e-2) 0 6px;
	border-radius: var(--r-pilula);
	background: var(--cor-vidro);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(124, 192, 255, 0.35);
	font-size: var(--t-rotulo);
	font-weight: var(--peso-forte);
	white-space: nowrap;
	transition: transform var(--d-padrao) var(--curva-mola), border-color var(--d-micro) var(--curva-troca);
}
.skx-video-abrir-chip svg { width: 36px; height: 36px; flex: none; }
@container (max-width: 180px) {
	.skx-video-abrir { padding: var(--e-1); }
	.skx-video-abrir-chip { padding: 6px; }
	.skx-video-abrir-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (hover: hover) {
	.skx-video-abrir:hover .skx-video-abrir-chip { transform: scale(1.06); border-color: var(--cor-azul-claro); }
}
.skx-video-legenda { display: flex; justify-content: center; margin-top: var(--e-1); }
.skx-video-legenda a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: var(--alvo);
	padding: 0 var(--e-1);
	color: var(--cor-azul-claro);
	letter-spacing: 0.06em;
	white-space: nowrap;
	text-decoration: none;
}
.skx-video-legenda-n { color: var(--cor-texto-3); }
@media (hover: hover) { .skx-video-legenda a:hover { color: var(--cor-texto); text-decoration: underline; text-underline-offset: 0.3em; } }
@media (max-width: 639px) {
	.skx-video-legenda a { flex-direction: column; gap: 0; padding: 0; letter-spacing: 0; font-size: var(--t-rotulo); line-height: 1.3; white-space: normal; text-align: center; }
}

/* ---------- Janela (dialog) — vídeo grande ---------- */
.skx-janela,
.skx-busca-tela,
.skx-menu-celular {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cor-texto);
	overflow: auto;
	overscroll-behavior: contain;
}
.skx-janela::backdrop { background: rgba(5, 7, 11, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.skx-janela[open] { display: flex; align-items: center; justify-content: center; padding: var(--e-2); }
.skx-janela-caixa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2);
	animation: skx-janela-entra var(--d-padrao) var(--curva-saida) both;
}
.skx-janela-video {
	position: relative;
	height: min(68vh, 720px);
	height: min(68svh, 720px);
	aspect-ratio: 9 / 16;
	max-width: calc(100vw - 2 * var(--e-2));
	border-radius: var(--r-4);
	overflow: hidden;
	background: var(--cor-cartao);
	box-shadow: var(--brilho-azul);
}
.skx-janela-video video { width: 100%; height: 100%; object-fit: cover; }
.skx-janela-titulo { font-size: var(--t-h4); text-align: center; }
.skx-janela-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1); }
.skx-janela-acoes > * { min-height: calc(var(--e-6) + var(--e-1)); }
.skx-janela-dica { color: var(--cor-texto-3); font-size: var(--t-pequeno); }
.skx-fechar {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	min-height: var(--alvo);
	min-width: var(--alvo);
	padding: 0 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-rotulo);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-menu);
	text-transform: uppercase;
}
.skx-fechar svg { width: 20px; height: 20px; }
.skx-janela-fechar { position: fixed; top: var(--e-2); right: var(--e-2); }
@keyframes skx-janela-entra { from { opacity: 0; transform: translateY(var(--desloca)) scale(0.98); } }
@media (max-width: 639px) {
	.skx-janela-video { height: min(60svh, 640px); }
	.skx-janela-acoes { flex-direction: column; width: 100%; }
}

/* ---------- Busca em tela cheia ---------- */
.skx-busca-tela::backdrop { background: rgba(5, 7, 11, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.skx-busca-tela[open] { display: block; }
.skx-busca-tela-dentro { padding-block: var(--e-4) var(--e-10); animation: skx-janela-entra var(--d-padrao) var(--curva-saida) both; }
.skx-busca-tela-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-4); }
.skx-busca-tela-topo h2 { font-size: var(--t-h3); }
.skx-busca-tela-form { display: flex; gap: var(--e-1); }
.skx-busca-tela-form .skx-busca-campo { height: 64px; font-size: var(--t-corpo-g); padding-left: var(--e-3); }
.skx-busca-tela-form .skx-botao { flex: none; min-height: 64px; }
.skx-busca-dica { margin-top: var(--e-1); color: var(--cor-texto-3); font-size: var(--t-pequeno); }
.skx-busca-bloco { margin-top: var(--e-5); }
.skx-busca-bloco h3 { margin-bottom: var(--e-2); font-family: var(--fonte-pontos); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; color: var(--cor-azul-claro); }
.skx-busca-maquinas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vao); }
@media (max-width: 1023px) { .skx-busca-maquinas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skx-busca-maquina a {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	height: 100%;
	padding: var(--e-1) var(--e-1) var(--e-2);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-2);
	background: var(--cor-cartao);
	text-decoration: none;
	animation: skx-revela var(--d-entrada) var(--curva-saida) both;
	animation-delay: calc(var(--i, 0) * var(--cascata));
}
.skx-busca-maquina .skx-palco { aspect-ratio: 4 / 3; padding: var(--e-1); }
.skx-busca-maquina strong { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); line-height: 1.25; padding-inline: var(--e-1); }
.skx-busca-maquina span { padding-inline: var(--e-1); color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.skx-busca-artigos a {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	min-height: 64px;
	padding: var(--e-1) 0;
	border-bottom: 1px solid var(--cor-linha);
	text-decoration: none;
	font-weight: 600;
}
.skx-busca-artigos img { width: 88px; height: 55px; flex: none; border-radius: var(--r-1); background: var(--cor-azul-fundo); }
@media (hover: hover) {
	.skx-busca-maquina a:hover { border-color: var(--cor-azul); }
	.skx-busca-artigos a:hover { color: var(--cor-azul-claro); }
}
.skx-busca-vazio { margin-top: var(--e-5); padding: var(--e-4); border: 1px solid var(--cor-linha); border-radius: var(--r-3); background: var(--cor-cartao); }
.skx-busca-vazio h3 { font-size: var(--t-h4); margin-bottom: var(--e-1); }
.skx-busca-vazio p { color: var(--cor-texto-2); margin-bottom: var(--e-2); }
@media (max-width: 639px) {
	.skx-busca-tela-form { flex-direction: column; }
	.skx-busca-tela-form .skx-botao { width: 100%; }
}

/* ---------- Mega menu ---------- */
.skx-nav-item { position: static; }
.skx-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + var(--h-busca));
	z-index: 1;
	max-height: calc(100vh - var(--h-faixa) - var(--h-barra) - var(--h-busca));
	overflow: auto;
	background: var(--cor-fundo-2);
	border-bottom: 1px solid var(--cor-linha);
	box-shadow: var(--sombra-2);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--d-padrao) var(--curva-troca), transform var(--d-padrao) var(--curva-troca);
}
html.skx-compacto .skx-mega { top: 100%; }
.skx-mega.is-aberto { opacity: 1; transform: none; }
.skx-mega-dentro { display: flex; gap: var(--e-4); padding-block: var(--e-4) var(--e-5); }
.skx-mega-principal { flex: 1 1 auto; min-width: 0; }
.skx-mega-lado { flex: 0 0 280px; display: flex; flex-direction: column; gap: var(--e-2); }
.skx-mega-titulo { margin-bottom: var(--e-2); }
.skx-mega-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
.skx-mega-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skx-mega-item { display: flex; }
.skx-mega-item a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: var(--e-1) var(--e-1) var(--e-2);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-2);
	background: var(--cor-cartao);
	text-decoration: none;
	transition: border-color var(--d-micro) var(--curva-troca), transform var(--d-padrao) var(--curva-saida);
}
.skx-mega-item .skx-palco { aspect-ratio: 16 / 10; padding: var(--e-1); }
.skx-mega-item .skx-capa { aspect-ratio: 16 / 10; border-radius: var(--r-1); }
.skx-mega-item strong { padding-inline: 6px; font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--t-pequeno); line-height: 1.3; letter-spacing: 0.02em; }
.skx-mega-item span { padding-inline: 6px; color: var(--cor-texto-2); font-size: var(--t-pequeno); line-height: 1.35; }
.skx-mega.is-aberto .skx-mega-item a { animation: skx-revela var(--d-entrada) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * var(--cascata)); }
@media (hover: hover) { .skx-mega-item a:hover { border-color: var(--cor-azul); transform: translateY(-3px); } }
.skx-mega-atalho {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	padding: var(--e-3);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-3);
	background: var(--cor-azul-fundo);
}
.skx-mega-atalho strong { font-family: var(--fonte-titulo); font-size: var(--t-h4); font-weight: var(--peso-titulo); line-height: 1.2; }
.skx-mega-atalho p { color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.skx-mega-atalho .skx-botao { margin-top: var(--e-1); min-height: var(--alvo); font-size: var(--t-rotulo); }
.skx-mega-atalho--simples { background: var(--cor-cartao); text-decoration: none; }
@media (hover: hover) { .skx-mega-atalho--simples:hover { border-color: var(--cor-azul); } }

/* ---------- Menu do celular (tela cheia) ---------- */
.skx-menu-celular { background: var(--cor-fundo); }
.skx-menu-celular::backdrop { background: var(--cor-fundo); }
.skx-menu-celular[open] { display: block; }
.skx-menu-topo {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--h-barra);
	padding-inline: var(--margem);
	background: var(--cor-vidro);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--cor-linha);
}
.skx-menu-topo img { height: var(--logo-altura); width: auto; }
.skx-menu-corpo { padding: var(--e-3) var(--margem) var(--e-6); display: flex; flex-direction: column; gap: var(--e-1); }
.skx-menu-bloco a {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	min-height: 104px;
	padding: var(--e-1) var(--e-2) var(--e-1) var(--e-1);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-3);
	background: var(--cor-cartao);
	text-decoration: none;
}
.skx-menu-bloco .skx-palco,
.skx-menu-bloco .skx-capa { width: 112px; height: 84px; flex: none; padding: 6px; }
.skx-menu-bloco strong { flex: 1; font-family: var(--fonte-titulo); font-size: var(--t-h4); font-weight: var(--peso-titulo); letter-spacing: 0.01em; }
.skx-menu-bloco svg { width: 24px; height: 24px; color: var(--cor-azul-claro); flex: none; }
.skx-menu-celular[open] .skx-menu-bloco,
.skx-menu-celular[open] .skx-menu-rodape { animation: skx-revela var(--d-entrada) var(--curva-saida) both; animation-delay: calc(80ms + var(--i, 0) * var(--cascata)); }
.skx-menu-rodape { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-1); margin-top: var(--e-2); text-align: center; }
.skx-menu-rodape p { color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.skx-menu-rodape .skx-link { justify-content: center; }

/* capa de ilustração (artigos, atalhos) */
.skx-capa {
	display: block;
	width: 100%;
	background: radial-gradient(70% 80% at 50% 40%, rgba(47, 140, 255, 0.16), transparent 70%), var(--cor-azul-fundo);
	object-fit: contain;
	border-radius: var(--r-2);
	min-width: 0;
}

/* ---------- Aviso (toast) ---------- */
.skx-aviso {
	position: fixed;
	left: 50%;
	bottom: var(--e-3);
	z-index: var(--z-aviso);
	display: flex;
	align-items: center;
	gap: var(--e-2);
	width: min(92vw, 30rem);
	padding: var(--e-1) var(--e-2) var(--e-1) var(--e-1);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-3);
	background: var(--cor-cartao-2);
	box-shadow: var(--sombra-2);
	transform: translate(-50%, calc(100% + var(--e-4)));
	transition: transform var(--d-padrao) var(--curva-saida);
}
.skx-aviso.is-visivel { transform: translate(-50%, 0); }
.skx-aviso img { width: 72px; height: 54px; object-fit: contain; flex: none; }
.skx-aviso p { flex: 1; font-weight: 600; }

/* ---------- Formulários (erro campo a campo enquanto digita) ---------- */
.skx-campo { display: flex; flex-direction: column; gap: 6px; }
.skx-campo label { font-weight: var(--peso-forte); font-size: var(--t-pequeno); }
.skx-campo input,
.skx-campo select,
.skx-campo textarea {
	min-height: 56px;
	padding: 0 var(--e-2);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-2);
	background: var(--cor-cartao);
	font-size: var(--t-corpo);
	transition: border-color var(--d-micro) var(--curva-troca), box-shadow var(--d-micro) var(--curva-troca);
}
.skx-campo textarea { padding-block: var(--e-2); min-height: 140px; }
.skx-campo input:focus,
.skx-campo select:focus,
.skx-campo textarea:focus { outline: none; border-color: var(--cor-azul); box-shadow: var(--foco); }
.skx-campo-ajuda { color: var(--cor-texto-3); font-size: var(--t-pequeno); }
.skx-campo-erro {
	display: grid;
	grid-template-rows: 0fr;
	color: var(--cor-erro);
	font-size: var(--t-pequeno);
	font-weight: 600;
	transition: grid-template-rows var(--d-padrao) var(--curva-troca);
}
.skx-campo-erro > span { overflow: hidden; display: flex; gap: 6px; align-items: flex-start; }
.skx-campo.is-erro .skx-campo-erro { grid-template-rows: 1fr; }
.skx-campo.is-erro input,
.skx-campo.is-erro select,
.skx-campo.is-erro textarea { border-color: var(--cor-erro); }
.skx-campo input:disabled { opacity: 0.7; cursor: not-allowed; }

/* ---------- Rodapé ---------- */
.skx-rodape { border-top: 1px solid var(--cor-linha); background: var(--cor-fundo-2); padding-top: var(--e-10); }
.skx-rodape-colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5) var(--vao); }
@media (max-width: 1023px) { .skx-rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .skx-rodape-colunas { grid-template-columns: minmax(0, 1fr); } }
.skx-rodape-coluna h2 { margin-bottom: var(--e-2); font-family: var(--fonte-pontos); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; color: var(--cor-azul-claro); }
.skx-rodape-coluna p { color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.skx-rodape-coluna li a,
.skx-rodape-contato a {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	min-height: var(--alvo);
	color: var(--cor-texto-2);
	font-size: var(--t-pequeno);
	text-decoration: none;
}
.skx-rodape-coluna li a svg,
.skx-rodape-contato a svg { width: 20px; height: 20px; flex: none; color: var(--cor-azul-claro); }
@media (hover: hover) { .skx-rodape-coluna li a:hover, .skx-rodape-contato a:hover { color: var(--cor-texto); text-decoration: underline; } }
.skx-rodape-logo img { height: 64px; width: auto; margin-bottom: var(--e-2); }
.skx-rodape-redes { display: flex; gap: var(--e-1); margin-top: var(--e-2); }
.skx-rodape-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--alvo);
	height: var(--alvo);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-pilula);
	color: var(--cor-texto);
}
.skx-rodape-redes svg { width: 22px; height: 22px; }
@media (hover: hover) { .skx-rodape-redes a:hover { border-color: var(--cor-azul); color: var(--cor-azul-claro); } }
.skx-rodape-endereco { margin-top: var(--e-1); }
.skx-rodape-contato .skx-rodape-mapa {
	display: block;
	margin-top: var(--e-2);
	border: 1px solid var(--cor-linha);
	border-radius: var(--r-2);
	overflow: hidden;
	text-decoration: none;
}
.skx-rodape-mapa img { aspect-ratio: 16 / 10; width: 100%; }
.skx-rodape-mapa span { display: flex; align-items: center; min-height: var(--alvo); padding: 0 var(--e-2); color: var(--cor-azul-claro); font-size: var(--t-pequeno); font-weight: var(--peso-forte); }
.skx-rodape-pagamento {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	margin-top: var(--e-8);
	padding: var(--e-3) 0;
	border-block: 1px solid var(--cor-linha);
	text-align: center;
}
.skx-rodape-pagamento p { color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.skx-selos { display: flex; gap: var(--e-1); flex: none; }
.skx-selo {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--e-2);
	border: 1px solid var(--cor-linha-2);
	border-radius: var(--r-1);
	font-family: var(--fonte-pontos);
	font-size: var(--t-pequeno);
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--cor-texto);
}
.skx-rodape-legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-1);
	padding-block: var(--e-4) var(--e-5);
	text-align: center;
}
.skx-rodape-legal p { color: var(--cor-texto-3); font-size: var(--t-pequeno); max-width: 70rem; }
.skx-rodape-legal p:first-child { color: var(--cor-texto-2); }
@media (max-width: 1023px) {
	.skx-rodape-pagamento { flex-direction: column; }
}

/* ---------- Trilha (breadcrumb) e topo das páginas internas ---------- */
.skx-trilha { padding-top: var(--e-2); }
.skx-trilha ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--e-1); color: var(--cor-texto-3); font-size: var(--t-pequeno); }
.skx-trilha li { display: inline-flex; align-items: center; gap: var(--e-1); }
.skx-trilha li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.skx-trilha a { display: inline-flex; align-items: center; min-height: var(--alvo); color: var(--cor-texto-2); text-decoration: none; }
.skx-trilha [aria-current] { color: var(--cor-texto); }
@media (hover: hover) { .skx-trilha a:hover { color: var(--cor-azul-claro); text-decoration: underline; } }
.skx-pagina-topo { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding-block: var(--e-3) var(--e-5); text-align: center; }
.skx-pagina-topo h1 { font-size: var(--t-h2); }
.skx-pagina-topo .skx-apoio { margin-inline: auto; }

/* ---------- Esqueleto (carregando) com brilho azul que passa ---------- */
.skx-esqueleto { display: block; position: relative; overflow: hidden; border-radius: var(--r-2); background: var(--cor-linha); }
.skx-esqueleto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(47, 140, 255, 0.16) 50%, transparent 80%);
	transform: translateX(-100%);
	animation: skx-brilho-passa 1.6s var(--curva-troca) infinite;
}
.skx-esqueleto--linha { height: 1em; border-radius: var(--r-1); }
@keyframes skx-brilho-passa { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skx-esqueleto::after { animation: none; opacity: 0; } }

/* ---------- Máquina voando para o carrinho (E10) ---------- */
.skx-voando { position: fixed; z-index: var(--z-aviso); object-fit: contain; pointer-events: none; filter: var(--brilho-maquina); will-change: transform, opacity; }

/* ---------- Campo: estado certo (azul, nunca verde) e caixas de marcar ---------- */
.skx-campo.is-ok input,
.skx-campo.is-ok select { border-color: var(--cor-azul); }
.skx-campo select { -webkit-appearance: none; appearance: none; padding-right: var(--e-6); background-image: linear-gradient(45deg, transparent 50%, var(--cor-azul-claro) 50%), linear-gradient(135deg, var(--cor-azul-claro) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.skx-marca { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--alvo); cursor: pointer; font-size: var(--t-pequeno); font-weight: 600; }
/* a caixa visível tem 26px, mas a área de toque do próprio campo tem 44px */
.skx-marca input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 44px; margin: -2px -9px -2px -9px; border: 0; background: none; cursor: pointer; }
.skx-marca input::before { content: ""; position: absolute; left: 9px; top: 9px; width: 26px; height: 26px; box-sizing: border-box; border: 2px solid var(--cor-linha-2); border-radius: var(--r-1); background: var(--cor-cartao); transition: border-color var(--d-micro) var(--curva-troca), background-color var(--d-micro) var(--curva-troca); }
.skx-marca input[type="radio"]::before { border-radius: var(--r-pilula); }
.skx-marca input::after { content: ""; position: absolute; left: 16px; top: 16px; width: 12px; height: 7px; border-left: 2.5px solid var(--cor-texto); border-bottom: 2.5px solid var(--cor-texto); transform: rotate(-45deg) scale(0); transition: transform var(--d-padrao) var(--curva-mola); }
.skx-marca input[type="radio"]::after { left: 17px; top: 17px; width: 10px; height: 10px; border: 0; border-radius: var(--r-pilula); background: var(--cor-texto); transform: scale(0); }
.skx-marca input:checked::before { border-color: var(--cor-azul); background: var(--cor-azul-forte); }
.skx-marca input:checked::after { transform: rotate(-45deg) scale(1); }
.skx-marca input[type="radio"]:checked::after { transform: scale(1); }
.skx-marca input:focus-visible { outline: none; }
.skx-marca input:focus-visible::before { outline: 3px solid var(--cor-azul-claro); outline-offset: 3px; }
.skx-marca input:disabled { opacity: 0.5; cursor: not-allowed; }
.skx-marca:has(input:disabled) { color: var(--cor-texto-3); cursor: not-allowed; }

/* ---------- Quantidade (− número +) ---------- */
.skx-quantidade { display: inline-flex; align-items: center; height: 56px; border: 1px solid var(--cor-linha-2); border-radius: var(--r-pilula); background: var(--cor-cartao); }
.skx-quantidade button { flex: none; display: grid; place-items: center; width: 52px; height: 100%; border-radius: var(--r-pilula); color: var(--cor-azul-claro); font-size: 1.5rem; line-height: 1; }
.skx-quantidade input { flex: none; width: 48px; padding: 0; height: 100%; border: 0; background: transparent; text-align: center; font-family: var(--fonte-pontos); font-size: var(--t-corpo-g); font-weight: 900; -moz-appearance: textfield; }
.skx-quantidade input::-webkit-inner-spin-button,
.skx-quantidade input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (hover: hover) { .skx-quantidade button:hover { background: var(--cor-cartao-2); } }

/* ---------- Tabela (especificações, comparar): números em pontinhos ---------- */
.skx-tabela table,
table.skx-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-corpo); }
.skx-tabela th,
.skx-tabela td { padding: var(--e-2) var(--e-2); border-bottom: 1px solid var(--cor-linha); text-align: left; vertical-align: top; }
.skx-tabela thead th { font-family: var(--fonte-pontos); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; color: var(--cor-azul-claro); }
.skx-tabela tbody td:first-child,
.skx-tabela tbody th { color: var(--cor-texto-2); font-weight: 600; }
.skx-tabela tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.015); }

/* ---------- Cartão "ajuda" (completa a última linha da grade: nunca sobra buraco) ---------- */
.skx-cartao--ajuda .skx-cartao-link { justify-content: center; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-3); text-align: center; background: radial-gradient(80% 60% at 50% 25%, rgba(47, 140, 255, 0.16), transparent 75%), var(--cor-cartao); border-style: dashed; border-color: var(--cor-linha-2); }
.skx-cartao--ajuda img { width: 72%; aspect-ratio: 4 / 3; object-fit: contain; }
.skx-cartao--ajuda strong { font-family: var(--fonte-titulo); font-size: var(--t-h4); font-weight: var(--peso-titulo); line-height: 1.2; }
.skx-cartao--ajuda p { color: var(--cor-texto-2); font-size: var(--t-pequeno); }
.skx-cartao--ajuda .skx-cartao-acao { margin-top: var(--e-1); width: 100%; }
/* ---------- Blocos do WordPress usados no conteúdo (botões e sanfona) ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.wp-block-button.skx-botao { padding: 0; }
.wp-block-button.skx-botao > a { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1); min-height: inherit; padding: 0 var(--e-4); color: inherit; text-decoration: none; border-radius: inherit; }
/* sanfona do WordPress (details) com o mesmo visual da .skx-sanfona */
.wp-block-details { border-bottom: 1px solid var(--cor-linha); }
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2);
	min-height: calc(var(--alvo) + var(--e-2));
	padding: var(--e-2) 0;
	font-family: var(--fonte-titulo);
	font-size: var(--t-h4);
	font-weight: var(--peso-titulo);
	line-height: 1.25;
	list-style: none;
	cursor: pointer;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--cor-linha-2); border-radius: var(--r-pilula); color: var(--cor-azul-claro); font-family: var(--fonte-texto); font-size: 1.5rem; font-weight: 400; transition: transform var(--d-padrao) var(--curva-troca); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { color: var(--cor-texto-2); padding-bottom: var(--e-3); max-width: var(--largura-texto); }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-details[open] > :not(summary) { animation: skx-revela var(--d-padrao) var(--curva-saida) both; }
}
@media (hover: hover) { .wp-block-details summary:hover { color: var(--cor-azul-claro); } }

/* ---------- Cartão de artigo (Dicas): .skx-artigo > a.skx-artigo-link (capa .skx-capa, h3, p, .skx-artigo-ler) ---------- */
.skx-artigo { display: flex; flex: 1; }
.skx-artigo-link {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	width: 100%;
	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);
	text-decoration: none;
	transition: border-color var(--d-padrao) var(--curva-troca), transform var(--d-entrada) var(--curva-saida), box-shadow var(--d-padrao) var(--curva-troca);
}
.skx-artigo-link .skx-capa { aspect-ratio: 16 / 9; margin-bottom: var(--e-1); }
.skx-artigo-link h3 { font-size: var(--t-h4); line-height: 1.25; }
.skx-artigo-link p { color: var(--cor-texto-2); }
.skx-artigo-ler { margin-top: auto; padding-top: var(--e-1); color: var(--cor-azul-claro); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letra-menu); font-size: var(--t-rotulo); }
@media (hover: hover) { .skx-artigo-link:hover { border-color: var(--cor-linha-2); transform: translateY(-4px); box-shadow: var(--brilho-azul); } }