/* Variáveis de Cor para Tema Dark Mode */
:root {
    --dark-custom: #1a1a1a; /* O preto bem escuro do fundo */
    --dark-deep: #121212;  /* O preto mais profundo para contraste */
    --gold: #709bae;       /* A cor principal dourada/ouro */
    --gold-hover: #e0b86a; /* Ouro mais claro para hover */
    --blue-call-to: #427287;
    --card-dark: #222222;  /* Fundo dos cards e elementos */
    --secondary-dark: #b0b0b0; /* Texto secundário claro */
    --text-dark-custom: #333333; /* Texto escuro em seções claras */
}

body {
    background-color: var(--dark-custom);
    color: #fff;
    font-family: 'Roboto', sans-serif; /* Fonte para corpo de texto */
}
a {
  color:  #6c757d !important;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: #0056b3;
  text-decoration: none;
}

/* Classes de Cores Personalizadas */
.bg-dark-custom { background-color: var(--dark-custom) !important; }
.bg-dark-deep { background-color: var(--dark-deep) !important; }
.bg-card-dark { background-color: var(--card-dark) !important; }
.bg-light-custom { background-color: #f8f9fa !important; color: var(--text-dark-custom); } /* Cor clara para seção 2 e 7 */
.text-gold { color: var(--gold) !important; }
.text-dark-custom { color: var(--text-dark-custom) !important; }
.text-secondary-dark { color: var(--secondary-dark) !important; }

/* Botões */
.btn-gold {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #000 !important;
    font-weight: 600;
}
.btn-gold:hover {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
}
.btn-outline-gold {
    color: var(--gold) !important;
    border-color: var(--gold);
}
.btn-outline-gold:hover {
    color: #000 !important;
    background-color: var(--gold);
    border-color: var(--gold);
}

/* Navegação */
.nav-link {
    color: #fff !important;
    font-weight: 500;
    transition: color 0.3s;
}
.nav-link:hover {
    color: var(--gold) !important;
}
/* Estilo para o item de menu ativo no Navbar (Desktop e Mobile) */
.navbar-nav .nav-item.active .nav-link {
    color: var(--gold) !important; /* Cor do texto Dourada para o ativo */
    background-color: transparent !important; /* Sem fundo */
    border-bottom: 2px solid var(--gold); /* Linha sutil abaixo */
    padding-bottom: 5px; /* Ajuste para acomodar a linha */
}

/* Garante que o hover do ativo não o desfaça */
.navbar-nav .nav-item.active .nav-link:hover {
    color: var(--gold) !important;
}

a.text-light:focus, a.text-light:hover {
  color: #333 !important;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--gold);
}

/* Títulos (Exemplo: Playfair Display) */
.custom-title, .custom-subtitle {
    font-family: 'Playfair Display', serif;
}

/* Imagem do Hero (Para replicar o corte diagonal e sombra) */
.hero-image-container {
    position: relative;
    padding: 20px 0;
}
.rounded-shadow-box {
    /* É difícil replicar o corte diagonal/circular perfeitamente com CSS puro sem SVG/Clip-path, 
       mas adicionamos uma sombra e borda para o efeito "em relevo" */
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(197, 163, 80, 0.4); /* Sombra e borda "ouro" */
}

/* Seção de Blog - Imagens Laterais */
.blog-side-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* Badge Dourado */
.badge-gold-outline {
    color: var(--gold);
    border: 1px solid var(--gold);
    background-color: transparent;
    padding: 0.4em 0.6em;
    border-radius: 3px;
    font-weight: 600;
}

/* Imagem do Testemunho */
.testimonial-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

/* --- Seção de Call to Action "Ficou com Dúvidas?" --- */

/* Cor de fundo baseada na imagem (azul acinzentado) */
.bg-blue-grey {
    background-color: var(--blue-call-to); /* Exemplo de um azul acinzentado próximo ao da imagem */
}

/* Título com a cor dourada, como na imagem */
.call-to-action h2.text-gold {
    color: #fff !important; /* Usando sua variável gold */
    font-size: 3.5rem; /* Ajuste para telas menores */
}

/* Botão "Agende seu horário" */
.btn-schedule-gold {
    color: #fff !important;
    border-color: #fff;
}
.btn-schedule-gold:hover {
    color: #000 !important;
    background-color: #fff;
    border-color: #fff;
}

/* Responsividade */
@media (max-width: 991.98px) {
    .call-to-action h2.text-gold {
        font-size: 2.5rem; /* Ajuste para telas menores */
    }
    .btn-schedule-gold {
        width: 100%; /* Botão ocupa a largura total no mobile */
        max-width: 250px; /* Limite a largura para não ficar gigante */
    }
}

/* Footer links */
footer a {
    transition: color 0.3s;
}
footer a:hover {
    color: var(--gold) !important;
}

/* Adicione esta classe no seu style.css */

.qualification-item {
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Adiciona uma borda invisível para evitar "jump" no hover */
}

.qualification-item:hover {
    border-color: var(--gold); /* Borda dourada sutil ao passar o mouse */
    transform: translateY(-2px); /* Efeito de elevação sutil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Aumenta a sombra */
}

.top-bar-phone-link {
    color: var(--secondary-dark) !important;
    text-decoration: none;
    transition: color 0.3s;
    /* Para mobile, garantir que os números pequenos fiquem visíveis */
    font-size: 0.85rem; 
}

.top-bar-phone-link:hover {
    color: var(--gold) !important;
    text-decoration: none;
}

/* Ajuste fino para a versão mobile */
.top-bar.d-block.d-lg-none .top-bar-phone-link span {
    font-size: 0.6rem; /* Texto ainda menor para caber na tela */
    line-height: 1.2;
}

.top-bar.d-block.d-lg-none .top-bar-phone-link i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}
.internal-pages-padding{
    padding-top: 100px;
}
/* SLIDER HERO SECTION */
.hero-slider .carousel-item {
    height: 75vh;
    min-height: 450px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative; /* Essencial para que o overlay funcione */
    padding-top: 100px;
}
/* NOVO: Sobreposição que cobre 100% do slide */
.hero-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Cor da sobreposição escura */
    z-index: 1; /* Garante que fique ABAIXO do conteúdo */
}
/* --- Seção de Título de Página Interna (Hero Breadcrumb) --- */
.page-title-hero {
    position: relative;
    padding-top: 180px; /* Ajuste para o padding-top do body + altura da Top Bar + Navbar */
    padding-bottom: 60px; /* Espaçamento inferior */
    text-align: center;
    overflow: hidden; /* Para garantir que o pseudo-elemento de fundo não vaze */
    background-color: var(--gold)!important;
}

/* Título principal da página */
.page-title-hero h1 {
    font-size: 3.5rem; /* Ajuste o tamanho da fonte conforme a imagem */
    color: #fff;
}

/* Estilo para o Breadcrumb */
.page-title-hero .breadcrumb {
    background-color: transparent !important; /* Fundo transparente */
    padding: 0;
    margin-bottom: 0;
}

.page-title-hero .breadcrumb-item a {
    color: var(--card-dark) !important; /* Link dourado */
    text-decoration: none;
    font-weight: 500;
}

.page-title-hero .breadcrumb-item.active {
    color: var(--secondary-dark) !important; /* Item ativo mais claro */
    font-weight: 400;
}

.page-title-hero .breadcrumb-item + .breadcrumb-item::before {
    color: var(--secondary-dark); /* Cor do separador */
}

/* Responsividade para o título */
@media (max-width: 767.98px) {
    .page-title-hero {
        padding-top: 180px; /* Menos padding no mobile */
        padding-bottom: 60px;
    }
    .page-title-hero h1 {
        font-size: 2.5rem;
    }
}

/* Estilo para indicadores (opcional) */
.carousel-indicators li {
    background-color: var(--secondary-dark);
}

.carousel-indicators .active {
    background-color: var(--gold);
}

/* Alinhar o conteúdo (Hero Text) no centro da viewport */
.hero-slider .container {
    height: 100%;
}
/* NOVO: Conteúdo do slide (texto/botões) */
.hero-slide-content {
    position: relative; /* Essencial para que o conteúdo fique por cima do overlay */
    z-index: 2; /* Garante que fique ACIMA do overlay */
    height: 100%; /* Permite alinhar o conteúdo verticalmente */
}

/* Ajuste fino (similar ao que você já tinha) */
.hero-slide-content .col-lg-8 {
    padding-left: 15px; /* Alinhamento do container */
}


/* Garante que o texto fique sempre à esquerda, como no rascunho */
.hero-slide-overlay {
    justify-content: flex-start !important;
}

/* Ajuste de altura para telas menores */
@media (max-width: 768px) {
    .hero-slider .carousel-item {
        height: 85vh;
        min-height: 400px;
    }
    .hero-slide-content .col-lg-8 {
        padding-top: 100px !important;
        padding-bottom: 50px !important;
    }
    .hero-slide-overlay > div {
        padding-top: 100px!important;
        padding-bottom: 50px!important;
    }
    .hero-slide-overlay h1 {
        font-size: 2.5rem; /* Ajuste para caber em telas pequenas */
    }
    .hero-slide-overlay p.w-75 {
        width: 100% !important;
    }
}

/* Remove o sublinhado do link que envolve o card e mantém a cor */
.card-link-area {
    text-decoration: none;
    color: inherit; /* Mantém a cor do texto padrão */
    display: block; /* Garante que o link ocupe toda a área da coluna */
}

/* Efeito Hover Elegante no Card */
.area-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--secondary-dark); /* Borda sutil */
    height: 100%; /* Garante que todos os cards na linha tenham a mesma altura */
}

.area-card-hover:hover {
    transform: translateY(-5px); /* Efeito de leve elevação */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important; /* Aumenta a sombra */
    border-color: var(--gold); /* Destaque na borda com a cor dourada */
}

/* Garante que o texto dentro do card não mude de cor no hover do link */
.card-link-area:hover .card-title {
    color: var(--gold) !important;
}

/* --- Cores e Utilitários para a Nova Seção --- */

/* Cor de fundo clara (Se você não a tem) */
/* Se bg-light-custom for o off-white do design */
.bg-light-custom {
    background-color: #f7f5f2; /* Exemplo de off-white/bege claro */
}

/* Cor pêssego/dourado claro para o fundo dos ícones */
.bg-gold-light {
    background-color: #f5e4d2; /* Cor pêssego/dourado bem claro */
}

/* Wrapper dos ícones nas estatísticas */
.metric-icon-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Impede que o ícone encolha no mobile */
}

/* Ajustes no título para o tema claro */
.custom-title.text-dark-custom {
    color: #333333; /* Cor de texto escuro */
}

/* Responsividade: Garante que os títulos não sejam muito grandes no mobile */
@media (max-width: 991.98px) {
    .success-metric-item {
        margin-bottom: 2.5rem !important;
    }
    .metric-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    .metric-icon-wrapper i {
        font-size: 1.5rem !important;
    }
    .display-4.custom-title {
        font-size: 2.5rem;
    }
}

.dNtlyB{display: none;}