@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
@import url('../../ico/fontawesome.css');

/* reset */
* { margin:0; padding:0; border:0 none; outline:0; vertical-align:baseline; background:transparent; text-decoration:none; font:inherit; list-style:none; quotes:none; border-collapse:collapse; border-spacing:0; resize:none; box-sizing:border-box; letter-spacing:inherit; color:inherit; text-align:inherit; left:auto; top:auto; }
@-ms-viewport { width:extend-to-zoom; zoom:1.0; }
a { cursor:pointer; }
:focus { outline:0; }
::-ms-clear { display: none;}
::selection { color:inreit; background:none transparent; }

/* geral */
html { height:100%; }
body { color:#606060; --botoes:#333; min-height:100%; width:100%; position:absolute; font:16px/1.3 Montserrat, Arial, Helvetica, sans-serif; }
body:before { content:''; position:absolute; width:100%; height:400px; z-index:-1; background:linear-gradient(#eacb5f,#f8efa0,#eacb5f); }
	main { width:1200px; margin:auto; padding:50px; }
		main>figure { border-radius:60px; max-width:100%; box-shadow:0 12px 32px rgba(0,0,0,0.35); background:url(img/topo.png) 0 / 100% no-repeat;  display:block; aspect-ratio:1560/557; }
		.beautyshow main>figure { background-image:url(img/topoBS.png); aspect-ratio:1248/448; }
h2 { color:#eacb5f; font-size:1.7em; font-weight:bold; margin:0 0 0.5em; }
p { margin-bottom:1em; }
strong { font-weight:bold; }
ol { padding-bottom:1em; counter-reset:li; }
	li { padding:0 0 0.5em 3em; position:relative; overflow:hidden; text-align:justify; }
	li:before { content:counters(li,'.')' '; counter-increment:li; font-weight:bold; color:#fff; background:var(--botoes); border-radius:10px 0 0 10px; width:1.5em; height:1.5em; text-align:center; padding:0.75em; position:absolute; left:0; }
form, aside { float:left; width:50%; padding:50px; }
	input, select, li p { font-weight:bold; background:#fff; border-radius:0 10px 10px 0; outline:1px solid #b4b4b4; outline-offset:-1px; padding:15px 20px; width:100%; margin-bottom:10px; height:3em; float:left; }
	input[name=foto] { padding-right:50px; }
	input:focus, select:focus { outline:1px solid #b4b4b4; outline-offset:-1px; }
	form.foto input[type=file] { position:absolute; opacity:0; left:0; top:0; cursor:pointer; }
	input+i { margin:1em 0 0 -2em; }
	select { border-right:0.5em solid transparent; }
	li p { line-height:1em; padding-top:10px; cursor:pointer; }
		li p small { font-weight:normal; font-size:0.7em; }
	::placeholder { color:inherit; font-style:normal;}
form+div { float:right; width:50%; border-radius:30px; margin:50px 0; box-shadow:0 12px 32px rgba(0,0,0,0.25); padding:1.5em; position:relative;  }
	canvas { background:#d9d9d9; border-radius:10px; width:100%; aspect-ratio:1080/1350; }
	div p { text-align:justify; text-align-last:justify; margin:0; }
		div p>i { background:var(--botoes); color:#fff; padding:1em 0; border-radius:10px; margin:1em 0 0; cursor:pointer; display:inline-block; width:3em; text-align-last:center; text-align:center; }
		div a { display:block; border-radius:10px; background:var(--botoes); color:#fff; text-align:center; text-align-last:center; padding:1em; margin-top:1.5em;  }
		div a:active, div p>i:active { position:relative; top:1px; left:1px; }
aside p { border-top:1px solid #bbb; overflow:hidden; padding:0.5em 0; margin:0; }
aside h2+p { border-top:0; }
	aside form { float:none; width:auto; padding:0; margin:0; }
	aside input { display:block; border:1px solid #bbb; border-radius:10px; }
	aside a {  background:var(--botoes); color:#fff; text-align:center; padding:0.5em; margin-right:0.2em; border-radius:10px; min-width:2.5em; display:inline-block; }
	aside span { border:1px solid var(--botoes); color:var(--botoes); padding:0.5em; margin:0 0 0 1em; border-radius:10px; min-width:4.5em; float:right; }
		
/* responsivo */
@media (max-width:1200px)  { 
	body { zoom:0.7; padding-bottom:60px; }
	main { width:100%; padding:30px; }
		main>figure { border-radius:30px; max-width:100%; box-shadow:0 6px 16px rgba(0,0,0,0.25); background-image:url(img/topom.png); aspect-ratio:500/613; }
		.beautyshow main>figure { background-image:url(img/topomBS.png); }
	form, form+div, aside { float:none; width:100%; padding:30px 0 0; margin:0x; }
	form+div { padding:15px; margin:20px 0 30px }
}