#form-cards{
	width:100%;
	max-width:920px;
	margin:40px auto;
	padding:32px;
	background:#ffffff;
	border:1px solid #dce1e8;
	border-radius:14px;
	box-shadow:0 10px 35px rgba(0,0,0,.07);
	box-sizing:border-box;
}

#form-cards *{
	box-sizing:border-box;
}


/* GRUPOS */

#form-cards .grupo-formulario{
	margin-bottom:34px;
	padding-bottom:28px;
	border-bottom:1px solid #e8ebf0;
}

#form-cards .grupo-formulario:last-of-type{
	margin-bottom:24px;
	padding-bottom:0;
	border-bottom:0;
}

#form-cards h2{
	margin:0 0 22px;
	font-size:20px;
	line-height:1.3;
	color:#222b38;
}


/* LINHAS E CAMPOS */

#form-cards .linha-campos{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}

#form-cards .campo{
	margin-bottom:20px;
}

#form-cards .campo:last-child{
	margin-bottom:0;
}

#form-cards .campo-status{
	max-width:220px;
}

#form-cards label{
	display:block;
	margin-bottom:7px;
	font-size:14px;
	font-weight:700;
	color:#303744;
}


/* INPUTS COMUNS */

#form-cards input:not([type="color"]),
#form-cards select,
#form-cards textarea{
	display:block;
	width:100%;
	padding:12px 14px;
	border:1px solid #cbd2dc;
	border-radius:8px;
	background:#ffffff;
	font-family:inherit;
	font-size:15px;
	line-height:1.5;
	color:#252b35;
	outline:none;
	transition:
		border-color .15s,
		box-shadow .15s,
		background .15s;
}

#form-cards input::placeholder,
#form-cards textarea::placeholder{
	color:#9aa1ac;
}

#form-cards select{
	min-height:47px;
	cursor:pointer;
}

#form-cards textarea{
	min-height:110px;
	resize:vertical;
}

#form-cards #svg{
	min-height:260px;
	font-family:Consolas, "Courier New", monospace;
	font-size:13px;
	line-height:1.6;
}


/* SELETOR DE COR */

#form-cards input[type="color"]{
	display:block;
	width:100%;
	height:54px;
	padding:3px;
	border:1px solid #cbd2dc;
	border-radius:8px;
	background:#ffffff;
	cursor:pointer;
	overflow:hidden;
	outline:none;

	-webkit-appearance:none;
	appearance:none;

	transition:
		border-color .15s,
		box-shadow .15s;
}


/* CHROME, EDGE E SAFARI */

#form-cards input[type="color"]::-webkit-color-swatch-wrapper{
	padding:0;
}

#form-cards input[type="color"]::-webkit-color-swatch{
	width:100%;
	height:100%;
	border:0;
	border-radius:5px;
}


/* FIREFOX */

#form-cards input[type="color"]::-moz-color-swatch{
	width:100%;
	height:100%;
	border:0;
	border-radius:5px;
}


/* FOCO */

#form-cards input:not([type="color"]):focus,
#form-cards select:focus,
#form-cards textarea:focus{
	border-color:#2864dc;
	background:#ffffff;
	box-shadow:0 0 0 3px rgba(40,100,220,.12);
}

#form-cards input[type="color"]:focus{
	border-color:#2864dc;
	box-shadow:0 0 0 3px rgba(40,100,220,.12);
}


/* CAMPOS DESATIVADOS */

#form-cards input:disabled,
#form-cards select:disabled,
#form-cards textarea:disabled{
	background:#f2f4f7;
	color:#8b929c;
	cursor:not-allowed;
}

#form-cards small{
	display:block;
	margin-top:6px;
	font-size:12px;
	line-height:1.5;
	color:#737b88;
}


/* IMAGEM */

#form-imagem{
	display:block;
	margin:0;
	padding:0;
}

#form-imagem #imagem{
	display:none;
}

.anexar-imagem{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:46px;
	padding:0 22px;
	margin:0;
	border-radius:8px;
	background:#2864dc;
	color:#ffffff;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
}

.anexar-imagem:hover{
	background:#174fbe;
}

.miniatura-imagem{
	display:none;
	width:180px;
	margin-top:12px;
}

.miniatura-imagem img{
	display:block;
	width:100%;
	height:auto;
	border:1px solid #dce1e8;
	border-radius:8px;
}


/* AÇÕES */

#form-cards .acoes{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:12px;
	margin-top:10px;
}

#form-cards button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:180px;
	min-height:48px;
	padding:12px 28px;
	border:0;
	border-radius:8px;
	background:#2864dc;
	color:#ffffff;
	font-family:inherit;
	font-size:16px;
	font-weight:700;
	text-align:center;
	cursor:pointer;

	transition:
		background .15s,
		transform .15s,
		box-shadow .15s;
}

#form-cards button:hover{
	background:#174fbe;
	transform:translateY(-1px);
	box-shadow:0 8px 20px rgba(40,100,220,.22);
}

#form-cards button:active{
	transform:none;
	box-shadow:none;
}

#form-cards button:focus-visible{
	outline:3px solid rgba(40,100,220,.25);
	outline-offset:3px;
}


/* RESPONSIVO DO FORMULÁRIO */

@media(max-width:700px){

	#form-cards{
		width:calc(100% - 30px);
		margin:20px auto;
		padding:22px;
		border-radius:10px;
	}

	#form-cards .linha-campos{
		display:block;
	}

	#form-cards .linha-campos .campo{
		margin-bottom:20px;
	}

	#form-cards .campo-status{
		max-width:none;
	}

	#form-cards h2{
		font-size:18px;
	}

	#form-cards .acoes{
		display:block;
	}

	#form-cards button{
		width:100%;
	}

}


/* APRESENTAÇÃO */

.cards-apresentacao{
	display:flex;
	align-items:center;
	min-height:calc(100vh - 80px);
	padding:80px 24px;

	background:
		linear-gradient(
			135deg,
			#f7f9fc 0%,
			#ffffff 55%,
			#edf4ff 100%
		);
}

.cards-apresentacao .base{
	width:100%;
	max-width:1180px;
	margin:0 auto;
}

.cards-apresentacao-conteudo{
	max-width:760px;
}

.cards-apresentacao-marca{
	display:inline-block;
	margin-bottom:20px;
	font-size:16px;
	font-weight:700;
	letter-spacing:3px;
	text-transform:uppercase;
	color:#2864dc;
}

.cards-apresentacao h1{
	max-width:720px;
	margin:0 0 24px;
	font-size:clamp(42px, 7vw, 78px);
	line-height:1.02;
	letter-spacing:-3px;
	color:#172033;
}

.cards-apresentacao p{
	max-width:690px;
	margin:0 0 20px;
	font-size:19px;
	line-height:1.7;
	color:#596274;
}

.cards-apresentacao .cards-apresentacao-destaque{
	font-size:24px;
	line-height:1.5;
	color:#30394a;
}

.cards-apresentacao strong{
	display:block;
	max-width:680px;
	margin-top:28px;
	font-size:21px;
	line-height:1.5;
	color:#172033;
}

.cards-apresentacao-acoes{
	margin-top:38px;
}

.botao-criar-card{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:56px;
	padding:0 32px;
	border-radius:12px;
	background:#2864dc;
	color:#ffffff;
	font-size:18px;
	font-weight:700;
	text-decoration:none;
	box-shadow:0 12px 30px rgba(40,100,220,.22);

	transition:
		transform 150ms ease,
		background 150ms ease,
		box-shadow 150ms ease;
}

.botao-criar-card:hover{
	background:#174fbe;
	transform:translateY(-2px);
	box-shadow:0 16px 35px rgba(40,100,220,.3);
}

.botao-criar-card:active{
	transform:translateY(0);
}

.botao-criar-card:focus-visible{
	outline:3px solid rgba(40,100,220,.3);
	outline-offset:4px;
}


/* RESPONSIVO DA APRESENTAÇÃO */

@media(max-width:700px){

	.cards-apresentacao{
		min-height:auto;
		padding:70px 22px;
	}

	.cards-apresentacao h1{
		font-size:44px;
		letter-spacing:-2px;
	}

	.cards-apresentacao .cards-apresentacao-destaque{
		font-size:21px;
	}

	.cards-apresentacao p{
		font-size:17px;
	}

	.cards-apresentacao strong{
		font-size:19px;
	}

	.botao-criar-card{
		width:100%;
	}

}