/* RESET CSS */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

body {
  min-height: 100vh;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* TAMANHO FONTE */

:root {

    /* FONT SIZE */
    --fs-48 : clamp(18px, 3.514vw, 48px);
    --fs-24 : clamp(12px, 1.757vw, 24px);
    --fs-39 : clamp(14px, 2.855vw, 39px);
    --fs-32 : clamp(14px, 2.343vw, 32px);
    --fs-20 : clamp(12px, 1.464vw, 20px);
}

/* FONTES */
@font-face {
    font-family: 'dinproextlight';
    src: url('fonts/dinpro-extlight-webfont.eot');
    src: url('fonts/dinpro-extlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinpro-extlight-webfont.woff2') format('woff2'),
         url('fonts/dinpro-extlight-webfont.woff') format('woff'),
         url('fonts/dinpro-extlight-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dinprolight';
    src: url('fonts/dinpro-light-webfont.eot');
    src: url('fonts/dinpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinpro-light-webfont.woff2') format('woff2'),
         url('fonts/dinpro-light-webfont.woff') format('woff'),
         url('fonts/dinpro-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'dinproregular';
  src: url('fonts/dinpro-regular-webfont.eot');
  src: url('fonts/dinpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/dinpro-regular-webfont.woff2') format('woff2'),
       url('fonts/dinpro-regular-webfont.woff') format('woff'),
       url('fonts/dinpro-regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'dinpromedium';
    src: url('fonts/dinpro-medium-webfont.eot');
    src: url('fonts/dinpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinpro-medium-webfont.woff2') format('woff2'),
         url('fonts/dinpro-medium-webfont.woff') format('woff'),
         url('fonts/dinpro-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dinprobold';
    src: url('fonts/dinpro-bold-webfont.eot');
    src: url('fonts/dinpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinpro-bold-webfont.woff2') format('woff2'),
         url('fonts/dinpro-bold-webfont.woff') format('woff'),
         url('fonts/dinpro-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* INICIO CSS */

html {
  font-family: 'dinproregular';
  line-height: 1.4;
  letter-spacing: -1px;
  scroll-behavior: smooth;
}

body {
  background-color: #f2f2f2;
}

header {
  min-height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 75px;
  margin: 0 auto;
}

nav.header-menu ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 42px;
}

nav.header-menu ul li a {
  color: #666;
  text-decoration: none;
  font-size: 20px;
}

nav.header-menu ul li.desktop {
  display: block;
}

nav.header-menu ul li a.blue {
  background-color: #003153;
  color: #fff;
  padding: 6px 18px;
  position: relative;
}

nav.header-menu ul li a.blue:after 
{
  content: "";
  position: absolute;
  bottom: -10px;
  left: 45%;
  border-style: solid;
  border-width: 18px 14px 0;
  border-color: #003153 transparent;
  display: block;
  width: 0;
  z-index: 1;
}

nav.header-menu ul li.idioma {
  font-size: 14px;
  margin-left: 30px;
  color: #666;
}

nav.header-menu ul li.idioma button {
  color: #666;
  font-size: 14px;
}

nav.header-menu ul li.idioma strong {
  font-size: 15px;
  font-weight: bold;
  color: #666;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

button.idioma {
  border: 0px solid #fff;
  background-color: transparent;
  cursor: pointer;
}

dialog {
  width: 50%;
  height: 300px;
  margin: 70px auto 0px;
  border: 0px solid #fff;

  justify-content: center;
  align-items: center;
}

dialog::backdrop {
  background-color: rgb(0,0,0,0.6);
  backdrop-filter: blur(0px);
}

div.submenu {
  position: absolute;
  background-color: #003153;
  color: #fff;
  margin-top: 10px;
  padding: 6px 14px;
  font-size: 14px;
  opacity: 0;
  border: 1px solid #003153;

  transition: all 0.6s;
  z-index: 1;
}

div.submenu.vis {
  opacity: 1;
}

section#banner {
  position: relative;
}

section#banner img {
    width: 100%;
}

section#banner div.texto-banner {
    position: absolute;
    color: #fff;
    left: 75px;
    top: 85px;
}

div.texto-banner h1 {
  font-family: 'dinprobold';
  font-size: var(--fs-48);
  line-height: 1.13;
  letter-spacing: -1px;
}

div.texto-banner p.subtitulo {
  font-family: 'dinprolight';
  font-size: var(--fs-48);
  line-height: 1.12;
  margin-bottom: 14px;
  letter-spacing: -1px;
}

div.texto-banner p {
  font-family: 'dinprolight';
  font-size: var(--fs-24);
  line-height: 1.2;
}

/* conecte */
section#conecte {
  margin: 80px 0px 120px;
  display: flex;
  padding: 20px 75px;
  justify-content: center;
  align-items: center;
  gap: 60px;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 35%,
    #003153 35%,
    #003153 100%
  );
}

section#conecte .texto {
  font-family: 'dinproregular';
  font-size: var(--fs-39);
  color: #fff;

  max-width: 460px;
  margin-top: 100px;
}

/* PRODUTOS */
section#produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, 376px);
  place-content: center;
  max-width: 1216px;
  margin: 0 auto 80px;
  gap: 42px;
}

div.card-produto {
  padding: 40px 40px 80px;
  max-width: 380px;
  width: 380px;
  background-color: #fff;
  position: relative;
}

div.card-produto h2 {
  font-family: 'dinpromedium';
  color: #000;
  font-size: var(--fs-32);
  letter-spacing: -2px;
  line-height: 1.1;
}

div.card-produto p.modelo {
  font-family: 'dinprobold';
  color: #005eb8;
  font-size: var(--fs-24);
}

div.card-produto p.descricao {
  font-family: 'dinprobold';
  color: #005eb8;
  font-size: var(--fs-20);
}

div.card-produto span.separacao {
  display: block;
  border-top: 1px solid #000;
  padding-bottom: 30px;
  margin-top: 30px;
}

div.card-produto ul {
  list-style-position: inside;
}

div.card-produto ul li {
  font-family: 'dinproregular';
  font-size: var(--fs-20);
  margin-bottom: 16px;

  list-style-type: "• ";
}

div.card-produto a.button {
  font-family: 'dinproregular';
  text-decoration: none;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  background-color: #005eb8;
  border-radius: 16px;
  padding: 8px 14px 16px;
  display: inline-block;

  position: absolute;
  bottom: 24px;
}

div.card-produto div.imagem-produto {
  height: 250px;
  margin-top: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.card-produto img {
  margin: 0px auto;
}

div.card-produto img.destaque {
  position: absolute;
  right: -25px;
  top: -60px;
}

section#app {
  background-color: #fff;
  position: relative;
  padding: 80px 80px 0px;
  text-align: center;
  font-size: 18px;
}

section#app div.container-bg {
  position: relative;
  max-width: 1216px;
  margin: 0 auto;
  padding-bottom: 80px;
}

section#app div.container-bg img.bg {
  position: absolute;
  bottom: 0;
  left: 100px;
  z-index: 1;
  display: block;
}

section#app img.selo {
  width: 115px;
  filter: drop-shadow(0px 0px 10px #ccc)
}

section#app div.container-app-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

section#app div.links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 26px;
}

a.btnToTop {
  z-index: 50;
  position: fixed;
  right: 100px;
  bottom: 30px;
  transition: all 0.6s;
  filter: drop-shadow(0px 0px 4px #000)
}

footer {
  background-color: #666666;
}

.footer-menu ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  padding: 35px 0px;
}

.footer-menu ul li {
  border-right: solid 1px #fff;
  display: inline-block;
}

.footer-menu ul li:last-child {
  border-right: none;
}

.footer-menu ul li a {
  color: #fff;
  text-decoration: none;
  padding: 0 18px;
}

footer .texto-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0px 30px 35px;
}

.slick-dots {
  position: static;
  bottom: unset;
  margin: 0px 0px 20px;
}