/* =========================================================
   Template 404 — hero de marca em tela cheia (RF-91).
   Mesma linguagem do subhero institucional (dark hero sob o
   cabeçalho fixo) e do gradiente institucional do tema.
   ========================================================= */

.tsg-404 {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100svh;
	margin-top: calc(var(--tsg-altura-cabecalho) * -1);
	padding: calc(var(--tsg-altura-cabecalho) + 64px) max(28px, 6vw) 84px;
	text-align: center;
	color: var(--wp--preset--color--branco);
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--fundo-escuro),
		var(--wp--preset--color--marca) 140%
	);
}

.wp-site-blocks .tsg-404 > .tsg-404__conteudo {
	width: min(640px, 100%);
	max-width: none;
	margin: 0 auto !important;
}

.tsg-404__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--destaque-claro);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tsg-404__titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--branco);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(40px, 8vw, 96px);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.02em;
}

.tsg-404__texto {
	max-width: 52ch;
	margin: 0 auto var(--wp--preset--spacing--40);
	color: color-mix(in srgb, var(--wp--preset--color--branco) 84%, transparent);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.56;
	text-wrap: pretty;
}

/* Campo de busca — pílula clara sobre o hero escuro (RF-91.3) */
.tsg-404__busca.wp-block-search {
	justify-content: center;
	max-width: 420px;
	margin: 0 auto var(--wp--preset--spacing--40);
}

.tsg-404__busca .wp-block-search__inside-wrapper {
	border-color: color-mix(in srgb, var(--wp--preset--color--branco) 30%, transparent);
	border-radius: var(--wp--custom--raio-botao);
	background-color: color-mix(in srgb, var(--wp--preset--color--branco) 12%, transparent);
}

.tsg-404__busca .wp-block-search__input {
	background: transparent;
	color: var(--wp--preset--color--branco);
}

.tsg-404__busca .wp-block-search__input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--branco) 62%, transparent);
}

.tsg-404__busca .wp-block-search__button.wp-element-button {
	border-radius: calc(var(--wp--custom--raio-botao) - 4px);
}

.tsg-404__acoes {
	justify-content: center;
}

/* Botão-fantasma — mesmo tratamento do CTA secundário da abertura (Home) */
.tsg-404__botao-fantasma .wp-block-button__link {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--branco) 40%, transparent);
	background-color: transparent;
	color: var(--wp--preset--color--branco);
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.tsg-404__botao-fantasma .wp-block-button__link:hover {
		border-color: color-mix(in srgb, var(--wp--preset--color--branco) 70%, transparent);
		background-color: color-mix(in srgb, var(--wp--preset--color--branco) 10%, transparent);
		color: var(--wp--preset--color--branco);
	}
}

@media (max-width: 899px) {
	.tsg-404 {
		min-height: 92svh;
		padding: calc(var(--tsg-altura-cabecalho) + 48px) var(--wp--preset--spacing--40) 56px;
	}

	.tsg-404__titulo {
		font-size: clamp(36px, 10vw, 64px);
	}
}

@media (max-width: 767px) {
	.tsg-404 {
		padding-right: var(--wp--preset--spacing--20);
		padding-left: var(--wp--preset--spacing--20);
	}

	.tsg-404__texto {
		font-size: var(--wp--preset--font-size--body-md);
	}

	.tsg-404__busca.wp-block-search {
		max-width: 100%;
	}
}