/* ===========================================================================
   c-comofiz - abas "Como fizemos isso?"
   =========================================================================== */

.c-comofiz { border-top: 1px solid var(--linha); }

.c-comofiz__cabeca { margin-bottom: var(--e-4); }

.c-comofiz__caixa {
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
	overflow: hidden;
}

/* --------------------------------------------------------------- trilha ---- */

.c-comofiz__trilha {
	display: flex;
	gap: 0.25rem;
	padding: 0.5rem;
	border-bottom: 1px solid var(--linha);
	background: rgba(0, 0, 0, 0.3);
	/* Em tela estreita as cinco abas rolam na horizontal em vez de quebrar
	   linha: mantem a metafora de aba. */
	overflow-x: auto;
	scrollbar-width: none;
}

.c-comofiz__trilha::-webkit-scrollbar { display: none; }

.c-comofiz__aba {
	flex: 0 0 auto;
	padding: 0.6rem 1.125rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: var(--ink-3);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transicao), background var(--transicao),
	            border-color var(--transicao);
}

.c-comofiz__aba:hover { color: var(--ink-2); }

.c-comofiz__aba[aria-selected="true"] {
	border-color: rgba(217, 180, 90, 0.35);
	background: rgba(217, 180, 90, 0.1);
	color: var(--ouro-claro);
}

/* -------------------------------------------------------------- paineis ---- */

.c-comofiz__paineis { padding: var(--e-4) var(--e-3); }

.c-comofiz__painel { max-width: 68ch; }

/* Sem JS todos os paineis aparecem, um sob o outro, separados por um fio. O
   conteudo nunca fica escondido por depender de script. */
.c-comofiz__painel + .c-comofiz__painel {
	margin-top: var(--e-3);
	padding-top: var(--e-3);
	border-top: 1px solid var(--linha);
}

/* Com JS, c-comofiz.js marca [data-abas="pronto"] e so o painel ativo aparece. */
[data-abas="pronto"] .c-comofiz__painel {
	display: none;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

[data-abas="pronto"] .c-comofiz__painel[data-ativo="1"] {
	display: block;
	animation: c-comofiz-entrar 280ms ease both;
}

@keyframes c-comofiz-entrar {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.c-comofiz__painelTitulo {
	font-size: 1.25rem;
	font-weight: 600;
}

.c-comofiz__painelTexto {
	margin-top: var(--e-2);
	color: var(--ink-2);
	font-size: 1rem;
	line-height: 1.65;
}

/* Com JS o titulo do painel repete a aba selecionada; escondido visualmente,
   mas mantido para leitor de tela que pula direto para o painel. */
[data-abas="pronto"] .c-comofiz__painelTitulo {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

[data-abas="pronto"] .c-comofiz__painelTexto {
	margin-top: 0;
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
}

/* ----------------------------------------------------------- responsivo ---- */

@media (max-width: 640px) {
	.c-comofiz__paineis { padding: var(--e-3) var(--e-2); }
}