/* ==========================================================================
   Quatro4Rodas - página de plano

   Carregada só em single-q4r_plano. A página inicial não paga por CSS que não
   usa, e é ela que precisa ser rápida para o Ads.

   Os tokens (cores, fontes, escala, container) vêm do main.css, que carrega
   antes. Aqui só o que é desta página.

   Mobile-first, como o resto: o padrão é o celular e @media (min-width: 1024px)
   sobe para o desktop.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Migalha de pão
   -------------------------------------------------------------------------- */

.migalha {
	padding: 14px 0;
	border-bottom: 1px solid var(--c-borda);
	background: var(--c-secao, #f7f5f0);
}

.migalha__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	color: var(--c-texto-fraco);
}

/* O separador é decoração: entra pelo CSS para não ser lido em voz alta a cada
   degrau, e para não virar texto que alguém precise copiar junto. */
.migalha__item + .migalha__item::before {
	content: "\203A";
	margin-right: 6px;
	color: rgba(0, 0, 0, 0.3);
}

.migalha__item a {
	color: inherit;
}

.migalha__item[aria-current="page"] {
	font-weight: 700;
	color: var(--c-texto);
}

/* --------------------------------------------------------------------------
   2. Topo: texto e card de preço
   -------------------------------------------------------------------------- */

.plano-topo {
	padding: var(--sp-hero) 0 var(--sp-secao);
	background: var(--c-secao, #f7f5f0);
}

.plano-topo__grade {
	display: grid;
	gap: 28px;
}

.plano-topo__selo {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
}

.plano-topo__titulo {
	margin: 14px 0 0;
	font-size: var(--fs-h1);
	font-weight: 900;
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

.plano-topo__chamada {
	margin: 16px 0 0;
	max-width: 52ch;
	font-size: var(--fs-lead);
	color: var(--c-texto-suave);
}

.plano-topo__acoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 26px;
}

/* No celular os dois têm o mesmo peso: link sublinhado ao lado de um botão
   cheio desequilibra e some no toque. No desktop volta a ser o link discreto. */
.plano-topo__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	padding: 15px 24px;
	border: 1.5px solid rgba(0, 0, 0, 0.18);
	border-radius: var(--r-sm);
	font-weight: 700;
	text-decoration: none;
}

/* O card */
.plano-preco {
	padding: 24px;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-lg);
	background: var(--c-branco);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.plano-preco__condicao {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-marca-sombra, #a88400);
}

.plano-preco__antes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
	color: var(--c-texto-fraco);
}

.plano-preco__economia {
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
}

/* baseline para o "Por" acompanhar o número, e não flutuar no meio dele. */
.plano-preco__valor {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0 0;
}

.plano-preco__rotulo {
	font-size: var(--fs-body);
	color: var(--c-texto-suave);
}

.plano-preco__valor strong {
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.plano-preco__parcela {
	margin: 2px 0 0;
	font-size: var(--fs-sm);
	color: var(--c-texto-suave);
}

.plano-preco__itens {
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--c-borda);
	list-style: none;
	display: grid;
	gap: 10px;
	font-size: var(--fs-sm);
}

.plano-preco__itens li {
	position: relative;
	padding-left: 18px;
}

.plano-preco__itens li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-marca, #f5c400);
}

.plano-preco__nota {
	margin: 18px 0 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-texto-fraco);
}

/* --------------------------------------------------------------------------
   3. Etapas
   -------------------------------------------------------------------------- */

.plano-etapas__lista {
	display: grid;
	gap: 14px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.plano-etapa {
	padding: 22px;
	border-radius: var(--r-lg);
	background: var(--c-branco);
	border: 1px solid var(--c-borda);
}

.plano-etapa__numero {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	font-weight: 900;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
}

.plano-etapa__titulo {
	margin: 16px 0 0;
	font-size: var(--fs-h3);
	font-weight: 800;
}

.plano-etapa__texto {
	margin: 10px 0 0;
	font-size: var(--fs-body);
	color: var(--c-texto-suave);
}

.plano-etapa__rodape {
	margin: 16px 0 0;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-marca-sombra, #a88400);
}

/* --------------------------------------------------------------------------
   4. Aulas práticas
   -------------------------------------------------------------------------- */

.plano-praticas--escura {
	color: var(--c-branco);
	background: var(--c-escuro, #333);
}

.plano-praticas--escura .secao__titulo,
.plano-praticas--escura .plano-numero__valor {
	color: var(--c-branco);
}

.plano-praticas--escura .secao__chamada,
.plano-praticas--escura .plano-numero__texto {
	color: rgba(255, 255, 255, 0.72);
}

.plano-praticas__numeros {
	display: grid;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.plano-numero {
	padding: 20px;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-lg);
	background: var(--c-branco);
}

.plano-praticas--escura .plano-numero {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
}

.plano-numero__valor {
	display: block;
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--c-marca-sombra, #a88400);
}

.plano-praticas--escura .plano-numero__valor {
	color: var(--c-marca-clara, #ffd62e);
}

.plano-numero__texto {
	display: block;
	margin-top: 8px;
	font-size: var(--fs-sm);
	color: var(--c-texto-suave);
}

.plano-praticas__foto {
	margin: 20px 0 0;
}

.plano-praticas__foto img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   5. Pacotes de aula
   -------------------------------------------------------------------------- */

.plano-pacotes__grade {
	display: grid;
	gap: 14px;
	margin-top: 28px;
}

/* Grade de linhas compartilhada: etiqueta, título, texto e botão pousam na
   mesma altura em todos os cards, mesmo com textos de tamanhos diferentes.
   O 1fr no texto é o que empurra o botão para o rodapé. */
.plano-pacote {
	display: grid;
	grid-template-rows: auto auto 1fr auto auto;
	padding: 24px;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-lg);
	background: var(--c-branco);
}

.plano-pacote--destaque {
	border-color: transparent;
	background: var(--c-marca, #f5c400);
}

.plano-pacote__etiqueta {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-marca-sombra, #a88400);
}


.plano-pacote--destaque .plano-pacote__etiqueta {
	color: rgba(0, 0, 0, 0.6);
}


.plano-pacote__titulo {
	margin: 10px 0 0;
	font-size: var(--fs-h3);
	font-weight: 800;
}

.plano-pacote__texto {
	margin: 12px 0 16px;
	font-size: var(--fs-body);
	color: var(--c-texto-suave);
}

.plano-pacote__preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0 0 18px;
	/* Vazio ele continua reservando a linha, para os botões dos três cards
	   pousarem na mesma altura mesmo quando só um tem preço. */
	min-height: 1.6em;
}

.plano-pacote__de {
	font-size: var(--fs-sm);
	color: var(--c-texto-fraco);
}

.plano-pacote__valor {
	font-size: 1.625rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* A mesma pílula do topo da página. No card destacado ela vira escura: amarelo
   sobre amarelo é etiqueta que não existe para quem olha. */
.plano-pacote__economia {
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 700;
	white-space: nowrap;
	color: var(--c-sobre-marca);
	background: var(--c-marca, #f5c400);
}

.plano-pacote--destaque .plano-pacote__economia {
	color: var(--c-marca, #f5c400);
	background: var(--c-escuro, #333);
}

/* A parcela quebra para a linha de baixo sozinha: 100% de largura numa caixa
   flex que já quebra é o jeito de dizer "você começa uma linha nova". */
.plano-pacote__parcela {
	flex-basis: 100%;
	font-size: var(--fs-sm);
	color: var(--c-texto-suave);
}

.plano-pacote--destaque .plano-pacote__parcela,
.plano-pacote--destaque .plano-pacote__de {
	color: rgba(0, 0, 0, 0.65);
}

.plano-pacote--destaque .plano-pacote__texto {
	color: rgba(0, 0, 0, 0.72);
}

.plano-pacote__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	padding: 14px 20px;
	border-radius: var(--r-sm);
	font-weight: 700;
	text-decoration: none;
}

/* Cinza claro, e não transparente: o card já é branco, e botão branco sobre
   branco só existe pela borda - some no celular e some para quem enxerga pouco
   contraste. O mock traz o mesmo bege das seções. */
.plano-pacote__botao--claro {
	border: 1.5px solid rgba(0, 0, 0, 0.12);
	color: var(--c-texto);
	background: var(--c-secao, #f7f5f0);
}

.plano-pacote__botao--claro:hover {
	background: rgba(0, 0, 0, 0.06);
}

.plano-pacote__botao--escuro {
	color: var(--c-branco);
	background: var(--c-escuro, #333);
}

/* --------------------------------------------------------------------------
   6. Chamada final
   -------------------------------------------------------------------------- */

.plano-cta__grade {
	display: grid;
	gap: 22px;
	align-items: center;
}

.plano-cta__acoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plano-cta .secao__titulo {
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.plano-topo {
		padding: 56px 0 var(--sp-secao);
	}

	/* Texto à esquerda, card à direita - como no wireframe. O card não estica
	   junto com o texto: align-items evita o cartão de 300px virar um painel
	   de 600px só porque a coluna ao lado é comprida. */
	.plano-topo__grade {
		grid-template-columns: 1fr 420px;
		gap: 56px;
		align-items: start;
	}

	.plano-topo__acoes {
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}

	.plano-topo__link {
		min-height: 0;
		padding: 14px 6px;
		border: 0;
		border-bottom: 2px solid rgba(0, 0, 0, 0.15);
		border-radius: 0;
	}

	.plano-preco {
		padding: 30px;
	}

	.plano-preco__valor strong {
		font-size: 3rem;
	}

	.plano-etapas__lista,
	.plano-praticas__numeros,
	.plano-pacotes__grade {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	/* Etiqueta, título, texto e botão na mesma altura em todos os cards.

	   Cada card é uma grade própria, então as linhas dele não conversam com as
	   dos vizinhos: uma etiqueta que quebra em três linhas empurra o título só
	   daquele card. O subgrid faz os quatro compartilharem as MESMAS linhas.

	   Só no desktop, que é onde eles ficam lado a lado - empilhados no celular
	   não há com o que alinhar. E dentro de @supports: onde o navegador não
	   tiver subgrid, cada card volta a se dimensionar sozinho, que é o
	   comportamento de antes e continua legível. */
	@supports (grid-template-rows: subgrid) {
		.plano-pacotes__grade {
			grid-template-rows: auto auto 1fr auto auto;
		}

		.plano-pacote {
			grid-row: span 5;
			grid-template-rows: subgrid;
		}
	}

	/* Com mais de três, quebra em linhas de três em vez de espremer tudo. */
	.plano-etapas__lista,
	.plano-pacotes__grade {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}

	.plano-praticas__numeros {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

	.plano-praticas__foto {
		margin-top: 28px;
	}

	.plano-praticas__foto img {
		height: 380px;
	}

	.plano-cta__grade {
		grid-template-columns: 1fr auto;
		gap: 40px;
	}

	.plano-cta__acoes {
		flex-direction: row;
	}
}

/* --------------------------------------------------------------------------
   8. Impressão

   Uma página de preço é das poucas que alguém imprime de verdade - para levar
   ao balcão ou mostrar em casa. Sem isto sairiam três folhas de fundo colorido
   e botões que não levam a lugar nenhum no papel.
   -------------------------------------------------------------------------- */

@media print {
	.migalha,
	.plano-cta__acoes,
	.plano-pacote__botao,
	.plano-topo__acoes {
		display: none;
	}

	.plano-topo,
	.plano-praticas--escura {
		color: #000;
		background: transparent;
	}

	.plano-preco,
	.plano-etapa,
	.plano-numero,
	.plano-pacote {
		border: 1px solid #999;
		box-shadow: none;
		break-inside: avoid;
	}
}