/* 
Paleta de cores TheBravalley

marrom/bege sofisticado 
color: #b29b81;

verde acinzentado
color: #78877d;

cinza claro
color: #bfbcbc;

preto azulado / azul-noite
color: #0b0d18;
*/

body {
  padding-top: 100px; /* Ajuste conforme a altura do seu header */
  font-family: 'Noah Grotesque', sans-serif;
  color: #8a715a;
}

/* ---------- CORES BASE ---------- */
:root {
    --primary: #78877d;
    --secondary: rgb(249,249,249);
    --light: #f8f9fa;
    --dark: #0b0d18;
    --muted: #b29b81;

    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
}

/* ---------- BACKGROUNDS ---------- */
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-light { background-color: var(--light) !important; }
.bg-dark { background-color: var(--dark) !important; }

/* ---------- TEXTOS ---------- */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-muted { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }

/* link menu */
.nav-link.text-primary:hover {
    color: var(--primary) !important; 
}

.nav-link.text-secondary:hover {
    color: var(--light) !important; 
}

/* ---------- BORDAS ---------- */
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success { border-color: var(--success) !important; }
.border-info { border-color: var(--info) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }

/* ---------- BOTÕES ---------- */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #75877f; /* Tom mais escuro no hover */
    border-color: #75877f;
    color: #fff;
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #333;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #e0e0e0; /* Tom mais escuro no hover */
    border-color: #e0e0e0;
    color: #333;
}

/* ---------- LINKS ---------- */
a, .link-primary {
    color: var(--primary);
    text-decoration: none;
}
a:hover, .link-primary:hover {
    color: #75877f; /* Tom mais escuro no hover */
    text-decoration: underline;
}

/* ---------- ALERTS ---------- */
.alert-primary { background-color: var(--primary); color: #fff; border-color: var(--primary); }
.alert-secondary { background-color: var(--secondary); color: #333; border-color: var(--secondary); }

/* ---------- OUTROS ---------- */
/* Input, form-control focus */
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(136, 153, 140, 0.25);
}

.card {
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden; /* garante que os filhos respeitem o border-radius */
}
.card-header,
.card-body,
.card-footer {
    border-radius: 0; /* zera o border-radius interno */
}
.card-header {
    color: #fff;
    font-weight: 600;
}
.card-footer {
    background-color: #f0f0f0;
}
/* -------------------- ACCORDION / COLLAPSE -------------------- */
.accordion .card-header {
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.accordion .card-header:hover {
    background-color: #75877f;
}
.accordion .card-header.active {
    background-color: #75877f;
}
.accordion .card-body {
    background-color: var(--secondary);
    color: #333;
}

/* -------------------- FORMULÁRIOS -------------------- */
.form-control {
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(136, 153, 140, 0.25);
}

/* -------------------- TABELAS -------------------- */
.table {
    background-color: var(--secondary);
}
.table th {
    background-color: var(--primary);
    color: #fff;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}


/* Mobile */
@media (max-width: 480px) {
  #app {
    padding-top: 50px;            /* padrão no celular */
  }
}

/* Header em transição */
#mainHeader {
transition: all 0.3s ease-in-out;
z-index: 9999;
}

/* Classe que será adicionada quando o header encolher */
#mainHeader.shrink {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}

#mainHeader.shrink #logoHeader {
max-height: 50px !important; /* diminui a logo */
}

/* -------------------- GALERIA DE IMAGENS -------------------- */
.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: transform .2s;
}
.gallery img:hover {
    transform: scale(1.05);
}
.instagram-img {
    width: 100%;       
    height: 250px;     
    object-fit: cover; 
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.instagram-img:hover {
    transform: scale(1.05);
}

/* -------------------- QUEM SOMOS -------------------- */

.image-box {
  background-image: url('/img/placa-destilaria.jpg');
  background-size: cover;          /* cobre toda a área da div */
  background-position: center;     /* mostra a parte central da imagem */
  background-repeat: no-repeat;
  min-height: 300px;               /* altura mínima para telas pequenas */
}
.col-md-6.d-flex .image-box {
  height: 100%;                    /* faz a imagem preencher a altura da coluna */
}

.image-box2 {
  height: 100%; /* altura igual à da coluna do texto */
  min-height: 300px; /* define uma altura mínima para telas pequenas */
  background-image: url('/img/alambique.jpg');
  background-size: cover; /* cobre todo o espaço da div */
  background-position: center center; /* mostra a parte central da imagem */
  background-repeat: no-repeat;
}

.image-box3 {
  background-image: url('/img/arvores.jpeg');
  background-size: cover;       /* cobre toda a área da div */
  background-position: center;  /* mostra a parte central da imagem */
  background-repeat: no-repeat;
  min-height: 300px;            /* altura mínima para telas pequenas */
}
.col-md-6.d-flex .image-box3 {
  height: 100%;                 /* preenche a altura da coluna do texto */
}

.image-box4 {
  background-image: url('/img/alambique2.jpg');
  background-size: cover;       /* cobre toda a área da div */
  background-position: center;  /* mostra a parte central da imagem */
  background-repeat: no-repeat;
  min-height: 300px;            /* altura mínima para telas pequenas */
}
.col-md-6.d-flex .image-box4 {
  height: 100%;                 /* preenche a altura da coluna do texto */
}