/**
 * custom.css
 * Todo ajuste visual que o Bootstrap 5 não cobre nativamente vai aqui.
 * Nunca usar <style> inline no HTML — este é o único lugar de CSS customizado.
 *
 * Identidade visual: Dr. Gabriel Melo (Ortopedia & Trauma do Esporte).
 * Paleta e fontes migradas da versão anterior do site (HTML/CSS legado, sem Bootstrap).
 */

/* ---------------------------------------------------------
   Variáveis de marca
--------------------------------------------------------- */
:root {
    --brand-primary: #113B63;   /* navy escuro — heros, footer, textos de título */
    --brand-secondary: #14457B; /* navy médio — hover, links, destaques */
    --brand-btn: #001B42;       /* navy quase preto — botões sólidos */
    --brand-light: #C1DBE8;     /* azul claro — fundos de destaque, badges */
    --brand-accent: #9FCBE8;    /* azul de acento — bordas, ícones, linhas */
    --brand-text-body: #666666;
    --brand-font: 'Montserrat', sans-serif;
    --brand-font-heading: 'Quicksand', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Compensa a navbar sticky ao navegar por âncora (ex: menu > "Contato").
   Sem isso, o navegador rola até o topo exato da seção e a navbar fixa
   cobre o título/eyebrow. --navbar-offset é calculada em JS (custom.js)
   com a altura real da navbar; o valor fixo é só o fallback sem JS.
   Sem folga extra somada aqui: a seção já tem padding-top próprio (py-5
   do Bootstrap ou override em px maior, como em #quem-somos) — se somar
   folga extra no scroll-margin, o rolamento para antes do topo da seção
   e sobra um pedaço da seção anterior (cor de fundo errada) aparecendo
   entre a navbar e o título. */
section[id] {
    scroll-margin-top: var(--navbar-offset, 84px);
}

body {
    font-family: var(--brand-font);
    color: var(--brand-text-body);
}

/* Respiro entre as seções de página inteira (rodada 27, quemsomos.html) —
   antes as seções só tinham o padding interno do `py-5` (3rem topo/base),
   então quando duas seções vizinhas tinham fundos parecidos (ex: a faixa
   "Filosofia" e a seção "Formação", ambas em tom claro) a transição ficava
   sem nenhuma separação visível, parecendo "colada". `.page-section` marca
   as seções de conteúdo da página (Hero, Filosofia, Formação, CTA final) e
   o seletor de irmã adjacente adiciona uma margem extra revelando o fundo
   branco da página entre elas — moderada, só pra dar respiro, sem exagero. */
.page-section + .page-section {
    margin-top: 2.5rem;
}

/* Rodada 30: distância entre "Formação" e o CTA final reduzida a pedido do
   usuário — a soma do padding-bottom padrão do .py-5 (3rem) + a margem geral
   acima (2.5rem) + o padding-top que o CTA já tinha ficava grande demais
   ("vazio" antes de a foto sequer terminar). Overrides só nessa dupla
   específica de seções — o `.page-section + .page-section` continua 2.5rem
   entre as outras seções do site, que o usuário não pediu pra mudar. Os
   seletores usam o `#formacao`/`.cta-final`, então têm especificidade maior
   que o `.py-5`/`.page-section + .page-section` que estão sobrescrevendo (o
   `!important` no padding-bottom é necessário pois os utilitários de espaço
   do Bootstrap 5 já usam `!important`). */
#formacao {
    padding-bottom: 1.5rem !important;
}

#formacao + .cta-final {
    margin-top: 1rem;
}

h1, h2, h3, h4, .navbar-brand {
    font-family: var(--brand-font-heading);
    font-weight: 600;
}

/* Largura de conteúdo do site aprovado (1200px) — os breakpoints padrão
   do container do Bootstrap (960/1140/1320px) deixavam o conteúdo mais
   largo/estreito do que a referência em telas grandes. */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

/* ---------------------------------------------------------
   Navbar
--------------------------------------------------------- */
.navbar-brand img { height: 40px; width: auto; }

.navbar .nav-link {
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--brand-secondary);
}

/* ---------------------------------------------------------
   Botões da marca (sobrepõe o azul padrão do Bootstrap)
--------------------------------------------------------- */
.btn-brand,
.btn-outline-brand {
    padding: .95rem 2.25rem;
    border-radius: 2px;
    font-weight: 500;
    font-size: .95rem;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.btn-brand:hover,
.btn-brand:focus,
.btn-outline-brand:hover,
.btn-outline-brand:focus {
    transform: translateY(-2px);
}

.btn-brand {
    background-color: var(--brand-btn);
    border-color: var(--brand-btn);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
}

.btn-outline-brand {
    background-color: transparent;
    border: 2px solid var(--brand-accent);
    color: #fff;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--brand-primary);
}

/* ---------------------------------------------------------
   Fundos e textos da marca
--------------------------------------------------------- */
.bg-brand-navy { background-color: var(--brand-primary); }
.bg-brand-light { background-color: var(--brand-light); }
.text-brand-accent { color: var(--brand-accent); }

.hero-tags {
    border-top: 2px solid var(--brand-accent);
    margin-top: 40px;
    padding-top: 24px;
    max-width: 520px;
}

/* Selo circular por trás do ícone do hero (existia no site aprovado
   e some se o <img> for usado solto, sem essa moldura). */
.hero-icon-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #1C5A99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-icon-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* Subtítulo centralizado de seção (ex: abaixo do h2 de "Especialidades") */
.section-subtitle { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Bloco de destaque dos Diferenciais */
.highlight-title {
    color: var(--brand-secondary);
    font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.15rem);
    line-height: 1.25;
    margin-bottom: 2.75rem;
    padding-bottom: 1.8rem;
    position: relative;
    display: block;
}

/* Traço de destaque abaixo do título — mesma linguagem visual do
   sublinhado usado nos títulos do rodapé (footer h4::after). */
.highlight-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90%;
    height: 3px;
    border-radius: 2px;
    background-color: var(--brand-primary);
}

.highlight-text { color: #3a5872; }

/* No mobile a logo ficava maior que o container e vazava a tela (a coluna
   passa a ocupar 100% da largura abaixo do breakpoint lg, mas o max-width
   de 480px do desktop sobrepunha o max-width:100% do .img-fluid por vir
   depois no cascade). Tamanho reduzido é o padrão; os 480px originais só
   voltam a partir do lg, onde a coluna já tem espaço de sobra. */
.highlight-icon { max-width: 340px; }

@media (min-width: 992px) {
    .highlight-icon { max-width: 480px; }
}

/* Variante clara do título/texto de destaque — usada quando o bloco fica
   sobre foto/fundo escuro (ex: .differentials-parallax), em vez do fundo
   claro padrão. */
.highlight-title-inverse { color: #fff; }
.highlight-title-inverse::after { background-color: var(--brand-accent); }
.highlight-text-inverse { color: #fff; }

/* Quando o título de destaque fica dentro de um bloco centralizado no
   mobile (ex: seção "Filosofia de tratamento", que centraliza abaixo do
   breakpoint lg), o traço acompanha o texto em vez de ficar preso à
   esquerda. */
@media (max-width: 991.98px) {
    .text-center .highlight-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ---------------------------------------------------------
   Diferenciais — fundo com foto e efeito parallax (background-attachment:
   fixed) e um fade em degradê navy por cima, pra manter a logo e a frase
   legíveis sobre a imagem. Fixed não funciona bem em iOS/mobile, por isso
   volta a "scroll" abaixo de 992px.
--------------------------------------------------------- */
.differentials-parallax {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(480px, 72vh, 720px);
    background-image: url('../img/diferenciais-parallax-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Modo "multiply" em vez de cor com transparência simples: a tint escurece
   interagindo com os próprios tons da foto (funde de verdade com a imagem,
   sem "lavar" as áreas claras como acontece com alpha comum). */
.differentials-parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #234f7d, #142f4d);
    mix-blend-mode: multiply;
    z-index: 0;
}

.differentials-parallax .container { position: relative; z-index: 1; }

@media (max-width: 991.98px) {
    .differentials-parallax { background-attachment: scroll; }
}

/* Imagens do rodapé */
.footer-icon-corredor { width: 190px; max-width: 100%; }
.footer-logo { width: 200px; max-width: 100%; }

/* Títulos do rodapé — sublinhado curto na cor de destaque (assinatura
   visual do site aprovado; o h5 padrão do Bootstrap não tem isso). */
footer h4 {
    font-weight: 400;
    font-size: 1.35rem;
    padding-bottom: .6rem;
    position: relative;
    margin-bottom: .75rem;
}

footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 2px;
    background-color: var(--brand-accent);
}

footer .footer-link {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

footer .footer-link:hover { color: #fff; }

footer .footer-contact-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

footer .footer-instagram-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform .3s ease;
}

footer .footer-instagram-link:hover svg {
    transform: scale(1.15) rotate(-6deg);
}

/* CRM/RQE do médico — obrigatório em publicidade médica (CFM), texto
   discreto abaixo da logo do rodapé. */
footer .footer-crm {
    margin-top: .5rem;
    font-size: .75rem;
    color: #a9c3da;
    letter-spacing: .3px;
}

/* ---------------------------------------------------------
   Formulário de contato — inputs "flat" do site aprovado
   (o .form-control padrão do Bootstrap tem borda arredondada e
   glow azul no foco, diferentes da identidade da marca).
--------------------------------------------------------- */
#contact-form .form-control {
    border: 1px solid #d8dfe6;
    border-radius: 3px;
    padding: .8rem 1rem;
    font-size: .95rem;
    color: var(--brand-primary);
}

#contact-form .form-control:focus {
    border-color: var(--brand-secondary);
    box-shadow: none;
}

/* Honeypot anti-spam: some da tela sem display:none/visibility:hidden
   (alguns bots ignoram esses dois ao preencher formulários). */
#contact-form .contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Checkbox de consentimento LGPD — ao publicar dentro do WordPress (widget
   HTML do Elementor), o CSS genérico de input do tema aplica padding e
   "float: right !important" nos inputs, o que deformava a caixinha e
   jogava ela pro canto direito do bloco. Solução: tirar o wrapper do fluxo
   de floats (display:flex), onde a propriedade float não tem efeito nenhum
   — nem a do tema, nem a padrão do Bootstrap — e ordenar via flex/order.
   Sem efeito quando rodando fora do WP (index.html local). */
#contact-form .form-check {
    display: flex !important;
    float: none !important;
    width: 100% !important;
    align-items: flex-start !important;
    gap: .6em !important;
    padding-left: 0 !important;
}

#contact-form .form-check-label {
    order: 2;
    font-size: .875rem;
    line-height: 1.5;
    color: #6c757d;
}

#contact-form .form-check-label a {
    color: var(--brand-secondary);
}

#contact-form .form-check-input[type="checkbox"] {
    order: 1;
    flex: 0 0 auto !important;
    float: none !important;
    width: 1em !important;
    height: 1em !important;
    padding: 0 !important;
    margin: .2em 0 0 0 !important;
    border: 1px solid #adb5bd !important;
    border-radius: .25em !important;
    background-color: #fff !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    vertical-align: top !important;
}

#contact-form .form-check-input[type="checkbox"]:checked {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHBhdGggZD0nTTYgMTBsMyAzbDYtNicgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzInIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjwvc3ZnPg==") !important;
    background-size: .7em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* "Eyebrow" — rótulo pequeno acima de títulos de seção (badge do Bootstrap
   não tem letter-spacing/uppercase por padrão, por isso o ajuste aqui) */
.badge-eyebrow {
    display: inline-block;
    background-color: var(--brand-light);
    color: var(--brand-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .75rem;
    font-weight: 600;
    padding: .4rem 1rem;
    border-radius: 3px;
}

/* ---------------------------------------------------------
   Tratamentos / Formação — cards
--------------------------------------------------------- */

/* Mais respiro entre o fim de "Atuação Médica" e o início de
   "Filosofia de tratamento" — sobrepõe o padding-bottom do py-5
   do Bootstrap (que usa !important), por isso precisa repetir. */
#tratamentos {
    padding-bottom: 6rem !important;
}

@media (max-width: 767.98px) {
    #tratamentos {
        padding-bottom: 4rem !important;
    }
}

.card-specialty {
    text-align: center;
    padding: 1.5rem 1rem;
    height: 100%;
}

.card-specialty img {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(20, 69, 123, 0);
}

.card-specialty span {
    display: block;
    font-family: var(--brand-font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--brand-primary);
}

/* ---------------------------------------------------------
   Checklist (Diferenciais) — cartão com ícone temático no topo (um
   ícone diferente por item, referente ao que a frase descreve) e o
   texto centralizado embaixo, equilibrado em ~2 linhas.
--------------------------------------------------------- */
.checklist {
    list-style: none;
    padding-left: 0;
    gap: 1.75rem 1.5rem; /* row-gap column-gap */
}

/* Tamanho travado — o cartão NÃO acompanha a largura da página. Ele só
   quebra linha (via flex-wrap no .checklist) quando não cabe mais um do
   tamanho fixo ao lado do outro. */
.checklist li {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .65rem;
    flex: 0 0 auto;
    width: 300px;
    background-color: #fff;
    border: 1px solid #e9eff4;
    border-radius: .85rem;
    padding: 1.15rem 1.25rem;
    color: var(--brand-primary);
    font-weight: 500;
    box-shadow: 0 12px 28px rgba(17, 59, 99, .07);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease,
        background-color .35s ease, color .35s ease;
}

/* Brilho — feixe de luz que desliza pelo cartão ao passar/tocar */
.checklist li::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
}

/* Celular: 2 quadradinhos lado a lado em vez do cartão de 300px fixo,
   que não caberia na tela. */
@media (max-width: 575.98px) {
    .checklist { gap: 1.25rem .85rem; }

    .checklist li {
        width: calc(50% - .425rem);
        padding: 1rem .75rem;
    }

    .checklist-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
}

.checklist li:hover,
.checklist li:active {
    transform: translateY(-4px);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
    box-shadow: 0 18px 40px rgba(20, 69, 123, .35);
}

.checklist li:hover::after,
.checklist li:active::after {
    left: 130%;
}

.checklist li:hover .checklist-icon,
.checklist li:active .checklist-icon {
    background-color: #fff;
    color: var(--brand-secondary);
}

.checklist li:hover .checklist-icon-badge,
.checklist li:active .checklist-icon-badge {
    background-color: var(--brand-secondary);
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}

.checklist-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px var(--brand-accent);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    transition: background-color .35s ease, color .35s ease;
}

/* Selinho de destaque (ex.: estrela sobre o ícone de "pessoa" na experiência) */
.checklist-icon-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    color: var(--brand-secondary);
    font-size: .6rem;
    box-shadow: 0 0 0 2px var(--brand-accent);
    transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}

.checklist-text {
    text-align: center;
    text-wrap: balance;
    max-width: 30ch;
}

/* ---------------------------------------------------------
   Formação e Trajetória — blocos de credencial à esquerda + foto do Dr.
   Gabriel à direita. Layout, texto e ícones reproduzem exatamente uma
   referência visual enviada pelo próprio usuário: os 2 blocos em destaque
   (Graduação, Especialização) em navy escuro com ícone em PNG (fornecido
   pelo usuário, sem círculo/anel — ícone "flutua" direto sobre o bloco);
   os 3 blocos compactos (Residência, MBA, Mestrado) em azul claro da marca,
   sem ícone, com altura travada (.credential-block-compact) pra não
   ficarem grandes demais quando um dos três tem texto mais longo que os
   outros.
--------------------------------------------------------- */
/* Trava a largura máxima da seção em telas grandes — sem isso, o .container
   do Bootstrap continua crescendo em monitores largos (até 1320px no
   breakpoint xxl) e, como col-lg-6/col-lg-6 são sempre percentuais, os
   blocos ficavam cada vez mais largos (mas com a altura travada em px),
   esticando horizontalmente e perdendo a proporção da referência do
   usuário. Rodada 23: em telas Full HD (1920px) o usuário reportou que a
   composição ficava "grudada" na esquerda demais com `margin-left: 0` (o
   `.container` do Bootstrap é bem mais largo que 960px nesse tamanho de
   tela) — trocado pra `margin: 0 auto` (centralizado dentro do `.container`)
   e o teto aumentado de 960px pra 1100px, dando mais respiro sem esticar os
   cards (altura/padding deles continuam em px fixo, só a largura da coluna
   cresce um pouco). */
.formacao-row {
    max-width: 1100px;
    margin: 0 auto;
}

/* Foto do Dr. Gabriel — rodada 23: o usuário reportou que `object-fit:
   cover` (rodadas 21–22) estava cortando a imagem, e que não queria de
   jeito nenhum a foto cortada. Removido o `position: absolute` + `object-
   fit: cover` (que forçavam a foto a preencher uma caixa com altura própria,
   recortando o excesso) — a foto volta ao fluxo normal, com `width: 100%` e
   `height: auto`, sempre mostrando a imagem inteira no seu aspect-ratio
   original (3:4), nunca cortada, mesmo que isso deixe a coluna da foto mais
   alta que a coluna de texto/blocos ao lado (aceitável: o requisito agora é
   "nunca cortar", não mais "ocupar exatamente a mesma altura"). */
/* margin-top negativo (rodada 24) sobe o bloco inteiro da foto, pra alinhar
   o topo dela com o início dos 2 blocos em destaque (Graduação/
   Especialização) — sem esse ajuste, o topo da foto ficava alinhado com o
   topo da própria coluna (mesma altura do texto "Formação" acima dos
   blocos), mais alto do que o início dos blocos em si. Valor aproximado
   (não há navegador/screenshot disponível nesta sessão pra conferir o
   pixel exato) — ajustar o rem se não bater certinho com os blocos. */
/* Rodada 33: a foto da Formação passou a aparecer também no mobile (o HTML
   perdeu o `d-none d-lg-block`, igual a Atuação já fazia). Os deslocamentos
   abaixo (margin-left/-right pro vazamento à direita + margin-top negativo pra
   alinhar com os blocos) só fazem sentido com as 2 colunas lado a lado, então
   ficam presos a >=992px — no mobile eles causariam vazamento horizontal e
   subiriam a foto pra cima do conteúdo. A composição desktop aprovada
   (rodadas 26+) continua idêntica. */
@media (min-width: 992px) {
    .formacao-photo-col {
        margin-left: 1.25rem;
        margin-right: -1.25rem;
        margin-top: -2rem;
    }
}

@media (min-width: 1400px) {
    .formacao-photo-col {
        margin-left: 3rem;
        margin-right: -3rem;
    }
}

/* Mobile (<992px): mesmo tratamento da .atuacao-photo — foto centralizada na
   coluna e com um respiro do bloco de texto/blocos que fica acima dela. */
@media (max-width: 991.98px) {
    .formacao-photo-col .formacao-photo {
        margin-inline: auto;
        margin-top: 1.5rem;
    }
}

/* Rodada 26: a coluna de texto/blocos (.formacao-content-col, o primeiro
   col-lg-6 da .row) ganhou o mesmo margin-top negativo da foto acima, pra
   que as duas colunas comecem exatamente na mesma linha — sem isso, só a
   foto tinha subido na rodada 24, deixando o topo do badge "Formação"
   2rem mais baixo que o topo da foto. Nenhum espaçamento interno dos
   elementos da coluna foi tocado, só a posição do bloco inteiro. */
/* Rodada 33: preso a >=992px — no mobile (coluna única) não há foto ao lado
   pra "alinhar o topo", e o -2rem só comia o respiro do topo da seção. */
@media (min-width: 992px) {
    .formacao-content-col {
        margin-top: -2rem;
    }
}

/* O deslocamento pra direita é feito no wrapper inteiro (margin-left/
   margin-right acima), não na foto em si — `margin-right` negativo
   compensa o `margin-left` (mesma largura ocupada na `.row`, sem empurrar a
   foto pra baixo do texto por falta de espaço nem disparar quebra de linha
   no flex), deixando a foto "vazar" pra dentro do respiro que sobra à
   direita do `.container` em telas largas, em vez de encolher. O
   deslocamento maior (3rem) só entra a partir de 1400px (breakpoint xxl do
   Bootstrap, onde o `.container` já é bem mais largo que os 1100px do
   `.formacao-row` — sobra espaço de sobra pro vazamento); abaixo disso um
   deslocamento menor (1.25rem) evita risco de a foto vazar pra fora do
   `.container`/viewport em telas desktop menores (992–1399px). border-
   radius aplicado direto na `<img>` (a coluna não tem mais `overflow:
   hidden`, que cortaria justamente esse vazamento). */
/* width reduzida (rodada 25, a pedido do usuário — "diminuir um pouco mais
   a foto") de 100% pra 90% do wrapper; height:auto mantém o aspect-ratio
   original intacto (a foto continua inteira, só um pouco menor). */
.formacao-photo-col .formacao-photo {
    width: 90%;
    height: auto;
    border-radius: 1rem;
    display: block;
}

.credential-block {
    background-color: var(--brand-primary);
    border-radius: .75rem;
    color: #fff;
}

/* Altura travada (fixa, não min-height) nos 2 blocos em destaque — mesmo
   critério "trave os quadradinhos" já aplicado nos 3 compactos, agora
   também aqui, pra não crescerem por conta do título grande. Reduzida na
   rodada 21 (132px → 108px) junto com padding/gap, pra deixar a coluna
   esquerda mais compacta agora que ela ocupa só metade da seção. */
.credential-block-featured {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1.1rem;
    height: 108px;
    overflow: hidden;
}

.credential-block-featured + .credential-block-featured {
    margin-top: .5rem;
}

/* Ícones em PNG (fornecidos pelo usuário, já brancos/transparentes) direto
   sobre o bloco navy, sem círculo/anel — pedido explícito do usuário pra
   reproduzir exatamente a referência visual dele. Tamanho grande (quase a
   altura útil do bloco), também a pedido do usuário. */
.credential-block-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.credential-block-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Título com destaque — bem maior que a descrição abaixo dele, pra criar a
   mesma hierarquia forte da referência do usuário (título grande, texto
   pequeno). Vale tanto pro título dos 2 blocos em destaque (.credential-
   block-title) quanto pro label dos 3 blocos compactos (.credential-block-
   label, mais abaixo) — nenhum dos 5 marcos deve ficar com título do
   tamanho de texto secundário. */
.credential-block-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.credential-block-desc {
    color: rgba(255, 255, 255, .75);
    font-size: .76rem;
    line-height: 1.35;
}

.credential-block-featured .credential-block-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.credentials-compact-row {
    margin-top: .5rem;
}

/* Os 3 blocos secundários usam o azul claro da marca (em vez do navy dos 2
   destaques), com texto escuro pra manter contraste, e são deliberadamente
   mais discretos que os 2 blocos em destaque (fonte/padding/altura menores)
   — são só informações complementares da formação, não devem competir com
   Graduação/Especialização. Título sem negrito (font-weight 500, não 700).
   Rodada 27: corrigido o motivo real das "alturas diferentes" que o usuário
   reportou — `min-height` sozinho (rodada 23) só afeta o próprio bloco, não
   o preenche até a altura da COLUNA (`col-md-4`) que o `.row` do Bootstrap
   estica pra igualar a mais alta; como o texto de cada card tem tamanho
   diferente, cada bloco crescia só até o próprio conteúdo, sobrando um
   vão vazio (invisível, sem cor) abaixo dos blocos mais curtos dentro da
   coluna já esticada — por isso pareciam de alturas diferentes na tela.
   `height: 100%` faz o bloco (com sua cor de fundo) preencher a coluna
   inteira, garantindo os 3 realmente do mesmo tamanho visível. Padding e
   `min-height` reduzidos (textos reescritos mais curtos na mesma rodada,
   cards podem ficar mais baixos). */
.credential-block-compact {
    background-color: var(--brand-light);
    color: var(--brand-primary);
    height: 100%;
    min-height: 64px;
    padding: .55rem .75rem;
}

.credential-block-compact .credential-block-label {
    color: var(--brand-primary);
}

/* Sem `line-clamp`/`overflow: hidden` cortando o texto — com os textos mais
   curtos da rodada 27, essa fonte cabe folgada dentro do `min-height` acima.
   Não mexe em `.credential-block-desc` base (usada também pelos 2 blocos em
   destaque, que continuam como estavam). */
.credential-block-compact .credential-block-desc {
    color: rgba(17, 59, 99, .72);
    font-size: .72rem;
    line-height: 1.3;
}

/* Usado só pelos 3 blocos compactos (label, não título) — reduzido na
   rodada 23 e um pouco mais na 26, junto com a descrição acima, pelo mesmo
   motivo (textos reescritos mais longos). */
.credential-block-label {
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.1;
    color: #fff;
    margin-bottom: .15rem;
}

/* Texto de introdução (badge + h2 + parágrafo) mais compacto — reduzido
   junto com os blocos abaixo, rodada 21, já que a coluna esquerda passou a
   dividir a seção 50/50 com a foto em vez de ocupar 7/12. Rodada 32: a
   seção "Quem é o Dr. Gabriel hoje" (.atuacao-row) passou a reaproveitar o
   mesmo bloco `.credentials-intro`, então herda a mesma tipografia. */
.formacao-row .credentials-intro h2,
.atuacao-row .credentials-intro h2 {
    font-size: 1.6rem;
}

.formacao-row .credentials-intro p,
.atuacao-row .credentials-intro p {
    font-size: .92rem;
}

/* ---------------------------------------------------------
   Citação (Filosofia)
--------------------------------------------------------- */
.quote-mark {
    font-family: var(--brand-font-heading);
    font-size: 4.5rem;
    line-height: 1;
    color: var(--brand-accent);
}

.quote-box { max-width: 720px; margin-left: auto; margin-right: auto; }
.quote-text { color: var(--brand-primary); }
.quote-author { color: var(--brand-secondary); }

/* CTA final (Quem Somos) — rodada 30: painel inverteu de branco (rodada 29) pra
   fundo azul institucional (var(--brand-primary), mesmo tom do hero/rodapé), a
   pedido do usuário — queria "mais presença" e "parecer uma seção premium do
   próprio site", não um card genérico solto. Sombra pesada trocada por um
   contorno fino claro (borda translúcida, ver abaixo); cantos continuam
   arredondados. */
.cta-final-panel {
    background-color: var(--brand-primary);
    border: 1px solid rgba(159, 203, 232, .35);
    border-radius: 1rem;
    padding: 2.5rem 3rem;
    box-shadow: 0 14px 32px rgba(0, 27, 66, .16);
}

@media (max-width: 991.98px) {
    .cta-final-panel {
        padding: 2rem 1.75rem;
    }
}

/* Rótulo "Agende sua consulta" — texto simples (sem pill/badge, diferente do
   .badge-eyebrow usado no resto do site). Cor trocada pro azul de acento (era
   --brand-secondary, pensado pra fundo claro) — sobre o painel navy escuro
   ficaria com contraste ruim. */
.cta-final-label {
    color: var(--brand-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8rem;
    font-weight: 600;
}

/* Botão sólido do WhatsApp — invertido junto com o painel: fundo branco/texto
   navy (era o oposto, navy/branco, quando o painel era claro), senão o botão
   desapareceria dentro do novo fundo escuro. Cantos mantêm o raio .75rem
   (puxando pro raio do .credential-block vizinho na Formação). Hover troca
   suavemente pro navy secundário com texto branco — inverte de novo, mas só
   no hover. */
.cta-final-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background-color: #fff;
    border: 1.5px solid #fff;
    border-radius: .75rem;
    color: var(--brand-primary);
    font-weight: 500;
    font-size: .95rem;
    padding: .85rem 1.9rem;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.cta-final-btn:hover,
.cta-final-btn:focus {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
    transform: translateY(-2px);
}

/* Frase de destaque — Quicksand fw-400 (voltou a ficar mais fina, a pedido do
   usuário — "elegante, fina e de boa leitura"; a rodada 29 tinha ido pra 500).
   Cor branca (era --brand-primary, ilegível sobre o novo fundo navy). Escala
   de tamanho mantida (perto do .hero-title, sem ficar "exageradamente
   grande"). */
.cta-final-phrase {
    font-family: var(--brand-font-heading);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem);
    line-height: 1.35;
    color: #fff;
    letter-spacing: .2px;
}

/* Subtexto — branco com opacidade reduzida (rgba em vez de .text-muted, que
   é pensado pra fundo claro) — "leve" redução (.8), não os 50% do
   .text-white-50 já usado em outras partes do site, que ficaria apagado
   demais pro tamanho de texto daqui. max-width + margin auto: centraliza a
   caixa no mobile (texto já vem centralizado pelo .text-center do
   Bootstrap); a partir de "lg" a coluna passa a "text-lg-start" e a caixa
   some pra esquerda (margin 0), senão a caixa continuaria centralizada mesmo
   com o texto alinhado à esquerda. */
.cta-final-subtext {
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
    font-weight: 300;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .cta-final-subtext {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Foto da seção "Filosofia de tratamento" — sangra para fora da coluna,
   por cima do fundo navy (efeito editorial do site aprovado —
   drgabrielmelo.com.br usa exatamente essa técnica: foto com
   margin: -80px 0, seção com overflow visível). Esse efeito só faz
   sentido no desktop, onde a foto e o texto ficam lado a lado (colunas
   .col-lg-5/.col-lg-7) — a margem negativa "sangra" verticalmente sem
   esbarrar em outro conteúdo. Abaixo do "lg" as colunas empilham, e a
   mesma margem negativa puxava o título para cima, para dentro da
   própria foto — por isso o bleed só é aplicado a partir de 992px. */
.philosophy-photo-bleed {
    margin: 0;
}

@media (min-width: 992px) {
    .philosophy-photo-bleed {
        margin: -80px 0;
    }
}

/* ---------------------------------------------------------
   Hero da home — réplica da técnica real do drgabrielmelo.com.br
   (conferido no CSS público do site): a foto não usa mais margem
   negativa simétrica. Ela fica ancorada embaixo da coluna (que estica
   até a altura da linha via "align-self-stretch" + "align-items-end"
   no HTML), crescendo o quanto o espaço permitir; o "overflow: hidden"
   do #topo corta o excesso por cima em telas mais baixas — igual ao
   site de referência, que também usa overflow:hidden no Hero.
--------------------------------------------------------- */
#topo {
    padding: 2.5rem 0 0;
    overflow: hidden;
}

/* Textura do banner em pseudo-elemento próprio (separado do brilho em
   .bg-brand-navy::before) pra poder ajustar a intensidade só com a
   opacity abaixo, sem precisar regerar a imagem. */
#topo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/pattern-hero.png');
    background-repeat: repeat;
    background-size: 300px auto;
    background-attachment: fixed;
    opacity: .5;
    pointer-events: none;
}

/* "Fixed" não funciona bem em iOS/mobile (mesmo motivo do
   .differentials-parallax mais abaixo) — volta a rolar normal. */
@media (max-width: 991.98px) {
    #topo::after {
        background-attachment: scroll;
    }
}

.hero-container {
    max-width: 1600px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.hero-title {
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.35rem);
}

/* CTA do hero — menos evidência que o .btn-brand padrão (sólido): fundo
   transparente, cantos arredondados, só com borda pra marcar a área
   clicável. */
.hero-cta {
    background-color: transparent;
    border: 2px solid var(--brand-accent);
    border-radius: 10px;
    color: #fff;
}

.hero-cta:hover,
.hero-cta:focus {
    background-color: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}

/* Divide a coluna de texto do hero em 10% (vazio) / 90% (conteúdo),
   deslocando o texto pra mais perto da foto sem colar na linha central
   do layout (como acontecia com o alinhamento à direita puro). Só a
   partir do "lg": no mobile a coluna some e o texto ocupa 100%. */
@media (min-width: 992px) {
    .hero-text-split {
        display: flex;
    }

    .hero-text-spacer {
        flex: 0 0 10%;
    }

    .hero-text-content {
        flex: 0 0 90%;
        max-width: 90%;
        padding-left: 14rem;
    }
}

/* Altura da linha do Hero: preenche a tela abaixo da navbar (usando a
   altura real da navbar calculada em custom.js), com teto pra não ficar
   gigante em monitores grandes — mesma ideia do site de referência
   (lá: min-height: calc(100vh - 70px); max-height: 900px). */
.hero-row {
    min-height: calc(100vh - var(--navbar-offset, 84px) - 5rem);
    max-height: 820px;
}

/* Hero do "Quem Somos" (quemsomos.html) — usa a mesma técnica de foto do
   hero da home (.hero-photo-bleed/.hero-photo-col, ver abaixo: a foto
   cresce com a coluna, ancorada embaixo), só que dentro do .container
   padrão (1200px) em vez do .hero-container largo da home. Diferente da
   home, aqui a linha NÃO tem min-height forçando quase tela cheia — a
   altura fica livre, do tamanho do conteúdo (foto + texto), a pedido do
   usuário (a versão com min-height igual ao .hero-row da home ficava alta
   demais e obrigava truques de alinhamento pro texto não sobrar longe da
   navbar). Sem padding embaixo: a base da foto encosta exatamente na
   borda inferior da barra navy. Mesma textura de fundo do #topo da home
   (pattern-hero.png), a pedido do usuário — repete a regra do #topo::after
   só que em cima da classe (não do ID), já que .bg-brand-navy (presente
   nas duas seções) é quem dá o "position: relative" necessário. */
.profile-hero {
    overflow: hidden;
}

.profile-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/pattern-hero.png');
    background-repeat: repeat;
    background-size: 300px auto;
    background-attachment: fixed;
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .profile-hero::after {
        background-attachment: scroll;
    }
}

/* Navy mais escuro que o --brand-primary do hero da home, a pedido do
   usuário — pra não repetir exatamente o mesmo tom de azul do index.html.
   Reaproveita o --brand-btn (navy quase preto, já usado nos botões sólidos)
   em vez de criar uma variável nova só pra isso. Sobrescreve só aqui: o
   .bg-brand-navy continua igual no resto do site (hero da home, Filosofia,
   rodapé). */
.profile-hero.bg-brand-navy {
    background-color: var(--brand-btn);
}

.profile-hero-row {
    padding: 0;
}

/* Teto de largura pra foto não crescer até ocupar a coluna toda — um meio
   termo entre o antigo (420px, pequena demais) e a coluna cheia (~560px,
   grande demais), a pedido do usuário. */
.profile-hero-row .hero-photo-bleed {
    max-width: min(100%, 500px);
}

/* Nome do médico com mais destaque que o .hero-title padrão (que é
   pensado pra headline longa da home) — maior, a pedido do usuário
   (peso continua "fw-normal", igual ao resto do site: só o tamanho
   aumenta). */
.profile-name {
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);
}

/* Separador vertical entre CRM e RQE — substitui o antigo "risco"
   horizontal (border-bottom) que separava essa linha do parágrafo
   seguinte, a pedido do usuário. */
.sep-vertical {
    display: inline-block;
    width: 1px;
    height: .9em;
    margin: 0 .6em;
    vertical-align: middle;
    background-color: var(--brand-accent);
    opacity: .6;
}

/* Foto do Hero da home — cresce com a largura da coluna (até um limite
   bem generoso; o site de referência usa clamp(380px, 42vw, 1200px), aqui
   está um pouco maior — clamp(400px, 47vw, 1100px) — a pedido do usuário),
   ancorada embaixo dela (ver "align-items-end" no HTML) e nunca mais alta
   que a linha, senão o "overflow: hidden" do #topo corta o excesso por
   cima. Sem drop-shadow aqui: a sombra ultrapassava a seção navy e criava
   uma mancha visível sobre a seção branca seguinte. */
.hero-photo-bleed {
    width: 100%;
    max-width: clamp(400px, 47vw, 1100px);
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: none;
}

/* No celular E no tablet a foto some do banner inicial — só aparece a
   partir do "lg" (992px, mesmo ponto em que o layout já vira duas colunas
   lado a lado em .hero-text-split), sobrando só o texto/CTA nos tamanhos
   menores. Sem a foto, a altura mínima pensada pra caber "foto + texto"
   (.hero-row) e o overflow:hidden do #topo deixavam um vão vazio grande
   acima/abaixo do texto — por isso a linha volta a ter altura natural
   (min-height: auto) e o #topo ganha um padding-bottom simétrico ao
   padding-top existente. O !important é necessário aqui porque a coluna
   também tem a classe utilitária "d-flex" do Bootstrap, que aplica
   "display: flex !important" e, sem isso, vencia o display:none. */
@media (max-width: 991.98px) {
    .hero-photo-col {
        display: none !important;
    }

    .hero-row {
        min-height: auto;
    }

    #topo {
        padding: 3.5rem 0;
    }

    .profile-hero-row {
        min-height: auto;
        padding: 3rem 0;
    }
}

/* ===========================================================
   Animações e textura de fundo
   Mesma base testada no site real (drgabrielmelo.com.br): entrada suave
   ao rolar a página via IntersectionObserver (custom.js aplica as
   classes "reveal"/"reveal-left"/"reveal-right"/"reveal-scale" +
   "in-view"), pequenas animações contínuas nos ícones, e um brilho/
   textura sutil de fundo. Tudo em transform/opacity (leve, sem imagens
   pesadas) e totalmente desligado se o usuário pedir menos movimento.
=========================================================== */

/* --- Entrada ao rolar (scroll reveal) --- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-left { transform: translateX(-32px); }
.reveal-left.in-view { transform: translateX(0); }

.reveal-right { transform: translateX(32px); }
.reveal-right.in-view { transform: translateX(0); }

.reveal-scale { transform: scale(.94); }
.reveal-scale.in-view { transform: scale(1); }

.stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.stagger.in-view > *:nth-child(2) { transition-delay: .15s; }
.stagger.in-view > *:nth-child(3) { transition-delay: .25s; }
.stagger.in-view > *:nth-child(4) { transition-delay: .35s; }
.stagger.in-view > *:nth-child(5) { transition-delay: .45s; }
.stagger.in-view > *:nth-child(6) { transition-delay: .55s; }

/* --- Entrada do banner inicial ao carregar a página (não depende de scroll) --- */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-title,
.hero-tags,
.hero-photo-bleed {
    opacity: 0;
    animation: hero-fade-up .8s ease forwards;
}

.hero-tags { animation-delay: .15s; }
.hero-photo-bleed { animation-delay: .1s; }

/* --- Brilho suave no fundo navy (Hero, Filosofia, rodapé) --- */
.bg-brand-navy {
    position: relative;
}

.bg-brand-navy::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(159, 203, 232, .18), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(159, 203, 232, .12), transparent 40%);
    pointer-events: none;
}

.bg-brand-navy > .container,
.bg-brand-navy > .container-fluid {
    position: relative;
    z-index: 1;
}

/* --- Textura sutil nas seções claras (Especialidades, destaque de Diferenciais) --- */
.section-pattern {
    position: relative;
}

.section-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brand-secondary) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .06;
    pointer-events: none;
}

.section-pattern > .container {
    position: relative;
    z-index: 1;
}

/* --- Ícone do Hero: pulso contínuo e discreto --- */
@keyframes hero-icon-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(159, 203, 232, .5); }
    50% { box-shadow: 0 0 0 8px rgba(159, 203, 232, 0); }
}

.hero-icon-badge {
    animation: hero-icon-pulse 2.4s ease-in-out infinite;
}

/* --- Ícones de Especialidades: flutuação leve + reação no hover --- */
.card-specialty {
    transition: transform .3s ease, background-color .3s ease;
    border-radius: .5rem;
}

.card-specialty:hover {
    transform: translateY(-6px);
    background-color: #f5f9fc;
}

.card-specialty img {
    transition: transform .35s ease, box-shadow .35s ease;
    animation: card-icon-float 3.2s ease-in-out infinite;
}

.card-specialty:hover img {
    transform: scale(1.1) rotate(-4deg);
    animation: card-icon-pulse 1.3s ease-in-out infinite;
}

@keyframes card-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Anel azul-escuro pulsando enquanto o mouse fica parado sobre o ícone
   (substitui a flutuação enquanto o :hover estiver ativo) */
@keyframes card-icon-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(20, 69, 123, .5); }
    50% { box-shadow: 0 0 0 12px rgba(20, 69, 123, .25); }
}

/* Escalona o início da flutuação de cada card, pra não animarem em
   uníssono (fica mais orgânico) */
.col:nth-child(1) .card-specialty img { animation-delay: 0s; }
.col:nth-child(2) .card-specialty img { animation-delay: .3s; }
.col:nth-child(3) .card-specialty img { animation-delay: .6s; }
.col:nth-child(4) .card-specialty img { animation-delay: .9s; }
.col:nth-child(5) .card-specialty img { animation-delay: 1.2s; }
.col:nth-child(6) .card-specialty img { animation-delay: 1.5s; }

/* --- Ícone "corredor" do rodapé: mesma reação de hover --- */
.footer-icon-corredor { transition: transform .4s ease; }
.footer-col-social:hover .footer-icon-corredor { transform: rotate(-6deg) scale(1.04); }

/* --- Reduz/desliga tudo acima se o usuário pedir menos movimento --- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .hero-title,
    .hero-tags,
    .hero-photo-bleed {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .hero-icon-badge,
    .card-specialty img {
        animation: none;
    }
}

/* --- Nome do Dr. Gabriel como imagem (logotipo tipografico) na secao "Quem Somos" --- */
.section-name-logo {
    max-width: 100%;
    height: auto;
    max-height: 4.4rem;
}

/* Mais respiro acima (separação do Hero, que ocupa quase a tela cheia) e
   abaixo (separação de "Tratamentos" logo em seguida) — sobrepõe o
   padding do py-5 do Bootstrap, que usa !important, por isso precisa
   repetir aqui (mesma técnica já usada em #tratamentos). */
#quem-somos {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

@media (max-width: 767.98px) {
    #quem-somos {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* --- Utilitario de texto justificado (removido do Bootstrap a partir da v5) ---
   Justificado em todos os tamanhos de tela, inclusive mobile — a pedido do
   cliente, que preferiu o texto com as bordas alinhadas dos dois lados a
   ficar centralizado (o "puramente centralizado" deixava linhas com
   tamanhos bem desiguais, principalmente com as quebras manuais que
   existiam antes em alguns parágrafos). */
.text-justify {
    text-align: justify;
}

/* Fonte um pouco menor no celular: com mais palavras cabendo por linha, o
   "justify" precisa esticar menos os espaços entre elas pra preencher a
   largura toda, o que deixa o texto com aparência mais limpa. */
@media (max-width: 767.98px) {
    .text-justify {
        font-size: .9rem;
    }
}

/* ---------------------------------------------------------
   Locais de Atuação — faixa de logos de hospitais/clínicas
--------------------------------------------------------- */

/* A faixa fica ENTRE "Filosofia de tratamento" e "Diferenciais Profissionais"
   e funciona como divisor entre as duas seções: mesmo respiro em cima e
   embaixo (antes tinha só .5rem acima, colando na Filosofia, e 5rem abaixo,
   jogando os "Diferenciais / Saiba Mais" longe demais). Sobrepõe o padding do
   py-5 do Bootstrap, que usa !important, por isso precisa repetir (mesma
   técnica já usada em #tratamentos/#quem-somos). */
#locais-atuacao {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

@media (max-width: 767.98px) {
    #locais-atuacao {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* "Diferenciais Profissionais" também perde parte do padding de baixo do
   py-5, pra aproximar os "quadradinhos" do checklist da faixa de logos
   logo abaixo. */
#especialidades {
    padding-bottom: 1.5rem !important;
}

/* Título da faixa — mesma tipografia do .badge-eyebrow (fonte, cor,
   uppercase, letter-spacing) usado no resto do site, mas sem o "quadrado"
   de fundo azul claro nem o padding de badge — aqui é só texto mesmo. */
.locais-atuacao-title {
    display: inline-block;
    color: var(--brand-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .75rem;
    font-weight: 600;
    opacity: .5;
}

/* No mobile/tablet (abaixo de lg) a versão em grid some e entra o carrossel
   automático (.locais-atuacao-marquee); a partir de lg é o oposto — grid
   estático em uma linha, sem o carrossel. Evita ter as duas versões visíveis
   ao mesmo tempo (ver Bootstrap d-none/d-lg-flex no HTML). */
@media (min-width: 992px) {
    .locais-atuacao-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .locais-atuacao-row > .col {
        flex: 1 1 0;
        width: auto;
    }
}

/* Carrossel automático das logos (só no mobile/tablet, < lg) — faixa de
   largura total com "overflow: hidden" recortando uma trilha (.locais-atuacao-track)
   que desliza infinitamente. A trilha tem a lista de logos duplicada uma vez
   (mesma ordem) e anima só a primeira metade (translateX -50%), o que fecha o
   loop sem "salto" visível quando reinicia. */
.locais-atuacao-marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.locais-atuacao-track {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: max-content;
    animation: locais-atuacao-scroll 22s linear infinite;
}

/* Pausa a animação quando o usuário toca/segura a faixa — mais fácil de
   olhar uma logo específica sem ela "fugir" da tela. */
.locais-atuacao-marquee:hover .locais-atuacao-track,
.locais-atuacao-marquee:active .locais-atuacao-track {
    animation-play-state: paused;
}

@keyframes locais-atuacao-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Respeita quem prefere menos movimento na tela — a faixa fica parada. */
@media (prefers-reduced-motion: reduce) {
    .locais-atuacao-track {
        animation: none;
    }
}

/* Área com altura fixa por logo: garante a mesma proporção/altura visual
   entre marcas com formatos bem diferentes (ex: logo quadrada vs. logo
   larga), com a imagem sempre inteira dentro dela (object-fit: contain). */
.location-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

/* Dentro da trilha do carrossel a logo não pode encolher — senão o flex
   espreme os itens pra caber, e a trilha perde a largura usada no cálculo
   do translateX(-50%) do loop. */
.locais-atuacao-track .location-logo {
    flex: 0 0 auto;
    width: 124px;
}

.location-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    opacity: .75;
    transition: opacity .25s ease;
}

.location-logo:hover img {
    opacity: 1;
}

@media (min-width: 992px) {
    .location-logo {
        height: 64px;
    }
}

/* ---------------------------------------------------------
   quemsomos.html — "Quem é o Dr. Gabriel hoje" (#atuacao-esportiva)
   Rodada 32: a seção passou a reaproveitar EXATAMENTE os mesmos blocos de
   credencial da Formação (.credentials-intro + .credential-block-featured
   navy). São 3 blocos navy em destaque, empilhados — o usuário considerou
   os 3 marcos igualmente fortes. Não há mais estilo próprio de lista aqui
   — só estes ajustes de ícone, que trocam as PNGs da Formação por ícones
   do Bootstrap Icons num tamanho maior. Escopo preso ao `#atuacao-esportiva`
   — a Formação não é afetada.
--------------------------------------------------------- */
#atuacao-esportiva .credential-block-icon {
    width: 60px;
    height: 60px;
}

#atuacao-esportiva .credential-block-icon i {
    font-size: 2.5rem;
    line-height: 1;
    color: #fff;
}

/* Rodada 31: a foto da seção "Quem é o Dr. Gabriel hoje" precisa ter
   EXATAMENTE o mesmo tamanho e proporção da foto da Formação. Para isso a
   linha da seção recebe o mesmo teto de largura centralizado do
   `.formacao-row` (col-lg-6 → mesma largura de coluna nos dois blocos) e a
   imagem usa os mesmos 90% da coluna + o mesmo border-radius do
   `.formacao-photo`. As duas imagens de origem já estão em 3:4, então o
   resultado renderizado fica idêntico. A composição da Formação não é
   tocada — estes seletores são exclusivos da seção de Atuação. */
.atuacao-row {
    max-width: 1100px;
    margin: 0 auto;
}

.atuacao-photo {
    width: 90%;
    height: auto;
    border-radius: 1rem;
    display: block;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   Páginas legais (Política de Privacidade) — texto corrido
--------------------------------------------------------- */
.legal-page .container {
    max-width: 820px;
}

.legal-page h1 {
    font-size: clamp(1.9rem, 4vw, 2.4rem);
}

.legal-page .legal-updated {
    font-size: .875rem;
    margin-bottom: 2rem;
}

.legal-page h2 {
    font-size: 1.35rem;
    margin-top: 2.25rem;
    margin-bottom: .5rem;
}

.legal-page h3 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
    margin-bottom: .4rem;
}

.legal-page p,
.legal-page li {
    color: #495057;
    line-height: 1.7;
}

.legal-page ul {
    padding-left: 1.35rem;
    margin-bottom: 1rem;
}

.legal-page li {
    margin-bottom: .4rem;
}

.legal-page a {
    color: var(--brand-secondary);
}