/**
 * Central de Ajuda - visual das telas de /ajuda.
 *
 * Mesma linguagem do resto do site: fundo carvão quente, dourado como único
 * destaque, Anton no display e Figtree no corpo. Nada aqui inventa uma marca
 * nova para a ajuda — quem chega em /ajuda vindo do rodapé precisa sentir que
 * continua no Porção.
 *
 * Os tokens --cp-* sao redeclarados no `.porcao-ajuda` de proposito. No site
 * eles moram em `#cp-page` e em body de pagina Woo, escopos que nao alcancam
 * esta pagina; sem a redeclaracao a central dependeria da ordem de carga do
 * porcao-overrides.css para ter cor.
 */

.porcao-ajuda {
	--cp-bg: #0b0705;
	--cp-bg-2: #141210;
	--cp-bg-3: #1c1815;
	--cp-red: #a80000;
	--cp-red-ember: #7a1408;
	--cp-gold: #eeae4f;
	--cp-gold-hi: #f6c979;
	--cp-cream: #f7e8cc;
	--cp-cream-dim: #c9b48f;
	--cp-line: rgba(238, 174, 79, 0.30);
	--cp-line-soft: rgba(238, 174, 79, 0.14);
	--cp-font-d: 'Anton', 'Oswald', Impact, sans-serif;
	--cp-font-b: 'Figtree', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--cp-r: 14px;
	--cp-rsm: 8px;
	--cp-ease: cubic-bezier(.16, 1, .3, 1);

	/* Folga acima dos alvos de ancora. Valia 6rem quando a central usava o header
	 * fixo do site e o link /ajuda/artigo/#passo-3 jogava o passo atras do menu.
	 * O cabecalho proprio rola junto com a pagina, entao sobra so o respiro. */
	--ajuda-topo: 1.5rem;
	--ajuda-cont: 68rem;

	background: var(--cp-bg);
	font-family: var(--cp-font-b);
}

/* A central imprime um documento independente do tema. O reset precisa morar
 * aqui tambem: confiar no CSS do tema deixava a margem nativa de 8px do body e
 * fazia cabecalho, cards e rodape perderem largura justamente no celular. */
body.porcao-ajuda {
	margin: 0;
	min-width: 0;
}

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

/* ================================================================== *
 * ESQUELETO
 * ================================================================== */

.ajuda {
	max-width: var(--ajuda-cont);
	margin-inline: auto;
	/* O respiro do rodape mora no rodape (`.ajudaf__grade` tem o proprio
	 * padding-top). Aqui embaixo so vai o fim do conteudo: somando os dois, a
	 * tela ganhava onze rem de preto e parecia terminar duas vezes. */
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 4vw, 2rem) clamp(2.2rem, 4vw, 3.2rem);
	color: var(--cp-cream);
	font-family: var(--cp-font-b);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.ajuda a {
	color: var(--cp-gold);
	text-decoration-color: var(--cp-line);
	text-underline-offset: 0.18em;
}

.ajuda a:hover {
	color: var(--cp-gold-hi);
	text-decoration-color: currentColor;
}

/* Foco visivel em tudo. Metade da equipe vai ler isso no tablet do salao, mas a
 * outra metade navega no teclado do PC da recepcao. */
.ajuda :focus-visible {
	outline: 2px solid var(--cp-gold);
	outline-offset: 3px;
	border-radius: 3px;
}

.ajuda__pular {
	position: absolute;
	left: -9999px;
}

.ajuda__pular:focus {
	position: static;
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.5rem 1rem;
	background: var(--cp-gold);
	color: #0b0705;
	border-radius: var(--cp-rsm);
}

/* ================================================================== *
 * MIGALHA
 * ================================================================== */

.ajuda__migalha ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cp-cream-dim);
}

.ajuda__migalha li + li::before {
	content: "/";
	margin-right: 0.6rem;
	color: var(--cp-line);
}

.ajuda__migalha a {
	text-decoration: none;
}

/* ================================================================== *
 * CAPA
 * ================================================================== */

.ajuda__capa {
	position: relative;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	padding: clamp(1.8rem, 5vw, 3.2rem);
	border: 1px solid var(--cp-line-soft);
	border-radius: var(--cp-r);
	background:
		radial-gradient(120% 140% at 12% 0%, rgba(122, 20, 8, 0.55) 0%, rgba(11, 7, 5, 0) 62%),
		var(--cp-bg-2);
	overflow: hidden;
}

.ajuda__capa--interna {
	padding: clamp(1.4rem, 4vw, 2.2rem);
}

.ajuda__eyebrow {
	display: inline-block;
	margin-bottom: 0.8rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-gold);
}

.ajuda__titulo {
	margin: 0 0 0.6rem;
	font-family: var(--cp-font-d);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	font-size: clamp(2rem, 1.1rem + 3.6vw, 3.6rem);
	color: var(--cp-white, #fff);
}

.ajuda__artigo .ajuda__titulo,
.ajuda__excecao .ajuda__titulo {
	font-size: clamp(1.75rem, 1rem + 2.6vw, 2.7rem);
}

.ajuda__lead {
	max-width: 46ch;
	margin: 0;
	font-size: 1.08rem;
	color: var(--cp-cream-dim);
}

.ajuda__vazio {
	color: var(--cp-cream-dim);
}

/* ================================================================== *
 * BUSCA
 * ================================================================== */

.ajuda__busca {
	margin-top: clamp(1.4rem, 3vw, 2rem);
	max-width: 34rem;
}

.ajuda__busca-rotulo {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-cream-dim);
}

.ajuda__busca-campo {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--cp-line);
	border-radius: 999px;
	background: rgba(10, 7, 5, 0.7);
	color: var(--cp-cream);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 180ms var(--cp-ease), box-shadow 180ms var(--cp-ease);
}

.ajuda__busca-campo::placeholder {
	color: rgba(201, 180, 143, 0.65);
}

.ajuda__busca-campo:focus {
	border-color: var(--cp-gold);
	box-shadow: 0 0 0 4px rgba(238, 174, 79, 0.14);
	outline: none;
}

.ajuda__busca-dica {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	color: rgba(201, 180, 143, 0.75);
}

.ajuda__busca-lista {
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cp-line-soft);
	border-radius: var(--cp-rsm);
	background: var(--cp-bg-2);
	overflow: hidden;
}

.ajuda__busca-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.7rem;
	padding: 0.7rem 0.95rem;
	text-decoration: none;
	color: var(--cp-cream);
	border-bottom: 1px solid var(--cp-line-soft);
	transition: background 140ms var(--cp-ease);
}

.ajuda__busca-lista li:last-child .ajuda__busca-item {
	border-bottom: 0;
}

.ajuda__busca-item:hover,
.ajuda__busca-item:focus-visible {
	background: var(--cp-bg-3);
	color: var(--cp-gold-hi);
}

.ajuda__busca-item-titulo {
	font-weight: 600;
}

.ajuda__busca-item-cat {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cp-cream-dim);
}

/* Resultado de artigo interno. Quem esta logado como equipe busca as duas
 * arvores de uma vez e precisa ver, antes de clicar, o que nao pode ser
 * mandado para o cliente. */
.ajuda__busca-item-selo {
	padding: 0.05rem 0.5rem;
	border: 1px solid var(--cp-line);
	border-radius: 999px;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-gold);
}

.ajuda__busca-vazio {
	margin: 0.9rem 0 0;
	font-size: 0.92rem;
	color: var(--cp-cream-dim);
}

/* ================================================================== *
 * HOME: CARDS DE CATEGORIA
 * ================================================================== */

.ajuda__grade {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.ajuda__card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.3rem;
	border: 1px solid var(--cp-line-soft);
	border-radius: var(--cp-r);
	background: var(--cp-bg-2);
	transition: border-color 200ms var(--cp-ease), transform 200ms var(--cp-ease);
}

.ajuda__card:hover {
	border-color: var(--cp-line);
	transform: translateY(-2px);
}

.ajuda__card-titulo {
	margin: 0;
	font-family: var(--cp-font-d);
	font-weight: 400;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.15;
}

.ajuda__card-titulo a {
	text-decoration: none;
}

.ajuda__card-resumo {
	margin: 0;
	font-size: 0.92rem;
	color: var(--cp-cream-dim);
}

.ajuda__card-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
	font-size: 0.95rem;
}

.ajuda__card-lista a {
	text-decoration: none;
	color: var(--cp-cream);
}

.ajuda__card-lista a:hover {
	color: var(--cp-gold-hi);
}

.ajuda__card-mais {
	margin-top: auto;
	padding-top: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.ajuda__card-mais::after {
	content: " →";
}

/* ================================================================== *
 * CATEGORIA: LISTA DE ARTIGOS
 * ================================================================== */

.ajuda__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.ajuda__lista-link {
	display: grid;
	gap: 0.2rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--cp-line-soft);
	border-left: 3px solid transparent;
	border-radius: var(--cp-rsm);
	background: var(--cp-bg-2);
	text-decoration: none;
	transition: border-color 180ms var(--cp-ease), background 180ms var(--cp-ease);
}

.ajuda__lista-link:hover {
	border-left-color: var(--cp-gold);
	background: var(--cp-bg-3);
}

.ajuda__lista-titulo {
	font-weight: 600;
	color: var(--cp-cream);
}

.ajuda__lista-link:hover .ajuda__lista-titulo {
	color: var(--cp-gold-hi);
}

.ajuda__lista-resumo {
	font-size: 0.9rem;
	color: var(--cp-cream-dim);
}

/* ================================================================== *
 * ARTIGO
 * ================================================================== */

.ajuda__artigo {
	max-width: 46rem;
}

.ajuda__artigo-topo {
	margin-bottom: 1.6rem;
}

.ajuda__selo {
	display: inline-block;
	margin: 0.2rem 0 0;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--cp-line);
	border-radius: 999px;
	background: rgba(238, 174, 79, 0.07);
	font-size: 0.88rem;
	color: var(--cp-cream-dim);
}

.ajuda__selo strong {
	color: var(--cp-gold);
}

.ajuda__selo--livre {
	border-style: dashed;
}

/* "Voce nao tem essa permissao hoje" tem que doer de ler. E a linha que evita a
 * pessoa gastar o turno procurando um botao que nao existe para ela. */
.ajuda__selo--falta {
	display: block;
	margin-top: 0.2rem;
	font-weight: 600;
	color: #ff9d8a;
}

/* A linha de acao da dobra inicial: selo de permissao e o botao de abrir a tela.
 * Eles ficavam empilhados e colados no h1 — o titulo terminava no mesmo pixel em
 * que o botao comecava. O respiro sai daqui, e nao de uma margem no <p>, porque
 * o `gap` continua valendo quando so um dos dois existe. */
.ajuda__artigo-acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 1.35rem;
}

/* O selo e um paragrafo inteiro e cresce; o botao nunca encolhe. Quando os dois
 * nao cabem lado a lado, o selo quebra para a linha de cima sozinho. */
.ajuda__artigo-acoes .ajuda__selo {
	flex: 1 1 22rem;
	min-width: 0;
	margin: 0;
}

.ajuda__artigo-acoes .ajuda__atalho-link {
	flex: 0 0 auto;
}

/*
 * Escrito com dois niveis (0,2,0) de proposito.
 *
 * Com um nivel so, `.ajuda a { color: var(--cp-gold) }` la de cima vence por
 * especificidade e pinta o texto de dourado sobre o fundo dourado do proprio
 * botao: legivel no CSS, invisivel na tela. Foi exatamente o que aconteceu no
 * v1. Nao trocar por `.ajuda__atalho-link` puro nem resolver com !important.
 */
.ajuda .ajuda__atalho-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background: var(--cp-gold);
	color: #0b0705;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 160ms var(--cp-ease), transform 160ms var(--cp-ease);
}

.ajuda .ajuda__atalho-link:hover {
	background: var(--cp-gold-hi);
	color: #0b0705;
	transform: translateY(-1px);
}

.ajuda__atalho-seta {
	transition: transform 160ms var(--cp-ease);
}

.ajuda .ajuda__atalho-link:hover .ajuda__atalho-seta {
	transform: translateX(3px);
}

/* Nas telas de excecao o botao vem solto num <p>, sem a linha de acoes. */
.ajuda__excecao .ajuda__atalho-link {
	margin-top: 0.4rem;
}

.ajuda__aviso {
	margin: 0 0 1.6rem;
	padding: 1rem 1.2rem;
	border-radius: var(--cp-rsm);
	border-left: 4px solid var(--cp-red);
	background: rgba(122, 20, 8, 0.28);
	font-size: 0.97rem;
}

.ajuda__aviso strong {
	display: block;
	margin-bottom: 0.2rem;
	color: #ffd9c9;
}

.ajuda__corpo > :first-child {
	margin-top: 0;
}

.ajuda__corpo h2,
.ajuda__se-der-errado h2,
.ajuda__relacionados h2,
.ajuda__humano h2 {
	margin: 2rem 0 0.6rem;
	font-family: var(--cp-font-d);
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cp-cream);
}

.ajuda__corpo ul,
.ajuda__corpo ol {
	padding-left: 1.2rem;
}

/* Conteudo autoral muda com o tempo. Estas defesas impedem uma URL, tabela ou
 * bloco de codigo futuro de criar rolagem horizontal na pagina inteira. */
.ajuda__corpo,
.ajuda__passo-corpo,
.ajuda__lista-titulo,
.ajuda__selo {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ajuda__corpo img,
.ajuda__corpo video,
.ajuda__corpo iframe {
	max-width: 100%;
	height: auto;
}

.ajuda__corpo pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ajuda__corpo table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ================================================================== *
 * PASSOS
 * ================================================================== */

.ajuda__guia {
	display: grid;
	gap: 1.5rem;
	margin: 2rem 0;
}

.ajuda__nesta-pagina {
	padding: 1rem 1.1rem;
	border: 1px solid var(--cp-line-soft);
	border-radius: var(--cp-rsm);
	background: var(--cp-bg-2);
	font-size: 0.9rem;
}

.ajuda__nesta-pagina-titulo {
	margin: 0 0 0.5rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cp-cream-dim);
}

.ajuda__nesta-pagina-lista {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.35rem;
	color: var(--cp-cream-dim);
}

.ajuda__nesta-pagina-lista a {
	color: var(--cp-cream-dim);
	text-decoration: none;
}

.ajuda__nesta-pagina-lista a:hover,
.ajuda__nesta-pagina-lista a.is-atual {
	color: var(--cp-gold);
}

.ajuda__passos {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
	display: grid;
	gap: 1.6rem;
}

.ajuda__passo {
	/* O deslocamento do header fixo, para o link #passo-3 cair no passo 3 e nao
	 * atras do menu. */
	scroll-margin-top: var(--ajuda-topo);
	/* O recuo abre espaco para o numero, que fica montado em cima do trilho da
	 * esquerda. Ele e menor que o numero somado a folga de proposito: o circulo
	 * cobre o trilho em vez de flutuar fora da coluna. */
	padding-left: 2.8rem;
	border-left: 2px solid var(--cp-line-soft);
	transition: border-color 300ms var(--cp-ease);
}

.ajuda__passo:target {
	border-left-color: var(--cp-gold);
}

.ajuda__passo-texto {
	position: relative;
}

.ajuda__passo-num {
	position: absolute;
	left: -2.8rem;
	top: -0.1rem;
	width: 1.9rem;
	height: 1.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cp-gold);
	color: #0b0705;
	font-family: var(--cp-font-d);
	font-size: 1rem;
	line-height: 1;
}

.ajuda__passo-titulo {
	margin: 0 0 0.35rem;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--cp-white, #fff);
}

.ajuda__passo-corpo > :first-child {
	margin-top: 0;
}

.ajuda__passo-corpo > :last-child {
	margin-bottom: 0;
}

.ajuda__passo-print {
	margin: 0.9rem 0 0;
}

.ajuda__passo-print img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--cp-line-soft);
	border-radius: var(--cp-rsm);
	background: var(--cp-bg-3);
}

.ajuda__passo-print figcaption {
	margin-top: 0.45rem;
	font-size: 0.85rem;
	color: var(--cp-cream-dim);
}

/* ================================================================== *
 * SE DER ERRADO / VOTO / RELACIONADOS / HUMANO
 * ================================================================== */

.ajuda__se-der-errado {
	margin: 2rem 0 0;
	padding: 1.2rem 1.4rem;
	border: 1px dashed var(--cp-line);
	border-radius: var(--cp-r);
	background: rgba(238, 174, 79, 0.05);
}

.ajuda__se-der-errado h2 {
	margin-top: 0;
}

.ajuda__se-der-errado > :last-child {
	margin-bottom: 0;
}

.ajuda__voto {
	margin-top: 2.2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--cp-line-soft);
}

.ajuda__voto-titulo {
	margin: 0 0 0.7rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-cream-dim);
}

.ajuda__voto-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ajuda__voto-btn {
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--cp-line);
	border-radius: 999px;
	background: transparent;
	color: var(--cp-cream);
	font-family: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 160ms var(--cp-ease), border-color 160ms var(--cp-ease);
}

.ajuda__voto-btn:hover {
	border-color: var(--cp-gold);
	background: rgba(238, 174, 79, 0.1);
	color: var(--cp-gold-hi);
}

.ajuda__voto-obrigado {
	margin: 0;
	color: var(--cp-gold);
}

.ajuda__relacionados {
	margin-top: 2.5rem;
}

.ajuda__relacionados ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.ajuda__relacionados a {
	text-decoration: none;
}

.ajuda__humano {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--cp-line-soft);
	border-radius: var(--cp-r);
	background: linear-gradient(180deg, rgba(238, 174, 79, 0.08), rgba(238, 174, 79, 0.02));
}

.ajuda__humano h2 {
	margin-top: 0;
}

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

.ajuda__excecao {
	max-width: 40rem;
}

/* ================================================================== *
 * DESKTOP
 * ================================================================== */

@media (min-width: 62rem) {
	/* O indice vira coluna propria e acompanha a leitura. No celular ele
	 * continua sendo o primeiro bloco da pilha, que e onde a mao chega. */
	.ajuda__artigo {
		max-width: none;
	}

	.ajuda__artigo-topo,
	.ajuda__aviso,
	.ajuda__corpo,
	.ajuda__se-der-errado,
	.ajuda__voto {
		max-width: 46rem;
	}

	.ajuda__guia {
		grid-template-columns: minmax(0, 46rem) 15rem;
		align-items: start;
		gap: 2.5rem;
	}

	.ajuda__nesta-pagina {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--ajuda-topo) + 0.5rem);
	}

	.ajuda__passos {
		grid-column: 1;
		grid-row: 1;
	}
}

/* ================================================================== *
 * MOVIMENTO E IMPRESSAO
 * ================================================================== */

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

	.ajuda__card:hover,
	.ajuda__atalho-link:hover {
		transform: none;
	}
}

/* Artigo impresso e colado no mural da cozinha. Acontece, e um passo a passo
 * que sai em branco no papel nao serve para nada. */
@media print {
	.porcao-ajuda {
		background: #fff;
	}

	.ajuda {
		color: #000;
		max-width: none;
	}

	.ajuda a {
		color: #000;
	}

	.ajuda__busca,
	.ajuda__voto,
	.ajuda__nesta-pagina,
	.ajuda__pular,
	.ajuda__humano,
	.ajudah,
	.ajudaf {
		display: none !important;
	}

	.ajuda__capa,
	.ajuda__se-der-errado,
	.ajuda__aviso {
		background: none;
		border-color: #999;
	}

	.ajuda__titulo,
	.ajuda__passo-titulo {
		color: #000;
	}

	.ajuda__passo {
		break-inside: avoid;
		border-left-color: #999;
	}

	.ajuda__passo-num {
		background: #000;
		color: #fff;
	}
}

/* ================================================================== *
 * CASCA PROPRIA: CABECALHO E RODAPE
 * ================================================================== */

/*
 * O v1 emprestava o header e o footer do Elementor, os mesmos do resto do site.
 * O menu de loja empurrava para a venda quem tinha chegado ali com um problema,
 * e o rodape institucional enterrava as duas unicas saidas que importam: achar
 * o artigo certo ou falar com gente.
 *
 * O v2 (reprovacao do Rodrigo em 28/08/2026) conserta o que ficou amador:
 *
 *   - A saida deixou de gritar. No topo ela e uma superficie discreta que so
 *     acende no hover; o botao forte de "Voltar para o site" mora no rodape,
 *     que e onde a pessoa de fato termina a visita. Antes era uma pilula
 *     contornada no topo, o elemento mais chamativo da tela inteira.
 *   - A marca virou uma trava deitada de verdade (Anton dourado + risco + nome
 *     do lugar) em vez de dois rotulos empilhados no canto.
 *   - A busca entrou para dentro da barra, e os resultados viraram camada
 *     flutuante. Antes ela ocupava uma faixa propria de largura total, que
 *     empurrava a pagina toda para baixo a cada tecla.
 *   - O rodape perdeu a coluna "Nao resolveu?", que repetia palavra por palavra
 *     o bloco `ajuda__humano` logo acima dela, e perdeu as onze rem de preto
 *     que separavam o conteudo dele.
 *
 * A casca daqui e mais estreita de proposito. Mesma marca, mesmos tokens
 * --cp-*, outro objetivo.
 */

/* ------------------------------------------------------------------ *
 * TRAVA DE MARCA (topo e rodape usam a mesma)
 * ------------------------------------------------------------------ */

.ajuda-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.ajuda-marca__casa {
	font-family: var(--cp-font-d);
	font-size: 1.3rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cp-gold);
	transition: color 240ms var(--cp-ease);
}

/* O risco e o que faz a trava ler como uma peca so, e nao como duas palavras
 * soltas lado a lado. Sem ele "Porcao" e "Central de Ajuda" parecem dois links. */
.ajuda-marca__risco {
	width: 1px;
	height: 1.25rem;
	background: var(--cp-line);
	flex: 0 0 auto;
}

.ajuda-marca__nome {
	font-family: var(--cp-font-b);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cp-cream-dim);
	transition: color 240ms var(--cp-ease);
}

.ajuda-marca__nome-curto,
.ajudah__sair-texto--curto {
	display: none;
}

.ajuda-marca:hover .ajuda-marca__casa,
.ajuda-marca:focus-visible .ajuda-marca__casa {
	color: var(--cp-gold-hi);
}

.ajuda-marca:hover .ajuda-marca__nome,
.ajuda-marca:focus-visible .ajuda-marca__nome {
	color: var(--cp-cream);
}

/* ------------------------------------------------------------------ *
 * TOPO
 * ------------------------------------------------------------------ */

.ajudah {
	position: relative;
	z-index: 30;
	border-bottom: 1px solid var(--cp-line-soft);
	background: var(--cp-bg);
}

/* Um fio de brasa que atravessa a barra e some nas pontas. E o unico ornamento
 * do topo: sem ele a faixa preta sobre fundo preto le como barra de admin
 * inacabada, que foi exatamente a reclamacao. */
.ajudah::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--cp-red) 18%,
		var(--cp-gold) 50%,
		var(--cp-red) 82%,
		transparent 100%
	);
	opacity: 0.5;
	pointer-events: none;
}

.ajudah__faixa {
	max-width: var(--ajuda-cont);
	margin-inline: auto;
	padding: 0.8rem clamp(1.1rem, 4vw, 2rem);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.4rem;
}

/* A ordem visual nao segue a do HTML de proposito. No HTML a busca vem antes da
 * saida porque e a coisa mais importante da barra e tem de vir cedo no foco de
 * teclado; na tela estreita ela desce para a ultima linha, para a primeira
 * dobra abrir com marca e saida, nao com um campo de texto. */
.ajudah__marca { order: 1; flex: 0 0 auto; }
.ajudah__sair  { order: 2; margin-left: auto; }
.ajudah__nav   { order: 3; }
.ajudah__busca { order: 4; flex: 1 1 100%; }

.ajudah__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.2rem 1.3rem;
	flex: 0 1 auto;
}

.ajudah__link {
	position: relative;
	padding: 0.3rem 0;
	color: var(--cp-cream-dim);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color 240ms var(--cp-ease);
}

/* Sublinhado que cresce da esquerda. O mesmo gesto se repete nos links do
 * rodape, para o hover ser uma linguagem so na central inteira. */
.ajudah__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--cp-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms var(--cp-ease);
}

.ajudah__link:hover,
.ajudah__link:focus-visible {
	color: var(--cp-cream);
}

.ajudah__link:hover::after,
.ajudah__link:focus-visible::after {
	transform: scaleX(1);
}

.ajudah__link[aria-current='page'] {
	color: var(--cp-gold);
}

.ajudah__link[aria-current='page']::after {
	transform: scaleX(1);
	opacity: 0.45;
}

/* A porta de saida. Superficie escura, nao contorno: ela precisa estar sempre
 * visivel e nomeada, mas nao pode ser a coisa mais forte de uma tela cujo
 * assunto e ficar e resolver. O contraste dela e o hover. */
.ajudah__sair {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem 0.45rem 0.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--cp-bg-3);
	color: var(--cp-cream-dim);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color 240ms var(--cp-ease), background 240ms var(--cp-ease),
		border-color 240ms var(--cp-ease);
}

.ajudah__sair-icone {
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(238, 174, 79, 0.12);
	color: var(--cp-gold);
	font-size: 0.78rem;
	transition: transform 320ms var(--cp-ease), background 240ms var(--cp-ease);
}

.ajudah__sair:hover,
.ajudah__sair:focus-visible {
	color: var(--cp-cream);
	background: var(--cp-bg-2);
	border-color: var(--cp-line);
}

.ajudah__sair:hover .ajudah__sair-icone,
.ajudah__sair:focus-visible .ajudah__sair-icone {
	transform: translateX(-2px);
	background: rgba(238, 174, 79, 0.24);
}

/* ---- busca dentro da barra ---- */

.ajudah__busca {
	position: relative;
	min-width: 0;
}

.ajudah__busca .ajuda__busca {
	margin: 0;
	max-width: none;
}

/* O rotulo continua no HTML, so sai da tela: o campo precisa de nome acessivel,
 * e dentro da barra nao ha altura para uma linha de rotulo. */
.ajudah__busca .ajuda__busca-rotulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A dica ("digite pelo menos duas letras") vive no `aria-describedby`, entao
 * some da tela sem perder o leitor. */
.ajudah__busca .ajuda__busca-dica {
	display: none;
}

.ajudah__busca .ajuda__busca-campo {
	padding: 0.58rem 1rem;
	font-size: 0.92rem;
	background: var(--cp-bg-2);
	border-color: var(--cp-line-soft);
}

.ajudah__busca .ajuda__busca-campo:focus {
	border-color: var(--cp-gold);
	background: var(--cp-bg);
}

/* Resultado como camada, nao como conteudo em fluxo. Em fluxo, cada tecla
 * digitada crescia a barra e empurrava a pagina inteira para baixo. O JS limpa
 * com `textContent = ''`, entao `:empty` casa de verdade e a caixa some. */
.ajudah__busca .ajuda__busca-saida {
	position: absolute;
	z-index: 40;
	top: calc(100% + 0.6rem);
	left: 0;
	right: 0;
	max-height: min(62vh, 26rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.4rem;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-r);
	background: var(--cp-bg-2);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}

.ajudah__busca .ajuda__busca-saida:empty {
	display: none;
}

.ajudah__busca .ajuda__busca-lista {
	margin: 0;
	border: 0;
	background: transparent;
}

.ajudah__busca .ajuda__busca-vazio {
	margin: 0;
	padding: 0.7rem 0.6rem;
}

/* ---- barra de uma linha so, grudada no topo ---- */

/*
 * 68rem e onde as quatro pecas (marca, nav, busca, saida) param de brigar por
 * espaco na mesma linha. Abaixo disso a busca desce sozinha, e ainda le como
 * uma linha desenhada, nao como sobra.
 */
@media (min-width: 68rem) {
	.ajudah {
		position: sticky;
		top: 0;
		background: rgba(11, 7, 5, 0.86);
		backdrop-filter: blur(14px) saturate(150%);
		-webkit-backdrop-filter: blur(14px) saturate(150%);
	}

	.ajudah__faixa {
		flex-wrap: nowrap;
	}

	/* A folga elastica fica no `nav`, e nao na busca: a capa nao tem busca na
	 * barra (ela ja mora na primeira dobra), e com o empurrao na busca a saida
	 * subia colada no menu, deixando meia barra vazia a direita. Com a folga
	 * aqui, a saida encosta na borda em toda pagina, com ou sem busca. */
	.ajudah__nav   { order: 2; margin-right: auto; }
	.ajudah__busca { order: 3; flex: 1 1 14rem; max-width: 22rem; margin-left: 0; }
	.ajudah__sair  { order: 4; margin-left: 0; }

	/*
	 * A barra passou a cobrir o topo, entao a folga de ancora volta a existir.
	 * Este token manda em dois lugares: o `scroll-margin-top` dos passos (para
	 * `#passo-3` cair no passo 3, e nao atras da barra) e o `top` do indice
	 * "nesta pagina" grudado. Fora deste breakpoint a barra rola junto com a
	 * pagina e a folga volta a ser so respiro.
	 */
	.porcao-ajuda {
		--ajuda-topo: 5.5rem;
	}
}

/* Em tablets a primeira linha e sempre marca + saida. Deixar o flex decidir
 * sozinho fazia o menu subir para essa linha em 1024px e largava a busca
 * sozinha embaixo. O grid torna as duas linhas uma regra, nao um acaso da soma
 * das larguras. */
@media (min-width: 30.001rem) and (max-width: 67.999rem) {
	.ajudah__faixa {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr) max-content;
	}

	.ajudah__marca,
	.ajudah__link,
	.ajudah__sair {
		min-height: 2.75rem;
	}

	.ajudah__link {
		display: inline-flex;
		align-items: center;
	}

	.ajudah__marca {
		grid-column: 1;
		grid-row: 1;
	}

	.ajudah__sair {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-left: 0;
	}

	.ajudah__nav {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.ajudah--com-busca .ajudah__busca {
		grid-column: 1 / -1;
		grid-row: 3;
		width: 100%;
	}
}

/* A partir de 704px o menu e o campo ja cabem juntos na segunda linha. Abaixo
 * disso cada um ganha sua linha e preserva um campo de busca confortavel. */
@media (min-width: 44rem) and (max-width: 67.999rem) {
	.ajudah--com-busca .ajudah__nav {
		grid-column: 1;
		grid-row: 2;
	}

	.ajudah--com-busca .ajudah__busca {
		grid-column: 2 / -1;
		grid-row: 2;
	}
}

/* Na capa, o celular usa duas linhas: marca e saida em cima, menu embaixo. Em
 * categoria e artigo ha uma terceira linha deliberada para a busca, com a
 * largura inteira — campo comprimido ao lado do menu e pior para tocar e ler. */
@media (max-width: 30rem) {
	.ajudah__faixa {
		gap: 0.55rem 0.7rem;
		padding: 0.65rem max(1rem, env(safe-area-inset-right)) 0.65rem max(1rem, env(safe-area-inset-left));
	}

	.ajudah__marca { gap: 0.5rem; min-height: 2.75rem; }
	.ajudah__marca .ajuda-marca__casa { font-size: 1.05rem; }
	.ajudah__marca .ajuda-marca__nome { font-size: 0.58rem; letter-spacing: 0.09em; }
	.ajudah__marca .ajuda-marca__risco { height: 1rem; }

	.ajudah__nav { order: 3; flex: 1 1 100%; gap: 0 1rem; }
	.ajudah__link {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.55rem 0;
		font-size: 0.83rem;
	}

	.ajudah__sair {
		order: 2;
		gap: 0.35rem;
		min-height: 2.75rem;
		padding: 0.4rem 0.65rem 0.4rem 0.4rem;
		font-size: 0.72rem;
	}

	.ajudah__sair-icone {
		width: 1.15rem;
		height: 1.15rem;
		font-size: 0.68rem;
	}

	.ajudah__busca .ajuda__busca-campo {
		min-height: 2.75rem;
		font-size: 1rem;
	}

	.ajudah__busca .ajuda__busca-item {
		min-height: 2.75rem;
		align-items: center;
	}

	.ajuda {
		padding: 1.25rem max(1rem, env(safe-area-inset-right)) 2.4rem max(1rem, env(safe-area-inset-left));
		font-size: 1rem;
		line-height: 1.6;
	}

	.ajuda__capa,
	.ajuda__capa--interna {
		padding: 1.25rem;
	}

	.ajuda__passo {
		padding-left: 2.35rem;
	}

	.ajuda__passo-num {
		left: -2.35rem;
		width: 1.75rem;
		height: 1.75rem;
	}

	.ajuda__artigo-acoes .ajuda__atalho-link {
		width: 100%;
		min-height: 2.75rem;
		justify-content: center;
	}

	.ajuda__card-lista a,
	.ajuda__card-mais,
	.ajuda__nesta-pagina-lista a,
	.ajuda__relacionados a,
	.ajudaf__lista a,
	.ajudaf__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.ajuda__voto-btn {
		min-height: 2.75rem;
		flex: 1 1 7rem;
	}

	/* O H1 logo abaixo ja repete o titulo atual. No celular, tirar so o ultimo
	 * item preserva o caminho de volta e evita tres linhas de migalha duplicada. */
	.ajuda__migalha li:last-child:not(:first-child) {
		display: none;
	}
}

/* Nos celulares, inclusive os de 375/390/430px, a Central da Equipe e o destino
 * GrowTEE nao cabem juntos com folga. A versao curta e apenas visual;
 * `aria-label` mantem o destino inteiro para leitor de tela. */
@media (max-width: 30rem) {
	.ajuda-marca__nome-inteiro,
	.ajudah__sair-texto--inteiro {
		display: none;
	}

	.ajuda-marca__nome-curto,
	.ajudah__sair-texto--curto {
		display: inline;
	}
}

/* ------------------------------------------------------------------ *
 * RODAPE
 * ------------------------------------------------------------------ */

.ajudaf {
	position: relative;
	/* Zero de propósito. O respiro entre o fim do conteudo e o rodape ja e o
	 * `padding-bottom` de `.ajuda`; somar uma margem aqui era o que abria a
	 * faixa de preto morto entre a ultima resposta e o rodape. */
	margin-top: 0;
	border-top: 1px solid var(--cp-line-soft);
	background: var(--cp-bg-2);
	overflow: hidden;
}

/* Brasa por tras do rodape. Da profundidade suficiente para o bloco ler como
 * superficie propria, e nao como o mesmo preto da pagina com uns links soltos
 * em cima. */
.ajudaf::before {
	content: '';
	position: absolute;
	left: 12%;
	right: 12%;
	top: -70%;
	height: 140%;
	background: radial-gradient(50% 50% at 50% 50%, var(--cp-red-ember) 0%, transparent 70%);
	opacity: 0.32;
	pointer-events: none;
}

.ajudaf__grade,
.ajudaf__base {
	position: relative;
	max-width: var(--ajuda-cont);
	margin-inline: auto;
}

.ajudaf__grade {
	padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.1rem, 4vw, 2rem) clamp(1.9rem, 3vw, 2.5rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.3rem 3rem;
}

/* Colunas de pesos diferentes de proposito. Tres colunas iguais era o que fazia
 * o rodape antigo parecer mapa do site: sem hierarquia, o olho nao sabe por
 * onde comecar. */
@media (min-width: 52rem) {
	.ajudaf__grade {
		grid-template-columns: minmax(15rem, 1.1fr) minmax(0, 1.4fr) minmax(0, 0.75fr);
	}
}

.ajudaf__marca-bloco {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ajuda-marca--rodape .ajuda-marca__casa { font-size: 1.55rem; }
.ajuda-marca--rodape .ajuda-marca__risco { height: 1.45rem; }
.ajuda-marca--rodape .ajuda-marca__nome { font-size: 0.75rem; }

.ajudaf__promessa {
	margin: 0.95rem 0 1.35rem;
	max-width: 21rem;
	color: var(--cp-cream-dim);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* Aqui a saida PODE ser forte. O rodape e o fim da tela: quem chegou ate ele ou
 * resolveu, ou ja passou pela escada de falar com gente. E a promessa que o
 * Rodrigo pediu, "um botao facil de entender", cumprida no lugar onde ela nao
 * concorre com a resposta. */
.ajudaf__sair {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.62rem 1.15rem 0.62rem 0.85rem;
	border: 1px solid var(--cp-line);
	border-radius: 999px;
	color: var(--cp-cream);
	font-size: 0.87rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: color 240ms var(--cp-ease), background 240ms var(--cp-ease),
		border-color 240ms var(--cp-ease);
}

.ajudaf__sair-icone {
	color: var(--cp-gold);
	font-size: 0.9rem;
	transition: transform 320ms var(--cp-ease), color 240ms var(--cp-ease);
}

.ajudaf__sair:hover,
.ajudaf__sair:focus-visible {
	background: var(--cp-gold);
	border-color: var(--cp-gold);
	color: var(--cp-bg);
}

.ajudaf__sair:hover .ajudaf__sair-icone,
.ajudaf__sair:focus-visible .ajudaf__sair-icone {
	transform: translateX(-3px);
	color: var(--cp-bg);
}

.ajudaf__titulo {
	margin: 0 0 1.1rem;
	font-family: var(--cp-font-d);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-gold);
}

.ajudaf__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.62rem;
}

/* Nove categorias numa coluna so viram uma parede de nove linhas ao lado de uma
 * coluna de tres. Duas colunas emparelham as alturas e o rodape para de ficar
 * torto. */
.ajudaf__lista--duas {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.62rem 1.6rem;
}

@media (max-width: 30rem) {
	.ajudaf__lista--duas {
		grid-template-columns: 1fr;
	}
}

.ajudaf__lista a {
	position: relative;
	display: inline-block;
	color: var(--cp-cream-dim);
	font-size: 0.92rem;
	line-height: 1.35;
	text-decoration: none;
	transition: color 240ms var(--cp-ease);
}

.ajudaf__lista a::after {
	content: '';
	display: block;
	height: 1px;
	margin-top: 2px;
	background: var(--cp-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms var(--cp-ease);
}

.ajudaf__lista a:hover,
.ajudaf__lista a:focus-visible {
	color: var(--cp-gold);
}

.ajudaf__lista a:hover::after,
.ajudaf__lista a:focus-visible::after {
	transform: scaleX(1);
}

/* Fecha a lista inteira em vez de virar o nono item da primeira coluna, que era
 * o que deixava as duas colunas com alturas diferentes. */
.ajudaf__todos-item {
	grid-column: 1 / -1;
	margin-top: 0.3rem;
}

.ajudaf__ver-todos {
	color: var(--cp-gold) !important;
	font-weight: 700;
}

/* O risco vem de pseudo-elemento, e nao de `border-top`: a borda pegaria a
 * caixa inteira e sairia dois rem mais larga que o texto de cada lado, que e
 * exatamente o tipo de desalinhamento que faz o rodape parecer improvisado. */
.ajudaf__base {
	padding: 1.1rem clamp(1.1rem, 4vw, 2rem) 1.7rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.6rem;
}

.ajudaf__base::before {
	content: '';
	position: absolute;
	top: 0;
	left: clamp(1.1rem, 4vw, 2rem);
	right: clamp(1.1rem, 4vw, 2rem);
	height: 1px;
	background: var(--cp-line-soft);
}

.ajudaf__assinatura {
	margin: 0;
	font-size: 0.8rem;
	color: var(--cp-cream-dim);
}

.ajudaf__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.3rem;
}

.ajudaf__legal a {
	color: var(--cp-cream-dim);
	font-size: 0.8rem;
	text-decoration: none;
	transition: color 240ms var(--cp-ease);
}

.ajudaf__legal a:hover,
.ajudaf__legal a:focus-visible {
	color: var(--cp-gold);
}

@media (max-width: 30rem) {
	.ajudaf__grade {
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
	}

	.ajudaf__base {
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
		padding-bottom: max(1.7rem, env(safe-area-inset-bottom));
	}

	.ajudaf__lista a,
	.ajudaf__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.ajudaf__sair {
		min-height: 2.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ajudah__link::after,
	.ajudaf__lista a::after,
	.ajudah__sair-icone,
	.ajudaf__sair-icone {
		transition: none;
	}

	.ajudah__sair:hover .ajudah__sair-icone,
	.ajudaf__sair:hover .ajudaf__sair-icone {
		transform: none;
	}
}