/*
    Especialli — pele da marca sobre o tema ClinicMaster.

    O tema inteiro é dirigido pelas variáveis do Bootstrap, então trocar as
    variáveis abaixo re-peleia style.css sem tocar em uma linha da estrutura.
    Carregue este arquivo DEPOIS de style.css.

    Paleta do MIV (docs/miv.pdf):
      taupe      #BDB7AB    champagne  #D6CCB8
      charcoal   #313031    ink        #231F20
      mist       #E6E8E7    branco     #FFFFFF
*/

/* ── Tipografia da marca, auto-hospedada ─────────────────────────────────── */
@font-face {
    font-family: "Marcellus";
    src: url("../fonts/marcellus-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url("../fonts/jost-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-var.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Tokens do MIV, para uso direto no markup */
    --brand-taupe: #bdb7ab;
    --brand-champagne: #d6ccb8;
    --brand-champagne-deep: #a08d6f;
    --brand-charcoal: #313031;
    --brand-ink: #231f20;
    --brand-mist: #e6e8e7;
    --brand-white: #ffffff;

    /*
        O tema usa --bs-primary tanto para preenchimento quanto para texto e
        ícones. O champagne puro não tem contraste para texto, então primary é
        o champagne escurecido e o champagne claro fica nos preenchimentos.
    */
    --bs-primary: #a08d6f;
    --bs-primary-rgb: 160, 141, 111;
    --primary-hover: #8a7a5f;

    /*
        O tema deixou fora das variáveis o ciano e o azul-marinho do hover dos
        botões e dos fundos sutis. Reapontados para a paleta do MIV.
    */
    --bs-primary-btn-hover-bg: #8a7a5f;
    --bs-primary-btn-hover-border-color: #8a7a5f;
    --bs-secondary-btn-hover-bg: #1f1e1f;
    --bs-secondary-btn-hover-border-color: #1f1e1f;
    --bs-primary-bg-subtle: #f1ece2;
    --bs-secondary-bg-subtle: #e6e8e7;
    --bs-primary-border-subtle: #d6ccb8;
    --bs-secondary-border-subtle: #bdb7ab;

    --bs-secondary: #313031;
    --bs-secondary-rgb: 49, 48, 49;

    --bs-heading-color: #231f20;
    --bs-heading-color-rgb: 35, 31, 32;

    --bs-body-color: #5a5550;
    --bs-body-color-rgb: 90, 85, 80;

    --bs-light: #e6e8e7;
    --bs-light-rgb: 230, 232, 231;

    --bs-body-bg: #ffffff;
    --bs-dark: #231f20;
    --bs-border-color: #bdb7ab;
    --border-color: #bdb7ab;

    /*
        O MIV proíbe degradê. Mantemos as variáveis para não quebrar nenhuma
        regra do tema, mas apontando para cor chapada.
    */
    --gradient: linear-gradient(to right, #d6ccb8 0%, #d6ccb8 100%);
    --gradient-sec: linear-gradient(to right, #313031 0%, #313031 100%);

    --font-family-base: "Figtree", "Helvetica Neue", Arial, sans-serif;
    --font-family-title: "Marcellus", Georgia, "Times New Roman", serif;

    /* Marcellus só tem um peso. Os títulos ganham peso por escala, não por bold. */
    --headings-font-weight: 400;
    --headings-font-weight2: 400;
    --headings-font-weight3: 400;
}

/* ── Ajustes que as variáveis não alcançam ───────────────────────────────── */

body {
    font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.title,
.dz-title {
    font-family: var(--font-family-title);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Chapéus e rótulos em caixa alta usam a Jost, como o descritor do logo. */
.sub-title,
.eyebrow,
.btn,
.dz-topbar-inner,
.header-nav .nav > li > a {
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
}

.sub-title,
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
}

/* O chip de sub-title do tema vem com degradê. Vira preenchimento chapado. */
.section-head .sub-title {
    background-image: none;
    background-color: var(--brand-mist);
    color: var(--brand-ink);
}

.btn {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.8125rem;
}

/* O tema pinta estrelas de amarelo fixo. Aqui elas seguem a marca. */
.widget-rating3 .star-list li,
.star-list li {
    color: var(--brand-champagne-deep);
}

/* Blocos com o padrão da marca em vez do blend de degradê do tema. */
.background-blend-burn {
    background-blend-mode: normal;
}

/* Foco visível em toda a navegação por teclado. */
:focus-visible {
    outline: 2px solid var(--brand-charcoal);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── CTA flutuante de WhatsApp ───────────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--brand-charcoal);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 6px 20px rgba(35, 31, 32, 0.25);
    transition: background-color 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    background-color: var(--brand-ink);
    color: #fff;
}

@media (max-width: 575.98px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
    }
}

/*
    O tema capitaliza cada palavra do título. Em português isso quebra a
    ortografia ("Método E.S.P. Da Especialli"), então o texto sai como escrito.
*/
.section-head .title,
.section-head.style-2 .title,
.section-head.style-3 .title,
.hero-banner .title,
.dz-title,
.footer-title {
    text-transform: none;
}

/*
    Duas imagens do tema eram arte de demonstração (o DNA azul dos contadores e
    o padrão do herói). Foram removidas e trocadas pela marca do MIV. As demais
    imagens que sobraram no tema são máscaras de recorte, não ilustração.
*/
.content-bx.style-3 {
    background-image: url("../images/brand-mark.svg");
    background-size: 150px auto;
}

.hero-banner.style-2::after {
    background-image: url("../images/brand-pattern.svg");
    background-repeat: repeat;
    background-size: 150px 150px;
    opacity: 0.5;
}

/* O tema pinta o marcador da lista de verde fixo (#36DBC7). */
.list-check-try li::before,
.list-check-try.light-green li::before {
    background-color: var(--brand-champagne);
    color: var(--brand-ink);
}

/* Especificidade do tema é .section-head.style-N .title, então subimos a nossa. */
.section-head.style-1 .title,
.section-head.style-1 .sub-title,
.section-head.style-2 .sub-title,
.section-head.style-3 .sub-title,
.hero-banner.style-2 .title,
.dz-accordion .accordion-button,
.icon-bx-wraper .dz-title,
.widget .footer-title {
    text-transform: none;
}

.section-head .sub-title,
.eyebrow {
    text-transform: uppercase;
}

/*
    A onda do cabeçalho é absoluta no rodapé do banner e a seção seguinte sobe
    50px por cima dela. Nas internas a seção seguinte é escura, então ela sobe
    a camada para o texto não ficar atrás da onda.
*/
.dz-bnr-inr + section {
    position: relative;
    z-index: 3;
}

/* O logo é SVG e não traz width/height próprios, então o tema colapsava a imagem
   para 0. Altura fixa aqui também reserva o espaço e evita CLS. */
.logo-header img,
.footer-logo img {
  height: 44px;
  width: auto;
}

@media only screen and (max-width: 575px) {
  .logo-header img {
    height: 36px;
  }
}

/* ── CTA de WhatsApp ────────────────────────────────────────────────────────
   O tema empilhava texto e ícone sem alinhamento, e o hover herdava o ciano
   do template. Verde do WhatsApp no hover porque é o canal que o botão abre. */
[data-evento="whatsapp"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  --bs-btn-hover-bg: #25d366;
  --bs-btn-hover-border-color: #25d366;
  --bs-btn-active-bg: #1da851;
  --bs-btn-active-border-color: #1da851;
}

[data-evento="whatsapp"] .btn-icon,
.site-header .extra-nav .extra-cell ul li a[data-evento="whatsapp"] i {
  display: inline-flex;
  align-items: center;
  font-size: 1.35em;
  line-height: 1;
}

/* O rótulo é caixa alta espaçada, e o espaço depois da última letra desloca o
   conjunto para a esquerda. Descontado aqui para o bloco ficar no eixo. */
[data-evento="whatsapp"] .btn-text {
  margin-right: -0.12em;
}

/* O tema pinta o ícone dentro do botão com a cor do texto, e no cabeçalho ele
   ainda tem uma regra mais específica. A cor precisa ir no próprio glifo. */
[data-evento="whatsapp"] .btn-icon,
[data-evento="whatsapp"] .btn-icon i,
.site-header .extra-nav .extra-cell ul li a[data-evento="whatsapp"] i {
  color: #ffffff;
}

/* O tema esconde o burger a partir de 991px, mas o menu só vira desktop em
   992px, então em 991px não havia como abrir a navegação. */
@media only screen and (max-width: 991.98px) {
  .navicon {
    display: block;
  }
}

/* No painel mobile o fundo é branco, mas o .text-white da barra escura cascateava
   para os links, deixando o menu invisível. */
@media only screen and (max-width: 991.98px) {
  .text-white .header-nav .nav > li > a,
  .text-white .header-nav .nav > li > a i {
    color: var(--bs-heading-color);
  }

  .text-white .header-nav .dz-social-icon ul li a {
    color: var(--bs-heading-color);
  }
}

/* Card do corpo clínico: o tema arredonda em 15px, a identidade pede 4px. */
.dz-team.style-3 {
  border-radius: 4px;
}

/* Fora do estado escuro o CRO é charcoal, como o resto do texto de apoio. */
.dz-team.style-3 .dz-registro {
  color: var(--bs-secondary);
}

/* O nome do card é o botão que troca o retrato grande, e precisa parecer texto. */
.dz-team.style-3 .dz-name button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* O recorte do tema pressupõe retrato alto, e com foto quadrada ele sai reto.
   O canto do retrato grande volta ao raio de 4px da identidade. */
.dz-team.style-4 .dz-media img {
  border-radius: 250px 250px 8px 8px;
}

/* A ficha ao lado do retrato: sem sombra flutuante nem raio de 15px do tema. */
.dz-team.style-4 .info-widget.style-3 {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid var(--brand-taupe);
}

/* ── Página atual no menu ────────────────────────────────────────────────
   O tema só recolore o item ativo com o primary, que fica abaixo do contraste
   mínimo tanto na barra escura quanto no painel branco do mobile. O texto
   mantém a cor de leitura e a marcação passa a ser um traço champagne. */
.header-nav.w3menu .nav > li.active > a:not(:hover) {
  color: inherit;
}

.header-nav.w3menu .nav > li.active > a > span {
  box-shadow: inset 0 -2px 0 var(--brand-champagne);
}

.header-nav.w3menu .nav .sub-menu li.active > a {
  font-weight: 600;
  color: var(--bs-heading-color);
}

/* No desktop o menu nunca deve empilhar: item e CTA ficam sempre em uma linha
   só. No painel mobile a lista é vertical, então o nowrap fica fora daqui. */
@media only screen and (min-width: 992px) {
  .header-nav.w3menu .nav {
    flex-wrap: nowrap;
  }
}

.header-nav.w3menu .nav > li > a,
.extra-nav .btn {
  white-space: nowrap;
}

/* Até 1399px o container do tema é de 1140px e os cinco itens não cabem no
   corpo cheio. Aperta o passo em vez de quebrar a linha. */
@media only screen and (min-width: 992px) and (max-width: 1399.98px) {
  .header-nav.w3menu .nav > li > a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 15px;
  }

  .extra-nav .btn {
    padding-left: 18px;
    padding-right: 18px;
    font-size: 14px;
  }
}

/* O ícone acompanha o hover com um passo curto, o suficiente para indicar que
   o botão abre uma conversa. Sem movimento para quem pediu menos animação. */
[data-evento="whatsapp"] .btn-icon {
  transition: transform 0.2s ease;
}

[data-evento="whatsapp"]:hover .btn-icon,
[data-evento="whatsapp"]:focus-visible .btn-icon {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  [data-evento="whatsapp"],
  [data-evento="whatsapp"] .btn-icon {
    transition: none;
  }

  [data-evento="whatsapp"]:hover .btn-icon,
  [data-evento="whatsapp"]:focus-visible .btn-icon {
    transform: none;
  }
}

/* O tema não dimensiona a foto do herói: no template ela vinha com tamanho fixo
   do Next. Da largura em que o bloco vira um quadrado para cima, ela se apoia na
   base do círculo e aparece inteira.

   O header é absoluto e fica por cima do herói, então a foto usada aqui precisa
   trazer folga acima da cabeça no próprio arquivo. A do Dr. Thales tem 8% de
   folga, o que basta para o topete passar por baixo do menu sem ser cortado. */
@media only screen and (min-width: 992px) {
  .hero-banner.style-2 .hero-thumbnail .thumbnail {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    z-index: 1;
  }
}

/* Abaixo de 992px o tema zera a altura do bloco (height: auto) mas mantém a foto
   em position: absolute, então ela escapa para cima e o overflow: hidden do herói
   corta a cabeça. Aqui a foto volta ao fluxo e passa a caber inteira. */
@media only screen and (max-width: 991.98px) {
  .hero-banner.style-2 .hero-thumbnail .thumbnail {
    position: static;
    transform: none;
    height: auto;
    max-width: 100%;
  }
}

/* O cartão de unidades fica na transição entre o conteúdo e a foto. Assim,
   continua visível no primeiro quadro sem cobrir o rosto do profissional. */
.hero-banner.style-2 .item6 {
  right: auto;
  bottom: clamp(70px, 7vw, 120px);
  left: clamp(48px, 4vw, 56px);
  z-index: 2;
}

/* ── Correções de legibilidade herdadas do tema ──────────────────────────────
   Cada uma vale para o site inteiro, não só para a página onde apareceu. */

/* O tema pinta de branco qualquer link ou span dentro de um bloco icon-bx-*
   que carregue uma classe bg-*, presumindo que todo bg- seja escuro. Em cartão
   claro isso apagava o texto: branco sobre mist dá 1,15:1 de contraste. */
[class*="icon-bx-"].bg-white a,
[class*="icon-bx-"].bg-light a,
[class*="icon-bx-"].bg-body a {
  color: var(--bs-secondary);
}

[class*="icon-bx-"].bg-white .dz-title a,
[class*="icon-bx-"].bg-light .dz-title a,
[class*="icon-bx-"].bg-body .dz-title a {
  color: var(--bs-heading-color);
}

/* O span herda de novo do pai, então o ícone dentro de .icon-bx.bg-primary
   continua branco e o texto do cartão claro volta à cor do corpo. */
[class*="icon-bx-"].bg-white span,
[class*="icon-bx-"].bg-light span,
[class*="icon-bx-"].bg-body span {
  color: inherit;
}

/* O chip do chapéu é mist, e em seção .bg-light o fundo também é mist, então
   ele sumia. Sobre mist o chip fica branco. */
.bg-light .section-head .sub-title {
  background-color: var(--brand-white);
}

/* No style-1 o tema não desenha pastilha nenhuma: o chapéu é linha solta e o
   elemento é bloco, então qualquer preenchimento vira uma barra de ponta a
   ponta. Aqui ele volta a ser só texto. */
.section-head.style-1 .sub-title {
  background-color: transparent;
}

/* O MIV proíbe degradê. O bloco de citação do tema desbotava da cor para o
   transparente e lia como mancha. Vira tinta chapada com a régua na lateral. */
.content-bx.style-2:not(.right),
.content-bx.style-2.right {
  background-image: none;
  background-color: rgba(var(--bs-color-rgb), 0.07);
}

/* Raio de 15px do tema contra os 4px da identidade. */
.info-widget.style-15 {
  border-radius: 4px;
}

/* ── Linhas de pilar (content-wrapper style-11 alternado) ────────────────────
   Quando a coluna de texto vai para a esquerda, o respiro de 35px que o tema
   reserva à esquerda passa a encostar o texto na foto. Espelhado aqui. */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .content-wrapper.style-11 .order-lg-1 .content-info {
    padding-left: 0;
    padding-right: 35px;
  }
}

/* ── Champagne é traço e ícone, nunca texto corrido ──────────────────────────
   O #a08d6f dá 3,2:1 sobre branco e 2,6:1 sobre mist, abaixo do mínimo de
   4,5:1 do WCAG AA. Onde o tema usava a cor da marca para texto que se lê,
   ela passa a charcoal. Ela continua nos ícones, nos traços e nos botões. */

/* A especificidade do tema é .section-head.style-N .sub-title. */
.section-head.style-1 .sub-title,
.section-head.style-2 .sub-title,
.section-head.style-3 .sub-title {
  color: var(--brand-ink);
  background-image: none;
}

.breadcrumb-row ul li a,
.icon-link-hover-end,
.icon-bx-wraper .icon-footer a {
  color: var(--bs-secondary);
}

/* O cargo do profissional no card da equipe vinha em --bs-primary, que é o
   champagne: 2,6:1 sobre o mist. Mesma regra de sempre, o texto vai a charcoal.
   Os três seletores repetem a especificidade do tema para vencer sem !important;
   o estado hover do style-3, que tem uma classe a mais, continua valendo. */
.dz-team.style-1 .dz-position,
.dz-team.style-2 .dz-position,
.dz-team.style-3 .dz-position {
  color: var(--bs-secondary);
}

.breadcrumb-row ul li a:hover,
.breadcrumb-row ul li a:focus-visible,
.icon-link-hover-end:hover,
.icon-link-hover-end:focus-visible,
.icon-bx-wraper .icon-footer a:hover,
.icon-bx-wraper .icon-footer a:focus-visible {
  color: var(--bs-primary);
}

/* ── Acordeão ───────────────────────────────────────────────────────────────
   O tema zera a altura do cabeçalho do item aberto (height: 0; opacity: 0)
   porque no template a resposta repete a pergunta como título dentro do corpo.
   Aqui o corpo traz só a resposta, então o item aberto ficava sem pergunta
   nenhuma: a primeira dúvida da página abria como um texto sem título. O
   cabeçalho volta a aparecer e emenda no corpo. */
.dz-accordion.style-2 .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  height: auto;
  padding: 34px 30px;
  overflow: visible;
  opacity: 1;
  border-radius: 4px 4px 0 0 !important;
}

@media only screen and (max-width: 1199px) {
  .dz-accordion.style-2 .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    padding: 20px 25px;
  }
}

.dz-accordion.style-2 .accordion-item .accordion-collapse.show .accordion-body {
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

/* Raio de 15px do tema contra os 4px da identidade. */
.dz-accordion.style-1 .accordion-item .accordion-button,
.dz-accordion.style-1 .accordion-item .accordion-body,
.dz-accordion.style-2 .accordion-item .accordion-button,
.dz-accordion.style-2 .accordion-item .accordion-body {
  border-radius: 4px;
}

/* O tema marca a pergunta fechada com uma sombra dura de deslocamento sem
   desfoque, que é linguagem de outro mundo visual. A elevação aqui é a mesma
   linha de 1px em taupe dos outros cartões. */
.dz-accordion.style-1 .accordion-item .accordion-button:not(.no-shadow) {
  box-shadow: none;
  border: 1px solid var(--brand-taupe);
}

/* Em seção .bg-light o botão do style-1 é mist sobre mist e some. */
.bg-light .dz-accordion.style-1 .accordion-item .accordion-button {
  background-color: var(--brand-white);
}

/* Um título de uma linha ao lado de outro de duas deixava cada régua numa
   altura diferente. Duas linhas reservadas alinham as réguas e o corpo dos
   quatro cartões. O em acompanha a redução de corpo do tema em telas menores. */
.icon-bx-wraper.style-7 .dz-title {
  min-height: calc(2 * 1.4em + 25px);
}

/* O tema pede o "check" do Font Awesome 6 em peso 700, e o FA6 Free só publica
   400 e 900: o glifo caía para o fallback e o marcador saía como bolinha vazia. */
ul.list-check-circle-small li::before {
  font-weight: 900;
}

/* ── Foto do cabeçalho de página interna ────────────────────────────────────
   O tema desenhou .bnr-media para um PNG recortado com fundo transparente: a
   imagem é absoluta, sai 20% para fora da caixa e ganha um halo radial atrás.
   Com uma fotografia retangular isso virava um retângulo solto, maior que a
   própria caixa, encostado na barra do topo e cortado ao meio pela onda.
   Aqui a caixa vira moldura: a foto preenche, recorta e fica acima da onda. */
.dz-bnr-inr.style-2 .bnr-media {
  overflow: hidden;
  border-radius: 4px;
  z-index: 3;
  align-items: stretch;
}

.dz-bnr-inr.style-2 .bnr-media img {
  position: static;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O halo é um degradê, e o MIV não usa degradê. */
.dz-bnr-inr.style-2 .bnr-media::before {
  display: none;
}

/* Abaixo de 992px o tema simplesmente apaga a foto do cabeçalho. Em um site
   onde a maior parte do acesso é celular, é justamente onde ela mais importa:
   ela volta, em faixa, abaixo do título. */
@media only screen and (max-width: 991.98px) {
  .dz-bnr-inr.style-2 .bnr-media {
    display: block;
    width: 100%;
    min-width: 0;
    height: 200px;
    margin: 10px 0 0;
  }

  .dz-bnr-inr.style-2 .dz-bnr-inr-entry .dz-bnr-inr-flex {
    flex-direction: column;
    align-items: stretch;
  }
}

/* A barra do topo é opaca e fica por cima do cabeçalho da página, então os
   primeiros 40px da foto ficavam escondidos atrás dela para sempre. A foto
   desce para começar abaixo da barra e encurta para não mergulhar na onda. */
@media only screen and (min-width: 992px) {
  .dz-bnr-inr.style-2 .bnr-media {
    height: 340px;
    margin-top: 45px;
    margin-bottom: 0;
  }
}

/* A onda ocupa a faixa de baixo do cabeçalho, e o tema trava a altura do bloco
   em 550px. No template o conteúdo é só um H1 de uma linha; aqui são H1 de até
   três linhas, breadcrumb e uma linha de apoio, e o parágrafo caía em cima da
   faixa champagne: texto charcoal sobre #A08D6F dá 4,2:1, abaixo do mínimo.
   O bloco passa a crescer com o conteúdo e reserva a faixa da onda por baixo.

   A onda é um SVG de viewBox 1920x180 com width 100% e height auto, então ela
   mede 9.375vw de altura, não um valor fixo: em 1920px são 180px e em 1200px
   são 112px. Um padding fixo acertava numa largura e deixava o texto por cima
   da onda na outra. O padding acompanha a onda e soma a folga por fora dela. */
.dz-bnr-inr.style-2 .dz-bnr-inr-entry,
.header-transparent ~ .page-content .dz-bnr-inr.style-2 .dz-bnr-inr-entry {
  height: auto;
  min-height: calc(var(--dz-banner-height) + 120px);
  padding-top: 190px;
  padding-bottom: calc(9.375vw + 170px);
}

/* ── Galeria da clínica ─────────────────────────────────────────────────────
   O tema não traz componente de galeria: só o .dz-media, que é a moldura de
   foto usada em todo o site. A grade é do Bootstrap e a pele é a da marca:
   4px de raio, linha de 1px em taupe, sem sombra flutuante. */
.galeria-foto {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand-taupe);
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--brand-white);
}

.galeria-foto img {
  display: block;
}

.galeria-foto figcaption {
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bs-body-color);
}

/* ── Estado escuro dos cartões: hover e .active ─────────────────────────────
   Os três cartões que viram charcoal sob o cursor (as unidades e os pilares em
   icon-bx-wraper style-6 e style-7, o corpo clínico em dz-team style-3) herdam
   do tema um clareamento por lista fixa de filhos: só .dz-title, p e a. Todo o
   resto do texto (endereço, CRO, especialidade, técnicas, o número da métrica)
   continuava charcoal sobre charcoal, ilegível. Aqui o estado escuro clareia o
   cartão inteiro e o texto de apoio fica em branco a 80%, 8:1 sobre o charcoal.

   O :where zera a especificidade do segundo bloco para o terceiro poder
   rebaixar o texto de apoio. .btn, .icon-bx e .icon-cell ficam de fora porque
   já têm cor própria nesse estado, e o que está dentro deles herda dela. */
:is(.icon-bx-wraper.style-6, .icon-bx-wraper.style-7, .dz-team.style-3):is(.active, :hover) {
  color: #fff;
}

:is(.icon-bx-wraper.style-6, .icon-bx-wraper.style-7, .dz-team.style-3):is(.active, :hover)
  *:where(:not(.btn, .icon-bx, .icon-cell)) {
  color: inherit;
}

:is(.icon-bx-wraper.style-6, .icon-bx-wraper.style-7, .dz-team.style-3):is(.active, :hover)
  :is(address, li, small, .dz-registro, .dz-position, .font-14, .text-secondary) {
  /* .text-secondary é utilitário do Bootstrap e vem com !important. */
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Imagem dos posts do blog ───────────────────────────────────────────────
   O tema arredonda a moldura da foto em 15px; a identidade pede 4px, o mesmo
   raio dos outros cartões e da galeria. Vale para o card da listagem e para a
   foto de abertura do artigo. */
.dz-card.style-1 .dz-media,
.blog-single.style-1 .dz-media {
  border-radius: 4px;
}

/* ── Campos de formulário ───────────────────────────────────────────────────
   O tema tem um erro de digitação no .form-control: escreve
   "border-radius: 1px solid var(--bs-secondary)" onde queria "border". A
   declaração é inválida, o navegador descarta, e sobra o "border: 0" da linha
   de cima. Resultado: input e textarea ficam sem contorno nenhum, invisíveis
   sobre o branco do .form-body, enquanto o select ao lado tem borda. Aqui o
   contorno volta, no mesmo tom do select, e o raio cai para os 4px da
   identidade. Se o tema for atualizado, confira se o typo continua lá. */
.form-control,
.form-select,
select {
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.form-control:focus,
.form-control:active,
.form-select:focus,
select:focus {
  border-color: var(--bs-primary);
}

/* O estado de erro precisa vencer a borda neutra acima. */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--bs-danger);
}

/* ── Ícones ──────────────────────────────────────────────────────────────────
   As três fontes de ícone saíram (308 KB de webfont para 47 glifos). Cada ícone
   agora é um SVG inline, em _partials/icons/. Herda tamanho por width/height em
   1em e cor por currentColor, que era exatamente como a icon font se comportava.
   Só o alinhamento precisa de ajuste: glifo de fonte senta na linha de base
   sozinho, <svg> não. */
.icon-svg {
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* BEGIN icon-css (gerado por bin/build-icon-css.mjs, não editar à mão) */
/* ── Glifos que estavam dentro do style.css ──────────────────────────────────
   O tema não usava a icon font só no markup: desenhava alguns ícones em
   ::before/::after com content:"\fXXX" e font-family da fonte. Com as fontes
   removidas esses pontos ficariam vazios, então cada um volta como máscara. */

/* Seta do acordeão de FAQ. O Bootstrap gira 90deg no estado aberto e a máscara
   acompanha o transform, então a seta aponta para baixo quando abre. */
.dz-accordion .accordion-button::after,
.dz-accordion .accordion-button:not(.collapsed)::after {
    content: "";
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.1717%2012.0007L8.22192%207.05093L9.63614%205.63672L16.0001%2012.0007L9.63614%2018.3646L8.22192%2016.9504L13.1717%2012.0007Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.1717%2012.0007L8.22192%207.05093L9.63614%205.63672L16.0001%2012.0007L9.63614%2018.3646L8.22192%2016.9504L13.1717%2012.0007Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    width: 20px;
    height: 20px;
}

/* Separador do breadcrumb. */
.breadcrumb-row ul .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    background-color: var(--bs-heading-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19.1642%2012L12.9571%205.79291L11.5429%207.20712L16.3358%2012L11.5429%2016.7929L12.9571%2018.2071L19.1642%2012ZM13.5143%2012L7.30722%205.79291L5.89301%207.20712L10.6859%2012L5.89301%2016.7929L7.30722%2018.2071L13.5143%2012Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19.1642%2012L12.9571%205.79291L11.5429%207.20712L16.3358%2012L11.5429%2016.7929L12.9571%2018.2071L19.1642%2012ZM13.5143%2012L7.30722%205.79291L5.89301%207.20712L10.6859%2012L5.89301%2016.7929L7.30722%2018.2071L13.5143%2012Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    width: 14px;
    height: 14px;
}

/* Marcador das listas de checagem. A regra base do tema posiciona em absolute
   left:0 top:8px e contava com o font-size para dar tamanho ao glifo, então
   width e height precisam ser declarados aqui. */
ul.list-check li:before,
ul.list-check-try li:before,
ul.list-check-circle-small li:before {
    content: "";
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.9997%2015.1709L19.1921%205.97852L20.6063%207.39273L9.9997%2017.9993L3.63574%2011.6354L5.04996%2010.2212L9.9997%2015.1709Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.9997%2015.1709L19.1921%205.97852L20.6063%207.39273L9.9997%2017.9993L3.63574%2011.6354L5.04996%2010.2212L9.9997%2015.1709Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    width: 16px;
    height: 16px;
}

/* A variante circle usa o próprio :before como o círculo branco de fundo, então
   o check não pode virar máscara: entra como imagem centralizada. */
ul.list-check-circle li:before {
    content: "";
    -webkit-mask: none;
    mask: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.9997%2015.1709L19.1921%205.97852L20.6063%207.39273L9.9997%2017.9993L3.63574%2011.6354L5.04996%2010.2212L9.9997%2015.1709Z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

/* Setas do comparador antes/depois. */
.twentytwenty-box .before-after-slider__delimiter-icon:before,
.twentytwenty-box .before-after-slider__delimiter-icon:after {
    content: "";
    display: inline-block;
    background-color: currentColor;
    width: 12px;
    height: 12px;
}
.twentytwenty-box .before-after-slider__delimiter-icon:before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.8284%2012.0007L15.7782%2016.9504L14.364%2018.3646L8%2012.0007L14.364%205.63672L15.7782%207.05093L10.8284%2012.0007Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.8284%2012.0007L15.7782%2016.9504L14.364%2018.3646L8%2012.0007L14.364%205.63672L15.7782%207.05093L10.8284%2012.0007Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.twentytwenty-box .before-after-slider__delimiter-icon:after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.1717%2012.0007L8.22192%207.05093L9.63614%205.63672L16.0001%2012.0007L9.63614%2018.3646L8.22192%2016.9504L13.1717%2012.0007Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.1717%2012.0007L8.22192%207.05093L9.63614%205.63672L16.0001%2012.0007L9.63614%2018.3646L8.22192%2016.9504L13.1717%2012.0007Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
/* END icon-css */

/* ── Contraste do champagne como texto e como preenchimento ──────────────────
   Complementa o bloco "Champagne é traço e ícone, nunca texto corrido" acima.
   O #a08d6f resolve para ícone e traço, mas reprovava em três situações de
   texto que o Lighthouse apontou:

     h3.text-primary sobre mist ......... 2,61:1
     texto branco sobre botão champagne . 3,21:1
     btn-link champagne sobre charcoal .. 4,09:1

   A cor da marca não muda: muda qual tom do champagne aparece em cada fundo.
   Claro sobre escuro, escuro sobre claro. */

/* Título de seção em champagne vai a charcoal, como já acontece com o sub-title.
   O tracejado do title-dashed-separator continua champagne. */
h1.text-primary,
h2.text-primary,
h3.text-primary,
h4.text-primary,
h5.text-primary,
h6.text-primary {
  color: var(--bs-secondary) !important;
}

/* Botão primário: o texto é branco, então o preenchimento precisa ser mais
   fundo que o champagne de ícone. #7d6a4c dá 5,20:1 e continua na mesma
   família de tom quente da marca. */
.btn-primary {
  --bs-btn-bg: #7d6a4c;
  --bs-btn-border-color: #7d6a4c;
  --bs-btn-active-bg: #7d6a4c;
  --bs-btn-active-border-color: #7d6a4c;
}

/* No rodapé escuro o champagne pode ser o tom claro do MIV, que é justamente
   o que a marca usa sobre charcoal: 8,25:1. */
.footer-dark .btn-link {
  --bs-btn-color: var(--brand-champagne);
  color: var(--brand-champagne);
}

/* O cargo do profissional no card da equipe vinha em --bs-primary, que é o
   champagne: 2,6:1 sobre o mist. Os três seletores repetem a especificidade do
   tema para vencer sem !important; o hover do style-3, com uma classe a mais,
   continua valendo. */
.dz-team.style-1 .dz-position,
.dz-team.style-2 .dz-position,
.dz-team.style-3 .dz-position {
  color: var(--bs-secondary);
}