/* Layout específico de /planos/ (§5.8) — abas + espaçamento das 3
   seções. Cards, tabela comparativa e CTA reaproveitam os componentes
   já existentes das 3 linhas de produto. */

.planos-secao {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.planos-apps__link-todos {
	text-align: center;
	margin-top: 1.5rem;
}

/* Abas (§7.4 item 7, ARIA Tabs) — ver assets/js/modules/tabs.js.
   Sem JS, .boek-tabs__tab são links de âncora normais, um embaixo do
   outro empilhados como uma lista; com JS viram um tablist de verdade. */
.boek-tabs__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border-bottom: 1px solid var(--boek-creme);
	margin-block: 1.5rem;
}

.boek-tabs__tab {
	display: inline-flex;
	align-items: center;
	min-height: var(--boek-tap-min);
	padding: 0.6rem 1.2rem;
	border-radius: 0.5rem 0.5rem 0 0;
	border-bottom: 3px solid transparent;
	color: var(--boek-ink);
	text-decoration: none;
	font-family: var(--boek-font-heading);
	font-weight: 600;
	transition: background-color var(--boek-transition), border-color var(--boek-transition), color var(--boek-transition);
}

.boek-tabs__tab:hover {
	background-color: var(--boek-creme);
}

.boek-tabs__tab.is-ativo,
.boek-tabs__tab[aria-selected="true"] {
	color: var(--boek-petroleo);
	border-bottom-color: var(--boek-coral);
}