/* THEME BOOTSTRAP: Sobrescrevendo variáveis nativas */
:root {
    /* Definindo a cor da marca (ex: Verde Azulado Moderno) */
    --bs-primary: #F6A850; 
    --bs-primary-rgb: 246, 168, 80;
    
    /* Cor secundária para textos suaves */
    --bs-secondary: #6c757d;
    
    /* Fonte Padrão */
    --bs-body-font-family: 'Inter', sans-serif;
}

/* CUSTOMIZAÇÕES GERAIS */
body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

/* HERO SECTION - CORRIGIDO PARA MOBILE */
.hero-section {
    /* Desktop: Altura confortável */
    min-height: 85vh; 
    background: linear-gradient(to right, #ffffff, #f8f9fa);
    /* Garante que o menu fixo não esconda o topo */
    padding-top: 80px; 
}

/* AJUSTES RESPONSIVOS (MOBILE) */
@media (max-width: 991.98px) {
    .hero-section {
        /* Mobile: Altura automática (o conteúdo define a altura) */
        min-height: auto;
        padding-bottom: 3rem;
        text-align: center; /* Centraliza tudo no celular */
    }

    /* Reduz títulos gigantes no celular */
    h1.display-4, h1.display-5 {
        font-size: 2.2rem !important;
    }
    
    /* Botões largura total no celular (Fáceis de clicar) */
    .hero-section .btn {
        width: 100%;
        display: block;
        margin-bottom: 0.75rem; /* Espaço entre botões empilhados */
    }

    /* Remove hover em dispositivos de toque para evitar bugs visuais */
    .hover-card:hover {
        transform: none !important;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    }
}

/* CARDS ESPECIALIDADES */
.card > p{
    text-align: justify;
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(159, 159, 159, 0.1) !important;
}

.icon-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(159, 159, 159, 0.1);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.hover-card:hover .icon-box {
    background-color: var(--bs-primary);
    color: white !important; /* Força o ícone a ficar branco */
}

/* SWIPER CUSTOM NAVIGATION */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
    background-color: var(--bs-primary);
    color: white;
}

/* =========================================
   CONTROLE DE ROLAGEM (SCROLL MARGIN)
   ========================================= */

/* MOBILE */
section {
    scroll-margin-top: 440px;
}

/* 3. Ajuste para DESKTOP (Telas grandes) */
@media (min-width: 992px) {
    section {
        scroll-margin-top: 110px;
    }
} */

html {
    scroll-behavior: auto;
    scroll-behavior: smooth;
}

/* ESTILO DOS LOGOS (CONVÊNIOS) */
.convenio-logo {
    height: 40px; /* Altura fixa garante alinhamento */
    width: auto;  /* Largura se adapta */
    object-fit: contain; /* Garante que a logo não distorça */
    
    /* Efeito Grayscale (Preto e Branco) */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
    mix-blend-mode: multiply; /* Ajuda a mesclar com fundo cinza */
}

/* Ao passar o mouse: Fica colorido e 100% visível */
.convenio-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1); /* Leve zoom */
}

/* AJUSTE TÉCNICO PARA O SWIPER CONTÍNUO */
/* Isso garante que a animação seja linear (sem pausas) */
.swiper-convenios .swiper-wrapper {
    transition-timing-function: linear;
}

/* Efeito de movimento contínuo (Ticker) */
.swiper-convenios .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}


.navbar-brand img {
    max-width: 100%; /* Garante que a logo nunca vaze a tela no celular */
    height: auto;    /* Mantém a proporção correta */
    max-height: 50px; /* Trava a altura máxima para não esticar a barra */
}


.badge-cinza {
    background-color: rgba(159, 159, 159, 0.1); /* A cor exata que você pediu */
    color: #555; /* Cor do texto (cinza escuro). Se preferir a cor da marca, apague essa linha */
}

/* ESTILO DOS CARDS DE CALENDÁRIO */
.calendar-card {
    transition: all 0.3s ease;
    background-color: #fff;
    border-color: #eef0f2 !important; /* Borda bem suave */
}

.calendar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: var(--bs-primary) !important; /* Fica verde ao passar o mouse */
}

/* CLASSE ESPECIAL: O DIA DE HOJE */
/* Essa classe será adicionada automaticamente pelo Javascript */
.calendar-card.today-highlight {
    background-color: var(--bs-primary); /* Fundo Verde */
    border-color: var(--bs-primary) !important;
    color: white !important;
    transform: scale(1.05); /* Um pouco maior que os outros */
    box-shadow: 0 10px 25px rgba(13, 138, 114, 0.3);
}

/* Ajusta as cores de texto dentro do card DESTAQUE para ficarem brancas */
.calendar-card.today-highlight h4,
.calendar-card.today-highlight span {
    color: white !important;
}

.calendar-card.today-highlight .badge {
    background-color: white !important;
    color: var(--bs-primary) !important;
}










/* ==========================================
   BOTÃO MARROM PERSONALIZADO
   ========================================== */
.btn-marrom {
    background-color: #8B4513; /* Cor de fundo marrom */
    border-color: #8B4513;     /* Cor da borda */
    color: #ffffff;            /* Cor do texto (branco) */
    transition: all 0.3s ease; /* Deixa a animação suave */
}

/* Efeito ao passar o mouse (fica um pouco mais escuro) */
.btn-marrom:hover {
    background-color: #5C2E0B; 
    border-color: #5C2E0B;
    color: #ffffff;
}




.orange-title{
    color: var(--bs-primary)
}