/* Reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
	/* overflow: hidden; */
}

body ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}

:focus {
	border: none;
	box-shadow: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Variables */
:root {
	--color-red:   #F00;
	--color-grey:  #A3A3A3;
	--color-white: #fff;
	--color-grey-dark: #848181;
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* General */

body {
	font-family: "Inter", sans-serif;
	background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
}

.button {
	border-radius: 20px;
	background-color: var(--color-red);
	font-size: 35px;
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
	padding: 20px 30px;
	white-space: nowrap;
}
.button-products {
	font-size: 35px;
	font-weight: 700;
	text-decoration: none;
	color: var(--color-grey-dark);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.8);
	padding: 14px 50px;
	max-width: 316px;
	display: block;
	text-align: center;
}
.button-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	box-shadow: 0px -13px 19.3px -6px rgba(96, 96, 96, 0.25);
	border-radius: 29px 29px 0px 0px;
	width: 100%;
	height: 89px;
	background-color: var(--color-white);
	padding-top: 25px;
	text-align: center;
	color: var(--color-red);
	font-size: 30px;
	font-weight: 700;
	text-decoration: none;
}
.back {
	font-size: 30px;
	font-weight: 700;
	color: var(--color-grey);
	text-decoration: none;
	position: absolute;
	top: 273px;
	left: 95px;
}

#exportButton {
	border: none;
	margin-top: 100px;
	cursor: pointer;
}

/* Main */
main {
	width: 1080px;
	height: 1920px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
main h2 {
	font-size: 50px;
	color: var(--color-red);
	text-align: center;
	padding-bottom: 50px;
	border-bottom: #BABABA 1px solid;
	display: table;
	margin: 0 auto;
	max-width: 740px;
}
main h2 strong {
	font-weight: 700;
}
main h2.grey {
	color: var(--color-grey);
}
main h2.grey strong {
	font-size: 70px;
	display: block;
}

/* header */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
header .logo {
	position: absolute;
	left: 58px;
	top: 88px;
}
header .btn-home {
	position: absolute;
	top: 78px;
	right: 62px;
}
header.shadow {
	border-radius: 0px 0px 20px 20px;
	box-shadow: 2px 10px 18.7px 0px rgba(0, 0, 0, 0.25);
	height: 175px;
}

/* Views */
.view1 .button {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 190px;
}
.view1 .button .icon-hand {
	position: absolute;
	right: -85px;
	bottom: -85px;
}
.view1 .button-products {
	position: absolute;
	right: 50px;
	bottom: 100px;
}


/* box */
.box {
	width: 890px;
	padding: 65px 0;
	border-radius: 87px;
	background-color: var(--color-white);
	box-shadow: 11px 10px 18.7px 0px rgba(0, 0, 0, 0.25);
}

/* Avatars */
.avatars {
	margin: 38px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	max-width: 580px;
	gap: 30px;
}

/* questions */
.questions {
	padding: 44px 74px;
}
.questions .option {
	color: var(--color-grey);
	font-size: 50px;
	padding: 40px 15px;
	border-bottom: #BABABA 1px solid;
	cursor: pointer;
}
.questions .option:last-child {
	border: none;
}
.questions .option.active {
	background-color: #f5f5f5;
	color: var(--color-red);
}

/* result */
.result {
	padding: 0 37px 0;
	text-align: center;
}
.result p {
	font-size: 36px;
	color: var(--color-grey);
}
h3.model {
	font-size: 70px;
	font-weight: 700;
	color: var(--color-red);
	text-align: center;
	margin-bottom: 40px;
}
p.sub {
	font-weight: 700;
	font-size: 30px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	color: var(--color-grey);
	border-bottom: 1px solid var(--color-grey);
	display: table;
	padding-bottom: 40px;
	margin: 40px auto 66px;
}
.result .glass {
	margin-bottom: 0;
}
.result .colors {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	margin: 30px 0 35px;
}
.result .colors span {
	width: 72px;
	height: 72px;
	border-radius: 100px;
	border: 1px solid;
}
.result .text {
	margin-top: 36px;
	background-color: var(--color-white);
	box-shadow: 11px 10px 18.7px 0px rgba(0, 0, 0, 0.25);
	border: 1px solid #DFDFDF;
	border-radius: 50px;
	padding: 80px 50px;
}
.result .text p {
	margin-bottom: 0;
	font-size: 50px;
	line-height: 60px;
}
.result .text p strong {
	font-weight: 700;

}
.result .button {
	font-size: 25px;
	display: table;
	margin: 76px auto 0;
}
.result form {
	margin: 46px auto 0;
	display: table;
}
.result form input[type="email"] {
	width: 666px;
	height: 84px;
	border: 1px solid #C3C3C3;
	border-radius: 18px;
	box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
	background: var(--color-white);
	font-size: 40px;
	padding: 0 50px;
	display: block;
}
.result form input[type="submit"] {
	background-color: var(--color-red);
	width: 174px;
	height: 37px;
	border-radius: 18px;
	border: 1px solid #C3C3C3;
	box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
	color: var(--color-white);
	margin: 28px auto 0;
	font-size: 22px;
	font-weight: 700;
}

/* products */
.products h2 {
	border: none;
	margin-bottom: 60px;
	padding: 0;
}
.products .grid {
	display: grid;
    grid-template-columns: 1fr 1fr;
	gap: 10px 170px;
}
.products .grid a {
	position: relative;
}
.products .grid img {
	width: 366px;
}
.products .grid .nome {
    position: absolute;
	right: 0;
	bottom: 0;
    font-size: 28px;
    color: var(--color-red);
    font-weight: 600;
}

/* Atualizações no CSS - Remover animações de slide e fade */
#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-placement-bottom.kioskboard-slide {
	bottom: 0;
	-webkit-animation: none;
	animation: none;
}

#KioskBoard-VirtualKeyboard.kioskboard-with-animation.kioskboard-slide.kioskboard-placement-bottom.kioskboard-slide-remove {
	bottom: -100%;
	-webkit-animation: none;
	animation: none;
}