/* Customizacoes JSDB - identidade visual Instalar One */
:root {
  --tl-color-theme-primary: #F15922;
  --tl-color-heading-primary: #3F3E40;
}

/* Remove o capitalize automatico do template - texto exibido como foi digitado */
.section-heading .section-title,
.tl-primary-btn,
.video-content .video-title,
.title,
.category {
  text-transform: none;
}

/* "Instalar One" e maior que o "antra" original (5 letras) - reduz a marca d'agua do rodape
   para caber em uma linha e escala o espaco reservado abaixo do copyright na mesma proporcao,
   pra manter a mesma folga visual que o template original tem com "antra" */
.footer-section {
  padding-bottom: 198px;
}
.footer-text {
  bottom: -36px;
}
.footer-text span {
  font-size: 240px;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .footer-text span { font-size: 200px; }
}
@media only screen and (max-width: 992px) {
  .footer-section { padding-bottom: 125px; }
  .footer-text span { font-size: 150px; }
}
@media only screen and (max-width: 767px) {
  .footer-section { padding-bottom: 50px; }
  .footer-text { bottom: 0; }
  .footer-text span { font-size: 40px; }
}

/* footer-shade tinha altura fixa de 550px, calibrada pro padding-bottom original (395px).
   Com o padding-bottom reduzido, a sombra parava antes do fim do rodape e deixava a imagem
   de fundo sem tratamento na parte de baixo - agora acompanha 100% da altura do rodape. */
.footer-shade {
  height: 100%;
}

/* Margem entre o email e o endereco, e entre o endereco e as redes sociais, na 4a coluna do
   rodape - mesma margem que ja usamos entre o logo e a descricao na 1a coluna
   (.widget-header{margin-bottom:30px}) */
.footer-address p,
.footer-address .social-list {
  margin-top: 30px;
}

/* footer-address .social-list nao tinha estilo proprio no template (era uma lista de texto) -
   estiliza como icones simples, no mesmo tom da sidebar (side-menu-social) */
.footer-address .social-list {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-address .social-list a {
  font-size: 18px;
  color: var(--tl-color-common-white);
}
.footer-address .social-list a:hover {
  color: var(--tl-color-theme-primary);
}
/* O template desenha um tracinho separador entre itens da .social-list (:before) -
   sem sentido aqui, ja que os itens agora sao icones lado a lado */
.footer-address .social-list li:not(:last-of-type):before {
  content: none;
}

/* Site estatico - trocamos a galeria de 6 miniaturas da sidebar por uma imagem so,
   ocupando o mesmo espaco (grid de 3 colunas / 2 linhas, 130px cada, gap 10px = 410x270) */
.side-menu-gallary-single {
  grid-template-columns: 1fr;
}
.side-menu-gallary-single .side-menu-gallary-item {
  width: 100%;
  height: 270px;
}

/* Galeria da pagina de projeto (projetos-ver) - reaproveita o grid da gallary-1.html do
   template, mas com 4 colunas em vez de 5, pra ficar melhor no mobile */
.gallary-item-wrap-4 {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
}
@media only screen and (max-width: 992px) {
  .gallary-item-wrap-4 { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 576px) {
  .gallary-item-wrap-4 { grid-template-columns: 1fr; }
}

/* Pagina de solucao (solucoes-ver) - mais espaco antes de "Diferenciais Tecnicos",
   igual pedido do Jeferson, sem mexer no espacamento padrao dos outros titulos */
.service-details-title-gap {
  margin-top: 60px;
}

/* Remove a linha (border-top do primeiro item do accordion) que ficava colada
   embaixo do titulo "Perguntas Frequentes" */
.service-faq .faq-accordion .accordion-item:first-child .accordion-button {
  border-top: none;
}

/* Pagina Sobre - numero do contador (20 anos) no tamanho original do template (360px)
   estourava a largura da coluna de texto e cortava o "0" a direita - reduz o tamanho
   em todos os breakpoints, mantendo a proporcao do efeito do template */
.about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
  font-size: 260px;
  margin-top: -90px;
}
@media (max-width: 1399px) {
  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
    font-size: 190px;
    margin-top: -60px;
  }
}
@media (max-width: 1199px) {
  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
    font-size: 150px;
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
    font-size: 100px;
  }
}
@media only screen and (max-width: 480px) {
  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
    font-size: 80px;
  }
}

/* O texto "Anos de experiencia do grupo" tinha margin-top negativo no template (calibrado
   pro numero gigante de 360px) - com o numero reduzido, isso fazia o texto sobrepor o "20".
   Troca por um espaco positivo de 35px entre o numero e o texto. */
.about-wrap-2 .about-content-left .about-counter-wrap .counter-content p {
  margin-top: 17px;
}

/* Pagina Sobre - dobra Depoimentos (unica com bg-white, a da index usa tl-bg-color) -
   remove margin-bottom, so nessa pagina */
.testimonial-section-2.bg-white {
  margin-bottom: 0;
}

/* Cursor customizado nos cards de Solucoes e Projetos (.antra-hover-view) -
   texto "View" do template traduzido para "Ver +" */
.mt-cursor-view:after {
  content: "Ver +";
}

/* Dobra Solucoes (Home) - a foto virou link (<a>) por cima da imagem. Sem essa
   regra o <a> nao herda a altura de 350px do .service-thumb (percentual de altura
   so funciona com pai com altura definida), entao a imagem parava de cortar igual
   e sobrava um espaco diferente por card, dependendo da proporcao de cada foto. */
.service-item-2 .service-thumb > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Thumbs do hero (Home) - mesmo caso acima: a foto virou link, precisa herdar
   100% da altura do .slider-thumb pra manter o corte original. */
.slider-thumb > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Galerias de miniaturas (paginas de detalhe de projeto/solucao) - o template usava
   altura fixa de 400px com largura variavel pela coluna do grid, o que deixava as
   miniaturas com formatos diferentes. Forca proporcao quadrada (referencia: 700x700,
   tamanho do placeholder original), mantendo o object-fit: cover ja aplicado no
   template para cada miniatura cortar igual, sem distorcer. */
.gallary-item-wrap-4 .gallary-item-inner a {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Galeria das paginas de solucao com poucas fotos (WPC, Retrofit) - 2 colunas em
   vez de 4, pra cada foto ficar maior e mais visivel. */
.gallary-item-wrap-2 {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 60px;
}
@media only screen and (max-width: 576px) {
  .gallary-item-wrap-2 { grid-template-columns: 1fr; }
}
.gallary-item-wrap-2 .gallary-item-inner a {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Galeria das paginas de solucao com mais fotos (Paineis Isotermicos, Obras Publicas
   e Privadas) - 3 colunas, meio termo entre visibilidade e quantidade de fotos. */
.gallary-item-wrap-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
}
@media only screen and (max-width: 768px) {
  .gallary-item-wrap-3 { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 576px) {
  .gallary-item-wrap-3 { grid-template-columns: 1fr; }
}
.gallary-item-wrap-3 .gallary-item-inner a {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Lightbox (venobox) das galerias de fotos - o template trava a largura da imagem
   ampliada em 600px fixos, em duas regras (.vbox-grab .vbox-child e .vbox-grab
   .vbox-child img), aplicadas pelo proprio plugin sempre que a galeria tem mais
   de uma foto. Isso fazia toda foto abrir pequena no lightbox, mesmo com
   resolucao maior. Restaura o width:100% que e o padrao do proprio plugin
   (venobox.min.css usa .vbox-container img{width:100%;height:100%}), so anulando
   o 600px do template - width:auto chegou a testar e quebrou o carregamento da
   imagem no popup. */
.vbox-grab .vbox-child {
  width: 100% !important;
}
.vbox-grab .vbox-child img {
  width: 100% !important;
}

/* Dobra "Nossos Parceiros" - cada logo vinha num arquivo de tamanho/proporcao bem
   diferente (uns com bastante espaco transparente ao redor, outros colados na
   borda), entao sem regra nenhuma cada um aparecia num tamanho visual diferente e
   desalinhado verticalmente. As imagens ja foram recortadas na parte visivel de
   cada PNG (sem a margem transparente); aqui so normaliza a altura de exibicao -
   todos os logos na mesma altura, escala proporcional, alinhados no centro. */
.sponsor-carousel .swiper-wrapper {
  align-items: center;
}
.sponsor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
}
.sponsor-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.sponsor-item img {
  height: 48px;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
/* Ajustes finos de peso visual entre os logos, pedidos pelo Jeferson depois de ver
   o carrossel com todos na mesma altura base (48px): Arkos reduzido 30%, Benchmark
   e TVM aumentados 15%. Kingspan Isoeste ficou na altura base, sem ajuste. */
.sponsor-item img.logo-arkos {
  height: 34px;
}
.sponsor-item img.logo-benchmark,
.sponsor-item img.logo-tvm {
  height: 55px;
}

/* Mensagem de retorno do formulario de contato */
.form-messages {
  margin-top: 20px;
}
.form-messages:empty {
  display: none;
}
.form-messages.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border: 1px solid #badbcc;
}
.form-messages.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
}