@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:wght@400;600;700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {font-family: "Roboto", sans-serif;}

/* faixa preta topo */
.faixa-topo {background: #070707;}
.faixa-topo .navbar-nav a {color: #ffffff; font-size: 20px; line-height: 1.1; font-weight: 600;}
.faixa-topo .navbar-nav a:hover {color: #ff6600;}
.faixa-topo .navbar-nav.topo-separador .nav-link {display: flex; align-items: center; padding-left: 26px; padding-right: 26px;}
.faixa-topo .navbar-nav.topo-separador .nav-link::before {content: ""; display: inline-block; width: 3px; height: 26px; border-radius: 10px; background-color: #ff6600; margin-left: -26px; margin-right: 26px;}

.faixa-topo .navbar-toggler {color: #ffffff;}
.faixa-topo .navbar-toggler svg {width: 26px; height: 26px;}

.faixa-topo .navbar-nav.topo-contatos .nav-link {padding-left: 0; padding-right: 0;}
.faixa-topo .navbar-nav.topo-contatos .nav-link img {margin-right: 5px;}

/* menu laranja topo TODO checar o background cover */
.faixa-menu {background: #ff6600;} 
.faixa-menu .navbar-toggler {color: #ffffff; border: solid 2px #ffffff;}
.faixa-menu .navbar-toggler svg {width: 26px; height: 26px;}

.btn-pedidos-online {background: transparent; border: solid 2px #ffffff; color: #ffffff; font-size: 15px; line-height: 1.0; font-weight: 600; padding: 8px 22px; border-radius: 99px; width: 100%;}
.btn-pedidos-online:hover, .btn-pedidos-online:focus, .btn-pedidos-online:active {background-color: #f86f14 !important; border-color: #ffff3c !important;}
.btn-pedidos-online img {margin-right: 10px; top: -1px; position: relative;}

.form-busca-topo {margin-left: 0px; width: 100%;}
.form-busca-topo input.form-control {background: #ffffff; border: solid 2px #ffffff; font-size: 15px; font-weight: 400; padding: 8px 14px; border-radius: 99px; padding-left: 20px;}
.form-busca-topo button.btn {border-radius: 99px; color: #ff6600; background: #ffffff; border: none; font-weight: 600; font-size: 20px; display: flex; align-items: center;}
.form-busca-topo button.btn:focus, .form-busca-topo button.btn:active {background: #ffff3c !important; color: #ff6600 !important;}
.form-busca-topo button.btn svg {width: 27px; height: 20px; top: -2px; position: relative;}
.form-busca-topo button.btn::before {content: ""; display: inline-block; width: 2px; position: relative; left: -6px; height: 25px;  border-radius: 10px; background-color: #ff6600}

.menu-principal.navbar-nav a.nav-link {background: transparent; padding-left: 22px; padding-right: 22px;}
.menu-principal.navbar-nav a.nav-link:hover {background: transparent; color: #ffff3c;}
.menu-principal.navbar-nav .nav-item > a, .menu-principal.navbar-nav .nav-link {color: #ffffff; font-size: 20px; line-height: 1.1; font-weight: 600;}
.menu-principal.navbar-nav a > img {margin-right: 2px;}

.menu-principal.navbar-nav .dropdown-toggle::after {content: ""; border:none; background: url('../images/icon-dropdown.png') no-repeat center center; width: 15px; height: 10px; position: absolute; top: 50px; left: calc(50% + 4px);}

/* fix navbar */
.navbar.w-100.w-auto {width:100% !important;}


/* faixa vantagens */
.faixa-vantagens {background: #ffffff;}
.faixa-vantagens h4 {font-size: 18px;}

.bloco-vantagens-home {color: #ff6600; padding-top: 16px; padding-bottom: 16px;}
.bloco-vantagens-home h4 {display: flex; align-items: center; line-height: 1.1; margin: 0;}
.bloco-vantagens-home h4 img {margin-right: 16px;}

/* faixa ofertas */
.faixa-ofertas {background: #ff6600; background: linear-gradient(125deg,rgba(232, 90, 0, 1) 28%, rgba(231, 131, 1, 1) 80%, rgba(232, 221, 158, 1) 100%); background: url('../images/bg-ofertas-da-semana.jpg') repeat center center; background-size: cover;}

.faixa-ofertas h3 {line-height: 1.1; color: #ffffff; font-weight: 700; font-size: 26px;}
.faixa-ofertas h6 {display: flex; align-items: center; justify-content: center; line-height: 1.1; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 20px;}
.faixa-ofertas h6 img {margin-right: 8px;}

/* fix-loop-conteudo-bgs */
.fix-loop-conteudo-bgs {padding-left: 0; padding-right: 0;}

/* loop produtos */
.bg-claro {background: #EFEFEF;}
.bg-escuro {background: #2F2F2F;}

.listagem-produtos-home h4 {font-size: 28px; line-height: 1.0; font-weight: 700; color: #f86f14;}
.listagem-produtos-home h5 {font-size: 9px; font-weight: 700; line-height: 1.2; margin-top: 10px;}
.listagem-produtos-home a {margin-bottom: 25px; display: block; color: #333333; text-decoration: none;}
.listagem-produtos-home a:hover {color: #f86f14;} 
.listagem-produtos-home a > img {border-radius: 8px;}

/* área do vídeo moto */
.listagem-videos-home a {color: #ffffff; font-size: 25px; font-weight: 700; border: solid 2px #ffffff; line-height: 1; padding: 17px 34px; text-decoration: none; border-radius: 99px; display: block; z-index: 9;}
.listagem-videos-home a:hover {color: #ffff3c; border-color: #ffff3c;}

/* fix bg video */
.video-col {position: relative; overflow: hidden; min-height: 100vw;}
.video-col iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none;}

/* fix alternativo (escalar o video) */
.video-col iframe {position: absolute; inset: 0; width: 120%; height: 120%; transform: translate(-10%, -10%);}


/* footer */
.bg-footer {background: #FF4C01 url('../images/bg-rodape-img.jpg') repeat-x center top;}

/* .bloco-blog {} estrutura antiga*/
.bloco-blog h3 {line-height: 1.1; color: #ffffff; font-weight: 700; font-size: 26px; display: flex; justify-content: center; display: flex; align-items: center; line-height: 1.1; }
.bloco-blog h3 img {max-width: 48px; margin-right: 14px;}

.bloco-blog .blog-item {margin-bottom: 30px;}

.bloco-blog .blog-item a {text-decoration: none;}

.bloco-blog .blog-item .conteudo-img-blog {margin-bottom: 20px; border-radius: 15px; background-color: #ffffff;}

.bloco-blog .blog-item .conteudo-img-blog .image-blog {border-radius: 13px; width: 100%; object-fit: cover; max-height: 172px; margin-bottom: 16px;}

.bloco-blog .blog-item .conteudo-img-blog p {
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #f86f14;
  font-weight: 700;
  font-family: "Open Sans";
  text-align: left;
  padding: 0px 25px;
}

.bloco-blog .blog-item:hover .conteudo-img-blog span {color: #f86f14}

.bloco-blog .blog-item .conteudo-img-blog span {
  font-size: 15px;
  letter-spacing: 0px;
  line-height: 22px;
  color: #3b3b3b;
  font-weight: 400;
  font-family: "Poppins";
  padding: 20px;
  text-align: left;

  padding: 0px 25px;
  text-align: left;
  width: 100%;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bloco-blog .blog-item .conteudo-img-blog .divisor {margin: 16px 26px; border: 1px solid #d3d3d3;}

.bloco-blog .blog-item .conteudo-img-blog .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 25px 20px 25px;
  width: 100%;
}

.bloco-blog .blog-item .conteudo-img-blog .footer .date,
.bloco-blog .blog-item .conteudo-img-blog .footer .ler-blog {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;

  font-size: 14px;
  line-height: 22px;
  color: #3b3b3b;
  font-weight: 400;
}

/* bloco banner e-commerce */
.bg-banner-e-commerce {background: url('../images/bg-banner-e-commerce.jpg') no-repeat center top; background-size: cover;}
.bg-banner-e-commerce .bloco-texto-banner {color: #ffffff; padding: 25px 25px 20px 25px;}
.bg-banner-e-commerce .bloco-texto-banner h4 {font-size: 30px; line-height: 1; font-weight: 700; margin-bottom: 15px;}
.bg-banner-e-commerce .bloco-texto-banner h5 {font-size: 16px; line-height: 1.2; font-weight: 400; margin-bottom: 15px;}
.bg-banner-e-commerce .bloco-cta-banner {padding: 0;}
.bg-banner-e-commerce .btn-ecommerce {background: #ffffff; border: solid 2px #ffffff; color:#FF4C01 ; font-size: 25px; line-height: 1.0; font-weight: 700; padding: 10px 20px 8px 11px; border-radius: 99px; margin-bottom: 10px;}
.bg-banner-e-commerce .btn-ecommerce:hover, .btn-ecommerce:focus, .btn-ecommerce:active {background-color: transparent !important; border-color: #ffffff !important; color: #ffffff;}
.bg-banner-e-commerce .btn-ecommerce img {margin-right: 10px; top: -1px; position: relative;}

.bg-banner-e-commerce .btn-televendas {background: transparent; border: none; font-size: 20px; line-height: 1.0; font-weight: 700; margin-bottom: 10px;}
.bg-banner-e-commerce .btn-televendas:hover, .btn-televendas:focus, .btn-televendas:active {background-color: transparent !important; border-color: #ffffff !important; color: #ffffff;}

/* blog estrutura antiga*/

.bloco-rodape h5 {color: #ffff3c; font-size: 34px; font-weight: 700;;}
.bloco-rodape h6 {color: #ffff3c; font-size: 18px; font-weight: 700;;}
.bloco-rodape p {color: #ffffff;}
.bloco-rodape .links-social-footer a {margin-right: 8px;}
.bloco-rodape .links-apps-footer a {margin-right: 15px;}

.bloco-rodape .link-rodape-contato {display: block; text-decoration: none; font-size: 25px; font-weight: 700;}
.bloco-rodape .link-rodape-contato p {margin-bottom: 0; line-height: 1.2;}
.bloco-rodape .link-rodape-contato:hover p{color: #ffff3c;}

.bloco-rodape  .link-rodape-lista {list-style: none; margin: 0; padding: 0;}
.bloco-rodape  .link-rodape-lista li a {font-size: 16px; font-weight: 700; color: #ffffff; line-height: 1.2; text-decoration: none;}
.bloco-rodape  .link-rodape-lista li a:hover {color: #ffff3c;}

/* Responsive */
@media (min-width: 768px) {
    /* TODO check faixa no mobile */
    .faixa-menu {background: url('../images/bg-faixa-topo.jpg') repeat center center; background-size: cover;}
    .faixa-vantagens h4 {font-size: 22px;}
    .bloco-vantagens-home h4:after {content: ""; display: inline-block; width: 3px; height: 42px; border-radius: 10px; background-color: #ff6600; margin-left: 26px; margin-right: 26px;}
    .bloco-vantagens-home h4:first-of-type:before {content: ""; display: inline-block; width: 3px; height: 42px; border-radius: 10px; background-color: #ff6600; margin-left: 26px; margin-right: 26px;}

    .faixa-ofertas h3 {font-size: 44px;}
    .faixa-ofertas h6 {font-size: 26px;}
    .listagem-produtos-home h4 {font-size: 38px;}
    .listagem-videos-home a {font-size: 34px;}

    .fix-loop-conteudo-bgs {padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5);}

    .video-col {min-height: 300px;}
    .bloco-blog h3 {font-size: 44px;}
    .bloco-blog h3 img {max-width: 70px;}

    .bg-banner-e-commerce .bloco-texto-banner {padding: 35px 5px 30px 60px;}
    .bg-banner-e-commerce .bloco-cta-banner {padding: 35px 50px 30px 1px;}
    .bg-banner-e-commerce .bloco-texto-banner h4 {font-size: 38px;}
}
@media (min-width: 992px) {
    .faixa-topo {padding-top: 4px; padding-bottom: 4px;}
    .faixa-topo .navbar-nav a {font-size: 13px;}
    .faixa-topo .navbar-nav.topo-separador .nav-link:first-of-type {padding-left: 0px;}
    .faixa-topo .navbar-nav.topo-separador .nav-link:first-of-type:before {display: none;}

    .faixa-topo .navbar-nav.topo-contatos .nav-link {padding-left: 25px; padding-right: 25px;}
    .faixa-topo .navbar-nav.topo-contatos .nav-link:last-of-type {padding-right: 0;}

    .menu-principal.navbar-nav {margin-right: 20px; margin-left: 20px;}

    .form-busca-topo {margin-left: 20px; width: auto;}
    .btn-pedidos-online {width: auto;}
    .navbar.w-100.w-auto {width:auto !important;}
    
    .bloco-vantagens-home {padding-left: 50px; padding-right: 50px;}
    
    .faixa-ofertas h3 {font-size: 54px;}
    .bloco-blog h3 {font-size: 54px;}
    .bloco-blog h3 img {max-width: 100%;}
}
@media (min-width: 1200px) {
    .faixa-topo .navbar-nav a {font-size: 18px;}
    .faixa-topo .navbar-nav.topo-separador .nav-link:first-of-type {padding-left: 0px;}
    .faixa-topo .navbar-nav.topo-separador .nav-link:first-of-type:before {display: none;}

    .faixa-topo .navbar-nav.topo-contatos .nav-link {padding-left: 25px; padding-right: 25px;}
    .faixa-topo .navbar-nav.topo-contatos .nav-link:last-of-type {padding-right: 0;}

    .faixa-ofertas h3 {font-size: 74px;}
    .bloco-blog h3 {font-size: 74px;}
}

@media (min-width: 1400px) {
    .faixa-topo .navbar-nav a {font-size: 20px;}
    .faixa-topo .navbar-nav.topo-separador .nav-link:first-of-type {padding-left: 0px;}
    .faixa-topo .navbar-nav.topo-separador .nav-link:first-of-type:before {display: none;}

    .faixa-topo .navbar-nav.topo-contatos .nav-link {padding-left: 25px; padding-right: 25px;}
    .faixa-topo .navbar-nav.topo-contatos .nav-link:last-of-type {padding-right: 0;}

    .form-busca-topo {margin-left: 20px;}
}

/* fix recaptcha mobile */
@media screen and (max-height: 575px){
#rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
}