/* =========================================================
   ESTILOS DAS PÁGINAS INTERNAS

   As páginas internas (exames, convenios, coleta, sobre,
   contato) usam as classes do tema original, cujo CSS
   principal não acompanha esta instalação. Este arquivo
   reconstrói essas classes seguindo a identidade visual
   do site.

   IMPORTANTE: css/responsive.css é um fragmento do tema
   original e traz regras soltas (bordas em .pull-right,
   position absoluta em .text-box) que quebram o layout sem
   o CSS principal. A primeira seção abaixo neutraliza essas
   regras dentro dos nossos componentes.
   ========================================================= */

/* =========================================================
   1. NEUTRALIZAÇÃO DAS REGRAS ÓRFÃS DO TEMA
   ========================================================= */
.single-service-style-one .pull-left,
.single-service-style-one .pull-right,
.single-contact-info-style-one .pull-left,
.single-contact-info-style-one .pull-right {
    float: none !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    position: static !important;
    width: auto !important;
    right: auto !important;
    left: auto !important;
}

/* =========================================================
   2. ESTRUTURA
   ========================================================= */
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #33404f;
    line-height: 1.6;
}

.thm-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
}

.sec-pad   { padding: 70px 0; }
.pt0       { padding-top: 0; }
.mb0       { margin-bottom: 0; }
.white-bg  { background: #fff; }

img { max-width: 100%; height: auto; }

/* =========================================================
   3. BANNER DO TOPO

   images/header-biodata.jpg é 1920x500 (proporção 3.84:1) e o
   logotipo fica na borda esquerda. Com altura fixa + cover, o
   navegador amplia a imagem para preencher a altura e corta as
   laterais - justamente onde está o logotipo.

   No desktop (>=992px) a largura da tela já obriga a imagem a
   escalar o suficiente, e o corte é zero. O problema aparece só
   abaixo disso, onde a altura fixa força a ampliação lateral.

   Solução: abaixo de 992px a imagem cabe inteira (contain) e a
   altura acompanha a proporção, em vez de ser fixa em 220px.
   ========================================================= */
/* A cor de fundo evita faixas brancas enquanto a imagem carrega e
   nas laterais quando a imagem não preenche toda a largura. */
.top-header {
    background-color: #0b2b5b !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* No desktop mantém os 220px originais com cover: nessa largura a
   proporção é próxima da imagem e o corte é imperceptível. */

@media (max-width: 991px) {
    /* Abaixo desta largura o corte lateral começa a comer o logotipo,
       então a imagem passa a caber inteira (contain) e a altura
       acompanha a proporção 500/1920 = 26.04%. */
    .top-header {
        height: auto !important;
        background-size: contain !important;
    }

    .top-header .banner-link {
        height: 0 !important;
        padding-bottom: 26.04%;
        width: 100%;
        display: block;
    }
}

/* =========================================================
   4. MENU PRINCIPAL
   ========================================================= */
.main-nav ul li a.ativo {
    background-color: #0a4aa0 !important;
    color: #fff !important;
}

/* Barra do menu: hambúrguer + lista + botão Resultados.
   custom-biodata.css aplica flex com !important em .main-nav ul,
   por isso as regras abaixo também usam !important. */
.main-nav .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.main-nav .nav-menu {
    flex: 1 1 auto;
    justify-content: center !important;
}

/* Botão Resultados fica fora da lista e nunca colapsa. */
.main-nav .btn-resultados {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Hambúrguer (escondido no desktop) --- */
.nav-toggle {
    display: none;
    flex: 0 0 auto;
    width: 46px;
    height: 40px;
    padding: 9px 8px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 6px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}

.nav-toggle:focus { outline: 2px solid #ffd400; outline-offset: 2px; }

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: transform .25s ease, opacity .2s ease;
}

/* Vira "X" quando o menu está aberto. */
.nav-toggle.aberto .nav-toggle-bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
.nav-toggle.aberto .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.aberto .nav-toggle-bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* --- Mobile --- */
@media (max-width: 991px) {
    .nav-toggle { display: flex; }

    /* A lista sai do fluxo e vira painel abaixo da barra. */
    .main-nav .nav-menu {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        background: #0d5bbf;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
        padding: 8px 0 !important;
        z-index: 998;
    }

    .main-nav .nav-menu.aberto { display: flex !important; }

    .main-nav { position: relative; }

    .main-nav .nav-menu li { display: block !important; width: 100%; }

    .main-nav .nav-menu li a {
        display: block;
        width: 100%;
        text-align: left;
        padding: 14px 22px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .main-nav .nav-menu li:last-child a { border-bottom: none; }
}

@media (max-width: 480px) {
    .main-nav .btn-resultados {
        padding: 9px 14px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   5. ACESSO RÁPIDO (cartões da home)

   custom-biodata.css fixa .card em height:150px, mas o conteúdo
   (ícone + título + descrição de 3 a 4 linhas) passa de 200px.
   O texto vazava para fora da borda. A altura passa a ser
   mínima, e o cartão cresce conforme o conteúdo.
   ========================================================= */
.acesso-rapido .cards {
    align-items: stretch;
}

.acesso-rapido .card {
    height: auto !important;
    min-height: 175px;
    padding: 26px 22px !important;
    justify-content: flex-start !important;
    text-align: center;
    align-items: center;
}

.acesso-rapido .card .icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 14px;
}

.acesso-rapido .card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0b2b5b;
    margin: 0 0 10px;
    line-height: 1.3;
}

.acesso-rapido .card p {
    font-size: 13px;
    line-height: 1.6;
    color: #5a6675;
    margin: 0;
}

@media (max-width: 767px) {
    .acesso-rapido .card {
        width: 100%;
        max-width: 320px;
        min-height: 0;
    }
}

/* =========================================================
   6. BANNER DAS PÁGINAS INTERNAS
   ========================================================= */
.inner-banner {
    background: linear-gradient(rgba(11, 43, 91, .82), rgba(11, 43, 91, .82)),
                url('../images/inner-banner-1-1.jpg') no-repeat center center;
    background-size: cover;
    padding: 60px 0;
    color: #fff;
    text-align: center;
}

.inner-banner h3 {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: .3px;
}

.inner-banner .breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
    width: auto;
}

.inner-banner .breadcrumb-list li      { display: inline-block; }
.inner-banner .breadcrumb-list li a    { color: #ffd400; text-decoration: none; }
.inner-banner .breadcrumb-list li a:hover { text-decoration: underline; }
.inner-banner .breadcrumb-list li span { color: rgba(255, 255, 255, .85); }

/* =========================================================
   7. TÍTULO DE SEÇÃO
   ========================================================= */
.sec-title { margin-bottom: 50px; }

.sec-title h3 {
    font-size: 27px;
    line-height: 1.45;
    color: #0b2b5b;
    font-weight: 700;
    margin: 0 auto 18px;
    max-width: 950px;
}

.sec-title p {
    font-size: 16px;
    line-height: 1.8;
    color: #5a6675;
    max-width: 850px;
    margin: 0 auto;
}

.sec-title .line {
    width: 70px;
    height: 3px;
    background: #1e73be;
    margin: 25px auto 0;
    border-radius: 3px;
}

/* =========================================================
   8. SOBRE
   ========================================================= */
.about-style-one img {
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(11, 43, 91, .13);
}

.about-style-one-content h3 {
    font-size: 25px;
    line-height: 1.5;
    color: #0b2b5b;
    font-weight: 700;
    margin: 0 0 22px;
}

.about-style-one-content p {
    font-size: 15px;
    line-height: 1.85;
    color: #5a6675;
    margin-bottom: 16px;
}

.about-style-one-content .highlight {
    font-weight: 700;
    color: #0b2b5b;
    background: #f3f7fb;
    border-left: 4px solid #1e73be;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
}

.color-one { color: #1e73be; }
.color-two { color: #0a4aa0; }

@media (max-width: 991px) {
    .about-style-one img { margin-bottom: 35px; }
}

/* =========================================================
   9. CARTÕES DE EXAMES  (flexbox, sem floats)
   ========================================================= */
.service-style-one .row {
    display: flex;
    flex-wrap: wrap;
}

.service-style-one .row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

.single-service-style-one {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    background: #fff;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    padding: 22px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.single-service-style-one:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11, 43, 91, .14);
    border-color: #cfdcea;
}

.single-service-style-one .img-box {
    flex: 0 0 150px;
    max-width: 150px;
}

.single-service-style-one .img-box img {
    border-radius: 8px;
    width: 100%;
    display: block;
}

.single-service-style-one .text-box { flex: 1 1 auto; }

.single-service-style-one .text-box h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0b2b5b;
    margin: 0 0 10px;
    transition: color .2s ease;
}

.single-service-style-one .text-box a { text-decoration: none; }
.single-service-style-one .text-box a:hover h3 { color: #1e73be; }

.single-service-style-one .text-box p {
    font-size: 14px;
    line-height: 1.75;
    color: #5a6675;
    margin: 0 0 14px;
}

.more-btn {
    display: inline-block;
    color: #1e73be;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.more-btn i { margin-left: 4px; }
.more-btn:hover { color: #0a4aa0; text-decoration: none; }

@media (max-width: 600px) {
    .single-service-style-one {
        flex-direction: column;
        gap: 15px;
    }
    .single-service-style-one .img-box {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
}

/* =========================================================
   10. BLOCOS DE CONTATO / COLETA  (cartões de altura igual)
   ========================================================= */
.contact-info-style-one { padding: 70px 0; }

.contact-info-style-one .row {
    display: flex;
    flex-wrap: wrap;
}

.contact-info-style-one .row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

.single-contact-info-style-one { width: 100%; display: flex; }

.single-contact-info-style-one .inner-box {
    width: 100%;
    background: #fff;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    padding: 30px 22px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.single-contact-info-style-one .inner-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11, 43, 91, .14);
    border-color: #cfdcea;
}

.single-contact-info-style-one .icon-box {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    background: #f3f7fb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-contact-info-style-one .icon-box img {
    max-width: 38px;
    display: block;
}

.single-contact-info-style-one h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0b2b5b;
    margin: 0 0 14px;
}

.single-contact-info-style-one p {
    font-size: 14px;
    line-height: 1.75;
    color: #5a6675;
    margin: 0 0 10px;
}

.single-contact-info-style-one p:last-child { margin-bottom: 0; }

.single-contact-info-style-one p b { color: #0b2b5b; }

.single-contact-info-style-one p span {
    font-size: 18px;
    font-weight: 700;
    color: #0b2b5b;
}

.single-contact-info-style-one a { color: #1e73be; text-decoration: none; }
.single-contact-info-style-one a:hover { text-decoration: underline; }

/* Aviso em texto no rodapé dos convênios */
.convenios-aviso .row { display: block; }

.convenios-aviso p {
    font-size: 15px;
    line-height: 1.85;
    color: #5a6675;
    margin: 0 0 14px;
}

.convenios-aviso p b { color: #0b2b5b; }

/* =========================================================
   11. LOGOTIPOS DOS CONVÊNIOS
   ========================================================= */
.convenios-logos .inner-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 18px;
}

/* Os logos não precisam do destaque dos demais cartões. */
.convenios-logos .inner-box:hover {
    transform: none;
    box-shadow: none;
    border-color: #e1e7ee;
}

.convenios-logos .inner-box img {
    max-height: 80px;
    width: auto;
    margin: 0 auto;
    filter: grayscale(100%);
    opacity: .75;
    transition: filter .25s ease, opacity .25s ease;
}

.convenios-logos .inner-box:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* =========================================================
   12. MAPA
   ========================================================= */
.google-map {
    width: 100%;
    height: 420px;
    background: #e9eef5;
    line-height: 0; /* remove a folga que o iframe inline deixa embaixo */
}

.google-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Botão "Como chegar" logo abaixo do mapa. */
.mapa-acoes {
    background: #fff;
    padding: 18px 20px;
    border-bottom: 1px solid #e1e7ee;
}

.mapa-acoes a {
    display: inline-block;
    background: #1e73be;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding: 11px 26px;
    border-radius: 8px;
    transition: background .2s ease;
}

.mapa-acoes a:hover {
    background: #0a4aa0;
    color: #fff;
}

.mapa-acoes a i { margin-right: 7px; }

@media (max-width: 767px) {
    .google-map { height: 300px; }
}

/* =========================================================
   13. FORMULÁRIO DE ATENDIMENTO
   ========================================================= */
.appointment-style-one .row {
    display: flex;
    flex-wrap: wrap;
}

.appointment-form {
    background: #fff;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    padding: 34px;
    height: 100%;
}

.appointment-form h3 {
    font-size: 25px;
    font-weight: 700;
    color: #0b2b5b;
    margin: 0 0 12px;
}

.appointment-form > p {
    font-size: 15px;
    line-height: 1.75;
    color: #5a6675;
    margin-bottom: 28px;
}

.frm-control { margin-bottom: 20px; }

.frm-control input[type="text"],
.frm-control select,
.frm-control textarea,
.frm-control .bootstrap-select > .btn {
    width: 100%;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #f6f9ff;
    padding: 13px 15px;
    font-size: 14px;
    color: #33404f;
    outline: none;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease;
}

.frm-control input[type="text"]:focus,
.frm-control select:focus,
.frm-control textarea:focus {
    border-color: #1e73be;
    background: #fff;
}

.frm-control input::placeholder,
.frm-control textarea::placeholder { color: #93a1b3; }

.frm-control textarea {
    min-height: 150px;
    resize: vertical;
    margin-bottom: 16px;
}

.appointment-form button[type="submit"] {
    background: #1e73be;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 36px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}

.appointment-form button[type="submit"]:hover { background: #0a4aa0; }

.form-result:empty { display: none; }

/* =========================================================
   14. HORÁRIO DE FUNCIONAMENTO
   ========================================================= */
.appointment-time { width: 100%; }

.appointment-time .inner-box {
    background: #0b2b5b;
    border-radius: 12px;
    padding: 34px 30px;
    color: #fff;
    height: 100%;
}

.appointment-time h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(255, 255, 255, .18);
}

.signle-time-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
}

.signle-time-box:last-child { border-bottom: none; }
.signle-time-box .day-name  { font-weight: 700; color: #fff; }
.signle-time-box .time-line { color: #ffd400; font-weight: 700; }

@media (max-width: 991px) {
    .appointment-time { margin-top: 30px; }
    .appointment-form { height: auto; }
}

/* =========================================================
   15. RODAPÉ
   ========================================================= */
.site-footer { padding: 55px 0 20px; }

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: space-between;
    text-align: left;
}

.footer-col { flex: 1 1 280px; }

.footer-col h4 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1e73be;
    display: inline-block;
}

.footer-col p {
    font-size: 14px;
    line-height: 1.85;
    color: #d5dee9;
    margin-bottom: 10px;
}

.footer-col p i { color: #ffd400; margin-right: 8px; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }

.footer-links li a,
.footer-col a {
    color: #d5dee9;
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease;
}

.footer-links li a:hover,
.footer-col a:hover { color: #ffd400; }

.footer-bottom {
    margin-top: 38px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    text-align: center;
}

.footer-bottom p { margin: 0; font-size: 13px; color: #b9c6d6; }

/* =========================================================
   16. BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================= */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    z-index: 999;
    transition: transform .2s ease;
}

.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* =========================================================
   17. RESPONSIVO
   ========================================================= */
@media (max-width: 991px) {
    .contact-info-style-one .row > [class*="col-"],
    .service-style-one .row > [class*="col-"] {
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .inner-banner        { padding: 45px 0; }
    .inner-banner h3     { font-size: 27px; }
    .sec-pad             { padding: 50px 0; }
    .sec-title h3        { font-size: 22px; }
    .contact-info-style-one { padding: 50px 0; }
    .appointment-form    { padding: 24px; }
    .footer-grid         { text-align: center; }
    .footer-col h4       { display: block; }
    .footer-col p i      { display: inline-block; }

    /* As colunas do tema empilham; garante largura total. */
    .contact-info-style-one .row > [class*="col-"],
    .service-style-one .row > [class*="col-"],
    .appointment-style-one .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
    }
}