/*
 * Confirmação de presença — 15 anos SFHM.
 * Identidade: Manual Identidade 15 Anos (creme + dourado + laranja + preto).
 * Layout simplificado — usa a paleta e a tipografia do manual, sem tentar
 * replicar o convite impresso (sem moldura/cartão). Carregado só na
 * página inicial.
 *
 * Sem clamp() de propósito — tamanhos de fonte só mudam na media query.
 */

:root {
	--sfhm15-creme: #f7ead9;
	--sfhm15-creme-fundo: #efe0c9;
	--sfhm15-dourado-escuro: #a57e31;
	--sfhm15-dourado-claro: #ebd2a1;
	--sfhm15-laranja: #ff8748;
	--sfhm15-preto: #1a1512;
	--sfhm15-texto-suave: rgba(26, 21, 18, 0.72);
}

body {
	background: var(--sfhm15-creme);
	margin: 0;
}

.sfhm15 {
	color: var(--sfhm15-preto);
	font-family: 'PT Serif', Georgia, serif;
}

.sfhm15 h1,
.sfhm15 h2 {
	font-weight: 700;
	margin: 0;
	color: var(--sfhm15-preto);
}

/* ---------- Seções ---------- */

.sfhm15-convite,
.sfhm15-confirmacao {
	max-width: 480px;
	margin: 0 auto;
	padding: 64px 24px;
	text-align: center;
}

/* A seção de confirmação ganha um tom de fundo levemente mais escuro pra se
   distinguir da abertura, sem precisar de borda separando as duas. */
.sfhm15-confirmacao {
	background: var(--sfhm15-creme-fundo);
	max-width: none;
	padding-left: 24px;
	padding-right: 24px;
}

.sfhm15-confirmacao > div {
	max-width: 480px;
	margin: 0 auto;
}

.sfhm15-logo {
	width: 150px;
	height: auto;
	margin: 0 auto 32px;
	display: block;
}

/* ---------- "15 anos" ---------- */

.sfhm15-lockup {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	line-height: 1;
}

.sfhm15-lockup__numero {
	font-size: 4.2rem;
	font-weight: 700;
	color: var(--sfhm15-dourado-escuro);
}

.sfhm15-lockup__palavra {
	font-family: 'Petit Formal Script', cursive;
	font-size: 2rem;
	color: var(--sfhm15-dourado-escuro);
}

.sfhm15-coracao {
	color: var(--sfhm15-dourado-escuro);
	font-size: 1.1rem;
	margin: 6px 0 14px;
}

.sfhm15-slogan {
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfhm15-dourado-escuro);
	margin: 0 0 28px;
}

.sfhm15-regua {
	width: 64px;
	height: 1px;
	background: var(--sfhm15-dourado-escuro);
	opacity: 0.5;
	margin: 24px auto;
}

.sfhm15-corpo {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--sfhm15-texto-suave);
	max-width: 36ch;
	margin: 0 auto 12px;
}

.sfhm15-corpo--script {
	font-family: 'Petit Formal Script', cursive;
	font-size: 1.35rem;
	color: var(--sfhm15-dourado-escuro);
	margin-top: 8px;
}

.sfhm15-ficha {
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfhm15-preto);
	margin: 0 0 32px;
}

.sfhm15-ficha p {
	margin: 0 0 6px;
}

.sfhm15-clausula {
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--sfhm15-texto-suave);
	margin-top: 26px;
}

/* ---------- Botões ---------- */

.sfhm15-btn {
	display: inline-block;
	background: var(--sfhm15-dourado-escuro);
	color: var(--sfhm15-creme);
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: none;
	padding: 13px 32px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sfhm15-btn:hover,
.sfhm15-btn:focus-visible {
	background-color: var(--sfhm15-laranja);
	color: var(--sfhm15-preto);
}

.sfhm15-btn:focus-visible {
	outline: 2px solid var(--sfhm15-preto);
	outline-offset: 3px;
}

.sfhm15-btn-texto {
	display: block;
	margin: 14px auto 0;
	background: none;
	border: none;
	color: var(--sfhm15-texto-suave);
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.sfhm15-btn-texto:hover,
.sfhm15-btn-texto:focus-visible {
	color: var(--sfhm15-preto);
}

/* ---------- Confirmação (formulário) ---------- */

.sfhm15-estado h2 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.sfhm15-lead {
	color: var(--sfhm15-texto-suave);
	line-height: 1.6;
	max-width: 34ch;
	margin: 0 auto 24px;
}

.sfhm15-estado p {
	line-height: 1.6;
	color: var(--sfhm15-texto-suave);
}

.sfhm15-nome-encontrado {
	font-family: 'PT Serif', Georgia, serif;
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--sfhm15-preto);
	margin: 0 0 26px;
}

.sfhm15-campo {
	text-align: left;
	margin-bottom: 20px;
}

.sfhm15-campo label {
	display: block;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--sfhm15-dourado-escuro);
	margin-bottom: 6px;
}

.sfhm15-campo input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(26, 21, 18, 0.3);
	color: var(--sfhm15-preto);
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	padding: 8px 2px;
	box-sizing: border-box;
	text-align: center;
}

.sfhm15-campo input:focus-visible {
	outline: none;
	border-bottom-color: var(--sfhm15-dourado-escuro);
}

.sfhm15-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* O widget do Turnstile roda em modo "invisible" (data-size="invisible" no
   HTML) — ele não desenha nada na tela por padrão, então não precisa
   escondê-lo via CSS (isso poderia atrapalhar o desafio rodar direito). */
.cf-turnstile {
	margin: 0;
}

.sfhm15-erro {
	color: #a8352a;
	font-size: 0.88rem;
	margin: 4px 0 16px;
}

/* ---------- Rodapé ---------- */

.sfhm15-rodape {
	text-align: center;
	padding: 20px 24px 56px;
}

.sfhm15-rodape img {
	display: block;
	width: 150px;
	height: auto;
	margin: 0 auto;
	opacity: 0.85;
}

/* ---------- Telas maiores ---------- */

@media (min-width: 700px) {
	.sfhm15-convite,
	.sfhm15-confirmacao {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.sfhm15-lockup__numero {
		font-size: 5.2rem;
	}

	.sfhm15-lockup__palavra {
		font-size: 2.4rem;
	}

	.sfhm15-estado h2 {
		font-size: 1.8rem;
	}

	.sfhm15-corpo {
		font-size: 1.05rem;
	}
}