/* Layout específico do hub /tv/ e das páginas de pacote (§5.4, §5.5).
   Componentes reaproveitáveis (botões, cards, accordion, tabela, sticky
   bar, explorador) ficam em assets/css/components/ — aqui é só o que é
   exclusivo destas duas telas. Hero, breadcrumbs e CTA final padrão
   (compartilhados por todos os hubs) ficam em
   components/hub-shared.css. */

.hub-pacotes,
.hub-esportes,
.pacote-descricao,
.pacote-beneficios,
.pacote-canais,
.pacote-comparativo {
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.hub-esportes {
	text-align: center;
}

.hub-legalidade {
	background-color: var(--boek-petroleo);
	color: var(--boek-white);
	border-radius: 1rem;
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}

.hub-legalidade p {
	max-width: 70ch;
}

/* Hero do pacote — mobile-first: imagem em cima, conteúdo embaixo;
   lado a lado a partir de 900px */
.pacote-hero {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-block: clamp(1.5rem, 4vw, 2.75rem);
}

/* Conteúdo do hero (selo, nome, contagem, descrição, preço, CTA) — eram
   6 elementos empilhados sem NENHUM espaço entre si (o reset global zera
   toda margem por padrão, §7.1 "muito respiro" não tava sendo cumprido
   bem aqui: o H1 encostava direto na contagem de canais). */
.pacote-hero__conteudo {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

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

	.pacote-hero__imagem,
	.pacote-hero__conteudo {
		flex: 1;
	}
}

.pacote-hero__imagem {
	border-radius: 1rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

.pacote-hero__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pacote-hero__qtd-canais {
	color: var(--boek-turquesa-a11y);
	font-size: var(--boek-text-h5);
}

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

.pacote-hero__preco-valor {
	font-family: var(--boek-font-heading);
	font-size: var(--boek-text-h2);
	font-weight: 800;
	letter-spacing: -0.015em;
}

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

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