:root {
    --azul-grantex: rgb(16, 7, 160);
    --azul-grantex-secundario: rgb(79, 190, 255);
    --cinza-platinum: #DCDCDC;
    --swiper-navigation-size:25px;

    body {
      font-family: 'Montserrat', sans-serif;
      background-color: #ffffff;
      color:  rgb(82, 80, 80);
      padding-top: 56px; /* espaço por causa do navbar fixo */
}
    


}
    h1 { font-size: 2.5rem; font-weight: 700;  }
    h2 { font-size: 1.8rem;font-weight: 600; }   /* 32px */
    h3 { font-size: 1.4rem; font-weight: 600; } /* 24px */
    h4 { font-size: 1.25rem;} /* 20px */
    h5 { font-size: 1.125rem;}/* 18px */
    h6 { font-size: 1rem; }   /* 16px */

  
  
  

    
    
    .pagina-sem-padding {
        padding-top: 0px !important; 
    }

    .bg-grantex{
    background-color: var(--azul-grantex);
    }

    .text-grantex{
      color:var(--azul-grantex);
    }



    /* PRELOADER */
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top-color: var(--azul-grantex); /* vermelho Grantex (ajuste se quiser) */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}



    /* Navbar ---------------------------------------------------------------*/
  
      .navbar {
        background-color: var(--azul-grantex);
        font-family: 'montserrat', sans-serif; /* muda a fonte */
        font-size: 16px;
        
      }


      /* Aumenta área de toque (mobile-friendly) */
      .navbar .nav-link {
        padding: 12px 16px;        /* área clicável */
        min-height: 48px;          /* recomendação Google */
        display: inline-flex;
        align-items: center;
      }


      /* Links */
      .navbar-brand, .nav-link {
        color: #e4e4e4 !important;
        font-weight: 500;
        position: relative;
        transition: color 0.3s ease;
      }

          /* Linha animada */
      .navbar-brand::after,
      .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 4px; /* ajusta a distância da linha */
        width: 0;
        height: 1px;
        background-color: #ffffff;
        transition: width 0.3s ease;
      }

      /* Efeito hover */
      .navbar-brand:hover,
      .nav-link:hover {
        color: #ffffff !important;
      }

      .navbar-brand:hover::after,
      .nav-link:hover::after {
        width: 100%;
      }

    /* MENU FIXO DE BUSCA */
    #filtrosFixos {
      position: fixed;
      top: 56px;           /* distância da navbar — ajuste se necessário */
      left: 0;
      width: 100%;
      background: #fff;
      z-index: 999;
      padding: 15px 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }






      /* Banner */
      .carousel-item img {
        height: auto;
        object-fit:contain;
      }
  


    .carousel-indicators [data-bs-target] {
    width: 25px;
    height: 4px;
    background-color: rgb(89, 92, 95);
    border-radius: 5%;
    
  }

  .carousel-indicators .active {
    background-color: rgb(13, 110, 253); /* Cor da sua marca */

  }

  .swiper-pagination-bullet {
    width: 25px !important;
    height: 4px !important;
    border-radius: 5px !important; /* tira formato de bolinha */
    background-color: rgb(89, 92, 95);
    opacity: 1;
    margin: 0 6px !important;
    padding: 0 !important; /* remove padding */
    transition: all 0.3s ease;
  }

/* Tracinho ativo */
.swiper-pagination-bullet-active {
  width: 25px !important;
  background-color: var(--azul-grantex);
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  bottom: 15px;
}

  #produtosCarousel {
  position: relative;
  padding: 50px;
}


.card {
      height: 100%;
      padding: 20px;
      transition: all 0.3s ease;
      border: none;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    .card img {
      height: 200px;
      object-fit: contain;
    }


    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

.produto-card{
  height: 400px;
}




.linha-produtos .card {
  width: 100%;
  text-align: center;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

    .diferenciais .card {
    padding: 30px;
    display: flex;
  }

/* Card-body responsável pelo espaço interno */
.linha-produtos .card-body {

  flex: 1;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
}








 #produtosCarousel .linha-produtos {
  min-height: 80vh;
  padding: 80px 20px;
  background-color: rgb(240, 240, 240);
  scroll-margin-top: 80px;
}




/* Imagem */
.card-img-top {
  width: 100%;
  height: auto;
  object-fit:contain;

  display: block;
  border-radius: 6%;

 
}

.img-card {
  width: 100%;
  max-height: 250px;
  object-fit:cover;

  display: block;
  border-radius: 6%;

 
}





.swiper-produtos-relacionados .swiper-slide img {
    height: 180px;
    width: 100%;
    object-fit: contain;
}








    /*caTAlogo digital*/
    .catalogo-digital {
    min-height: 70vh;                  /* ocupa toda a altura da tela */
    padding: 0px 0;                    /* espaçamento interno (topo e base) */
    scroll-margin-top: 80px;            /* evita sobreposição se for ancorada */
    display: flex;                      /* centraliza verticalmente */
    align-items: center;                
  }




    /* Diferenciais*/


    




    .produto-detalhe h2 {
      color: #252525;
      font-size: 1.2rem;
      font-weight: 600;
      border-bottom: 2px solid #6c757d;
      padding-bottom: 5px;
      margin-top: 25px;
      margin-bottom: 15px;
    }


  .produto-img {
    width: 80%;           /* muda aqui o tamanho proporcional que quiser */
    height: auto;         /* mantém a proporção da imagem */
    display: block;       /* centraliza corretamente */
    margin: 0 auto;       /* centraliza no container */
    object-fit: contain;  /* impede cortes */
    max-width: 450px;     /* define um limite opcional */
  }

  .produto-img-maior {
    width: 100%;           /* muda aqui o tamanho proporcional que quiser */
    height: auto;         /* mantém a proporção da imagem */
    display: block;       /* centraliza corretamente */
    margin: 0 auto;       /* centraliza no container */
    object-fit: contain;  /* impede cortes */
    max-width: 450px;     /* define um limite opcional */

  }






    /* Produtos relacionados */
    .relacionados h2 {
      color: #001E8E;
      font-weight: 700;
    }



/* Rodapé */
footer {
  font-family: 'Segoe UI', sans-serif;
  padding: 0;
}

/* Topo claro */
.footer-top {
  background-color: #dddddd;
}

.footer-logo img {
  display: block;
}

/* Certificações */
.footer-certificacoes img {
  display: block;
}

/* Redes sociais */
.footer-redes a img {
  margin-left: 8px;
}




/* Faixa azul inferior */
.footer-bottom {

  background-color: var(--azul-grantex);
  color: white;
  font-size: 14px;
}



/* Pagina Sobre */

.banner-sobre {
  position: relative;
  background: url('/img/banner-sobre.webp') center/cover no-repeat;
  height: 400px;
  overflow: hidden;
}

.banner-sobre .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55); /* Escurecimento (0.55 = intensidade) */
}

.banner-sobre .conteudo {
  position: relative;
  z-index: 1;
  padding: 20px;
}



/* Watsapp*/

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  border-radius: 50%;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #20ba5a;
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}




/*Catalogo de produtos
===============================*/


    .filtros {
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      margin-bottom: 30px;
    }


/* Botões */
.btn-rodape {
  background-color: var(--azul-grantex);
  color: rgb(255, 255, 255);
  border: none;
  padding: 8px 15px;
  margin-top: 5px;
  display: block;
  width: 200px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}


/* Botão sempre na base */
.linha-produtos .btn-saiba-mais {
  margin-top: auto;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}



/*===============================*/

.btn-assentamento {
  color:black;
  font-weight: 700;
  background-color: rgb(255, 220, 0);
  height: 50px;
  width: AUTO;
  align-items: center;
  align-content: center;
  padding: auto;
  margin: 4px 1px;

}

  .btn-assentamento:hover {
  color: black;
  background-color: rgb(182, 158, 0);
}


.btn-grantex {
  color: #fff;
  background-color: var(--azul-grantex);
}

.btn-grantex:hover {
  color: #fff;
  background-color:#0b5ed7;
}





    .banner-sobre-nos {
        position: relative;
        background-image: url(/imagens/outras/fabrica.webp); /* coloque a imagem da fábrica aqui */
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
    }

    .banner-sobre-nos-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.55);
    }

    .banner-sobre-nos-conteudo {
        position: relative;
        color: white;
        max-width: 600px;
        padding-left: 9%;

    }

    .banner-sobre-nos-conteudo h1 {
        font-size: 2.8rem;
        font-weight: 700;
    }







    /* --- Tabela padrão GRANTEX --- */
.tabela-rendimento {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;              /* Ajusta tamanho da fonte */
  color: #333;                  /* Cor padrão do texto */
}

/* Linhas alternadas */
.tabela-rendimento tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

/* Bordas */
.tabela-rendimento th,
.tabela-rendimento td {
  border: 1px solid #ccc;
  padding: 5px 5px; 
  text-align: center;          /* Espaçamento interno */
}

/* --- Cabeçalho --- */
.tabela-rendimento thead th {
  background-color: #002b9a;    /* Azul Grantex */
  color: #fff;                  /* Texto branco */
  font-size: 12px;              /* Tamanho maior no cabeçalho */
  font-weight: 600;
  text-transform: uppercase;    /* Deixa em MAIÚSCULO */
  letter-spacing: 0.5px;
  
}

/* Hover das linhas */
.tabela-rendimento tbody tr:hover {
  background-color: #e3ebff;    /* Azul clarinho */
  cursor: pointer;
}


.texto-obs-tabela {
  margin-top: -10px;
  font-size: 13px;
}




 /* Catalogo de cores*/


    .color-card { 
      cursor:pointer;
      padding: 5px;
      border-radius:8px; 
      overflow:hidden; 
      transition:.2s; 
    }



    .color-card:hover { 
      transform:scale(1.04); 
    }
    .color-sample { 
      height:80px;
      border-radius: 10px;
    }
    .color-name { 
      background:#fff; 
      padding:8px; 
      text-align:left; 
      font-size:14px; }


  



    #btn-topo {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 10%;
    background-color: var(--azul-grantex);
    color: white;
    cursor: pointer;
    font-size: 20px;
    display: none; /* começa invisível */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: opacity 0.3s ease;
}

#btn-topo:hover {
    background-color: #0b5ed7;
}



.img-efeito-multiplicar {
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantém proporção e preenche o container */
}


.container-blog{
  max-width: 800px;
}


.card-blog{
 height: 100%;
 object-fit: contain;

}


    /* simulação de cores das tintas */
    .ambiente-fundo,
    .ambiente-sombra {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Máscara sempre sobre a imagem */
    .ambiente-sombra {
      position: absolute;
      inset: 0;
      object-fit: contain;
      z-index: 2;
      pointer-events: none;
      mix-blend-mode: multiply;
    }

    .form-label{
      font-weight: 700;
    }






  .swiper .swiper-slide {
        height: auto;
        text-align: center;
        background: #ffffff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        display: flex; /* Definir como flexbox */
        flex-direction: column; /* Organiza os elementos em uma coluna */
        justify-content: space-between; /* Garantir que o botão fique na parte inferior */
        padding: 10px;
      }


      .linha-azul-titulo{
        width: 200px;              /* tamanho da linha */
        height: 3px;              /* espessura */
        background-color: var(--azul-grantex); /* cor (azul Bootstrap) */
        margin-bottom: 20px;      /* espaço abaixo */
        margin: auto;
        margin-top: -15px;
      }

      .swiper-button-prev, .swiper-button-next{
        color: #4b4b4b;
        font-size: 10px;
      }


      /* Seção */
      .hero-video {
        width: 100%;
        height: 50vh; /* Mobile */
        overflow: hidden;
      }

      /* Desktop */
      @media (min-width: 768px) {
        .hero-video {
          height: 100vh;
        }
      }

      /* Vídeo */
      .video-full-width {
        width: 100%;
        height: 100%;
        object-fit: cover;          /* preenche */
        object-position: center;    /* mantém centro */
      }

      .video-full-width {
  object-position: center top;   /* prioriza topo */
  /* ou */
  object-position: center bottom; /* prioriza base */
}