/* Layout específico do hub /apps/ e das páginas de app (§5.6, §5.7).
   Componentes reaproveitáveis (botões, cards, accordion, sticky bar,
   catálogo) ficam em assets/css/components/ — aqui é só o que é exclusivo
   destas duas telas: hero, seções do hub, espaçamento. */

.hub-playhub,
.app-descricao,
.app-beneficios,
.app-relacionados {
	padding-block: 2rem;
}

.hub-playhub {
	max-width: 70ch;
	margin-inline: auto;
	text-align: center;
}

/* Hero da página de app — mobile-first: logo em cima, conteúdo embaixo;
   lado a lado a partir de 900px (mesmo padrão do hero de pacote_tv) */
.app-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	padding-block: 1.5rem;
}

@media (min-width: 900px) {
	.app-hero {
		flex-direction: row;
		align-items: center;
	}
}

.app-hero__logo {
	position: relative;
	width: 120px;
	border-radius: 1rem;
	overflow: hidden;
	background-color: var(--boek-creme);
	flex-shrink: 0;
}

.app-hero__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.app-hero__logo-nome {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--boek-petroleo);
	background: linear-gradient(180deg, rgba(247, 247, 251, 0.15), rgba(247, 247, 251, 0.85) 55%);
	overflow-wrap: anywhere;
}

.app-hero__conteudo .badge {
	margin-bottom: 0.5rem;
}

.app-hero__preco {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.app-hero__preco-valor {
	font-family: var(--boek-font-heading);
	font-size: var(--boek-text-h2);
	font-weight: 700;
}

.app-hero__preco-condicao {
	opacity: 0.7;
}

.app-descricao {
	max-width: 70ch;
}