/* ==========================================================================
   Maqvel - ajustes proprios (nao editar style.css do template)
   ========================================================================== */

/* PROBLEMA: o painel .gallery_hover fica em position:absolute cobrindo o card
   inteiro. Com opacity:0 ele continua capturando cliques, entao a foto (que
   esta por baixo, dentro do <a>) nunca recebia o clique.
   SOLUCAO: o painel deixa de interceptar o mouse; so os controles dentro dele
   voltam a ser clicaveis. O efeito de hover continua igual, porque quem
   dispara e o :hover do elemento PAI. */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
  pointer-events: none;
}

.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_button,
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover a {
  pointer-events: auto;
}

/* o link da foto ocupa todo o card, para o clique valer na area inteira */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a {
  display: block;
}

/* deixa claro que a foto e clicavel */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a,
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a img {
  cursor: pointer;
}

/* ==========================================================================
   06/08/2026 - painel de hover dos veiculos (home)
   ========================================================================== */

/* PROBLEMA: o .gallery_hover "centralizava" o conteudo com
   padding-top: calc(50% - 70px), que depende da LARGURA do card. Como a altura
   do card acompanha a proporcao da foto, nos cards mais baixos o conteudo
   estourava a caixa e o botao "Saiba mais" saia cortado (overflow:hidden).
   SOLUCAO: centralizar de verdade com flexbox. */
@media (min-width: 600px) {
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
  }

  /* o template reservava 30px embaixo do titulo; com o flexbox isso vira
     espaco perdido que empurra o botao para fora da caixa */
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover h4 {
    padding-bottom: 8px;
  }

  /* sem isso o botao esticaria de ponta a ponta (padrao do flex-item em coluna) */
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_button {
    align-self: center;
  }
}

/* Cards estreitos (600-991px): o card fica com ~190-240px de altura e o texto
   quebra em mais linhas. Aqui tudo encolhe e a descricao fica limitada a
   2 linhas. Os !important sao para vencer os style="" que estao no HTML. */
@media (min-width: 600px) and (max-width: 991px) {
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
    padding: 5px 0;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover h4 {
    font-size: 11px;
    line-height: 1.2;
    padding-bottom: 4px;
    margin: 0 6px 3px !important;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_description {
    font-size: 10px;
    line-height: 1.15 !important;
    margin: 0 6px 3px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul {
    margin: 0 6px 3px !important;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li {
    font-size: 10px;
    line-height: 1.2;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li strong {
    font-size: 1.1em !important;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_button {
    font-size: 10px;
    margin: 3px 6px 0 !important;
    padding: 3px 8px !important;
  }
}

/* 600-767px: nao cabe a descricao; sobra o essencial (titulo, preco, botao) */
@media (min-width: 600px) and (max-width: 767px) {
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_description {
    display: none;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li {
    font-size: 9px;
  }
}

/* ==========================================================================
   13/08/2026 - no celular o card precisa MOSTRAR o nome do veiculo
   ==========================================================================
   ANTES: abaixo de 600px o painel era escondido (o template ja fazia isso
   abaixo de 500px). Como ele so aparece no :hover, e no celular nao existe
   hover, o visitante via 14 fotos sem nome e sem preco.
   AGORA: abaixo de 600px o painel deixa de ser overlay e vira uma faixa fixa
   EMBAIXO da foto, com nome e preco sempre visiveis. A descricao longa e o
   botao continuam escondidos - a foto inteira ja e o link. */
@media (max-width: 599px) {
  /* 2 cards por linha em vez de 3: com 3 sobram ~110px de largura e o nome
     fica ilegivel. O .grid-sizer TEM que mudar junto - e ele que o isotope
     usa como columnWidth; se ficar em 33% as colunas se sobrepoem. */
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities,
  .our_services_area .portfolio_inner_area .portfolio_item .grid-sizer {
    width: 50%;
  }

  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
    display: block;
    position: static;          /* deixa de cobrir a foto */
    opacity: 1;                /* o template usa opacity:0 ate o hover */
    background-color: #20242c; /* a secao e #2e3841; a faixa fica um tom abaixo */
    padding: 8px 0 10px;
    text-align: left;
    overflow: visible;
    pointer-events: auto;
  }

  /* o template desloca o titulo (left:-65%) e o preco (right:-67%) para eles
     deslizarem no hover; parado, isso jogaria os dois para fora da faixa */
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover h4 {
    left: 0;
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    padding-bottom: 0;
    margin: 0 8px 4px !important;
  }

  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul {
    right: 0;
    margin: 0 8px !important;
  }

  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li {
    display: block;
    padding-left: 0;
    color: #fff;
    font-size: 10px;
    line-height: 1.35;
  }

  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li strong {
    color: #f6b60b;
    font-size: 1.3em;
  }

  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_description,
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_button {
    display: none;
  }
}

/* ==========================================================================
   13/08/2026 - slider proprio, com <picture>
   ==========================================================================
   Saiu o camera.js. Ele usava UMA imagem por slide, entao no celular a foto
   16:9 chegava cortada nas laterais, e a legenda em HTML (que ele embrulha num
   div proprio) caia por cima do texto gravado na foto.
   Agora o navegador escolhe o arquivo pela largura da tela - 3:4 no celular,
   16:9 no computador - e a legenda e uma faixa na BASE, sem disputar espaco
   com o texto da imagem. */
.slider_area {
  background: #14181f;
  overflow: hidden;
}

.maq_slider {
  position: relative;
}

.maq_slide {
  display: none;
}

.maq_slide.is-ativo {
  display: block;
  animation: maq_aparece 0.45s ease;
}

@keyframes maq_aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* SEM CORTE NENHUM: a foto aparece inteira, na proporcao do arquivo.
   Tinha um `max-height:78vh` aqui com `object-position:50% 22%`. Eu conferi que
   o TEXTO sobrevivia ao corte, mas esqueci do SELO - ele fica ainda mais acima
   (a ~4% da altura, contra ~10% do texto) e era o primeiro a ser cortado em
   tela baixa. Estas imagens tem conteudo no topo (texto + selo) e o veiculo
   embaixo, ou seja, nao sobra o que cortar em cima nem embaixo.
   No lugar do corte, a largura para de crescer em 1720px - assim a altura do
   banner tem teto (968px) sem precisar comer pedaco de foto. */
.maq_slider {
  max-width: 1720px;
  margin: 0 auto;
}

.maq_slide picture {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  /* A legenda (categoria + marcas) fica na base da foto. Se o banner passar da
     dobra, ela nao aparece sem rolar - foi o que aconteceu numa tela 1366x768.
     Teto = altura visivel menos a barra de contato (48) e o cabecalho (74).
     O corte que isso possa gerar sai TODO por baixo (object-position 50% 0),
     onde so tem chao/asfalto - o texto e o selo, que ficam no alto, nunca
     sao tocados. */
  max-height: calc(100vh - 130px);
}

.maq_slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;   /* se um dia sobrar corte, que seja por baixo */
  display: block;
}

.maq_legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 20px 40px;
  text-align: center;
  background: linear-gradient(to top, rgba(12, 15, 20, 0.9), rgba(12, 15, 20, 0.55) 55%, rgba(12, 15, 20, 0));
}

.maq_legenda .maq_cat {
  margin: 0 0 6px;
  color: #f6b60b;
  font: 400 24px "Oswald", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.maq_legenda .maq_marcas {
  margin: 0;
  color: #fff;
  font: 400 15px/1.45 "Roboto", sans-serif;
  text-transform: uppercase;
}

.maq_legenda .maq_extra {
  margin: 8px auto 0;
  max-width: 780px;
  color: rgba(255, 255, 255, 0.82);
  font: 400 12px/1.5 "Roboto", sans-serif;
  text-transform: uppercase;
}

.maq_seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  padding: 0;
  border: 0;
  background: rgba(12, 15, 20, 0.45);
  color: #f6b60b;
  font-size: 24px;
  line-height: 64px;
  cursor: pointer;
  transition: background 200ms linear, color 200ms linear;
}

.maq_seta:hover,
.maq_seta:focus {
  background: #f6b60b;
  color: #14181f;
  outline: none;
}

.maq_ant  { left: 0; }
.maq_prox { right: 0; }

.maq_pontos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
}

.maq_ponto {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.maq_ponto.is-ativo {
  background: #f6b60b;
}

@media (max-width: 767px) {
  /* aqui entra o arquivo 3:4 - a proporcao tem que acompanhar, senao o
     navegador baixa a foto certa e mostra ela cortada do mesmo jeito */
  .maq_slide picture {
    aspect-ratio: 3 / 4;
  }

  .maq_legenda {
    padding: 46px 14px 34px;
  }

  .maq_legenda .maq_cat    { font-size: 19px; }
  .maq_legenda .maq_marcas { font-size: 12px; line-height: 1.4; }
  .maq_legenda .maq_extra  { font-size: 10.5px; margin-top: 6px; }

  .maq_seta {
    width: 34px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
  }
}

/* ==========================================================================
   13/08/2026 - cabecalho mais baixo e logo menor (so no computador)
   ==========================================================================
   A altura do cabecalho nao vem de nenhuma propriedade `height`: vem do
   `line-height: 100px` dos links do menu (regra `font: 700 14px/100px`) somado
   ao `padding-top: 19px` da marca. Mexer so no logo nao encolhe nada - tem que
   baixar o line-height junto.
   O logo tambem foi 30px para a esquerda: o `.navbar-brand` ja nasce com
   `margin-left: -15px` (Bootstrap, para anular o padding do container); -45px
   o tira um pouco para fora da coluna. O menu continua onde estava.
   Abaixo de 992px o Bootstrap empilha o menu e o cabecalho e outro - por isso
   nada disso vale no celular. */
@media (min-width: 992px) {
  .header_aera .navbar-collapse .navbar-nav.navbar-right li a {
    line-height: 74px;
  }

  .header_aera .navbar-header .navbar-brand {
    padding: 8px 15px 7px;
    margin-left: -45px;
    height: auto;
  }

  .header_aera .navbar-header .navbar-brand img {
    width: 140px;
    height: auto;
  }

  #main_navbar {
    min-height: 74px;
  }
}

/* ==========================================================================
   08/08/2026 - H1 da home
   ==========================================================================
   A home nao tinha nenhum H1 (o template so usava h2/h3). O titulo da secao
   de veiculos passou a ser o H1 da pagina: "Caminhoes e maquinas 0 km a venda".
   As regras abaixo replicam exatamente o que o template aplicava ao h2 dentro
   de .tittle, para que o visual continue igual ao das outras secoes. */
.tittle h1 {
  font: 400 24px "Oswald", sans-serif;
  color: #222222;
  padding-top: 90px;
  position: relative;
}

.tittle h1:after {
  content: "";
  position: absolute;
  background: #f6b60b;
  height: 5px;
  width: 60px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -30px;
}

/* a secao de veiculos tem fundo escuro; o texto do titulo e branco */
.our_services_area .tittle h1 {
  color: #fff;
}

/* As 12 fotos originais dos cards sao 1080x1080 (quadradas) e rendem cards de
   mesma altura. As fotos do Atego e do 560R vieram do anuncio, com outra
   proporcao, e quebravam o alinhamento da grade (500px e 339px contra 380px).
   Forcar 1:1 com object-fit nao altera nada nas quadradas e regulariza as novas. */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* ==========================================================================
   08/08/2026 - links de consorcio no pre-rodape
   ==========================================================================
   O template pinta link de rodape com o azul padrao do Bootstrap (#337ab7),
   que destoa da marca. Estes dois links usam o laranja da Maqvel - o mesmo
   #f6b60b ja aplicado nos destaques do site e no credito do rodape. */
.footer_area .footer_about.quick .my_address a {
  color: #f6b60b;
}

.footer_area .footer_about.quick .my_address a:hover,
.footer_area .footer_about.quick .my_address a:focus {
  color: #fff;
  text-decoration: underline;
}