/* v2 =======================================================================
   Camada de refino do site institucional
   Traz para as paginas a mesma linguagem do blog: display em Fraunces, tinta
   escura no lugar do oliva lavado, Georgia no texto de leitura e ritmo
   editorial nas secoes.

   PARA DESFAZER TUDO: remover a linha <link> desta folha das paginas HTML,
   ou apagar este arquivo. O css/style.css original nao foi alterado, entao
   o site volta exatamente ao que era.
   ========================================================================== */

:root {
    --tinta: #29291F;
    --tinta-suave: #55543F;
    --tinta-fraca: #73715A;  /* 4,84:1 sobre o papel; o #86846C anterior dava 3,67 */
    --papel: #FCFBF8;
    --creme: #F3EFE7;
    --oliva-forte: #4B4A36;
    --linha-fina: rgba(41, 41, 31, .13);
    --display: 'Fraunces', Georgia, serif;
    --leitura: Georgia, 'Times New Roman', serif;

    /* BUG ANTIGO, ANTERIOR A ESTE REFINO:
       css/formacao-styles.css e css/diabetes-styles.css usam
       var(--primary-color) 40 vezes e var(--secondary-color) 23 vezes, mas
       essas variaveis nunca foram declaradas neste projeto. Todo
       "background: var(--secondary-color)" virava transparente, e os selos
       com texto branco ficavam brancos no branco, invisiveis, na pagina
       /sobre. Declarar aqui conserta os 63 usos de uma vez. */
    --primary-color: #6E6D53;
    --secondary-color: #4B4A36;
}

body {
    color: var(--tinta-suave);
    background-color: var(--papel);
}

/* ---------- tipografia ---------- */

h1, h2, h3,
.hero-title,
.perfil-text h2,
.diferenciais-header h2,
.areas-intro h2,
.areas-intro h3,
.tratamentos h2,
.tratamentos h3,
.exames h2,
.exames h3,
.depoimentos h2,
.depoimentos h3,
.blog-header h2,
.blog-header h3,
.faq-header h2,
.consulta-card h2,
.cta-inline h3,
.diferencial-card h3,
.diabetes-faq-question h3 {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-weight: 500;
    letter-spacing: -.018em;
    color: var(--tinta);
}

h4,
.feature-card h4,
.tratamento-card h4,
.categoria-card h4,
.plataforma-info h4 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tinta);
}

.hero-title {
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.025em;
}

/* O realce vinha com uma barra de 12px atras da palavra, que com o titulo
   escuro novo lavava o texto e parecia defeito de renderizacao. Vira um
   traco fino sob a linha de base, como marcacao a mao. */
.hero-title .highlight {
    color: var(--oliva-forte);
}

.hero-title .highlight::after {
    height: 7px;
    bottom: 1px;
    border-radius: 2px;
    background-color: rgba(110, 109, 83, .26);
}

/* texto de leitura em serifa, igual ao blog */

.hero-description,
.perfil-text p,
.areas-intro p,
.diferenciais-header p,
.tratamento-header p,
.faq-header p,
.blog-header p,
.diabetes-faq-content p,
.relacionados-header p {
    font-family: var(--leitura);
    color: var(--tinta-suave);
    line-height: 1.65;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.62;
}

/* ---------- etiquetas e botoes ---------- */

.section-label,
.hero-tag,
.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: .42rem .85rem;
    border: 1px solid var(--linha-fina);
    border-radius: 999px;
    background: transparent;
    color: var(--button-bg);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.1;
}

.btn-hero-primary,
.btn-whatsapp,
.btn-secondary,
.btn-blog,
.btn-depoimentos {
    letter-spacing: .01em;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.btn-hero-primary:hover,
.btn-whatsapp:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
}

/* ---------- secoes e ritmo ---------- */

.perfil,
.tratamento-inclui,
.diferenciais,
.relacionados,
.diabetes-faq,
.areas-intro,
.exames,
.depoimentos,
.blog-section,
.tratamentos {
    background-color: var(--papel);
}

.tratamento-inclui,
.relacionados,
.blog-section,
.exames {
    background-color: var(--creme);
}

/* ---------- cartoes, no mesmo tom sobrio do blog ---------- */

.tratamento-card,
.diferencial-card,
.diferencial-card-compact,
.feature-card,
.consulta-card,
.formacao-card,
.categoria-card,
.relacionado-card {
    background: #fff;
    border: 1px solid var(--linha-fina);
    box-shadow: none;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}

.tratamento-card:hover,
.diferencial-card:hover,
.diferencial-card-compact:hover,
.feature-card:hover,
.categoria-card:hover,
.relacionado-card:hover {
    transform: translateY(-3px);
    border-color: rgba(110, 109, 83, .38);
    box-shadow: 0 1px 1px rgba(41, 41, 31, .04), 0 16px 34px -22px rgba(41, 41, 31, .38);
}

.tratamento-card p,
.diferencial-card p,
.diferencial-card-compact p,
.feature-card p,
.categoria-card p,
.relacionado-card p {
    color: var(--tinta-suave);
}

.relacionado-card .saiba-mais {
    color: var(--oliva-forte);
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---------- perguntas frequentes ---------- */

.diabetes-faq-box {
    border: 1px solid var(--linha-fina);
    background: #fff;
    box-shadow: none;
}

.diabetes-faq-question h3 {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
}

/* O botao do acordeao e um circulo oliva com o sinal em branco. Pintar o
   sinal de oliva o deixa invisivel sobre o proprio circulo.
   O line-height herdado do body era 1,6, ou seja, 38,4px de caixa de linha
   dentro de um circulo de 32px: a caixa estourava e o sinal subia. Com
   line-height 1 a centralizacao do flex passa a valer. */
.diabetes-faq-toggle {
    color: var(--white);
    line-height: 1;
    font-weight: 400;
    /* O glifo "+" nao e simetrico na caixa da fonte: medido no pixel, a tinta
       caia 3px abaixo do centro do circulo. O padding reduz a area de
       conteudo e a centralizacao do flex sobe o sinal na mesma medida. Nao uso
       transform aqui porque o estado aberto ja aplica rotate(45deg). */
    padding-bottom: 6px;
    box-sizing: border-box;
}

/* ---------- imagem do hero ---------- */

.hero-image-wrapper {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(41, 41, 31, .05), 0 24px 56px -28px rgba(41, 41, 31, .42);
}

.hero-image-wrapper::before {
    background: none;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {

    /* O texto vem antes da foto. Com order:-1 no .hero-image, o visitante
       via 950px de retrato antes de saber em que pagina estava, e o H1
       ficava fora da primeira tela em todas as paginas de servico. */
    .hero-image {
        order: 0;
    }

    .hero-content {
        order: -1;
    }

    /* o hero abria com cerca de 150px de vazio antes da etiqueta */
    .hero {
        min-height: 0;
        align-items: flex-start;
    }

    /* Algumas paginas trazem min-height inline no <section class="hero">
       (50vh ou 60vh), o que vence a folha de estilo e deixa meia tela vazia
       no celular. O !important aqui e para nao precisar editar o HTML: assim
       o desfazer continua sendo so remover o <link> desta folha. */
    .hero {
        min-height: 0 !important;
        padding-top: 1rem;
    }

    .hero-grid {
        gap: 1.6rem;
        padding: 1rem 0 2.6rem;
    }

    /* os tres selos de confianca ocupavam tres linhas altas */
    .hero-stats {
        gap: .7rem 1.2rem;
        margin-bottom: 1.8rem;
    }

    .stat-item {
        gap: .6rem;
    }

    /* a caixa encolhe, o icone dentro dela nao: a regra anterior igualava os
       dois em 34px e o desenho estourava a borda arredondada */
    .stat-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        box-shadow: none;
        border: 1px solid var(--linha-fina);
    }

    .stat-icon svg {
        width: 20px;
        height: 20px;
    }

    .hero-title {
        font-size: 2.15rem;
        line-height: 1.1;
    }

    .hero-description {
        font-size: 1.02rem;
    }

    /* a foto deixa de ocupar a tela inteira */
    .hero-image-wrapper {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .hero-image-wrapper img {
        height: 100%;
        object-fit: cover;
        object-position: center 22%;
    }

    .section-label,
    .hero-tag,
    .hero-badge {
        font-size: .64rem;
        letter-spacing: .08em;
        padding: .38rem .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tratamento-card,
    .diferencial-card,
    .diferencial-card-compact,
    .feature-card,
    .categoria-card,
    .relacionado-card,
    .btn-hero-primary,
    .btn-whatsapp,
    .btn-secondary {
        transition: none;
    }

    .hero-image {
        animation: none;
    }
}

/* ==========================================================================
   Especificidade
   O style.css tem regras com elemento mais classe (h1.hero-tag, h2.hero-title)
   que vencem as de classe pura escritas acima. Na home o H1 e a etiqueta e o
   nome da medica e um H2, entao sem estes seletores a home ficava sem o refino
   enquanto as paginas de servico ja pegavam.
   ========================================================================== */

h2.hero-title {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: var(--tinta);
}

h1.hero-tag {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--linha-fina);
    color: var(--button-bg);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    padding: .45rem .9rem;
    line-height: 1.1;
}

@media (max-width: 768px) {
    h2.hero-title {
        font-size: 2.15rem;
        line-height: 1.1;
    }

    h1.hero-tag {
        font-size: .64rem;
        letter-spacing: .08em;
        padding: .4rem .75rem;
    }
}

@media (max-width: 480px) {
    h2.hero-title {
        font-size: 1.95rem;
    }

    h1.hero-tag {
        font-size: .64rem;
        padding: .4rem .75rem;
    }
}

/* ---------- hierarquia de titulo em secao com h2 e h3 juntos ---------- */

.tratamentos h3,
.exames h3,
.depoimentos h3,
.areas-intro h3,
.blog-header h3 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--tinta-suave);
    letter-spacing: -.005em;
}

.areas-intro h3::after {
    background: var(--linha-fina);
}

@media (max-width: 768px) {

    .tratamentos h2,
    .exames h2,
    .depoimentos h2,
    .areas-intro h2,
    .blog-header h2,
    .diferenciais-header h2,
    .faq-header h2,
    .agendar h2 {
        font-size: 1.85rem;
        line-height: 1.15;
    }

    .tratamentos h3,
    .exames h3,
    .depoimentos h3,
    .areas-intro h3,
    .blog-header h3 {
        font-size: 1.05rem;
    }
}

/* ==========================================================================
   Superficies escuras
   .agendar e o rodape tem fundo oliva. As regras de tinta escura acima
   deixariam o titulo quase preto sobre o oliva, praticamente ilegivel.
   Aqui o texto volta a ser branco, com a tipografia nova mantida.
   ========================================================================== */

.agendar,
.agendar p,
.agendar h2,
.agendar h3,
.agendar h4,
.footer,
.footer p,
.footer h4,
.footer .footer-nav a {
    color: var(--white);
}

.agendar h2,
.agendar h3 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -.018em;
}

.agendar p {
    font-family: var(--leitura);
    color: rgba(255, 255, 255, .88);
    line-height: 1.65;
}

.footer h4,
.footer-nav h4 {
    font-family: var(--display);
    font-weight: 600;
    color: var(--white);
}

/* o cartao branco dentro da secao escura mantem a tinta */
.agendar .consulta-card,
.agendar .consulta-card h2,
.agendar .consulta-card h3 {
    color: var(--tinta);
}

.agendar .consulta-card p {
    color: var(--tinta-suave);
}

/* ==========================================================================
   Ajustes finos de contraste
   Apurados medindo elemento por elemento nas 22 paginas.
   ========================================================================== */

/* cartao de formacao com fundo bege: texto oliva dava 3,22 */
.formacao-card.highlight-card h4,
.formacao-card.highlight-card h3 {
    color: var(--tinta);
}

.formacao-card.highlight-card p {
    color: var(--tinta-suave);
}

/* O .cta-inline NAO e secao escura: o fundo e um gradiente oliva com 3% de
   opacidade, ou seja, praticamente claro. Texto branco aqui some. */
.cta-inline h3,
.cta-inline h2 {
    color: var(--tinta);
}

.cta-inline p {
    color: var(--tinta-suave);
    opacity: 1;
    font-family: var(--leitura);
}

/* resposta de FAQ sobre fundo claro: oliva dava 4,17, abaixo do minimo */
.faq-answer p,
.faq-answer,
.faq-item p {
    color: var(--tinta-suave);
}

/* pergunta de FAQ sobre fundo claro: o oliva dava 4,17, abaixo do minimo */
.faq-question,
.faq-question span,
.faq-question h3 {
    color: var(--tinta);
}

/* ==========================================================================
   Estrelas de avaliacao
   Sao decorativas: a nota vem escrita ao lado ("5.0 (8 avaliacoes)"). Nao
   escurecer ate 4,5:1, porque a essa altura o dourado vira marrom e perde
   a convencao. Em vez disso, um tom um pouco mais fundo e um contorno fino
   dao definicao sobre fundo claro sem descaracterizar a cor.
   ========================================================================== */

.rating-stars,
.rating-stars-small,
.depoimento-stars {
    color: #D99400;
    -webkit-text-stroke: .4px rgba(41, 41, 31, .38);
    paint-order: stroke fill;
}

/* ==========================================================================
   Navegacao principal
   Os links do menu eram oliva sobre o bege do cabecalho: 3,24, abaixo do
   minimo de 4,5. No celular o menu fica atras do hamburguer e o problema
   passava despercebido; no desktop sao seis links em todas as paginas.
   ========================================================================== */

.nav-menu a {
    color: var(--tinta);
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    color: var(--oliva-forte);
}

/* Estado aberto do acordeao.
   O CSS original gira o botao 45 graus e o script troca o "+" por "-".
   Somados, o resultado e uma barra inclinada, que nao comunica nada. A
   rotacao existia para transformar o "+" em "x", mas o script nao mantem o
   sinal. Cancelo a rotacao: o "-" ja diz que a resposta esta aberta.
   Medido: o "-" cai os mesmos 3px que o "+", entao a compensacao de padding
   continua valendo no estado aberto. */

.diabetes-faq-box.active .diabetes-faq-toggle {
    transform: none;
}

/* ==========================================================================
   Links dentro do texto
   So 17 dos 96 links de conteudo do site sao ancora inline; o resto e cartao
   inteiro clicavel. Os poucos inline precisam ser inconfundiveis, senao o
   leitor nao percebe que ha caminho ali.
   ========================================================================== */

.link-interno,
.perfil-text a:not(.btn-hero-primary):not(.btn-secondary),
.areas-intro a:not([class*="btn"]),
.tratamentos p a:not([class*="btn"]),
.diabetes-faq-content a:not([class*="btn"]),
.exames p a:not([class*="btn"]) {
    color: var(--oliva-forte);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(110, 109, 83, .45);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, color .2s ease;
}

.link-interno:hover,
.perfil-text a:not(.btn-hero-primary):not(.btn-secondary):hover,
.areas-intro a:not([class*="btn"]):hover,
.tratamentos p a:not([class*="btn"]):hover,
.diabetes-faq-content a:not([class*="btn"]):hover,
.exames p a:not([class*="btn"]):hover {
    text-decoration-color: var(--oliva-forte);
    background: rgba(110, 109, 83, .08);
}