/**
 * Saúde Insider — página de espera do lançamento.
 *
 * Tela fechada: a arte da marca centralizada sobre o fundo vinho, sem
 * navegação e sem rolagem. Carrega sozinha (sem header/footer/components),
 * então precisa declarar o pouco que usa.
 *
 * O degradê radial reproduz o do HTML entregue pelo cliente, mas escrito com
 * os tokens da marca em vez dos hexadecimais soltos do original: o vinho
 * central é o próprio --si-color-brand-primary, e as bordas escurecem a
 * partir dele. Assim, se a marca mudar de tom, esta página acompanha.
 */

.si-espera {
	min-height: 100vh;
	/* Unidade dinâmica para o mobile, onde a barra do navegador entra e sai. */
	min-height: 100dvh;
	margin: 0;
	background-color: var(--si-color-brand-primary-deep);
	background-image: radial-gradient(
		circle at 50% 40%,
		var(--si-color-brand-primary-glow) 0%,
		var(--si-color-brand-primary-deep) 70%,
		var(--si-color-brand-primary-shadow) 100%
	);
	color: var(--si-color-text-inverse);
	font-family: var(--si-font-serif);
	/* A arte ocupa a tela inteira; não há o que rolar. */
	overflow: hidden;
}

.si-espera__palco {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--si-space-6) var(--si-space-4);
}

/*
 * MOBILE (base): a arte inteira, e a mensagem em texto de verdade abaixo dela.
 *
 * A peça é uma faixa de 1,74:1 com o logo ao centro e a mensagem embutida no
 * canto inferior esquerdo. Na largura de um celular ela vira uma tarja de
 * ~200px: o logo sobrevive à redução, mas a mensagem embutida fica com menos
 * de 4px de altura — ilegível. Recortar a peça para ampliar o logo não
 * resolve (só um recorte mais largo que 1,74:1 corta a vertical, e aí a arte
 * encolhe em vez de crescer), então a arte fica como o cliente entregou e a
 * mensagem é lida do HTML — o mesmo texto, editável no painel.
 */
.si-espera__arte {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.si-espera__texto {
	/* Depois da arte na tela; antes dela no documento, que é a ordem de leitura. */
	order: 1;
	width: 100%;
	max-width: 30rem;
	margin-top: var(--si-space-8);
	color: var(--si-color-text-inverse);
	text-align: center;
}

/* O nome da marca já está na arte, acima; aqui ele só serve ao documento. */
.si-espera__titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.si-espera__frase {
	font-family: var(--si-font-sans);
	font-size: var(--si-font-size-body);
	line-height: var(--si-line-height-body);
	text-wrap: balance;
}

/*
 * DESKTOP: a arte volta a aparecer inteira, como o cliente entregou, e o
 * texto volta a ser só para leitor de tela e busca — a própria arte já o
 * exibe, com a tipografia da peça.
 */
@media (min-width: 768px) {
	.si-espera__palco {
		padding: var(--si-space-4);
	}

	.si-espera__arte {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100vh;
		max-height: 100dvh;
		aspect-ratio: auto;
		object-fit: contain;
	}

	/* Mesma técnica do .si-visually-hidden: some da tela, fica no documento. */
	.si-espera__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Estado sem arte: a marca em texto, para a página nunca ficar vazia. */
.si-espera__marca {
	font-size: var(--si-font-size-display);
	font-weight: var(--si-font-weight-display);
	line-height: var(--si-line-height-display);
	letter-spacing: var(--si-letter-spacing-display);
	text-align: center;
	text-transform: uppercase;
}

.si-espera__aviso {
	margin-top: var(--si-space-6);
	color: var(--si-color-brand-on-primary-soft);
	font-family: var(--si-font-sans);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
	text-align: center;
}