/* ==========================================================================
   Quatro1 - camada 2: componentes
   Carregar DEPOIS de base.css (os tokens --q1-* vem de la) e ANTES de
   site.css. Ver o cabecalho de base.css para a ordem das tres camadas.

   Aqui fica o que aparece em mais de uma pagina: o botao laranja, a faixa
   laranja, os cards de produto/servico/postagem (templates/components/) e os
   botoes flutuantes.

   Os nomes de classe e os ids sao os que o site sempre usou (btn_orange,
   card_produto, #ButtonWhatsapp...) e nao mudam: gatilhos do GTM podem
   depender deles. Classe NOVA usa o prefixo q1-.
   ========================================================================== */

/* --- Bootstrap: variaveis de componente ----------------------------------- */
/* O Bootstrap nao le uma cor de marca: cada variante de botao declara as
   proprias --bs-btn-*, entao a variante laranja e montada aqui na mao. */

.btn_orange {
    --bs-btn-color: var(--q1-branco);
    --bs-btn-bg: var(--q1-laranja);
    --bs-btn-border-color: var(--q1-laranja);
    --bs-btn-hover-color: var(--q1-laranja);
    --bs-btn-hover-bg: var(--q1-branco);
    --bs-btn-hover-border-color: var(--q1-laranja);
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: var(--q1-laranja);
    --bs-btn-active-bg: var(--q1-branco);
    --bs-btn-active-border-color: var(--q1-laranja);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--q1-branco);
    --bs-btn-disabled-bg: var(--q1-laranja);
    --bs-btn-disabled-border-color: var(--q1-laranja);
}

/* --- Utilitarios de marca ------------------------------------------------- */

.text_orange {
    color: var(--q1-laranja);
}

/* Faixa laranja das secoes de destaque (marcas, depoimentos, diferenciais).
   A primeira linha e o fallback para navegador sem gradiente. */
.bg_custom {
    background: var(--q1-laranja-escuro);
    background: radial-gradient(circle, var(--q1-laranja-escuro) 0%, var(--q1-laranja) 100%);
    background-size: cover;
}

/* Conteudo rico do CKEditor nas paginas de detalhe: imagem colada no texto
   nao pode estourar a largura. */
.body_detalhes img {
    max-width: 100%;
}

/* --- Card de produto ------------------------------------------------------ */

.card_produto:hover {
    box-shadow: var(--q1-sombra-card) !important;
}

.card_produto .imagem_produto {
    width: 100%;
    height: var(--q1-altura-imagem-card);
    object-fit: contain;
}

.card_produto .marca {
    max-height: var(--q1-altura-marca);
    object-fit: contain;
}

/* Nome do produto em no maximo duas linhas, com altura fixa para os cards
   do carrossel ficarem alinhados. */
.card_produto h6 {
    height: var(--q1-altura-titulo-card);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.card_produto_detalhes .imagem_produto {
    width: 100%;
    height: var(--q1-altura-imagem-detalhe);
    object-fit: contain;
}

.card_produto_detalhes .marca {
    max-height: var(--q1-altura-marca);
    object-fit: contain;
}

/* --- Card de servico ------------------------------------------------------ */

.card_servico:hover {
    box-shadow: var(--q1-sombra-card) !important;
}

.card_servico .imagem_servico {
    width: 100%;
    height: var(--q1-altura-imagem-card-servico);
    object-fit: contain;
}

.card_servico h6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.card_servico p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.card_servico_detalhes .imagem_servico {
    width: 100%;
    height: var(--q1-altura-imagem-detalhe);
    object-fit: contain;
}

/* --- Card de postagem ----------------------------------------------------- */

.card_blog:hover {
    box-shadow: var(--q1-sombra-card) !important;
}

.card_blog .imagem_blog {
    width: 100%;
    height: var(--q1-altura-imagem-card);
    object-fit: contain;
}

.card_blog h6 {
    height: var(--q1-altura-titulo-card);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.card_blog p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.card_blog_detalhes .imagem_blog {
    width: 100%;
    height: var(--q1-altura-imagem-detalhe);
    object-fit: contain;
}

/* --- Botao flutuante: voltar ao topo -------------------------------------- */
/* Comeca escondido; o static/js/site.js mostra depois de 40px de rolagem. */

#ButtonScrollTop {
    display: none;
    position: fixed;
    bottom: 5.5rem;
    right: 1.8rem;
    z-index: var(--q1-z-flutuante);
    outline: none;
    cursor: pointer;
    transition: var(--q1-transicao);
    color: var(--q1-grafite) !important;
    background: var(--q1-laranja);
    border-color: var(--q1-laranja);
}

#ButtonScrollTop:hover {
    transition: var(--q1-transicao);
    color: var(--q1-laranja) !important;
    background: var(--q1-grafite);
    border-color: var(--q1-grafite);
}

/* --- Botao flutuante: WhatsApp -------------------------------------------- */

#ButtonWhatsapp {
    position: fixed;
    bottom: 1.5rem;
    right: 0.7rem;
    z-index: var(--q1-z-flutuante);
    outline: none;
    cursor: pointer;
    transition: var(--q1-transicao);
}

#ButtonWhatsapp img {
    width: 3rem;
}

/* --- Widget Jivo ---------------------------------------------------------- */
/* Esconde o botao do widget de chat Jivo, desativado (o script esta comentado
   no fim do base.html). Inofensivo enquanto o widget nao carrega. */

.dfBDQI {
    display: none !important;
}