/*
 * Projeto Sob Medida — front-end.
 *
 * Paleta e tipografia da marca InLoft. Cores declaradas explicitamente em cada elemento de texto,
 * nunca só herdadas: o tema Kadence declara cor nos próprios h1–h6 e uma declaração no elemento
 * vence a herança, independente de especificidade.
 */

.psm {
	--psm-verde: #223829;
	--psm-verde-mid: #3A7D4E;
	--psm-terracota: #904B2C;
	--psm-terracota-mid: #B35A32;
	--psm-terracota-dark: #472617;
	--psm-salvia: #BFBB9B;
	--psm-areia: #D4C194;
	--psm-creme: #EAE4D3;
	--psm-offwhite: #F2EEE4;

	--psm-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
	/* SFPRODISPLAY é a família dos WOFF2 da marca (inloft-brand-typography.php); "SF Pro Display"
	   só casa com a fonte instalada na Apple. */
	--psm-body: "SFPRODISPLAY", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) 24px clamp(48px, 7vw, 88px);
	font-family: var(--psm-body);
	color: var(--psm-verde);
	box-sizing: border-box;
}

.psm *,
.psm *::before,
.psm *::after {
	box-sizing: inherit;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.psm__titulo {
	font-family: var(--psm-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 4.6vw, 3rem);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 16px;
	color: var(--psm-verde);
	text-wrap: balance;
}

.psm__lead {
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 clamp(32px, 5vw, 56px);
	max-width: 62ch;
	color: rgba(34, 56, 41, .82);
}

.psm__secao-titulo {
	font-family: var(--psm-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 0 0 24px;
	color: var(--psm-verde);
}

/* ── Passos ───────────────────────────────────────────────────────────────── */

.psm__passos {
	margin-bottom: clamp(40px, 6vw, 72px);
}

.psm__passos-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.psm__passos-lista li {
	background: var(--psm-offwhite);
	border: 1px solid var(--psm-salvia);
	border-radius: 16px;
	padding: 24px 22px;
	box-shadow: 0 1px 3px rgba(34, 56, 41, .06);
}

.psm__passo-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--psm-terracota);
	color: var(--psm-creme);
	font-family: var(--psm-display);
	font-weight: 600;
	font-size: .875rem;
	margin-bottom: 12px;
}

.psm__passo-titulo {
	font-family: var(--psm-display);
	font-weight: 600;
	font-size: 1rem;
	margin: 0 0 8px;
	color: var(--psm-verde);
}

.psm__passos-lista p {
	font-size: .9375rem;
	line-height: 1.6;
	margin: 0;
	color: rgba(34, 56, 41, .8);
}

/* ── Avisos ───────────────────────────────────────────────────────────────── */

.psm__erros,
.psm__aviso,
.psm__aviso-admin {
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 24px;
	font-size: .9375rem;
	line-height: 1.6;
}

.psm__erros {
	background: rgba(144, 75, 44, .08);
	border: 1px solid var(--psm-terracota);
	color: var(--psm-terracota);
}

/* Focada pelo form.js no retorno com erro: o [tabindex]:focus-visible da marca (0,2,0) põe raio de 2px. */
.psm .psm__erros:focus-visible {
	border-radius: 12px;
}

.psm__erros p {
	margin: 0 0 8px;
	font-weight: 600;
}

.psm__erros ul {
	margin: 0;
	padding-left: 20px;
}

.psm__aviso {
	background: var(--psm-offwhite);
	border: 1px solid var(--psm-salvia);
	color: rgba(34, 56, 41, .85);
}

.psm__aviso-admin {
	background: rgba(212, 193, 148, .22);
	border: 1px dashed var(--psm-salvia);
	color: rgba(34, 56, 41, .85);
}

/* ── Formulário ───────────────────────────────────────────────────────────── */

.psm__campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px 20px;
}

.psm__campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.psm__campo--largo {
	grid-column: 1 / -1;
}

.psm__campo label {
	font-family: var(--psm-display);
	font-weight: 500;
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--psm-verde);
}

.psm__req {
	color: var(--psm-terracota);
}

.psm__opcional {
	font-weight: 400;
	color: rgba(34, 56, 41, .72);
	text-transform: none;
	letter-spacing: 0;
}

.psm__campo input[type="text"],
.psm__campo input[type="tel"],
.psm__campo input[type="email"],
.psm__campo select,
.psm__campo textarea {
	width: 100%;
	padding: 11px 12px;
	font-family: var(--psm-body);
	font-size: 1rem;
	color: var(--psm-verde);
	background: #fff;
	border: 1px solid var(--psm-salvia);
	border-radius: 10px;
	transition: border-color .18s ease;
}

.psm__campo input:hover,
.psm__campo select:hover,
.psm__campo textarea:hover {
	border-color: rgba(34, 56, 41, .38);
}

/*
 * .psm na frente: o :focus do Kadence (input[type=text] 0,2,1; select 0,1,1, com outline:0, sombra
 * e fundo palette9) imprime depois desta folha e venceria o empate, apagando o anel de foco.
 */
.psm .psm__campo input:not([type="file"]):focus,
.psm .psm__campo select:focus,
.psm .psm__campo textarea:focus {
	outline: none;
	color: var(--psm-verde);
	background-color: #fff;
	border-color: var(--psm-verde-mid);
	box-shadow: none;
}

.psm .psm__campo input:not([type="file"]):focus-visible,
.psm .psm__campo input[type="file"]:focus-visible,
.psm .psm__campo select:focus-visible,
.psm .psm__campo textarea:focus-visible {
	outline: 2px solid var(--psm-terracota);
	outline-offset: 2px;
}

/* O select:focus-visible e o textarea:focus-visible da marca (0,1,1, imprime depois) põem raio de 2px. */
.psm .psm__campo input:not([type="file"]):focus-visible,
.psm .psm__campo select:focus-visible,
.psm .psm__campo textarea:focus-visible {
	border-radius: 10px;
}

.psm__campo input[type="file"] {
	font-family: var(--psm-body);
	font-size: .9375rem;
	padding: 10px 0;
}

.psm__ajuda {
	font-size: .8125rem;
	line-height: 1.5;
	color: rgba(34, 56, 41, .72);
}

.psm__ajuda--atencao {
	color: var(--psm-terracota);
	font-weight: 500;
}

/* ── Arquivo escolhido (montado por assets/js/form.js) ────────────────────── */

.psm__arquivo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--psm-offwhite);
	border: 1px solid var(--psm-salvia);
	border-radius: 10px;
	font-size: .8125rem;
	line-height: 1.4;
}

.psm__arquivo--erro {
	background: rgba(144, 75, 44, .07);
	border-color: var(--psm-terracota);
}

.psm__arquivo-nome {
	color: rgba(34, 56, 41, .85);
	word-break: break-all;
}

.psm__arquivo-erro {
	flex: 1 0 100%;
	color: var(--psm-terracota);
	font-weight: 500;
}

.psm__arquivo-remover {
	margin-left: auto;
	background: none;
	border: 0;
	padding: 4px 6px;
	font-family: var(--psm-body);
	font-size: .8125rem;
	color: var(--psm-terracota);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	border-radius: 4px;
}

/*
 * Os três estados com .psm na frente: o button:hover/:focus/:active do Kadence (0,1,1) pinta fundo
 * terracota, texto creme e sombra, e vence uma classe só. Cor do link da marca no hover/foco.
 */
.psm .psm__arquivo-remover:hover,
.psm .psm__arquivo-remover:focus,
.psm .psm__arquivo-remover:active {
	background: none;
	box-shadow: none;
	color: var(--psm-terracota-dark);
}

/*
 * .psm na frente: o .hide-focus-outline *:focus do Kadence (0,2,0, carrega depois) zera o outline, e o
 * button:focus-visible da marca põe raio de 2px.
 */
.psm .psm__arquivo-remover:focus-visible {
	outline: 2px solid var(--psm-terracota);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Honeypot: fora da tela, mas sem `display:none` — alguns robôs ignoram campos escondidos assim. */
.psm__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.psm__nota {
	font-size: .875rem;
	line-height: 1.6;
	color: rgba(34, 56, 41, .72);
	background: var(--psm-offwhite);
	border-left: 3px solid var(--psm-areia);
	padding: 14px 16px;
	border-radius: 0 10px 10px 0;
	margin: 26px 0 22px;
	max-width: 66ch;
}

.psm__acoes {
	margin: 0;
}

.psm__btn {
	display: inline-block;
	background: var(--psm-verde);
	color: var(--psm-creme);
	font-family: var(--psm-display);
	font-weight: 500;
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 15px 34px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .18s ease;
}

/* Sem a sombra e com a cor do botão: o button:hover/:focus/:active do Kadence (0,1,1) os trocava. */
.psm .psm__btn:hover,
.psm .psm__btn:focus,
.psm .psm__btn:active {
	color: var(--psm-creme);
	box-shadow: none;
}

.psm__btn:hover:not(:disabled),
.psm__btn:focus:not(:disabled),
.psm__btn:active:not(:disabled) {
	background: var(--psm-verde-mid);
}

.psm__btn:disabled {
	background: var(--psm-salvia);
	cursor: not-allowed;
}

/* Mesmo motivo do "Remover arquivo": sem o .psm, nem anel nem pílula no foco do teclado. */
.psm .psm__btn:focus-visible {
	outline: 2px solid var(--psm-terracota);
	outline-offset: 2px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.psm__btn,
	.psm__campo input,
	.psm__campo select,
	.psm__campo textarea {
		transition: none;
	}
}