/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: 300; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --black: #262626; --blue: #092251; --cyan: #98DBF9; --bg: #EFF5F8; --title: 'Petrov Sans'; }

/* global class */
.container { display: block; width: auto; max-width: 1300px; height: auto; margin: 0px auto; }

/* base */
a { text-decoration: none; transition: all .5s ease; }
body { background: var(--bg); color: var(--black); font: 300 16px 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
input, textarea, select, button { font: 300 16px 'Plus Jakarta Sans', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }

/* header */
#header { position: fixed; z-index: 9000; top: 20px; left: 0px; width: 100%; height: auto; padding: 0px 40px; display: flex; justify-content: space-between; align-items: center; transition: all .5s ease; }
#header .left { display: flex; align-items: center; gap: 60px; }
#header .left span.logo img { width: 100px; height: auto; transition: all .5s ease; }
#header .right { display: flex; align-items: center; gap: 60px; }
#header .right span a { position: relative; font-weight: 600; font-size: 14px; color: #fff; }
#header .right span.help a::after { position: absolute; bottom: -8px; left: 0px; width: 0%; height: 1px; background-color: #fff; transition: all .5s ease; content: ''; }
#header .right span.help a:hover::after { width: 100%; }
#header .right span.account a { display: block; height: 50px; padding-left: 25px; border: 1px solid #fff; border-radius: 60px; line-height: 44px; }
#header .right span.account a i { display: inline-block; width: 40px; height: 40px; margin: 0px 5px 0px 25px; border-radius: 100%; background-color: var(--cyan); color: var(--black); vertical-align: middle; line-height: 40px; text-align: center; font-size: 18px; transform: rotate(316deg); transition: all .5s ease; }
#header .right span.account a:hover { background-color: var(--cyan); border-color: var(--cyan); color: var(--blue); }
#header .right span.account a:hover i { background-color: var(--blue); color: var(--cyan); }
#header .right span.toggle { display: none; position: relative; width: 25px; height: 50px; cursor: pointer; }
#header .right span.toggle b { position: absolute; top: 15px; left: 0px; width: 100%; border-top: 2px solid #fff; transition: all .5s ease; }
#header .right span.toggle b::before { position: absolute; top: 5px; left: 0px; width: 100%; height: 2px; background-color: #fff; transition: all .5s ease; content: ''; }
#header .right span.toggle b::after { position: absolute; top: 12px; left: 0px; width: 100%; height: 2px; background-color: #fff; transition: all .5s ease; content: ''; }
#header .right span.toggle.on b { border-top: transparent; }
#header .right span.toggle.on b::before { top: 8px; transform: rotate(45deg); }
#header .right span.toggle.on b::after { top: 8px; transform: rotate(-45deg); }
#header nav ul { display: flex; align-items: center; gap: 60px; }
#header nav ul li a { position: relative; color: #fff; font-weight: 600; font-size: 14px; }
#header nav ul li a::after { position: absolute; bottom: -8px; left: 0px; width: 0%; height: 1px; background-color: #fff; transition: all .5s ease; content: ''; }
#header nav ul li a.on::after { display: none; }
#header nav ul li a.on { color: var(--cyan); }
#header nav ul li a.on::before { position: absolute; top: -20px; left: 50%; width: 7px; height: 7px; background-color: var(--cyan); border-radius: 100%; transform: translateX(-50%); content: ''; }
#header nav ul li a:hover::after { width: 100%; }

    /* header -> on */
    #header.on { top: 0px; padding: 12px; background-color: rgba(0,0,0,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    #header.on .left span.logo img { width: 70px; }

/* feat */
#feat { position: relative; height: 100vh; background-color: #000c22; }
#feat figcaption { position: absolute; z-index: 3; top: 50%; left: 50%; width: 868px; margin-left: -650px; transform: translateY(-50%); }
#feat figcaption h1 { font-family: var(--title); font-weight: bold; font-size: 120px; color: #fff; }
#feat figcaption h1 strong { color: var(--cyan); font-weight: bold; }
#feat figcaption h2 { display: block; margin-top: 20px; font-family: var(--title); font-weight: 600; font-size: 72px; color: #fff; text-transform: lowercase; }
#feat figcaption h2 strong { font-weight: 600; }
#feat video,
#feat figure.bg img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .3; mix-blend-mode: luminosity; }
#feat .hexagon { position: absolute; z-index: 2; top: 50%; right: -200px; width: 650px; height: 740px; transform: rotate(180deg) translateY(50%); }
#feat .hexagon img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; }
#feat .hexagon img.hex1 { transform: scale(1); opacity: .5; animation: hex1 30s forwards infinite; opacity: 0; }
#feat .hexagon img.hex2 { transform: scale(.8); opacity: .3; animation: hex2 30s forwards infinite; opacity: 1; }
#feat .hexagon img.hex3 { transform: scale(.6); opacity: .15; animation: hex3 60s forwards infinite; opacity: 0; }
@keyframes hex1 { 0% { opacity: 0; } 50% { opacity: .5; } 100%  { opacity: 0; } }
@keyframes hex2 { 0% { opacity: .5; } 50% { opacity: 0; } 100%  { opacity: .5; } }
@keyframes hex3 { 0% { opacity: 0; } 50% { opacity: .5; } 100%  { opacity: 0; } }

/* black white */
#feat.bw { filter: grayscale(100%); }
#feat.bw figcaption h1 strong { color: #a2a2a2; }

/* cover */
#cover { position: relative; width: 100%; height: 450px; margin-bottom: 100px; background-color: #000; }
#cover h1 { position: absolute; bottom: 40px; left: 50%; margin-left: -650px; font-family: var(--title); font-weight: 900; font-size: 120px; color: var(--cyan); text-transform: lowercase; }
#cover img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .7; }

/* cover -> manifesto */
#cover.manifesto { height: 300px; }
#cover.manifesto h1 { width: 100%; left: 0px; margin-left: 0px; color: #fff; text-align: center; font-size: 90px; }

/* txt */
#txt { padding-bottom: 120px; }
#txt .container { width: 700px; }
#txt h2 { display: block; margin-bottom: 20px; font-family: var(--title); font-size: 30px; }
#txt h3 { display: block; margin-bottom: 20px; font-family: var(--title); font-size: 20px; }
#txt p { display: block; margin-bottom: 20px; line-height: 1.8; }
#txt p strong { font-weight: bold; }
#txt p small { font-size: 14px; color: var(--blue); }

/* about */
#about { position: relative; padding: 120px 0px; }
#about section { position: relative; z-index: 2; display: grid; grid-template-columns: 40% 60%; grid-gap: 64px; }
#about section article h6 { display: block; margin: 40px 0px; font-weight: bold; font-family: var(--title); font-size: 90px; color: var(--cyan); text-transform: lowercase; }
#about section article p { display: block; line-height: 1.6; }
#about section article span.open a { position: relative; display: block; width: 150px; height: 150px; margin-top: 40px; padding: 80px 24px 24px 24px; border-radius: 10px; background-color: var(--blue); font-weight: 900; font-size: 20px; color: #fff; line-height: 1.2; }
#about section article span.open a::after { position: absolute; top: 20px; right: 20px; font-weight: 300; color: #fff; font-family: 'Font Awesome 5 Pro'; transform: rotate(316deg); transition: all .5s ease; content: '\f061'; }
#about section article span.open a:hover { background-color: var(--cyan); }
#about section article span.open a:hover::after { top: 10px; right: 10px; }
#about section figure { position: relative; width: 100%; height: 600px; background-color: #000; }
#about section figure.side::before { position: absolute; bottom: -70px; left: -70px; width: 140px; height: 140px; background-color: var(--bg); transform: rotate(45deg); content: ''; }
#about section figure.side img { width: 60vmax; height: 100%; object-fit: cover; }
#about footer { position: relative; z-index: 3; display: grid; grid-template-columns: 40% 1fr; grid-gap: 64px; }
#about footer figure.card { position: relative; }
#about footer figure.card img { display: block; width: 614px; height: auto; margin: -80px 0px 0px -80px; }
#about footer article { padding: 60px 0px 0px 96px; }
#about footer article h5 { display: block; font-family: var(--title); font-size: 56px; color: var(--cyan); text-transform: uppercase; }
#about footer article p { display: block; margin-top: 20px; line-height: 1.6; }
#about footer article p strong { font-weight: bold; }
#about footer article span a { position: relative; display: inline-block; width: auto; margin-top: 20px; font-weight: bold; font-size: 14px; text-transform: uppercase; color: var(--blue); }
#about footer article span a::before { position: absolute; z-index: -1; top: -3px; left: -150px; width: 100px; height: calc(100% + 6px); background-color: var(--cyan); transition: all .5s ease; content: ''; }
#about footer article span a:hover::before { left: -3px; width: calc(100% + 6px); }
#about .letter-a { position: absolute; top: 60px; left: -400px; width: 1040px; height: 1026px; background: transparent url('../img/about-a.svg') no-repeat; background-size: contain; content: ''; }

/* produtos */
#produtos { position: relative; margin: 0px 20px; background-color: #131926; border-radius: 20px; overflow: hidden; }
#produtos .container { padding: 90px 0px; }
#produtos .cont { position: relative; z-index: 2; width: 850px; }
#produtos .cont header { display: block; margin-bottom: 70px; }
#produtos .cont header h6 { display: block; font-family: var(--title); font-size: 90px; color: var(--cyan); text-transform: lowercase; }
#produtos .cont header p { display: block; margin-top: 20px; line-height: 1.6; color: #fff; }
#produtos .cont section { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }
#produtos .cont section article a { position: relative; display: block; height: 280px; padding: 64px 28px 0px 38px; background-color: rgba(255,255,255,.15); border-radius: 7px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#produtos .cont section article a::after { position: absolute; top: 30px; right: 30px; font-weight: 300; font-size: 20px; color: #fff; font-family: 'Font Awesome 5 Pro'; transform: rotate(316deg); transition: all .5s ease; content: '\f061'; }
#produtos .cont section article a h3 { display: block; font-weight: 900; font-size: 30px; color: #fff; }
#produtos .cont section article a p { display: block; margin-top: 15px; font-weight: 500; font-size: 14px; line-height: 1.6; color: #fff; }
#produtos .cont section article a:hover { background-color: rgba(255,255,255,.05); }
#produtos .cont section article a:hover::after { top: 20px; right: 20px; }
#produtos figure img { position: absolute; top: 0px; right: -300px; width: 100%; height: 100%; object-fit: cover; transform: rotateY(180deg); }
#produtos::before { position: absolute; z-index: 2; top: 0px; left: 0px; width: 50%; height: 100%; background: linear-gradient(to right, #131926, 90%, transparent); content: ''; }
#produtos span.open a { position: absolute; bottom: 90px; right: 50%; width: 150px; height: 150px; margin: 40px -650px 0px 0px; padding: 80px 24px 24px 24px; border-radius: 10px; background-color: #092251a8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 900; font-size: 20px; color: #fff; line-height: 1.2; }
#produtos span.open a::after { position: absolute; top: 20px; right: 20px; font-weight: 300; font-family: 'Font Awesome 5 Pro'; transform: rotate(316deg); transition: all .5s ease; content: '\f061'; }
#produtos span.open a:hover { background-color: var(--cyan); color: var(--blue); }
#produtos span.open a:hover::after { top: 10px; right: 10px; }

/* produto */
#produto { margin-bottom: 100px; }
#produto section { display: flex; align-items: flex-start; gap: 100px; }
#produto section article { width: 60%; }
#produto section article h2 { display: block; font-weight: bold; font-size: 36px; font-family: var(--title); color: var(--blue); line-height: 1.2; }
#produto section article h3 { display: block; margin-top: 20px; font-weight: bold; font-size: 28px; font-family: var(--title); color: var(--blue); line-height: 1.2; }
#produto section article p { display: block; margin-top: 20px; line-height: 1.8; }
#produto section article figure { position: relative; display: block; width: 100%; height: 500px; margin-top: 40px; background-color: #000; }
#produto section article figure::before { position: absolute; z-index: 2; bottom: -70px; right: -70px; width: 140px; height: 140px; background-color: var(--bg); transform: rotate(45deg); content: ''; }
#produto section article figure img { position: absolute; top: 0px; right: 0px; width: 60vmax; height: 100%; object-fit: cover; }
#produto section aside { width: 40%; }
#produto section aside nav li { position: relative; display: block; padding: 0px 0px 40px 90px; }
#produto section aside nav li i { position: absolute; top: 0px; left: 0px; width: 66px; height: 66px; border-radius: 100%; background-color: #D2F1FF; color: var(--blue); line-height: 66px; text-align: center; font-size: 24px; }
#produto section aside nav li h3 { display: block; margin-bottom: 12px; color: var(--blue); font-weight: bold; font-size: 20px; line-height: 1.4; }
#produto section aside nav li p { display: block; line-height: 1.8; font-size: 14px; }
#produto footer { position: relative; z-index: 3; display: flex; margin-top: 60px; padding: 0px 242px 0px 190px; justify-content: space-between; align-items: center; }
#produto footer h4 { width: 70%; font-weight: 900; font-size: 48px; font-family: var(--title); color: var(--blue); }
#produto footer span.open a { position: relative; display: block; width: 150px; height: 150px; padding: 80px 24px 24px 24px; border-radius: 10px; background-color: var(--blue); font-weight: 900; font-size: 20px; color: #fff; line-height: 1.2; }
#produto footer span.open a::after { position: absolute; top: 20px; right: 20px; font-weight: 300; color: #fff; font-family: 'Font Awesome 5 Pro'; transform: rotate(316deg); transition: all .5s ease; content: '\f061'; }
#produto footer span.open a:hover { background-color: var(--cyan); color: var(--blue); }
#produto footer span.open a:hover::after { top: 10px; right: 10px; color: var(--blue); }

/* cards */
#cards { margin: 120px 20px; padding: 100px 0px; background-color: #fff; border-radius: 20px; }
#cards section { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 25px; }
#cards section article { height: 350px; padding: 30px 50px; border-radius: 15px; background-color: #D9DCDE; }
#cards section article:nth-of-type(2) { background-color: #EFF5F8; }
#cards section article:nth-of-type(3) { background: #001131 url('../img/card-bg-haus.png') no-repeat right bottom; }
#cards section article:nth-of-type(3) h4 { color: #fff; }
#cards section article:nth-of-type(3) img { width: 40px; height: 40px; }
#cards section article figure.icon { display: block; width: 60px; height: 60px; }
#cards section article figure.icon img { width: 60px; height: 60px; object-fit: contain; }
#cards section article h4 { display: block; margin: 30px 0px; font-weight: 600; font-family: var(--title); font-size: 26px; color: var(--blue); line-height: 1.2; }
#cards section article span.transf { position: relative; z-index: 2; display: block; width: 100%; height: 72px; padding-left: 32px; border-radius: 72px; background-color: #fff; line-height: 64px; font-weight: 500; }
#cards section article span.transf::after { position: absolute; z-index: -1; bottom: -20px; left: 10%; width: 80%; height: 50px; background-color: rgba(255,255,255,.5); border-radius: 72px; content: ''; }
#cards section article span.transf i { position: absolute; top: 50%; right: 32px; transform: translateY(-62%); font-size: 20px; }
#cards section article span.account a { display: inline-block; height: 50px; padding-left: 25px; border: 1px solid var(--blue); border-radius: 60px; line-height: 44px; font-weight: 600; font-size: 14px; color: var(--blue); }
#cards section article span.account a i { display: inline-block; width: 40px; height: 40px; margin: 0px 5px 0px 25px; border-radius: 100%; background-color: var(--blue); color: #fff; vertical-align: middle; line-height: 40px; text-align: center; font-size: 18px; transform: rotate(316deg); transition: all .5s ease; }
#cards section article span.account a:hover { background-color: var(--cyan); border-color: var(--cyan); color: var(--blue); }
#cards section article span.account a:hover i { background-color: var(--blue); color: var(--cyan); }

/* faq */
#faq { padding-bottom: 120px; }
#faq .container { width: 920px; }
#faq header { display: block; margin-bottom: 40px; text-align: center; }
#faq header small { display: block; font-weight: bold; font-size: 14px; text-transform: uppercase; color: var(--blue); }
#faq header h6 { display: block; font-weight: bold; font-family: var(--title); font-size: 60px; color: var(--cyan); }
#faq header p { display: block; margin-top: 20px; font-weight: bold; color: var(--blue); }
#faq section article { position: relative; display: inline-block; width: 100%; padding: 20px; border-bottom: 1px solid #D9DDE4; cursor: pointer; transition: all .5s ease; }
#faq section article:hover { background-color: #fff; }
#faq section article::before { position: absolute; top: 20px; right: 29px; width: 2px; height: 19px; background-color: var(--cyan); content: ''; }
#faq section article::after { position: absolute; top: 28px; right: 20px; width: 20px; height: 2px; background-color: var(--cyan); content: ''; }
#faq section article.on::before { display: none; }
#faq section article p { display: block; line-height: 1.6; }
#faq section article span.p { position: relative; display: block; width: 100%; height: auto; font-weight: bold; }
#faq section article span.r { display: none; float: left; width: 100%; height: auto; }
#faq section article span.r p { display: block; margin-top: 20px; }
#faq section article span.r p a { color: var(--blue); text-decoration: underline; }

/* footer */
#footer { padding: 90px 0px; background-color: #101010; }
#footer .columns { display: grid; grid-template-columns: 10% 1fr 25% 15% 15%; grid-gap: 40px; }
#footer .columns h6 { display: block; margin-bottom: 22px; color: #fff; font-size: 20px; }
#footer .columns span.logo img { width: 100px; }
#footer .columns span.links { display: flex; align-items: flex-start; }
#footer .columns span.links img { display: block; width: auto; margin-bottom: 11px; }
#footer .columns span.links .apps { display: flex; width: 50%; flex-direction: column; }
#footer .columns span.qrcode { width: 50%; }
#footer .columns span.qrcode img { width: 106px; border-radius: 5px; } 
#footer .columns strong { display: block; margin-bottom: 20px; font-weight: bold; text-transform: uppercase; font-size: 14px; color: #aaa; }
#footer .columns p { display: block; margin-bottom: 30px; font-size: 14px; line-height: 1.8; color: #aaa; }
#footer .columns p a { color: #aaa; text-decoration: underline; }
#footer .columns nav li a { display: block; margin-bottom: 20px; font-size: 14px; color: #fff; }
#footer .columns nav li a:hover { text-decoration: underline; }
#footer .foot { display: flex; margin-top: 50px; padding-top: 50px; border-top: 1px solid rgba(255,255,255,.15); justify-content: space-between; align-items: center; }
#footer .foot p { display: block; font-size: 13px; color: #aaa; line-height: 1.4; }
#footer .foot nav { display: flex; align-items: center; gap: 30px; }
#footer .foot nav small { font-weight: bold; font-size: 12px; text-transform: uppercase; color: #aaa; }
#footer .foot nav ul { display: flex; align-items: center; gap: 20px; }
#footer .foot nav ul li a { color: #fff; }

/* sidebar */
#sidebar { position: fixed; z-index: 9999; top: 20px; left: -300px; width: 200px; height: calc(100% - 40px); border-radius: 40px; background-color: rgba(0,0,0,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all .5s ease; }
#sidebar.on { left: 20px; }
#sidebar span.logo img { display: block; width: 100px; height: auto; margin: 40px auto; }
#sidebar nav ul li a { display: block; padding: 15px 0px; text-align: center; color: #fff; font-size: 16px; }
#sidebar span.mail a { position: absolute; bottom: 60px; left: 0px; width: 100%; height: auto; text-align: center; color: #fff; font-size: 14px; }

/* responsive ######################################## */
@media (max-width: 1300px){

    /* global */
    .container { padding: 0px 20px; }

    /* feat */
    #feat figcaption { left: 0px; width: 100%; margin-left: 0px; padding-left: 20px; }

    /* cover */
    #cover { height: 300px; }
    #cover h1 { left: 0px; width: 100%; margin-left: 0px; text-align: center; font-size: 60px; }

    /* produtos */
    #produtos .cont { padding-left: 40px; }

}

@media (max-width: 1030px){

    /* feat */
    #feat figcaption { padding-left: 0px; text-align: center; }

    /* about */
    #about { padding: 60px 0px; }
    #about section { grid-template-columns: 1fr; }
    #about section figure.side img { width: 100%; }
    #about footer { grid-template-columns: 30% 70%; padding-right: 20px; grid-gap: 0px; }
    #about footer figure.card img { width: 115%; margin-left: -40px; }
    #about footer article { padding: 60px 0px 0px 20px; }
    #about footer article h5 { font-size: 24px; }

    /* produtos */
    #produtos .cont { width: 100%; padding: 0px 30px; }
    #produtos .cont section { grid-template-columns: 1fr; }

    /* cards */
    #cards section { grid-template-columns: 1fr; }

    /* faq */
    #faq .container { width: 100%; }
    #faq header h6 { font-size: 36px; }

    /* footer */
    #footer .columns { display: inline-block; }
    #footer .columns .item { display: inline-block; margin-right: -10px; vertical-align: top; }
    #footer .columns .item:nth-of-type(1) { width: 30%; }
    #footer .columns .item:nth-of-type(2) { width: 70%; }
    #footer .columns .item:nth-of-type(3) { width: 100%; margin: 20px 0px; }
    #footer .columns .item:nth-of-type(4) { width: 50%; }
    #footer .columns .item:nth-of-type(5) { width: 50%; }

}

@media (max-width: 800px){

    /* global */
    html, body { overflow-x: hidden; }
    body { font-size: 14px; }

    /* header */
    #header { padding: 0px 20px; }
    #header .left span.logo img { width: 70px; }
    #header.on .left span.logo img { width: 50px; }
    #header .right { gap: 10px; }
    #header nav,
    #header .right span.help { display: none; }
    #header .right span a { padding-left: 15px; font-size: 12px; }
    #header .right span.account a { transform: scale(.8); }
    #header .right span.account a i { margin-left: 15px; }
    #header .right span.toggle { display: block; }

    /* feat */
    #feat figcaption h1 { font-size: 72px; }
    #feat figcaption h2 { font-size: 36px; }

    /* about */
    #about footer { grid-template-columns: 1fr; }
    #about footer figure.card img { width: 80%; }
    #about footer article { padding-top: 20px; }
    #about section figure.side { height: auto; }
    #about section figure.side img { height: auto; }

    /* produto */
    #produto section { flex-direction: column; }
    #produto section article,
    #produto section aside { width: 100%; }
    #produto section article figure { height: auto; }
    #produto section article figure img { position: relative; top: auto; right: auto; width: 100%; height: auto; }
    #produto footer { padding: 0px; }
    #produto footer h4 { font-size: 24px; line-height: 1.2; }
    #produto footer span.open a { transform: scale(.8); }

}

@media (max-width: 600px){

    /* feat */
    #feat figcaption h1 { font-size: 60px; }
    #feat figcaption h2 { font-size: 20px; }
    #feat .hexagon { right: -300px; transform: rotate(180deg) translateY(50%) scale(.5); }

    /* about */
    #about section article h6 { margin: 20px 0px; font-size: 60px; }
    #about .letter-a { left: -200px; width: 700px; height: 700px; opacity: .5; }
    #about section article h6 { color: var(--blue); }
    #about section figure { background-color: transparent; }
    #about footer article h5 { color: var(--blue); }

    /* produtos */
    #produtos::before { display: none; }
    #produtos .container { padding: 40px 0px; }
    #produtos .cont header h6 { font-size: 48px; }
    #produtos .cont section article a { height: auto; padding: 64px 20px 20px 20px; }
    #produtos figure img { left: 0px; r: auto; }
    #produto section { gap: 40px; }
    #produto section article h2 { font-size: 24px; }
    #produto section article h3 { font-size: 18px; }
    #produto section aside { position: relative; z-index: 3; }
    #produto section aside nav li h3 { font-size: 16px; }
    #produto section article figure { background-color: transparent; }
    #produto section article figure::before { display: none; }

    /* cover */
    #cover { margin-bottom: 40px; }
    #cover h1 { font-size: 48px; }

    /* cards */
    #cards { margin: 60px 0px; padding: 40px 0px; }
    #cards section article { height: auto; padding: 30px 50px 50px 50px; }
    #cards section article h4 { margin: 10px 0px 20px 0px; font-size: 20px; }
    #cards section article figure.icon img { width: 35px; height: 35px; }

    /* faq */
    #faq header h6 { font-size: 24px; color: var(--blue); }
    #faq section article { padding-right: 60px; }
    #faq section article span.p { line-height: 1.4; }
    #faq section article::before { top: 24px; }
    #faq section article::after { top: 32px; }

    /* footer */
    #footer { padding: 40px 0px; }
    #footer .columns { text-align: center; }
    #footer .columns .item:nth-of-type(1) { width: 100%; }
    #footer .columns .item:nth-of-type(2) { width: 100%; margin: 20px 0px; }
    #footer .columns .item:nth-of-type(3) { width: 100%; margin: 20px 0px; }
    #footer .columns .item:nth-of-type(4) { width: 100%; margin-bottom: 40px; }
    #footer .columns .item:nth-of-type(5) { width: 100%; }
    #footer .columns span.links img { margin: 0px auto; }
    #footer .columns span.qrcode img { width: 96px; }
    #footer .columns h6 { font-size: 16px; }
    #footer .foot { flex-direction: column; text-align: center; }
    #footer .foot p { margin-bottom: 40px; }

}