@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:banner-principal-interna0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
html {
  scroll-behavior: smooth;
}
* {    margin: 0;    padding: 0;font-family: 'Roboto', sans-serif;    box-sizing: border-box;  }
p{font-size: 18px; line-height: 140%; font-weight: 300; }
h3{font-weight: 500;}
.alinha{ max-width: 1280px;   margin: 0 auto;   width: 100%;}
header {    background-color: #1F1F1F  ;    display: flex;    justify-content:space-around;    align-items: center;    padding: 10px 20px;    position: relative;}
.logo img {    height: 60px;}
.menu-items {    display: flex;    align-items: center;    gap: 10px;z-index: 9999;}
.menu-items a, .dropbtn {    color: white;    text-decoration: none;    padding: 14px 16px;    background: none;    border: none;    cursor: pointer;    font-size: 16px;    text-align: left;}
.menu-items a:hover, .dropbtn:hover {    background-color: red;}
.menu-items.show {
  display: flex;
}
.dropdown {    position: relative;}
.dropdown-content {    display: none;    position: absolute;    background-color: #f9f9f9;    min-width: 200px;    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);    z-index: 1;    top: 100%;}
.dropdown-content a {    color: #333;    padding: 12px 16px;    text-decoration: none;    display: block;}
.dropdown-content a:hover {    background-color: red;    color: #fff;}
.dropdown:hover .dropdown-content {    display: block;}
.menu-toggle {    display: none;    flex-direction: column;    cursor: pointer;}
.menu-toggle div {    width: 25px;    height: 3px;    background-color: white;    margin: 4px 0;}
.banner-principal{position: relative; display: flex; justify-content: flex-start; align-items: center;  width: 100%; height: 550px; background-image: url("../imagens/bnr-p.jpg"); background-position: right center;background-size: cover; color: #fff; }	
.alinhaBnrs{  position: relative; width: 100%;  max-width: 1280px; margin: auto; top: 0px;}
.alinhaBnrs > div{ width: 100%; text-align: center;  max-width: 100%; padding: 20px;}
.alinhaBnrs h1{ font-size: 1.6em; margin-top: 0; color: red }


.frase{background-color: red; display: flex; flex-direction: column; padding:40px 20px 0; align-items: center; justify-content: center;color: #fff;}
.frase h2{font-family: 'Roboto', sans-serif;  font-size: 48px;   font-weight: 300;  font-style: normal; text-align: center;color: #fff;}
.frase p{ text-align: center;color: #fff;}
.frase h3{font-family: 'Roboto', sans-serif;  font-size: 28px;   font-weight: 300;  font-style: normal; text-align: center;color: #fff;}

.rodape{ display: flex; flex-direction: column; justify-content: space-around;   min-height: 350px;padding: 60px 20px; color: #fff; }
.rodape > div {width:96%; margin: 2%;}
.rodape > div ul li { padding: 6px 0;}
.rodape > div h3 { padding: 0px 0 10px; font-size: 2em;}

footer {  background-color: #1F1F1F  ; padding: 20px 20px;}
footer h3 { color: red;}
footer a:link{text-decoration:none; position: relative;   color: red; text-transform: uppercase}
footer a:visited{text-decoration:none; position: relative;color: #fff;}
footer a:hover{ text-decoration:none;position: relative;   color: red;}
footer a:active{text-decoration:none; position: relative; color: #fff;}
footer ul{ list-style: none}
.direitos{ text-align: center; padding: 10px;background-color: red;}

.midias {  display: flex;  flex-direction: row;  gap: 10px;  margin-top: 0px;  flex-wrap: nowrap;   justify-content: flex-start;	align-items: center;}
.midias li {  list-style: none; width: 50px !important; height: 50px !important; overflow: hidden;}

.rodape{ display: flex; flex-direction: column; justify-content: space-around;   min-height: 350px;padding: 40px 20px; color: #fff; }
.rodape > div {width:96%; margin: 2%;}
.rodape > div ul{  display: flex; flex-direction: row; flex-wrap: wrap;}
.rodape > div ul li { padding: 6px 0; width: 220px; margin:0 10px}
.rodape > div h3 { padding: 0px 0 10px; font-size: 2em;}
a.verFooter:link{ position: relative;   text-align: center;  color: #fff; text-transform: uppercase;  text-decoration: none; font-size: 14px;}
a.verFooter:visited{ position: relative;color: #fff;}
a.verFooter:hover{ position: relative;   color: red;}
a.verFooter:active{ position: relative; color: #fff;}

a.lerMais:link{ position: relative;   width: 100%; height: 50px; text-align: center; padding: 10px 30px; border-radius: 30px; color: #fff; text-transform: uppercase; background-color: #003584; top: 20px; text-decoration: none;  }
a.lerMais:visited{ position: relative;color: #fff;}
a.lerMais:hover{ position: relative;   color: red;}
a.lerMais:active{ position: relative; color: #fff;}

.quem-home{ display: flex; flex-direction: column; align-items: center; padding:60px 20px;}
.quem-home > div{ width: 100%;  padding:0px 20px;}
.quem-home > div > div > img{  width: 100%;height: auto; display: block}
.quem-home ul{ margin: 20px 0;}
.quem-home ul li{display: flex; align-items: center;}
.quem-home ul li img{margin-right: 10px;}
.quem-home h2{font-size: 2em;color: red;}

.box-home{ background-color: #f5f4f0;padding:40px 20px 100px; text-align: center; border-top: 50px solid #1F1F1F;}
.box-home ul {list-style: none;display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap;}
.box-home h2 {font-size: 2em; color: red;text-transform: uppercase; max-width: 650px; margin:30px auto}
.box-home ul li{  background-color: #fff; width: 96%; margin:20px  2%; text-align: left; padding-bottom: 30px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-radius:0 0 20px 20px; overflow: hidden;}
.box-home ul li h3{  padding: 30px 20px 0;}
.box-home ul li p{  padding: 10px 20px 10px;}
.box-home ul li div > img{   width: 100%;height: auto; display: block}
.box-home ul li a{display: flex; align-items: center; justify-content: flex-start; margin:0 15px;}
.box-home > p{ max-width: 900px; margin: auto}

.box-interna{ background-color: #f5f4f0;padding:40px 20px 100px; text-align: center}
.box-interna ul {list-style: none;display: flex; flex-direction: ro; align-items: center; justify-content: center; flex-wrap: wrap;}
.box-interna h2 {font-size: 2em; color: red;text-transform: uppercase; max-width: 650px; margin:30px auto}
.box-interna ul li{  background-color: #fff; width: 96%; margin:20px  2%; text-align: left; padding-bottom: 30px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-radius:0 0 20px 20px; overflow: hidden;}
.box-interna ul li h3{  padding: 30px 20px 0;}
.box-interna ul li p{  padding: 10px 20px 10px;}
.box-interna ul li div > img{   width: 100%;height: auto; display: block}
.box-interna ul li a{display: flex; align-items: center; justify-content: flex-start; margin:0 15px;}
.box-interna > p{ max-width: 900px; margin: auto}

a.vejaMais:link{ position: relative;   text-align: center; color: #fff; background-color: #000; text-transform: uppercase;  text-decoration: none; padding: 5px 10px; width: 120px; font-size: 14px;}
a.vejaMais:visited{ position: relative;color: #fff;}
a.vejaMais:hover{ position: relative;   color: #fff;background-color: red;}
a.vejaMais:active{ position: relative; color: #fff;}

a.btMais:link{ position: relative;   text-align: center; color: #fff; background-color: red; text-transform: uppercase;  text-decoration: none; padding: 15px 15px; width: 120px; font-size: 14px; top: 30px;  }
a.btMais:visited{ position: relative;color: #fff;}
a.btMais:hover{ position: relative;   color: #fff; background-color: #000; }
a.btMais:active{ position: relative; color: #fff;}

a.btWhats { position:relative;  color:#000; background-color:#25d366; text-transform:uppercase; text-decoration:none; padding:15px 15px 15px 50px; width:100%; max-width:320px;  font-size:14px;  top:30px;  display:flex;  align-items:center;  justify-content:center;  text-align:center;  font-weight:bold;  letter-spacing:2px; background-image: url("../imagens/whatsapp-flp-aluminio-b.png");  background-repeat:no-repeat; background-size:30px 30px; background-position:10px center; border-radius:5px; }
a.btWhats:hover{ background-color:#000;  color:#fff; background-image:url("../imagens/whatsapp-flp-aluminio.png"); }

.alinha{ max-width:1280px; margin:0 auto; width:100%;}

.frase{background-color: red; color: #57004a; display: flex; flex-direction: column; padding:60px 20px 60px; align-items: center; justify-content: center}
.frase h2{font-family: 'Roboto', sans-serif;  font-size: 28px;   font-weight: 600;  font-style: normal; text-align: center}
.frase p{ text-align: center}

.whats{position: fixed; right: 20px; bottom: 20px; background-color: #25d366; border-radius: 50%; padding: 10px;}
a.linkroda:link{ position: relative;   text-align: center; color: #57004a;   text-transform: uppercase;  text-decoration: none; font-size: 14px; }
a.linkroda:visited{ position: relative;color: #57004a;}
a.linkroda:hover{ position: relative;   color: #000;   }
a.linkroda:active{ position: relative; color: #57004a;}
a.telefone-rodape:link{ position: relative;   color: red; font-size: 36px; padding: 20px 0;display: block; text-align: left}
a.telefone-rodape:visited{ position: relative;color: red;}
a.telefone-rodape:hover{ position: relative;   color: #fff;}
a.telefone-rodape:active{ position: relative; color: red;}

.resi ul{ position: relative; width: 100%; max-width: 1280px; margin: auto; display: flex; flex-direction: column; color: #fff; margin-top: 0px; font-size: 1em;  list-style: none}
.resi ul h3{ font-size: 1.8em;text-transform: uppercase; margin-bottom: 10px }
.resi ul li:nth-child(1){ background-color: #1F1F1F; padding: 40px 40px;  }
.resi ul li:nth-child(2){ background-color: red; padding: 40px 40px;  }
.resi ul li{  width: 100%; }

.garantia{padding:40px 20px 40px;display: flex; flex-direction: column; background-color: #f5f4f0;}
.garantia > div{display: flex; flex-direction: column; }
.garantia > div > div{ width: 100%; max-width: 1280px; margin: auto}
.garantia p{ margin-bottom: 10px; font-size: 16px;}
.garantia h2{font-size: 2.5em; margin-bottom: 20px;}
.garantia > div img{ width: 100%; height: auto; display: block}

.box-prod{display: flex; flex-direction: column; background-color: #fff; padding-bottom: 60px;}
.box-prod > div{width: 100%;padding:0px 20px 20px;}
.box-prod > div:nth-child(1) img{width: 100%; height: auto; display: block}
.box-prod > div:nth-child(1) {display: flex; align-items: center; justify-content: center}
.box-prod > div:nth-child(2) p{margin: 10px 0;}

.banner-interna{position: relative; display: flex; justify-content: flex-start; align-items: flex-end;  width: 100%; height: 250px; background-image: url("../imagens/bnr.jpg"); background-position: right center;background-size: cover; color: #fff; }	
.banner-interna h1{ color: #fff;font-size: 2em; text-align: left; padding: 20px; background-color: red; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);margin: 10px; }
.box-prod h2 {font-size: 2em; color: red;text-transform: uppercase; max-width: 650px; margin:0px 0;padding-top: 0px;}
.prod{ list-style: none;}
.prod li{ display: flex; align-items: center}

.subMenu{ display: flex; list-style: none; color: #888; border-bottom: solid thin #ccc;}
.subMenu li{ padding: 20px 5px;}

.orca{ background-color: #25d366; padding:10px 20px; display: none}
.orca{ border-radius: 15px; color: #000;}

.alinhaLado{display: flex; padding-bottom: 50px;}
.alinhaLado article{ width: 29%; margin: 2%; padding: 10px; background-color: #f5f4f0; border-radius: 20px;}
.alinhaLado article img{ width: 100%; height: auto;}
.txtBox{padding: 20px 20px 40px;}
.txtBox h3{margin-bottom: 15px;}

.artigos{}
.artigos article h2{margin: 20px 0 5px;}
.artigos article h3{margin: 20px 0 5px;}
.artigos article h4{margin: 20px 0 5px;}
.artigos article p{ margin: 5px 0 20px;}
.artigos article ul{ list-style: none;}
.artigos article ul li{ margin-bottom: 8px;}

    .accordion {
      width: 100%;
      max-width: 1200px;
      margin: 20px auto;
      border: 1px solid #ccc;
      border-radius: 6px;
      overflow: hidden;
      font-family: sans-serif;
    }

    .accordion-item {
      border-bottom: 1px solid #ddd;
    }

    .accordion-button {
      background-color: #f2f2f2;
      color: #333;
      padding: 15px;
      text-align: left;
      width: 100%;
      border: none;
      outline: none;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
      position: relative;
    }

    .accordion-button::after {
      content: "▼";
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      transition: transform 0.3s;
    }

    .accordion-button.active::after {
      transform: translateY(-50%) rotate(180deg); /* seta vira para cima */
    }

    .accordion-button:hover {
      background-color: #e0e0e0;
    }

    .accordion-content {
      padding: 0 15px;
      display: none;
      background-color: #fff;
    }

    .accordion-content p {
      margin: 15px 0;
    }

    .active + .accordion-content {
      display: block;
    }

.artigosHome{display: flex; flex-direction: row; padding: 40px 20px;}
.artigosHome div{ width: 29%; margin: 2%; padding-bottom: 30px; border: solid thin #eee;}
.artigosHome div h3{  margin: 20px 15px;}
.artigosHome div img{width: 100%; height: auto; display: block}

/* Mobile */
@media (max-width: 768px) {
.menu-items {display: none;position: absolute;top:80px;right: 0;left: 0;background-color: #fff;flex-direction: column;width: 100%;padding-bottom: 20px;}
.menu-items a, .dropbtn { text-align:left; padding: 12px 20px; width:100%;  color:#000;}
.dropdown { width: 100%;}
.dropdown-content {position: static; box-shadow:none; background-color:#fff;}
.dropdown-content a { color:#000; padding-left: 40px;}
.dropdown-content a:hover { background-color: red;}
.menu-items.show { display:flex;}
.menu-toggle { display:flex;}
	
}

/* Tablets Portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {}
/* Tablets Landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

/* Desktop */
@media (min-width: 1025px) {
	nav ul{  flex-direction: row;  }
	header div { flex-direction: row;  }
    header nav ul li a:link{padding: 30px 20px;   }
    .box-home ul {flex-direction: row; }
    .box-home ul li{   width: 21%; margin:  2%; }
	.box-home h2 {font-size: 3em; }
    .box-home{ padding:40px 20px 140px;}

	.quem-home > div{ width: 50%;  padding:0px 20px;}
	.quem-home{  flex-direction: row;   padding:60px 20px;}
    .resi ul{   flex-direction: row; margin-top: -60px; }
    .resi ul li{  width: 50%; }
    .garantia > div{  flex-direction: row;}
    .rodape{  flex-direction: row;   }
	.rodape > div {width:25%; margin: 2%;}
	.rodape > div:nth-child(2) {width:42%; margin: 2%;}
    .alinhaBnrs{  top: -50px;}
    .alinhaBnrs h1{ font-size: 2.2em; margin:0 0 10px;;   }
    .alinhaBnrs h2{ font-size: 1.8em; margin: 0 0 10px; color: red   }
    .alinhaBnrs > div{ width: 100%; text-align: left;  max-width: 80%;}
	.banner-principal{ background-image: url("../imagens/bnr2.jpg");}	
	.box-prod{ flex-direction: row; padding-bottom: 60px;}
	.box-prod > div{width: 50%;}
    .banner-interna h1{ font-size: 3em;  }
	.box-prod h2 {font-size: 2em;  margin:30px 0;padding-top: 40px;}
    .box-prod > div{ padding:30px 20px 20px;}

	.box-interna ul {flex-direction: row; }
    .box-interna ul li{   width: 21%; margin:  2%; }
	.box-interna h2 {font-size: 3em; }
    .box-interna{ padding:80px 20px 140px;}
    .orca{display: block}

	
}