/* ==========================================
   0. TIPOGRAFIA GERAL (Estilo Limpo e Corporativo)
   ========================================== */
body, html, p, span, a, li, h1, h2, h3, h4, h5, h6, div {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================
   1. BARRA SUPERIOR (TOPBAR) - 100% Isolada e Fixa
   ========================================== */
header.header.container-topbar,
div.container-topbar,
.container-topbar {
  background-color: #ff6600 !important;
  background-image: none !important;
}

.container-topbar,
.container-topbar p,
.container-topbar span,
.container-topbar div,
.container-topbar li {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Isolamento total para links da topbar em qualquer estado, ignorando regras globais */
.container-topbar a,
.container-topbar a:link,
.container-topbar a:visited,
.container-topbar a:hover,
.container-topbar a:focus,
.container-topbar a:active {
  color: #ffffff !important;
  background-color: transparent !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Reforço extra focado em qualquer link na topbar durante o hover ou foco */
.container-topbar a:hover *,
.container-topbar a:focus *,
.container-topbar a:hover,
.container-topbar a:focus {
  color: #ffffff !important;
  background-color: transparent !important;
  opacity: 1 !important;
}


/* ==========================================
   2. MENU PRINCIPAL - Fundo Branco e Texto Escuro
   ========================================== */
.container-header .navbar,
.container-header,
.navbar-expand-lg {
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
}

.container-header .navbar-nav .nav-link,
.container-header .navbar-brand,
.container-header .navbar-text,
.container-header a,
.container-header span {
  color: #2b2b2b !important;
  font-weight: 500;
}

.container-header .navbar-nav .nav-link:hover,
.container-header .navbar-nav .nav-link:focus,
.container-header .navbar-nav .active > .nav-link,
.container-header .navbar-nav .show > .nav-link,
.container-header .navbar .navbar-nav a:hover {
  color: #ff6600 !important;
}


/* ==========================================
   3. RODAPÉ FINO - Laranja com Texto Branco
   ========================================== */

.container-footer {
  background-color: #ff6600 !important;
  background-image: none !important;
  color: #ffffff !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.container-footer .container-fluid,
.container-footer .grid-child,
.container-footer p,
.container-footer div {
  background-color: transparent !important;
  color: #ffffff !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.container-footer a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Transforma cada bloco de módulo em uma linha independente de largura total */
.container-footer .grid-child {
  display: block !important;
  width: 100% !important;
  flex: none !important;
  max-width: 100% !important;
  text-align: left !important;
  clear: both !important;
}

/* Garante espaçamento e opcionalmente uma linha divisória sutil entre o de cima e o de baixo */
.container-footer .grid-child + .grid-child {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}


/* ==========================================
   MÓDULO BOTTOM-A (Cinza Claro / Sem Borda / Links Fixos)
   ========================================== */
.container-bottom-a,
.container-bottom-a .grid-child,
.bottom-a, 
.bottom-a .card, 
.bottom-a .card-body {
  background-color: #f0f0f0 !important;
  background-image: none !important;
  color: #333333 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Garante que textos, títulos e parágrafos fiquem cinza escuro */
.bottom-a p,
.bottom-a span,
.bottom-a div,
.bottom-a h1,
.bottom-a h2,
.bottom-a h3,
.bottom-a h4,
.bottom-a h5,
.bottom-a h6 {
  color: #333333 !important;
  background-color: transparent !important;
}

/* Trava os links do bottom-a na cor cinza escuro, sem sublinhado e sem alterar ao interagir */
.bottom-a a,
.bottom-a a:link,
.bottom-a a:visited,
.bottom-a a:hover,
.bottom-a a:focus,
.bottom-a a:active {
  color: #333333 !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

/* FORMULÁRIO */
.form-contato :is(input,textarea,select){padding:.875rem 1rem;margin:.5rem 0 0;border-width:2px;border-color:#0004; border-radius: 20px; background-color: #E6E6E7;}
.form-contato input#anexo{padding:.72rem 1rem}
.form-contato select{line-height:100%;padding:.813rem 1rem}
.form-contato label{text-transform:uppercase}
.form-contato [type=submit]{position:relative;min-width:fit-content;padding:.875rem 1.5rem;color:var(-grey);font-size:.875rem;font-family:var(-primary-font);font-weight:700;text-transform:uppercase;letter-spacing:1px;border:2px solid #0004;border-radius:.25rem;background-color:transparent;transition:var(-transition)}
.form-contato [type=submit]:hover{color:#fff;background-color:transparent;border-color:var(-primary-color)}
.form-contato [type=submit]::before{content:'';position:absolute;top:0;left:0;width:0%;height:100%;background-color:var(-primary-color);transition:var(-transition);z-index:-1;opacity:0}
.form-contato [type=submit]:hover::before{width:100%;opacity:1}
.form-contato [type=submit]:active,.form-contato [type=submit]:focus{color:#fff;border-color:var(-dark)}
.form-contato [type=submit]:active::before,.form-contato [type=submit]:focus::before{background-color:var(-dark);width:100%;opacity:1}

/* Efeito ao passar o mouse por cima (Hover) */
.form-contato button[type="submit"]:hover, 
.form button[type="submit"]:hover {
  background-color: #ff6600; /* Cor laranja */
  color: #ffffff;            /* Fonte branca */
}

/* Classe contato_info para estilizar links como texto comum */
.contato_info a {
  color: inherit;          /* Mantém a mesma cor do texto ao redor */
  text-decoration: none;   /* Remove o sublinhado padrão */
}

/* Garante que o estado visitado não mude a cor */
.contato_info a:visited {
  color: inherit;
}

/* Remove qualquer alteração de cor ou sublinhado ao passar o mouse */
.contato_info a:hover {
  color: inherit;
  text-decoration: none;
}

/* Garante que o estado ativo/clique também não mude nada */
.contato_info a:active {
  color: inherit;
  text-decoration: none;
}

/* Força o título do artigo no blog a ter exatamente o tamanho do texto padrão */
.blog .blog-items h1,
.blog .blog-items h2,
.blog .blog-items h3,
.blog-items h1,
.blog-items h2,
.blog-items h3,
.blog-items .item-title a {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}


/* Layout de duas colunas para o artigo */
.artigo-com-lateral {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espaço entre o texto e a barra lateral */
    align-items: flex-start;
}

/* Área principal do texto do artigo */
.artigo-com-lateral .conteudo-principal {
    flex: 1;
    min-width: 0; /* Evita quebra de layout em telas menores */
}

/* Caixa Lateral de Contato (à direita) */
.artigo-caixa-lateral {
    background-color: #ff6600;
    color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    width: 280px; /* Largura fixa da barra lateral */
    flex-shrink: 0;
}

.artigo-caixa-lateral a {
    color: #ffffff;
    text-decoration: underline;
    display: block;
    margin-top: 5px;
    font-weight: bold;
}

/* Responsivo para celulares (joga a barra lateral para baixo do texto) */
@media (max-width: 768px) {
    .artigo-com-lateral {
        flex-direction: column;
    }
    .artigo-caixa-lateral {
        width: 100%;
    }
}

/* Barra de Rodapé Larga do Artigo */
.artigo-rodape-contato {
    background-color: #e65c00;
    color: #ffffff;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 40px;
}
.artigo-rodape-contato .btn-contato-rodape {
    display: inline-block;
    background-color: #ffffff;
    color: #ff6600;
    padding: 10px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.2s;
}
.artigo-rodape-contato .btn-contato-rodape:hover {
    background-color: #fff0e6;
}

/* Padroniza o tamanho das imagens de introdução no layout de blog do Cassiopeia */
.blog-items .item-image img,
.blog .blog-items img {
    width: 100% !important;     /* Faz a imagem ocupar toda a largura da coluna */
    height: 220px !important;   /* Altere este valor para a altura desejada (ex: 200px, 250px) */
    object-fit: cover !important; /* Corta a imagem proporcionalmente para preencher o espaço sem distorcer */
    border-radius: 8px;         /* Opcional: arredonda levemente as bordas da imagem */
}

/* Imagens de 185 x 185 cortadas */
.img-crop-185 {
  width: 185px;
  height: 185px;
  object-fit: cover;
}

/* Altera o fundo da mensagem de sucesso do Convert Forms para Laranja */
.convertforms .cf-message.cf-success, 
.convertforms .alert-success {
  background-color: #ff6600 !important; /* Cor laranja padrão */
  border-color: #e86902 !important;
  color: #ffffff !important; /* Texto em branco para contraste */
}

/* BTN */
.btn_segmas {
  text-decoration: none;
  color: #c7822f;
  font-weight: bold;
  background: #cf611b;
  padding: 10px 15px;
  box-sizing: border-box;
  margin: 10px auto;
  font-size: 14px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  display: inline-block;
  border-radius: 3px;
  transition: .3s;
  background: linear-gradient(to bottom, #ffcb8c 0%, #ffb660 100%);
  border: 1px solid #db9c51;
}

.btn_segmas:hover {
  opacity: 0.9;
  color: #ff6600 !important;
}

/* Estilo para forçar a altura e cortar a largura (cover) */
.img-destaque {
  width: 100%;        /* Garante que a imagem ocupe a largura da coluna */
  height: 243px;      /* Fixa a altura exata */
  object-fit: cover;  /* O segredo: corta a imagem para não distorcer */
  object-position: center; /* Mantém o foco da imagem no centro */
  display: block;
}

/* Força o logotipo e o menu a ficarem lado a lado na mesma linha */
@media (min-width: 992px) {
  /* Transforma a caixa que segura o logo e o menu em um painel flexível */
  .grid-child.container-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px !important; /* Espaço entre o logo e o menu */
  }

  /* Define o bloco do logotipo */
  .grid-child.container-nav > div:first-child {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }

  /* Garante que a imagem do logotipo não estoure o tamanho */
  .grid-child.container-nav > div:first-child img {
    max-height: 100px !important; /* Ajuste se quiser a imagem maior ou menor */
    width: auto !important;
    display: block !important;
  }

  /* Define o bloco do menu preenchendo o restante do espaço */
  .grid-child.container-nav > nav {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important; /* Joga os itens do menu para a direita */
    margin-top: 0 !important;
  }
}


/* Diminui o tamanho da fonte do menu principal */
.container-nav .mod-menu > li > a,
.container-nav .navbar-nav > li > a,
.container-nav .metismenu-item > a {
  font-size: 1rem !important; /* Mude para 0.8rem se quiser ainda menor */
}

/* Reduz o espaço (padding horizontal) entre os itens do menu */
.container-nav .mod-menu > li,
.container-nav .navbar-nav > li,
.container-nav .metismenu-item {
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
}

/* Se o espaço for controlado pelo link, ajuste este também */
.container-nav .mod-menu > li > a {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}
.whatsapp-float img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.whatsapp-float img:hover {
    transform: scale(1.1);
}