/* ========================================== */
/* VARIÁVEIS E CONFIGURAÇÕES GLOBAIS          */
/* ========================================== */
:root {
    --cor-1: #0d6efd;  /* Fundo do menu, rodapé e cabeçalho de seções */
    --cor-2: #212529;  /* Textos do menu, cabeçalho e rodapé */
    --cor-3: #ffc107;  /* Fundo informações cabeçalho e rodapé */
    --cor-4: #0b5ed7;  /* Link ativo do menu */
    --cor-5: #f8f9fa;  /* Cor principal do fundo do site */
    --cor-6: #212529;  /* Cor de Títulos */
    --cor-7: #6c757d;  /* Cor dos textos gerais */
    --cor-8: #212529;  /* Cor do botão Painel Admin */
    --cor-9: #198754;  /* Botão Entrar */
    --cor-10: #ff0000; /* Botão Sair */    
    --cor-11: #212529; /* Sub-botões */    
    --cor-12: #f8f9fa; /* Texto de TODOS os botões */    
    --cor-13: #f8f9fa; /* Cor das seções */    
    --cor-14: #f8f9fa; /* Cor dos Titulos de produtos */    
    --cor-15: #f8f9fa; /* Cor do Fundo do Banner e CTA */    
    --cor-16: #f8f9fa; /* Cor do Texto do Banner e CTA */    
    --cor-17: #f8f9fa; /* Cor do Fundo do botão Banner e CTA */    
    --cor-18: #f8f9fa; /* Cor do Texto do botão Banner e CTA */    
}

html, body {
    overflow-x: hidden;
}

body {
    background-color: var(--cor-5) !important;
}

/* Quando a barrinha de avisos ESTÁ ATIVA (Menu + Barrinha) */
body.com-barra-topo {
    margin-top: 127px !important; /* Teste 138px ou 140px se precisar de mais folga */
}

/* Quando a barrinha de avisos ESTÁ VAZIA/DESLIGADA (Apenas o Menu) */
body.sem-barra-topo {
    margin-top: 101px !important;
}

p {
    font-size: 1.05rem; 
    line-height: 1.7; 
    text-align: justify !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    color: var(--cor-7);
}

/* ========================================== */
/* TIPOGRAFIA E PLACEHOLDERS UNIFICADOS       */
/* ========================================== */
.texto-comum { 
    color: var(--cor-7) !important;
}

.texto-comum::-webkit-input-placeholder,
.texto-comum::placeholder,
.texto-comum::-moz-placeholder,
.texto-comum:-ms-input-placeholder,
.texto-comum::-ms-input-placeholder {
    color: var(--cor-7) !important;
    opacity: 1 !important;
}

/* ========================================== */
/* HEADER E NAVBAR                            */
/* ========================================== */
.navbar {
    height: 100px;
}

.navbar .container, 
.navbar .container-fluid {
    display: flex;
    align-items: center;
}

.logo-sobrescrita {
    max-height: 90px;
    width: auto;
    object-fit: contain;
}

.navbar-nav .nav-link.active {
    color: var(--cor-4) !important;
}

.navbar-dark .navbar-nav .nav-link:not(.active) {
    color: var(--cor-2) !important;
}

/* ========================================== */
/* CLASSES DE CORES E BOTÕES                  */
/* ========================================== */
.barc-topo-rodape {
    background-color: var(--cor-3) !important;
    color: var(--cor-2) !important;
    font-size: 0.75rem;
}

.barp-topo-rodape {
    background-color: var(--cor-1) !important;
    color: var(--cor-2);
}

.barc-topo-rodape a, 
.barp-topo-rodape a {
    color: var(--cor-2);
    text-decoration: none;
}

.barc-topo-rodape a:hover, 
.barp-topo-rodape a:hover {
    color: var(--cor-4);
}

/* Botões unificados (estados agrupados para evitar redundância) */
.header-corp-btns, 
.header-corp-btns:hover, 
.header-corp-btns:focus, 
.header-corp-btns:active {
    background-color: var(--cor-8) !important;
    color: var(--cor-12) !important;
}

.header-corp-btns-login, 
.header-corp-btns-login:hover, 
.header-corp-btns-login:focus, 
.header-corp-btns-login:active {
    background-color: var(--cor-9) !important;
    color: var(--cor-12) !important;
}

.header-corp-btns-logout, 
.header-corp-btns-logout:hover, 
.header-corp-btns-logout:focus, 
.header-corp-btns-logout:active {
    background-color: var(--cor-10) !important;
    color: var(--cor-12) !important;
}

/* 1. Botões normais de paginação (Anterior, Próximo, outras páginas) */
.btns-grl {
    background-color: var(--cor-11) !important;
    color: var(--cor-12) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Hover e Foco nos botões normais */
.btns-grl:hover, 
.btns-grl:focus {
    background-color: var(--cor-12) !important;
    color: var(--cor-11) !important;
}

/* 2. Botão da PÁGINA ATUAL (Destaque exclusivo com cores invertidas) */
.btns-grl-ativo {
    background-color: var(--cor-12) !important;
    color: var(--cor-11) !important;
    font-weight: bold !important;
    border: 1px solid var(--cor-12) !important;
}

/* 3. Botões "Anterior" ou "Próxima" quando DESABILITADOS (nos limites de início/fim) */
.pagination .page-item.disabled .page-link {
    background-color: var(--cor-11) !important;
    color: var(--cor-12) !important;
    opacity: 0.6 !important; /* Deixa suave/opaco indicando que não há para onde ir */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    cursor: not-allowed;
}

.btns-grl-inv, 
.btns-grl-inv:hover, 
.btns-grl-inv:focus, 
.btns-grl-inv:active {
    background-color: var(--cor-12) !important;
    color: var(--cor-11) !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
}

.textos-header-footer {
    color: var(--cor-2) !important;
}

a.textos-header-footer:hover{
    color: var(--cor-2) !important;
}

/* ========================================== */
/* BANNER FULL WIDTH                          */
/* ========================================== */
.banner-full {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    text-align: center !important;
}

.banner-full h1.display-4 {
    text-align: center !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    /* Reduzimos o mínimo para 1.4rem e a escala para 3.2vw para dar mais respiro nas bordas */
    font-size: clamp(1.4rem, 3.2vw, 3.5rem) !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

.banner-full p.lead {
    text-align: center !important;
    /* Reduzimos o mínimo para 0.8rem para afastar das setas no mobile */
    font-size: clamp(0.8rem, 1.2vw, 1.25rem) !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

.banner-full .carousel-item > div {
    height: 38vw !important;
    min-height: 280px !important;
    max-height: 650px !important;
}

.cor-fundo-banner{
    background-color: var(--cor-15) !important; /* Cor do Fundo do Banner e CTA */
}

.cor-texto-banner{
    color: var(--cor-16); /* Cor do Texto do Banner e CTA */
}

.btns-banner, 
.btns-banner:hover, 
.btns-banner:focus, 
.btns-banner:active{
    background-color: var(--cor-17) !important; /* Cor do Fundo do botão Banner e CTA */
    color: var(--cor-18) !important; /* Cor do texto do botão Banner e CTA */ 
    border: 1px solid rgba(255,255,255,0.5) !important;
}

/* ========================================== */
/* TABELAS E CARTÕES                          */
/* ========================================== */
.table-custom-header th {
    background-color: var(--cor-1) !important;
    color: var(--cor-2) !important;
    border-color: transparent !important;
}

.table-custom-body td {
    background-color: var(--cor-13) !important;
    color: var(--cor-6);
}

.table-custom-body tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.cores-secao {
    background-color: var(--cor-13) !important;
    color: var(--cor-7) !important;
}

.card-servico {
    background-color: var(--cor-13) !important;
    color: var(--cor-7);
    height: 280px;
    background-position: center;
    background-size: cover;
}

.titulo-card-servico {
    color: var(--cor-14) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    min-height: 2.4em;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.badge-valor {
    font-size: 0.85rem;
}

.card-post {
    background-color: var(--cor-13) !important;
    color: var(--cor-7);
}

.titulo-card-post {
    color: var(--cor-6) !important;
}

.card-post img {
    height: 180px;
    object-fit: cover;
}

.card-post a {
    text-decoration: none;
}

.post-photo{
    height: 420px;
}

.item-detalhe-img-altura {
    height: 376px; 
}

/* ========================================== */
/* UTILITÁRIOS E SCROLLBARS                   */
/* ========================================== */
.galeria-item-altura {
    height: 180px;
}

.galeria-item-svc-altura {
    height: 180px;
}

.transition-hover {
    transition: transform 0.3s ease !important;
}

.transition-hover:hover {
    transform: scale(1.05);
}

.hover-white:hover {
    color: #ffffff !important;
}

.footer-menu-list {
    column-count: 2;
    column-gap: 20px;
}

.footer-menu-list li {
    break-inside: avoid;
}

.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}
.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 0px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* ========================================== */
/* MEDIA QUERY: DESKTOP (>= 1200px)           */
/* ========================================== */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-collapse {
        overflow-x: auto;
        flex-wrap: nowrap;
        overflow: visible !important;
    }
    
    .navbar-expand-xl .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .navbar-expand-xl .navbar-nav .nav-item {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .navbar-scroll-safe {
        max-width: 500px;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) transparent;
    }

    .navbar-scroll-safe::-webkit-scrollbar {
        height: 4px;
    }

    .navbar-scroll-safe::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 4px;
    }
}

/* ========================================== */
/* MEDIA QUERY: MOBILE (< 1200px)             */
/* ========================================== */
@media (max-width: 1199.98px) {
    .fixed-top {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1030;
    }

    .logo-sobrescrita {
        max-height: 75px;
    }

    .navbar-toggler {
        background-color: var(--cor-1) !important;
        border: 1px solid var(--cor-2) !important;
    }

    .navbar-toggler-icon {
        filter: invert(1);
    }
    
    .navbar-collapse {
        position: absolute;
        top: 87px;
        left: 0.75rem;
        right: 0.75rem;
        padding: 0 25px;
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
        z-index: 1050;
        margin-top: 2px;
        text-align: right;
        max-height: 75vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) transparent;
    }

    .navbar-collapse::-webkit-scrollbar {
        width: 4px;
    }
        
    .navbar-collapse::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 4px;
    }

    .navbar-collapse .nav-link {
        margin: 8px 0;
        display: inline-block;
        width: auto;
    }

    .navbar-collapse .d-flex.align-items-center {
        justify-content: flex-end !important;
    }

    .navbar-collapse .btn-sm {
        margin: 15px 0;
    }

    .galeria-item-altura {
        height: 240px;
    }
}

@media (max-width: 575.98px) {
    .item-detalhe-img-altura {
        height: 280px; 
    }

    .post-photo{
        height: 280px;
    }

    .galeria-item-svc-altura {
        height: 130px;
    }

    .galeria-item-altura {
        height: 220px;
    }
    
}