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

   FONTES PERSONALIZADAS

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



@font-face {

    font-family: 'Montserrat';

    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Montserrat';

    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Montserrat';

    src: url('../fonts/Montserrat-Italic.ttf') format('truetype');

    font-weight: 400;

    font-style: italic;

    font-display: swap;

}



@font-face {

    font-family: 'North';

    src: url('../fonts/North.otf') format('opentype');

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}





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

   GERAL

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



body {

    font-family: 'Montserrat', sans-serif;

    margin: 0;

    padding: 0;

    background: #f8f8f8;

    color: #333;

}



.container {

    width: 90%;

    max-width: 1100px;

    margin: auto;

}



.container h1{

    font-family: 'Montserrat', sans-serif;

    font-size: 28px;

}



main {

    padding: 40px 0;

    background: white;

}



footer {

    background: #222;

    color: white;

    text-align: center;

    padding: 20px 0;

    margin-top: 40px;

}



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

   TOPOBAR

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

.topbar {

    background: #f6f4f4;

    color: gray;

    font-size: 14px;

    padding: 5px 0;

}



.topbar i {

    padding: 0 5px;

    color: #a19d9d;

}



.topbar .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.topbar a {

    color: gray;

    text-decoration: none;

}



.topbar a:hover {

    text-decoration: underline;

}



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

   HEADER FIXO COM EFEITO SCROLL

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



/* Topbar */

.topbar {

    background: #f5f5f5;

    font-size: 14px;

    padding: 5px 0;

    color: #555;

}



/* Header Principal */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1030;

  background: #fff;

  padding: 20px 0;

  border-bottom: 1px solid #ddd;

  transition: all 0.3s ease;

}





/* Header com scroll ativado */

.site-header.scroll-ativo {

    padding: 10px 0 !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



/* Layout interno do header */

.header-layout {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 15px;

}



/* Logo */

.header-logo img {

    height: 50px;

    transition: height 0.3s ease;

}



/* Ajuste do logo no scroll (opcional) */

.site-header.scroll-ativo .header-logo img {

    height: 40px;

}



/* Formulário de pesquisa */

.search-form {

    display: flex;

    align-items: left;

    max-width: 300px;

    width: 100%;

}



.search-form input {

    padding: 8px;

    border: none;

    border-bottom: 1px solid #ccc;

    background: transparent;

    outline: none;

    flex-grow: 1;

}



.search-form input:focus {

    border-bottom-color: #3d90ff;

}



.search-form button {

    padding: 8px 12px;

    background: #f6f4f4;

    border: none;

    color: #7892a1;

    border-radius: 4px;

    cursor: pointer;

    transition: background 0.2s;

}



.search-form button:hover {

    background: #e6e5e5;

}



/* Botão de produtos */

.btn-produtos {

    background: #f6f4f4;

    color: #7892a1;

    border: none;

    padding: 8px 12px;

    text-decoration: none;

    border-radius: 4px;

    cursor: pointer;

    transition: background 0.2s;

}



.btn-produtos:hover {

    background: #e6e5e5;

}



/* Botão de cotação */

.btn-cotacao {

    background: #f6f4f4;

    color: #7892a1;

    padding: 8px 0;

    text-decoration: none;

    border-radius: 4px;

    transition: background 0.2s;

}



.btn-cotacao:hover {

    background: #e6e5e5;

}



/* Contato WhatsApp */

.header-contato a.telefone-wpp {

    font-family: 'Montserrat', sans-serif;

    font-size: 20px;

    font-weight: normal;

    color: #027ec8;

    text-decoration: none;

}



.telefone-wpp i {

    margin-right: 5px;

    font-size: 1.1em;

    vertical-align: middle;

}



.header-contato a.telefone-wpp:hover {

    text-decoration: underline;

}



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

   MENU DE NAVEGAÇÃO

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

.site-nav {

    position: sticky;

    top: 80px; /* altura do header normal */

    z-index: 1020;

    background: #1765af;  

    transition: all 0.3s ease;

}



/* Quando header encolher no scroll */

.site-nav.scroll-ativo {

    top: 60px; /* espaço visual entre header e menu */

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

}



/* Estrutura do menu */

.site-nav .menu {

    font-family: 'Montserrat', sans-serif;

    list-style: none;

    margin: 0;

    padding: 10px 0;

    display: flex;

    gap: 20px;

    justify-content: center;

}



/* Itens padrão */

.site-nav .menu li a {

    color: #fff;

    text-decoration: none;

    font-weight: bold;

    text-transform: uppercase;

    font-size: 15px;

    padding: 10px;

    transition: all 0.3s ease;

}



/* Itens no scroll */

.site-nav.scroll-ativo .menu li a {

    font-size: 13px;

    padding: 8px;

}



/* Hover */

.site-nav .menu li a:hover {

    text-decoration: underline;

}





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

   SLIDE

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



/* Carrossel slide */

.slide-img {

    width: 100%;

    height: auto;

    display: block;

}



/* Remove espaçamento do <main> */

main {

    padding: 0;

    margin: 0;

}





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

   BLOCO DE TEXTOS 

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



.bloco-sobre { 

  padding: 56px 0; 

  background: #fff; 

}



.bloco-sobre .badge {

  background: #e7f1fb;

  color: #0c73bc;

  font-weight: 700;

  border-radius: 999px;

  padding: .45rem .8rem;

  letter-spacing: .02em;

}



/* Título grande, com escala responsiva */

.bloco-sobre .titulo{

  font-family: 'Montserrat', sans-serif;

  font-weight: 800;

  line-height: 1.15;

  letter-spacing: -0.02em;

  margin: 10px 0 12px;

  font-size: clamp(8px, 4vw, 36px);

}



/* Caixa de texto da coluna da direita */

.bloco-sobre .caixa{

  background: #f6f9fd;

  border: 1px solid #dfeaf6;

  border-radius: 14px;

  padding: 24px 26px;

  box-shadow: 0 8px 22px rgba(12,115,188,.06);

}



/* Parágrafos */

.bloco-sobre p{

    color: #4a5568;

    font-size: 1rem;

    line-height: 1.7;

    margin-bottom: .85rem;

    text-align: justify;

    text-justify: inter-word;    /* distribuição mais natural */

    hyphens: auto;               /* permite hifenizar palavras */

    overflow-wrap: break-word;   /* quebra palavras longas */

}



/* Observação (rodapé) */

.bloco-sobre small{

  color: #7a8aa0;

  font-size: .875rem;

}



/* Ajustes quando o header contrair no scroll (opcional) */

.site-header.scroll-ativo + .site-nav + main .bloco-sobre{

  padding-top: 48px;

}



/* Responsivo: centraliza no mobile e afrouxa o espaçamento */

@media (max-width: 991.98px){

  .bloco-sobre .titulo { 

    text-align: center; 

    margin-bottom: 16px; 

  }

  .bloco-sobre .badge { 

    display: inline-block; 

    margin: 0 auto 8px; 

  }

  .bloco-sobre .caixa{ 

    padding: 20px 18px; 

    border-radius: 12px; 

  }

}





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

   DESTAQUES

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



.destaques-home{

    margin-top: 70px;

    margin-bottom: 60px;

}



.destaques-home .card {

    height: 100%;

    display: flex;

    flex-direction: column;

    border-radius: 12px;

    overflow: hidden;

    transition: transform 0.2s, box-shadow 0.2s;

}



.destaques-home .card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}



.destaques-home .card-img-top {

    height: 200px;

    object-fit: cover;

    width: 100%;

    border-top-left-radius: 12px;

    border-top-right-radius: 12px;

}



.destaques-home .card-body {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

}



.destaques-home .card-title {

    font-family: 'Montserrat', sans-serif;

    font-size: 1.1rem;

    font-weight: 600;

}



.destaques-home .card-text {

    font-size: 0.92rem;

    color: #666;

    flex-grow: 1;

    text-align: justify;

    text-justify: inter-word;    /* distribuição mais natural */

    hyphens: auto;               /* permite hifenizar palavras */

    overflow-wrap: break-word;   /* quebra palavras longas */

    word-break: normal;

}





.destaques-home .btn {

    margin-top: auto;

    background: #f6f4f4;

    color: #027ec8;

}



.card-img-overlay-wrapper {

  position: relative;

  overflow: hidden;

}



.card-img-overlay-wrapper img {

  display: block;

  width: 100%;

  height: 200px;

  object-fit: cover;

}



/* Sobreposição com transparência */

.card-img-overlay-wrapper::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(12, 115, 188, 0.20); /* azul com 25% de opacidade */

  pointer-events: none;

  transition: background 0.3s;

}



/* Hover (opcional) */

.card:hover .card-img-overlay-wrapper::before {

  background: rgba(12, 115, 188, 0.35);

}





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

   SEÇÃO PROJETO

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



.bloco-projeto{

  background: #0f1220;        /* fundo escuro elegante */

  color: #cfe3ff;

  padding: 64px 0;

}



.bloco-projeto .badge-proj{

  background: transparent;

  color: #53b1ff;

  border: 1px solid rgba(83,177,255,.35);

  text-transform: uppercase;

  letter-spacing: .12em;

  font-weight: 700;

  border-radius: 999px;

  padding: .35rem .8rem;

  display: inline-block;

  margin-bottom: 10px;

}



.bloco-projeto .titulo-proj{

  color: #fff;

  font-weight: 800;

  letter-spacing: -.02em;

  line-height: 1.2;

  margin: 6px 0 12px;

  font-size: clamp(8px, 4vw, 36px);

}



.bloco-projeto .texto-proj{

  color: #b7c7e6;

  line-height: 1.7;

  margin: 0;

}



/* 5 colunas no desktop sem mexer no bootstrap: grid auxiliar */

@media (min-width: 1200px){

  .bloco-projeto .row.mt-2{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }

  .bloco-projeto .row.mt-2 > [class^="col-"] { width: 100%; }

}



/* Card da etapa */

.card-proj{

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 14px;

  padding: 20px;

  height: 100%;

  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;

  box-shadow: 0 10px 26px rgba(0,0,0,.15);

}



.card-proj:hover{

  transform: translateY(-4px);

  background: rgba(255,255,255,.06);

  box-shadow: 0 16px 32px rgba(0,0,0,.25);

}



.icon-proj{

  width: 54px; height: 54px;

  display: grid; place-items: center;

  border-radius: 12px;

  background: rgba(83,177,255,.12);

  color: #53b1ff;

  margin-bottom: 14px;

  font-size: 22px;

}



.head-proj{

  display: flex; align-items: baseline; gap: 8px;

  color: #fff;

  margin-bottom: 6px;

}

.head-proj .num{ color: #7fbaff; font-weight: 800; }

.head-proj strong{ font-weight: 700; }



.card-proj .desc{

  color: #b7c7e6;

  margin: 8px 0 0;

  line-height: 1.6;

}



/* responsivo */

@media (max-width: 991.98px){

  .icon-proj{ width: 48px; height: 48px; font-size: 20px; }

}



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

   PORTFÓLIO HOME

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



.mini-portfolio .mp-title{ 

    font-weight:800; 

    letter-spacing:-.02em; 

    font-size: clamp(8px, 4vw, 36px); 

}



.mini-portfolio .mp-text{ 

    color:#556; 

    line-height:1.7; 

}



.mini-portfolio .mp-thumb img{

  width:100%; 

  height:180px; 

  object-fit:cover; 

  border-radius:12px; 

  display:block;

  transition:transform .2s ease, box-shadow .2s ease;

}



.mini-portfolio .mp-thumb:hover img{

  transform: translateY(-3px);

  box-shadow: 0 10px 24px rgba(0,0,0,.12);

}



#mpModal .modal-content{ 

    border-radius:12px; 

}



#mpModal .carousel-item img{ 

    max-height:80vh; 

    object-fit:contain; 

    background:#000; 

}





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

   VITRINE LOJA VIRTUAL (HOME)

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



.vitrine-loja .card {

  border-radius: 12px;

  overflow: hidden;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.vitrine-loja .card:hover {

  transform: translateY(-4px);

  box-shadow: 0 8px 18px rgba(0,0,0,.08);

}



.vitrine-loja .card-img-top {

  width: 100%;

  height: 250px;

  object-fit: cover;

}



.vitrine-loja .card-title {

  font-size: 0.95rem;

  font-weight: 600;

}



.vitrine-loja .btn {

  background:#f6f4f4;

  color:#027ec8;

}



.vitrine-loja .btn:hover {

  background:#e6e5e5;

}





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

   FEED INSTAGRAM (faixa full width)

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



.insta-bar iframe {

  display: block;

  width: 100%;

  height: 200px;           /* você pode ajustar para mais alto ou mais baixo */

  border: 0;

}



/* opcional: fundo */

.insta-bar {

  background:#f2f4f8;      /* cor neutra pro feed não ficar "solto" */

}





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

   FOOTER

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

.site-footer{

  background:#f8f8f8;

  color:#444;

  margin-top:0;

}



.site-footer .footer-link{

  color:#027ec8;          /* Azul do tema para links */

  text-decoration:none;

}



.site-footer .footer-link:hover{

  text-decoration:underline;

}



.site-footer .footer-social{

  color:#027ec8;          /* Ícones das redes no mesmo azul */

  font-size:2.2rem;

  text-decoration:none;

  transition:opacity .2s;

}



.site-footer .footer-social:hover{

  opacity:.6;

}





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

   CONFIGURAÇÃO DAS PAGINAS

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



.paginas {

    background: #fff;

}



/* breadcrumb */



.breadcrumb {

    font-size: 12px;

    margin-top: 10px;

}

.breadcrumb a { color:#027ec8; }

.breadcrumb .active { color:#6c757d; }





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

   PG QUEM SOMOS

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





/* Página Quem Somos */

.quem-somos-section {

  padding-top: 20px;

  padding-bottom: 20px;

}



.quem-somos-section p {

  font-size: 0.95rem;

  line-height: 1.6;

  text-align: justify;

}



.quem-somos-section img {

  max-width: 100%;

  max-height: 350px;

  object-fit: cover;

  border-radius: 8px;

}



/* imagem de evolução da marca */

.evolucao-marca-img {

  max-height:100px;

  width:100%;

  object-fit:contain;

}



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

   PG MISSÃO, VISÃO & VALORES

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



.missao-section {

  padding-top: 20px;

  padding-bottom: 20px;;

}



.missao-section h2 {

  font-size: 1.6rem;

  font-weight: 700;

  color: #003366; /* azul institucional */

  margin-bottom: 15px;

  border-left: 5px solid #1765af;

  padding-left: 10px;

}



.missao-section p {

  font-size: 1rem;

  line-height: 1.7;

  text-align: justify;

  color: #444;

}



/* Blocos destacados */

.missao-section .mb-5 {

  background: #f9f9f9;

  padding: 20px 25px;

  border-radius: 10px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

  transition: transform 0.2s ease-in-out;

}



.missao-section .mb-5:hover {

  transform: translateY(-4px);

}



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

   FAQ - Perguntas Frequentes

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

.faq-section {

  padding-top: 20px;

  padding-bottom: 20px;

}





.faq-section .accordion-button {

  font-weight: 300;

  color: #1765af;

  background-color: #f8f9fa;

  transition: background-color 0.2s;

}



.faq-section .accordion-button:not(.collapsed) {

  color: #fff;

  background-color: #1765af;

}



.faq-section .accordion-body {

  font-size: 0.95rem;

  line-height: 1.6;

  color: #444;

  text-align: justify;

}



.faq-section .accordion-item {

  border: 1px solid #e6e6e6;

  border-radius: 6px;

  margin-bottom: 12px;

  overflow: hidden;

  box-shadow: 0 1px 3px rgba(0,0,0,0.05);

}





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

   PÁGINA CLIENTES

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

.clientes-intro {

  font-size: 1rem;

  line-height: 1.6;

  text-align: justify;

}



.clientes-texto {

  font-size: 0.95rem;

  line-height: 1.6;

  text-align: justify;

}



.clientes-logos img.logo-cliente {

  max-height: 60px;

  object-fit: contain;

  filter: grayscale(100%);   /* preto e branco */

  opacity: 0.8;

  transition: all 0.3s ease;

}



.clientes-logos img.logo-cliente:hover {

  filter: grayscale(0);

  opacity: 1;

  transform: scale(1.05);

}



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

   PÁGINA TRABALHE CONOSCO

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

.vaga {

  padding-top: 20px;

  padding-bottom: 20px;;

}



.vaga .mb-5{

    margin-top: -25px;

    color: #6c757d;

}

.vaga-card {

  background: #fff;

  border-radius: 12px;

  padding: 20px;

  margin-bottom: 20px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.vaga-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 6px 15px rgba(0,0,0,0.12);

}

.vaga-card h3 {

  font-size: 1.25rem;

  color: #1c2e4a;

  margin-bottom: 8px;

}

.vaga-card .vaga-descricao {

  color: #444;

  margin-bottom: 10px;

}

.vaga-card .vaga-info {

  font-size: 0.9rem;

  color: #666;

  display: flex;

  flex-wrap: wrap;

  gap: 15px;

  margin-top: 10px;

}

.vaga-card .vaga-info i {

  color: #007bff;

  margin-right: 5px;

}



.card-pgdetalhes {

  padding-top: 20px;

  padding-bottom: 20px;;

}



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

   PG Portfolio

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



/* Reduz o tamanho da imagem dentro do modal */



/* Thumbs do portfólio (grade) */

.portfolio-thumb {

  width: 100%;

  height: 220px;

  object-fit: cover;

  object-position: center;

}



.modal .carousel-item img {

  max-height: 70vh;

  width: 100%;

  object-fit: contain;

}



/* Faixa inferior com título/descrição */

.modal-caption-bar {

  background: rgba(0,0,0,0.3);

  color:#fff;

  padding: 12px 20px;

  font-size: 0.9rem;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}



/* remove padding das setas e deixa só a seta clicável */

.modal .carousel-control-prev,

.modal .carousel-control-next {

  width: 2% !important;

  padding: 0;

  background: transparent;

  opacity: 1.5;

}



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

   PÁGINA DE CONTATO

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



.contato-section {

  margin-top: 30px;

  margin-bottom: 60px;

}



.contato-section p {

  font-size: 15px;

  color: #555;

  line-height: 1.6;

}



.contato-infos {

  background: #f8f9fa;

  border-radius: 10px;

  padding: 20px;

  margin-top: 20px;

  margin-bottom: 20px;

}



.contato-infos ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.contato-infos li {

  margin-bottom: 12px;

  font-size: 15px;

  color: #333;

}



.contato-infos i {

  font-size: 18px;

  color: #027ec8;

  margin-right: 8px;

}



/* Formulário */

.contato-form {

  background: #fff;

  border: 1px solid #eaeaea;

  border-radius: 10px;

  padding: 25px;

  box-shadow: 0px 4px 8px rgba(0,0,0,0.05);

}



.contato-form label {

  font-weight: 600;

  font-size: 14px;

  margin-bottom: 5px;

  color: #333;

}



.contato-form input,

.contato-form select,

.contato-form textarea {

  border-radius: 6px;

  border: 1px solid #ddd;

  font-size: 14px;

  padding: 10px;

}



.contato-form input:focus,

.contato-form select:focus,

.contato-form textarea:focus {

  border-color: #027ec8;

  box-shadow: 0 0 0 0.2rem rgba(2,126,200,0.2);

  outline: none;

}



.contato-form button {

  background: #027ec8;

  border: none;

  padding: 10px 20px;

  font-size: 15px;

  font-weight: 600;

  border-radius: 6px;

  transition: all 0.2s ease-in-out;

}



.contato-form button:hover {

  background: #025a8a;

}





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

   PG POLÍTICA DE PRIVACIDADE

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



.politica-section {

  padding-top: 20px;

  padding-bottom: 20px;

}



.politica-section h1 {

  font-weight: 300;

}



.politica-section h2 {

  font-size: 1.5rem;

  font-weight: 700;

  color: #222; /* cor mais sóbria */

  margin-bottom: 12px;

  border-left: 4px solid #027ec8; /* azul principal */

  padding-left: 10px;

}



.politica-section p {

  font-size: 1rem;

  line-height: 1.8;

  text-align: justify;

  color: #555;

  margin-bottom: 15px;

}



/* Blocos de seção */

.politica-section .bloco {

  background: #ffffff;

  padding: 25px 28px;

  margin-bottom: 25px;

  border: 1px solid #e6e6e6;

  border-radius: 8px;

  box-shadow: 0 1px 4px rgba(0,0,0,0.05);

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}



.politica-section .bloco:hover {

  box-shadow: 0 3px 8px rgba(0,0,0,0.1);

  transform: translateY(-3px);

}



/* Itens menores (listas de direitos etc.) */

.politica-section ul {

  padding-left: 20px;

  margin-bottom: 15px;

}



.politica-section ul li {

  margin-bottom: 6px;

  color: #444;

  line-height: 1.6;

}



.politica-section ul li::marker {

  color: #027ec8; /* marcador azul */

  font-weight: bold;

}



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

   PG TERMOS DE USO

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



.termos-section {

  padding-top: 20px;

  padding-bottom: 20px;

}



.termos-section h1 {

  font-weight: 300;

  font-size: 2rem;

  color: #003366; /* Azul institucional */

  margin-bottom: 25px;

}



.termos-section h2 {

  font-size: 1.4rem;

  font-weight: 700;

  color: #222;

  margin-bottom: 12px;

  border-left: 4px solid #1765af; /* azul destaque */

  padding-left: 10px;

}



.termos-section p {

  font-size: 1rem;

  line-height: 1.8;

  text-align: justify;

  color: #555;

  margin-bottom: 15px;

}



/* Blocos de seção */

.termos-section .bloco {

  background: #fff;

  padding: 25px 28px;

  margin-bottom: 25px;

  border: 1px solid #e6e6e6;

  border-radius: 8px;

  box-shadow: 0 1px 4px rgba(0,0,0,0.05);

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}



.termos-section .bloco:hover {

  box-shadow: 0 3px 8px rgba(0,0,0,0.1);

  transform: translateY(-3px);

}



/* Listas */

.termos-section ul {

  padding-left: 20px;

  margin-bottom: 15px;

}



.termos-section ul li {

  margin-bottom: 6px;

  color: #444;

  line-height: 1.6;

}



.termos-section ul li::marker {

  color: #1765af; /* azul do marcador */

  font-weight: bold;

}



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

   PÁGINA SEJA UM REPRESENTANTE

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



.revendedor-section {

  padding-top: 20px;

  padding-bottom: 30px;

}







.revendedor-section p.lead {

  font-size: 1.1rem;

  line-height: 1.7;

  color: #444;

  background: #f9f9f9;

  padding: 18px 22px;

  border-radius: 8px;

  border-left: 4px solid #027ec8;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

}



/* Formulário */

.revendedor-section form {

  background: #ffffff;

  padding: 25px 28px;

  border-radius: 10px;

  border: 1px solid #e5e5e5;

  box-shadow: 0 2px 8px rgba(0,0,0,0.05);

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}



.revendedor-section form:hover {

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  transform: translateY(-2px);

}



.revendedor-section .form-label {

  font-weight: 600;

  color: #333;

  margin-bottom: 6px;

}



.revendedor-section .form-control,

.revendedor-section .form-select {

  border-radius: 6px;

  border: 1px solid #ccc;

  transition: border-color 0.2s, box-shadow 0.2s;

}



.revendedor-section .form-control:focus,

.revendedor-section .form-select:focus {

  border-color: #027ec8;

  box-shadow: 0 0 0 0.2rem rgba(2,126,200,0.25);

}



/* Botão */

.revendedor-section button[type="submit"] {

  background: #027ec8;

  border: none;

  font-weight: 600;

  padding: 10px 20px;

  border-radius: 6px;

  transition: background 0.2s ease-in-out, transform 0.2s ease;

}



.revendedor-section button[type="submit"]:hover {

  background: #025f96;

  transform: translateY(-2px);

}



/* Upload */

.revendedor-section input[type="file"] {

  padding: 6px;

  font-size: 0.95rem;

}



/* Responsividade */

@media (max-width: 768px) {

  .revendedor-section h1 {

    font-size: 1.6rem;

  }



  .revendedor-section p.lead {

    font-size: 1rem;

    padding: 15px 18px;

  }

}

/* ===============================
   AJUSTES VISUAIS HEADER MOBILE (Brasilab)
================================= */

@media (max-width: 991.98px) {

  /* HEADER MOBILE BASE */
  .header-mobile {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 0; /* espaçamento vertical */
  }

  /* LOGO */
  .header-mobile .mobile-logo img {
    height: 46px; /* antes era 38px */
    margin-left: 4px;
    transition: height 0.3s ease;
  }

  /* CONTAINER DE ÍCONES */
  .header-mobile .d-flex.align-items-center.gap-3 {
    gap: 18px !important; /* mais espaçamento entre ícones */
  }

  /* ÍCONES DE AÇÃO (lupa, agenda, menu) */
  .header-mobile button,
  .header-mobile a {
    color: #027ec8;
  }

  /* Botão hambúrguer - maior e mais destacado */
  #mobileMenuToggle i {
    font-size: 1.9rem; /* aumenta o tamanho do ícone */
    font-weight: bold;
  }

  #mobileMenuToggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
  }

  #mobileMenuToggle:hover {
    background: rgba(2,126,200,0.08);
  }

  /* MENU MOBILE */
  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 1040;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    border-bottom: 1px solid #eee;
  }

  .mobile-menu.active {
    display: block;
    max-height: 400px;
  }

  .mobile-menu ul li a {
    display: block;
    padding: 12px 18px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    text-decoration: none;
  }

  .mobile-menu ul li a:hover {
    background: #f5f5f5;
  }

  /* BOTÃO WHATSAPP (AZUL) */
  .mobile-menu .btn.btn-success {
    background: #027ec8 !important;
    color: #fff !important;
    border: none;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .mobile-menu .btn.btn-success:hover {
    background: #025f96 !important;
  }

  /* CAMPO DE BUSCA FLUTUANTE */
  .mobile-search-box {
    display: none;
    background: #fff;
    padding: 12px 14px;
    border-bottom: 1px solid #ddd;
  }

  .mobile-search-box.show {
    display: block;
    animation: slideDown 0.2s ease;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ===============================
   HEADER MOBILE - SOMBRA AO ROLAR
================================= */

@media (max-width: 991.98px) {
  .header-mobile.scroll-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
  }
}