:root {
	--bg-1: #f4efe7;
	--bg-2: #d9ecff;
	--card: #ffffff;
	--ink: #10243c;
	--muted: #4a5f77;
	--brand: #0f4b9a;
	--brand-2: #008f7a;
	--line: #d8e3f1;
	/* --cover-image: linear-gradient(120deg, rgba(15, 75, 154, 0.75), rgba(0, 143, 122, 0.7)), url("https://images.unsplash.com/photo-1501004318641-b39e6451bec6?auto=format&fit=crop&w=1400&q=80"); */
    --cover-image: linear-gradient(120deg, rgba(15, 75, 154, 0.75), rgba(0, 143, 122, 0.7)), url("https://classix.rio.br/assets/img/sobre.webp?auto=format&fit=crop&w=1400&q=80");
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
	color: var(--ink);
	background: radial-gradient(circle at 15% 15%, #fff8ed 0, transparent 45%), linear-gradient(160deg, var(--bg-1), var(--bg-2));
	min-height: 100vh;
}

.layout {
	width: min(1120px, 94vw);
	margin: 24px auto;
	min-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
}

.capa {
	border-radius: 24px;
	min-height: 240px;
	background: var(--cover-image);
	background-size: cover;
	background-position: center;
	box-shadow: 0 20px 36px rgba(16, 36, 60, 0.15);
	padding: 28px;
	display: flex;
	align-items: end;
}

.capa__conteudo {
	width: 100%;
	max-width: none;
	color: #f5fbff;
	backdrop-filter: blur(2px);
}

.capa__tag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 13px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 700;
}

.capa h2 {
	font-family: "Sora", "Manrope", sans-serif;
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.25;
	margin: 0 0 10px;
}

.capa p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
    color: #f5fbff;
}

.container {
	margin-top: 18px;
	background: var(--card);
	border-radius: 24px;
	border: 1px solid rgba(15, 75, 154, 0.12);
	padding: clamp(22px, 3.3vw, 42px);
	box-shadow: 0 18px 30px rgba(16, 36, 60, 0.12);
}

h1,
h2 {
	font-family: "Sora", "Manrope", sans-serif;
	line-height: 1.25;
	margin-top: 0;
}

h1 {
	font-size: clamp(30px, 3.4vw, 44px);
	margin-bottom: 12px;
}

h2 {
	font-size: clamp(24px, 2.6vw, 36px);
}

p {
	line-height: 1.6;
	font-size: clamp(16px, 1.3vw, 19px);
	color: var(--muted);
}

.tela {
	text-align: center;
}

.hidden {
	display: none;
}

.botoes_pesquisa {
	margin-top: 30px;
	display: flex;
	justify-content: center;
	gap: 14px;
}

.btnPesquisa,
#iniciar,
.nav button {
	border: 0;
	color: #fff;
	border-radius: 999px;
	padding: 13px 24px;
	font-family: "Sora", "Manrope", sans-serif;
	font-weight: 600;
	font-size: 17px;
	background: linear-gradient(120deg, var(--brand), #1662c4);
	box-shadow: 0 8px 18px rgba(15, 75, 154, 0.27);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

#iniciar {
	margin-top: 8px;
}

.btnPesquisa:hover,
#iniciar:hover,
.nav button:hover {
	transform: translateY(-1px);
	box-shadow: 0 11px 20px rgba(15, 75, 154, 0.33);
}

.nav {
	margin-bottom: 26px;
}

#secao_box {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #edf5ff;
	color: var(--brand);
	font-weight: 700;
	font-size: 14px;
}

#pergunta_box {
	min-height: 180px;
}

.pergunta h2 {
	font-size: clamp(26px, 2.3vw, 38px);
	margin-bottom: 14px;
}

select,
input,
textarea {
	width: min(760px, 100%);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 18px;
	font-family: "Manrope", sans-serif;
	color: var(--ink);
	background: #fbfdff;
}

textarea {
	min-height: 112px;
	resize: vertical;
}

select:focus,
input:focus,
textarea:focus {
	outline: 0;
	border-color: #74abef;
	box-shadow: 0 0 0 4px rgba(116, 171, 239, 0.2);
}

.pergunta .mute {
	display: block;
	width: min(760px, 100%);
	margin: 8px auto 0;
	text-align: left;
	font-size: 13px;
	line-height: 1.4;
	color: #6f7f93;
}

.campos-grid-4 {
	width: min(760px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.campo-grid {
	display: flex;
	flex-direction: column;
}

.campos-grid-4 .campo-grid input,
.campos-grid-4 .campo-grid select,
.campos-grid-4 .campo-grid textarea {
	width: 100%;
}

.campos-grid-4 .campo-grid .mute {
	width: 100%;
	margin-top: 6px;
}

#progresso_box {
	margin-top: 26px;
}

#contador_pergunta {
	font-weight: 700;
	color: var(--brand);
	margin-bottom: 8px;
}

.barra_progresso {
	width: min(760px, 100%);
	height: 12px;
	border-radius: 999px;
	border: 1px solid #b9cee8;
	background: #e8f1fb;
	margin: 0 auto;
	overflow: hidden;
}

#barra_preenchida {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--brand), var(--brand-2));
	transition: width 0.25s ease;
}

.recibo-final {
	width: min(760px, 100%);
	margin: 18px auto 14px;
	padding: 18px;
	border: 1px dashed #8fb3de;
	border-radius: 14px;
	background: linear-gradient(180deg, #f5faff, #eef6ff);
	text-align: left;
}

.recibo-linha {
	margin: 0 0 8px;
	color: #1e3753;
	font-size: clamp(16px, 1.3vw, 19px);
}

.recibo-id {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #0f4b9a;
	color: #fff;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.recibo-data {
	font-weight: 700;
	color: #0f4b9a;
}

.recibo-ajuda {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #49617b;
}

.rodape {
	margin-top: 16px;
	padding: 18px 12px 8px;
	text-align: center;
	color: #38516c;
	margin-bottom: 0;
}

.rodape p {
	margin: 0 0 10px;
	font-size: 14px;
	color: #38516c;
}

.rodape__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.rodape__links a {
	text-decoration: none;
	color: var(--brand);
	font-weight: 700;
	font-size: 14px;
}

@media (max-width: 760px) {
	.layout {
		width: 100%;
		margin: 0;
		padding: 12px;
		min-height: 100vh;
	}

	.capa {
		min-height: 170px;
		border-radius: 16px;
		padding: 16px;
	}

	.capa h2 {
		font-size: 24px;
	}

	.container {
		border-radius: 16px;
		margin-top: 12px;
	}

	.botoes_pesquisa {
		flex-direction: column;
		align-items: center;
	}

	.btnPesquisa,
	#iniciar,
	.nav button {
		width: 100%;
		max-width: 340px;
	}

	.nav {
		display: flex;
		justify-content: center;
		gap: 12px;
	}

	.nav button {
		width: calc(50% - 6px);
		max-width: 170px;
	}

	.pergunta h2 {
		font-size: 30px;
	}

	select,
	input,
	textarea,
	.barra_progresso,
	.pergunta .mute {
		width: 100%;
	}

	.campos-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rodape {
		padding-bottom: 16px;
	}
}