@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Dr. Vitor Furtado — Oftalmologia Clínica e Cirúrgica
   Folha de estilo base.
   TUDO escopado em .vf-root para não conflitar com o tema do WordPress
   nem com os estilos do Elementor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.vf-root {
  /* Paleta extraída da logomarca e da identidade da clínica */
  --vf-ink:        #16181D;   /* preto do wordmark — títulos      */
  --vf-ink-soft:   #2C333D;
  --vf-navy:       #123A6B;   /* azul-marinho da placa da clínica */
  --vf-blue:       #4A9FD6;   /* azul da íris na logo — ação      */
  --vf-blue-600:   #2E7DB5;
  --vf-blue-700:   #1F5F8F;
  --vf-sky:        #EAF4FB;   /* tinta clara: fundos e chips      */
  --vf-sky-deep:   #D6E9F7;

  --vf-bg:         #FFFFFF;
  --vf-bg-soft:    #F5F9FC;
  --vf-muted:      #5B6672;
  --vf-line:       #E4EBF1;

  /* Formas */
  --vf-r:      24px;
  --vf-r-lg:   32px;
  --vf-r-sm:   14px;
  --vf-pill:   999px;

  /* Sombras — difusas e frias, como nas referências */
  --vf-sh-sm:  0 2px 8px rgba(18, 58, 107, .06);
  --vf-sh:     0 18px 40px -18px rgba(18, 58, 107, .25);
  --vf-sh-lg:  0 40px 80px -32px rgba(18, 58, 107, .35);

  /* Ritmo */
  --vf-gap:    28px;
  --vf-sect:   clamp(64px, 8vw, 120px);
  --vf-max:    1200px;

  /* Altura do cabeçalho — a hero desconta este valor para somar
     exatamente uma tela cheia (menu + hero). Alterar aqui ajusta os dois. */
  --vf-header-h: 78px;

  --vf-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system,
             "Helvetica Neue", Arial, sans-serif;

  --vf-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET ESCOPADO
   Só afeta o que está dentro de .vf-root — o resto do site WP fica intacto.
   -------------------------------------------------------------------------- */
.vf-root,
.vf-root *,
.vf-root *::before,
.vf-root *::after { box-sizing: border-box; }

.vf-root {
  font-family: var(--vf-font);
  color: var(--vf-ink);
  background: var(--vf-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* IMPORTANTE — o reset usa :where() de propósito.
   `.vf-root p` teria especificidade (0,1,1), acima de qualquer classe de
   componente (0,1,0), e anularia as margens declaradas em .vf-hero__lead,
   .vf-cta__title, .vf-card__title etc. Com :where() a especificidade cai
   para (0,1,0): ainda vence o `p {}` do tema do WordPress (0,0,1), mas
   perde para as classes deste projeto, que é o comportamento desejado. */
.vf-root :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
  margin: 0;
  padding: 0;
}
.vf-root :where(ul, ol) { list-style: none; }
.vf-root :where(img, svg) { display: block; max-width: 100%; height: auto; }
.vf-root :where(a) { color: inherit; text-decoration: none; }
.vf-root :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.vf-root :where(input, textarea, select) { font: inherit; color: inherit; }

/* Foco visível — acessibilidade por teclado */
.vf-root :focus-visible {
  outline: 3px solid var(--vf-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.vf-wrap {
  width: 100%;
  max-width: var(--vf-max);
  margin-inline: auto;
  padding-inline: 20px;
}
.vf-section { padding-block: var(--vf-sect); }
.vf-section--soft {
  background: var(--vf-bg-soft);
  --vf-ring-x: 6%; --vf-ring-y: 88%; --vf-ring-r: 200px;
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.vf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vf-blue-700);
  margin-bottom: 16px;
}
/* Marcador: anel com pupila — a íris da logomarca em miniatura */
.vf-eyebrow::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: radial-gradient(circle, currentColor 0 2.5px, transparent 2.5px);
}

.vf-h1 {
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 800;
}
.vf-h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -.025em;
  font-weight: 800;
}
.vf-h3 {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 700;
}
.vf-lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--vf-muted);
  max-width: 60ch;
}
.vf-accent { color: var(--vf-blue-600); }

.vf-head { max-width: 720px; margin-bottom: 56px; }
.vf-head--center { margin-inline: auto; text-align: center; }
.vf-head--center .vf-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.vf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--vf-pill);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
  transition: transform .25s var(--vf-ease), box-shadow .25s var(--vf-ease),
              background-color .25s var(--vf-ease), color .25s var(--vf-ease);
  white-space: nowrap;
}
.vf-btn svg { width: 18px; height: 18px; flex: none; }

/* Cada variante declara fundo E cor de texto explicitamente, para que um
   tema do WordPress que estilize `a` não consiga produzir branco no branco. */

/* Azul sólido — sobre fundos claros */
.vf-root .vf-btn--primary {
  background: var(--vf-blue-600);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(46, 125, 181, .7);
}
.vf-root .vf-btn--primary:hover,
.vf-root .vf-btn--primary:focus-visible {
  background: var(--vf-blue-700);
  color: #fff;
  transform: translateY(-2px);
}

/* Contornado escuro — sobre fundos claros */
.vf-root .vf-btn--ghost {
  background: transparent;
  color: var(--vf-ink);
  box-shadow: inset 0 0 0 1.5px var(--vf-line);
}
.vf-root .vf-btn--ghost:hover,
.vf-root .vf-btn--ghost:focus-visible {
  color: var(--vf-blue-700);
  box-shadow: inset 0 0 0 1.5px var(--vf-blue);
}

/* Branco sólido — sobre fundos azuis/escuros */
.vf-root .vf-btn--light {
  background: #fff;
  color: var(--vf-navy);
  box-shadow: var(--vf-sh-sm);
}
.vf-root .vf-btn--light:hover,
.vf-root .vf-btn--light:focus-visible {
  background: #fff;
  color: var(--vf-blue-700);
  transform: translateY(-2px);
  box-shadow: var(--vf-sh);
}

/* Contornado claro — sobre fundos azuis/escuros */
.vf-root .vf-btn--outline-light {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
.vf-root .vf-btn--outline-light:hover,
.vf-root .vf-btn--outline-light:focus-visible {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

/* Tamanho maior, para as chamadas principais */
.vf-btn--lg { padding: 18px 34px; font-size: 1rem; }

.vf-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6. CABEÇALHO
   -------------------------------------------------------------------------- */
.vf-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--vf-ease), box-shadow .3s var(--vf-ease);
}
.vf-header.is-stuck {
  border-bottom-color: var(--vf-line);
  box-shadow: 0 6px 24px -18px rgba(18, 58, 107, .5);
}
.vf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--vf-header-h);
}
.vf-logo img { width: auto; height: 42px; }
/* Rede de seguranca para o WordPress.
   Se a logomarca vier por the_custom_logo(), ela chega embrulhada num
   <a class="custom-logo-link">. Como .vf-logo ja e um <a>, o parser fecha
   a ancora externa ao encontrar a interna e a imagem deixa de ser
   descendente de .vf-logo -- a regra acima para de casar e a logo sai no
   tamanho natural do arquivo. O tema evita isso inserindo so o <img>, mas
   esta linha garante o teto mesmo se a funcao voltar a ser usada. */
.vf-header .custom-logo { width: auto; height: 42px; }

.vf-nav { display: flex; align-items: center; gap: 4px; }
.vf-nav a {
  padding: 10px 14px;
  border-radius: var(--vf-pill);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--vf-ink-soft);
  transition: color .2s var(--vf-ease), background-color .2s var(--vf-ease);
}
.vf-nav a:hover { color: var(--vf-blue-700); background: var(--vf-sky); }
.vf-nav a.is-active { color: var(--vf-blue-700); font-weight: 600; }

.vf-header__cta { display: flex; align-items: center; gap: 12px; }

/* Botão hambúrguer */
.vf-burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--vf-sky);
}
.vf-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--vf-ink);
  border-radius: 2px;
  position: relative;
  transition: background-color .2s;
}
.vf-burger span::before,
.vf-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--vf-ink);
  border-radius: 2px;
  transition: transform .3s var(--vf-ease), top .3s var(--vf-ease);
}
.vf-burger span::before { top: -6px; }
.vf-burger span::after  { top: 6px; }
.vf-burger[aria-expanded="true"] span { background: transparent; }
.vf-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.vf-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Menu mobile */
.vf-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #fff;
  padding: 100px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .38s var(--vf-ease), visibility .38s;
}
.vf-drawer.is-open { transform: none; visibility: visible; }
/* :not(.vf-btn) para que a regra de link não deforme o botão do menu */
.vf-drawer a:not(.vf-btn) {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  padding: 14px 0;
  border-bottom: 1px solid var(--vf-line);
}
.vf-drawer .vf-btn { 
  margin-top: 28px; 
  align-self: stretch; 
  justify-content: center; 
}
.vf-drawer__close {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 58, 107, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vf-ink);
}
.vf-drawer__close svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   Dr. Vitor Furtado — Componentes e seções
   Depende de vf.css (tokens + reset). Tudo escopado em .vf-root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. HERO (Home)
   Bloco azul único: texto à esquerda, foto do médico sangrando na base à
   direita e barra branca de informações sobreposta ao rodapé do bloco.
   -------------------------------------------------------------------------- */
/* Menu + hero somam exatamente uma tela.
   min-height (não height) para que em janelas baixas a hero cresça e role,
   em vez de cortar o conteúdo. 100svh evita o pulo causado pela barra de
   endereço do navegador móvel; 100vh fica como fallback. */
.vf-hero {
  display: flex;
  min-height: calc(100vh - var(--vf-header-h));
  min-height: calc(100svh - var(--vf-header-h));
  /* Topo: acomoda o transbordo da foto (--vf-hero-rise).
     Base: acomoda a metade da barra branca que fica fora da caixa azul. */
  padding-block: clamp(24px, 2.6vw, 40px) clamp(52px, 5.5vw, 84px);
  align-items: center;
}
.vf-hero > .vf-wrap { display: flex; align-items: center; width: 100%; }

/* A caixa azul NÃO estica para preencher a tela: ela é menor e fica
   centralizada. É isso que dá espaço para a foto transbordar em cima e
   embaixo — e mantém a imagem dentro da largura da coluna, sem o
   object-fit encolhê-la por letterbox. */
.vf-hero__block {
  position: relative;
  flex: 1;
  /* overflow visível para a foto transbordar por cima do bloco.
     Os anéis decorativos são gradientes no background, que já é recortado
     pelo border-radius — por isso não dependem de overflow:hidden. */
  overflow: visible;
  border-radius: var(--vf-r-lg);
  background:
    radial-gradient(circle at 12% -8%,  transparent 0 168px, rgba(255,255,255,.12) 168px 169.5px, transparent 170px),
    radial-gradient(circle at 67% 60%,  transparent 0 94px,  rgba(255,255,255,.11) 94px 95.5px,  transparent 96px),
    radial-gradient(90% 70% at 78% 108%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(118deg, var(--vf-navy) 0%, var(--vf-blue-700) 52%, var(--vf-blue-600) 100%);
  box-shadow: var(--vf-sh-lg);

  /* Paddings como variáveis: a altura da foto é calculada a partir delas,
     então qualquer ajuste aqui reposiciona a imagem sem cortar a cabeça. */
  --vf-hero-pad:  clamp(30px, 3.8vw, 52px);   /* padding da caixa             */
  --vf-hero-rise: clamp(30px, 3.6vw, 56px);   /* transbordo acima da caixa    */
  --vf-hero-drop: clamp(18px, 2.2vw, 28px);   /* transbordo abaixo da caixa;
                                                 precisa ser menor que metade
                                                 da barra, que o encobre      */

  padding: var(--vf-hero-pad);
}

.vf-hero__cols {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  /* Teto de 520px: acima disso a foto ficaria mais larga que a coluna e o
     object-fit a encolheria por letterbox, perdendo o transbordo do topo. */
  min-height: min(clamp(400px, 40vw, 520px), 58vh);
}

/* Coluna de texto */
.vf-hero__copy { padding-block: clamp(10px, 1.6vw, 22px); }
.vf-hero__copy .vf-eyebrow { color: rgba(255, 255, 255, .78); margin-bottom: 16px; }
.vf-hero__copy .vf-eyebrow::before { background: rgba(255, 255, 255, .55); }
.vf-hero__title {
  color: #fff;
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  margin-bottom: 20px;
}
.vf-hero__title .vf-accent { color: #A9D6F5; }
.vf-hero__lead {
  color: rgba(255, 255, 255, .90);
  max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  margin-bottom: 32px;
}
.vf-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Linha de formação — nota discreta, sem peso de componente */
.vf-hero__cred {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .78);
  font-size: .75rem;
  line-height: 1.3;
}
.vf-hero__cred svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.vf-hero__cred strong { color: #fff; font-weight: 600; }

/* Coluna da foto — transborda a caixa azul nas duas pontas.
   A base desce até --vf-hero-drop abaixo da borda inferior, onde a barra
   branca encobre o corte da imagem; o topo sobe --vf-hero-rise acima da
   borda superior. Como a coluna começa a --vf-hero-pad do topo da caixa,
   a altura soma os dois paddings mais os dois transbordos. */
.vf-hero__media { position: relative; align-self: stretch; min-height: 320px; }
.vf-hero__photo {
  position: absolute;
  right: 0;
  bottom: calc((var(--vf-hero-pad) + var(--vf-hero-drop)) * -1);
  z-index: 1;
  width: auto;
  height: calc(100% + (var(--vf-hero-pad) * 2) + var(--vf-hero-drop) + var(--vf-hero-rise));
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 26px 46px rgba(6, 26, 50, .38));
}

/* Selo de avaliação — nota discreta, ancorada à direita e na base,
   bem longe do rosto e acima da barra branca */
.vf-hero__badge {
  position: absolute;
  bottom: 9%;
  right: -10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--vf-pill);
  padding: 8px 16px;
  box-shadow: 0 10px 26px -14px rgba(6, 26, 50, .55);
}
/* Empilha rótulo e valor — sem isto os spans ficariam na mesma linha */
.vf-hero__badge__text { display: flex; flex-direction: column; gap: 1px; }
.vf-hero__badge__value {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--vf-ink);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.vf-hero__badge__label { font-size: .6875rem; color: var(--vf-muted); line-height: 1.25; }
.vf-hero__badge .vf-stars svg { width: 12px; height: 12px; }

/* Barra branca — montada sobre a borda inferior da caixa azul, metade
   dentro e metade fora. Também encobre o corte da base da foto. */
.vf-hero__bar {
  position: absolute;
  left: var(--vf-hero-pad);
  right: var(--vf-hero-pad);
  bottom: 0;
  transform: translateY(50%);
  z-index: 4;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--vf-sh);
  padding: 15px 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 10px;
}
.vf-hero__field {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 20px;
  border-right: 1px solid var(--vf-line);
  min-width: 0;
}
.vf-hero__field:nth-of-type(3) { border-right: 0; }
.vf-hero__field__icon { flex: none; color: var(--vf-blue-600); }
.vf-hero__field__icon svg { width: 21px; height: 21px; }
/* Empilha rótulo e valor — sem isto os spans ficariam na mesma linha */
.vf-hero__field__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vf-hero__field__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vf-muted);
  line-height: 1.2;
}
.vf-hero__field__value {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--vf-ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O telefone é a própria ação — dispensa um botão repetindo o CTA */
a.vf-hero__field__value { transition: color .2s var(--vf-ease); }
a.vf-hero__field__value:hover { color: var(--vf-blue-700); }

/* Estrelas */
.vf-stars { display: inline-flex; gap: 2px; color: #F5A623; }
.vf-stars svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   7b. ANÉIS — motivo recorrente derivado da íris da logomarca
   Dois círculos concêntricos desenhados como gradiente, então respeitam o
   border-radius do elemento sem precisar de overflow:hidden.
   Uso: adicione .vf-rings e ajuste as variáveis por instância.
   -------------------------------------------------------------------------- */
.vf-rings { position: relative; }
.vf-rings > * { position: relative; z-index: 1; }
.vf-rings::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--vf-ring-x, 92%) var(--vf-ring-y, 14%),
      transparent 0 calc(var(--vf-ring-r, 170px) - 1.5px),
      var(--vf-ring-c, rgba(18, 58, 107, .09)) calc(var(--vf-ring-r, 170px) - 1.5px) var(--vf-ring-r, 170px),
      transparent var(--vf-ring-r, 170px)),
    radial-gradient(circle at var(--vf-ring-x, 92%) var(--vf-ring-y, 14%),
      transparent 0 calc(var(--vf-ring-r, 170px) * .56 - 1.5px),
      var(--vf-ring-c, rgba(18, 58, 107, .09)) calc(var(--vf-ring-r, 170px) * .56 - 1.5px) calc(var(--vf-ring-r, 170px) * .56),
      transparent calc(var(--vf-ring-r, 170px) * .56));
}
/* Sobre fundos escuros */
.vf-rings--light { --vf-ring-c: rgba(255, 255, 255, .16); }

/* Posições nomeadas.

   Todas encostam o par de círculos numa borda, nunca no meio do bloco. Um
   anel inteiro dentro da coluna de conteúdo vira figura e compete com o
   texto; um cortado pela borda lê como textura e é isso que se quer — o
   motivo existe para o fundo não ficar vazio, não para ser olhado.

   Os dois raios servem para o mesmo motivo não repetir de seção em seção:
   com a posição alternando de lado e o tamanho variando, o olho para de
   reconhecer a marca como carimbo. */
.vf-rings--tr { --vf-ring-x:  96%; --vf-ring-y: 14%; }
.vf-rings--br { --vf-ring-x:  94%; --vf-ring-y: 86%; }
.vf-rings--bl { --vf-ring-x:   5%; --vf-ring-y: 86%; }
.vf-rings--tl { --vf-ring-x:   4%; --vf-ring-y: 16%; }
.vf-rings--sm { --vf-ring-r: 130px; }
.vf-rings--lg { --vf-ring-r: 210px; }

/* --------------------------------------------------------------------------
   8. GRIDS E CARTÕES
   -------------------------------------------------------------------------- */
.vf-grid { display: grid; gap: var(--vf-gap); }
.vf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vf-grid--2 { grid-template-columns: repeat(2, 1fr); }

.vf-card {
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-r);
  padding: 30px 28px;
  transition: transform .3s var(--vf-ease), box-shadow .3s var(--vf-ease),
              border-color .3s var(--vf-ease);
}
.vf-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--vf-sh);
}
.vf-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--vf-sky);
  color: var(--vf-blue-700);
  margin-bottom: 20px;
}
.vf-card__icon svg { width: 25px; height: 25px; }
.vf-card__title { margin-bottom: 10px; }
.vf-card__text { font-size: .9375rem; color: var(--vf-muted); }

/* --------------------------------------------------------------------------
   8b. APRESENTAÇÃO DO MÉDICO (Home)
   Substitui a grade de 6 benefícios: menos repetição, mais hierarquia —
   uma afirmação forte apoiada por três credenciais, em vez de seis
   cartões de peso idêntico que o olho não consegue priorizar.
   -------------------------------------------------------------------------- */
.vf-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.vf-intro__media {
  border-radius: var(--vf-r-lg);
  overflow: hidden;
  box-shadow: var(--vf-sh);
  aspect-ratio: 4 / 5;
}
.vf-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 18%;
}
.vf-intro__title { margin-bottom: 18px; }
.vf-intro__lead { margin-bottom: 32px; max-width: 52ch; }

.vf-creds { display: grid; gap: 20px; margin-bottom: 36px; }
.vf-creds__item { display: flex; gap: 16px; align-items: flex-start; }
.vf-creds__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--vf-sky);
  color: var(--vf-blue-700);
}
.vf-creds__icon svg { width: 22px; height: 22px; }
.vf-creds__text {
  font-size: .9375rem;
  color: var(--vf-muted);
  line-height: 1.55;
  max-width: 46ch;
}
.vf-creds__text strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--vf-ink);
  margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   9. PROCEDIMENTOS — cartões numerados
   -------------------------------------------------------------------------- */
.vf-proc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-r);
  padding: 28px;
  overflow: hidden;
  transition: transform .3s var(--vf-ease), box-shadow .3s var(--vf-ease),
              border-color .3s var(--vf-ease), background-color .3s var(--vf-ease);
}
/* Anel decorativo no canto — mesmo motivo dos demais blocos */
.vf-proc::before {
  content: "";
  position: absolute;
  top: -34px;
  right: -34px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 1.5px solid var(--vf-sky-deep);
  transition: border-color .3s var(--vf-ease);
  pointer-events: none;
}
.vf-proc:hover::before { border-color: var(--vf-blue); }
.vf-proc__num {
  position: relative;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--vf-sky-deep);
  transition: color .3s var(--vf-ease);
}
.vf-proc__title { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.015em; }
.vf-proc__arrow {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--vf-muted);
  transition: color .3s var(--vf-ease);
}
.vf-proc__arrow svg { width: 16px; height: 16px; transition: transform .3s var(--vf-ease); }
.vf-proc:hover .vf-proc__arrow { color: var(--vf-blue-700); }
.vf-proc:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--vf-sh); }
.vf-proc:hover .vf-proc__num { color: var(--vf-blue); }
.vf-proc:hover .vf-proc__arrow svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   10. DEPOIMENTOS
   -------------------------------------------------------------------------- */
.vf-quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-r);
  padding: 32px 28px;
}
.vf-quote__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--vf-ink-soft);
  letter-spacing: -.01em;
}
.vf-quote__author {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--vf-line);
}
.vf-quote__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--vf-navy);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  flex: none;
}
.vf-quote__name { font-weight: 600; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   11. LOCAIS DE ATENDIMENTO
   -------------------------------------------------------------------------- */
.vf-local {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-r);
  padding: 34px 30px;
}
.vf-local__name { display: flex; align-items: center; gap: 12px; }
.vf-local__pin {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--vf-sky);
  color: var(--vf-blue-700);
  flex: none;
}
.vf-local__pin svg { width: 21px; height: 21px; }
.vf-local__list { display: flex; flex-direction: column; gap: 12px; }
.vf-local__item {
  display: flex;
  gap: 12px;
  font-size: .9375rem;
  color: var(--vf-muted);
  line-height: 1.5;
}
.vf-local__item svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--vf-blue); }
.vf-local__item a { font-weight: 600; color: var(--vf-ink); }
.vf-local__item a:hover { color: var(--vf-blue-700); }
.vf-local .vf-btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   12. FAIXA DE CHAMADA (CTA)
   -------------------------------------------------------------------------- */
.vf-cta { padding-block: var(--vf-sect); }
.vf-cta__box {
  position: relative;
  overflow: hidden;
  border-radius: var(--vf-r-lg);
  background: linear-gradient(140deg, var(--vf-blue-600) 0%, var(--vf-navy) 100%);
  color: #fff;
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
  box-shadow: var(--vf-sh-lg);
}
/* Anéis via .vf-rings (ver seção 7b) — dois focos, um em cada canto */
.vf-cta__box { --vf-ring-x: 8%; --vf-ring-y: 10%; --vf-ring-r: 200px; }
.vf-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vf-cta__title { margin-bottom: 18px; max-width: 20ch; }
.vf-cta__text {
  color: rgba(255, 255, 255, .86);
  max-width: 52ch;
  margin-bottom: 40px;
  font-size: 1.0625rem;
}
.vf-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
/* O ícone do WhatsApp precisa de um pouco mais de folga que os demais */
.vf-cta__actions .vf-btn svg { width: 21px; height: 21px; }
.vf-cta__actions .vf-btn { gap: 12px; }

/* --------------------------------------------------------------------------
   13. RODAPÉ
   -------------------------------------------------------------------------- */
.vf-footer {
  background: var(--vf-ink);
  color: rgba(255, 255, 255, .72);
  padding-block: 64px 32px;
  --vf-ring-x: 90%; --vf-ring-y: 22%; --vf-ring-r: 190px;
  --vf-ring-c: rgba(255, 255, 255, .07);
}
.vf-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.vf-footer__logo { margin-bottom: 18px; }
.vf-footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.vf-footer__about { font-size: .9375rem; max-width: 38ch; }
.vf-footer__title {
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.vf-footer__list { display: flex; flex-direction: column; gap: 11px; font-size: .9375rem; }
.vf-footer__list a { transition: color .2s var(--vf-ease); }
.vf-footer__list a:hover { color: var(--vf-blue); }
.vf-footer__unit { color: #fff; font-weight: 600; }
.vf-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--vf-pill);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  transition: background-color .25s var(--vf-ease);
}
.vf-footer__social:hover { background: rgba(255, 255, 255, .16); }
.vf-footer__social svg { width: 18px; height: 18px; }
.vf-footer__bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   14. CABEÇALHO DAS PÁGINAS INTERNAS
   -------------------------------------------------------------------------- */
.vf-pagehero {
  background: var(--vf-bg-soft);
  border-bottom: 1px solid var(--vf-line);
  padding-block: clamp(48px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.vf-pagehero { --vf-ring-x: 88%; --vf-ring-y: 50%; --vf-ring-r: 210px; --vf-ring-c: var(--vf-sky-deep); }
.vf-pagehero__inner { position: relative; z-index: 1; max-width: 760px; }
.vf-pagehero__title { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   15. SOBRE MIM
   -------------------------------------------------------------------------- */
.vf-about {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
/* A caixa azul é mais baixa que a foto: o médico se apoia na base dela e
   transborda pelo topo — mesmo princípio da hero, mesma linguagem visual.
   O padding-top reserva o espaço do transbordo para que a foto não invada
   a seção acima nem seja cortada pelo cabeçalho quando a coluna gruda. */
.vf-about__media {
  /* --vf-about-h é a altura da FOTO. A caixa azul é derivada dela, com um
     controle para cada eixo — assim dá para acertar altura e largura sem
     que um ajuste desmanche o outro.

       --vf-about-inset  recuo da ALTURA da caixa (quanto a cabeça sobe)
                         .06 = caixa 6% mais baixa que a foto
       --vf-about-widen  largura da caixa em relação à LARGURA da foto
                         1.00 = igual   |   >1 = mais larga (sobra azul nas
                         laterais)      |   <1 = os ombros ultrapassam       */
  --vf-about-h: clamp(380px, 38vw, 530px);
  --vf-about-inset: .06;
  --vf-about-widen: 1.06;
  position: sticky;
  top: 110px;
  padding-top: calc(var(--vf-about-h) * var(--vf-about-inset));
}
.vf-about__photo {
  position: relative;
  /* Cada eixo com seu próprio controle (0.755 = proporção real do PNG) */
  height: calc(var(--vf-about-h) * (1 - var(--vf-about-inset)));
  width: calc(var(--vf-about-h) * .755 * var(--vf-about-widen));
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--vf-r-lg);
  overflow: visible;
  box-shadow: var(--vf-sh);
  /* Mesma superfície azul da hero, com os anéis do motivo da marca */
  background:
    radial-gradient(circle at 16% -10%, transparent 0 118px, rgba(255,255,255,.12) 118px 119.5px, transparent 120px),
    radial-gradient(circle at 78% 68%,  transparent 0 66px,  rgba(255,255,255,.11) 66px 67.5px,  transparent 68px),
    linear-gradient(118deg, var(--vf-navy) 0%, var(--vf-blue-700) 52%, var(--vf-blue-600) 100%);
}
.vf-about__photo img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: var(--vf-about-h);
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 22px 40px rgba(6, 26, 50, .34));
}
.vf-about__prose { display: flex; flex-direction: column; gap: 20px; }
.vf-about__prose p { color: var(--vf-muted); font-size: 1.0625rem; line-height: 1.72; max-width: 68ch; }
.vf-about__prose p:first-child { color: var(--vf-ink-soft); font-size: 1.125rem; }

/* PERCURSO — linha do tempo da formação.

   Substitui a lista de cinco itens com check. As quatro etapas são uma
   sequência, e a sequência é a informação: formou-se, especializou-se fora,
   voltou para o mestrado, hoje ensina. Um check ao lado de cada uma dizia
   apenas "sim, tem", e o leitor precisava remontar a ordem sozinho.

   Horizontal no desktop porque a leitura da esquerda para a direita já é a
   leitura do tempo — não é preciso numerar nada para o percurso se explicar. */
.vf-percurso { margin-top: 8px; }
.vf-percurso__linha {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* O trilho corre por baixo das marcas, de ponta a ponta */
.vf-percurso__linha::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--vf-line);
}
.vf-percurso__etapa { position: relative; padding-top: 30px; }

/* Disco sólido, não vazado: ele fica em cima do trilho, e um anel deixaria
   a linha atravessando o meio. O vazado é exceção e resolve o fundo com
   background próprio. */
.vf-percurso__marca {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--vf-blue-600);
}
/* Etapa em andamento — a única vazada. É a leitura direta de "Mestrando":
   a trilha chegou até aqui e não fechou. */
.vf-percurso__marca--curso {
  background: var(--vf-bg-soft);
  box-shadow: inset 0 0 0 1.5px var(--vf-blue-600);
}

.vf-percurso__fase {
  display: block;
  margin-bottom: 8px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vf-blue-700);
}
.vf-percurso__fase em {
  font-style: normal;
  font-weight: 500;
  color: var(--vf-muted);
}
.vf-percurso__oque {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}
.vf-percurso__onde { font-size: .875rem; line-height: 1.45; color: var(--vf-muted); }

/* As associações não são etapa de percurso — ficam como nota abaixo da
   linha, separadas por um filete. */
.vf-percurso__nota {
  margin-top: clamp(28px, 3vw, 42px);
  padding-top: 18px;
  border-top: 1px solid var(--vf-line);
  font-size: .9375rem;
  color: var(--vf-muted);
}
.vf-percurso__nota strong { color: var(--vf-ink-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   16. PÁGINA DE PROCEDIMENTOS
   -------------------------------------------------------------------------- */
.vf-tabs {
  position: sticky;
  top: 78px;
  z-index: 40;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vf-line);
}
/* Centralizado, mas com `safe`: em `center` puro, quando as sete abas não
   cabem, o overflow estoura para os DOIS lados e o começo da lista fica
   inalcançável — não há scroll negativo. `safe center` centraliza enquanto
   sobra espaço e cai para o início assim que falta, que é exatamente o
   comportamento desejado. O fallback é o alinhamento à esquerda de antes. */
.vf-tabs__scroll {
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  padding-block: 12px;
  scrollbar-width: none;
}
@supports (justify-content: safe center) {
  .vf-tabs__scroll { justify-content: safe center; }
}
.vf-tabs__scroll::-webkit-scrollbar { display: none; }

/* O marcador é o único fundo da barra. Antes cada aba era um chip com fundo
   e borda próprios, e o estado ativo era mais um fundo por cima — três
   camadas de cor disputando a mesma faixa. Agora a pílula desliza entre as
   abas e os rótulos ficam só texto.

   Largura e posição vêm do JS; a transição é declarada aqui para o movimento
   acontecer sozinho quando esses dois valores mudam. Fica invisível até o JS
   medir a primeira aba, senão apareceria um retângulo de largura zero no
   canto esquerdo durante o carregamento. */
.vf-tabs__marca {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 0;
  border-radius: var(--vf-pill);
  /* blue-700 e não blue-600: o rótulo ativo é branco em 14px semibold, que
     não conta como texto grande. Sobre o 600 dá 4,45:1 e reprova no AA por
     pouco; sobre o 700, 6,9:1. */
  background: var(--vf-blue-700);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s var(--vf-ease),
              width .45s var(--vf-ease),
              opacity .3s var(--vf-ease);
}
.vf-tabs__marca.is-ready { opacity: 1; }
/* z-index acima da pílula, que é irmã anterior no mesmo contexto */
.vf-tabs a {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 10px 18px;
  border-radius: var(--vf-pill);
  font-size: .875rem;
  font-weight: 600;
  color: var(--vf-muted);
  background: transparent;
  border: 0;
  transition: color .25s var(--vf-ease);
}
.vf-tabs a:hover { color: var(--vf-ink); }
/* Só a cor do texto muda: o fundo é a pílula, que chega deslizando.

   Esta linha só declara `color`. A versão anterior declarava também
   `background` e `border-color` aqui, e o tema editorial tinha um
   `.vf-editorial .vf-tabs a { background: transparent }` de mesma
   especificidade (0,2,1) carregado depois — o fundo azul morria e sobrava
   texto branco sobre papel quase branco. Mantendo o fundo fora do estado
   ativo, esse empate deixa de existir. */
.vf-tabs a.is-active { color: #fff; }

.vf-entry { padding-block: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--vf-line); }
.vf-entry:last-of-type { border-bottom: 0; }

/* Nas entradas o anel só pode ir à direita: a coluna da esquerda é a foto,
   opaca, e engoliria o desenho inteiro. A calha entre o fim do texto (68ch)
   e a borda da página é justamente o vazio que o motivo veio ocupar.
   As posições vêm das classes .vf-rings--* no HTML. */
.vf-entry__grid {
  display: grid;
  grid-template-columns: clamp(240px, 30%, 380px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Colunas fixas em vez de posicionamento automático.

   Hoje as sete entradas têm foto, mas o token não gera elemento nenhum para
   uma entrada sem imagem. Com auto-placement, o texto dessa entrada subiria
   para a coluna 1 e o título sairia da vertical em que todos os outros estão
   alinhados — uma quebra na régua da página no meio da leitura. Fixando o
   texto na coluna 2, a coluna da imagem fica reservada mesmo vazia. */
.vf-entry__media { grid-column: 1; grid-row: 1; }
.vf-entry__body  { grid-column: 2; grid-row: 1; }

/* Número e título na mesma linha de base: o número deixa de ser o topo de
   uma coluna e passa a ser o marcador do título, que é o que ele sempre
   significou. */
.vf-entry__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
}
.vf-entry__num {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--vf-sky-deep);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--vf-blue-600);
}
.vf-entry__title {
  /* Menor que .vf-h2: são 7 repetições e não podem competir com o H1 */
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  margin-bottom: 0;
}
.vf-entry__body { display: flex; flex-direction: column; gap: 18px; }
.vf-entry__body p { color: var(--vf-muted); font-size: 1.0625rem; line-height: 1.72; max-width: 68ch; }

/* Botão de vídeo (abre o Reels do Instagram) */
.vf-videobtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 11px 20px 11px 12px;
  border-radius: var(--vf-pill);
  background: var(--vf-sky);
  color: var(--vf-blue-700);
  font-size: .875rem;
  font-weight: 600;
  transition: background-color .25s var(--vf-ease), transform .25s var(--vf-ease);
}
.vf-videobtn:hover { background: var(--vf-sky-deep); transform: translateY(-2px); }
.vf-videobtn__play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vf-blue-600);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.vf-videobtn__play svg { width: 13px; height: 13px; }

/* A foto em si.

   Os arquivos originais são pequenos: cinco de 440x290 e um de 542x369. A
   coluna para de crescer em 380px justamente por isso — em 1fr a imagem
   esticaria além do tamanho real e apareceria borrada nas telas grandes.

   O recorte sai do aspect-ratio, não da altura livre: os seis enquadramentos
   são bem diferentes entre si (dois closes clínicos, dois esquemas, uma
   ilustração 3D) e sem isso cada entrada teria uma altura de imagem. */
.vf-entry__media {
  margin: 0;
  min-width: 0;
  border-radius: var(--vf-r-sm);
  overflow: hidden;
  background: var(--vf-sky);
  border: 1px solid var(--vf-line);
}
.vf-entry__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 44 / 29;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   17. EXAMES
   -------------------------------------------------------------------------- */
.vf-exam {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: var(--vf-r);
  padding: 30px 28px;
  transition: transform .3s var(--vf-ease), box-shadow .3s var(--vf-ease),
              border-color .3s var(--vf-ease);
}
.vf-exam:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--vf-sh); }
.vf-exam__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--vf-sky);
  color: var(--vf-blue-700);
}
.vf-exam__icon svg { width: 25px; height: 25px; }
.vf-exam__text { font-size: .9375rem; color: var(--vf-muted); }
.vf-exam .vf-videobtn { margin-top: auto; }

/* --------------------------------------------------------------------------
   18. CONTATO
   -------------------------------------------------------------------------- */
.vf-map {
  position: relative;
  border-radius: var(--vf-r-lg);
  overflow: hidden;
  border: 1px solid var(--vf-line);
  box-shadow: var(--vf-sh);
  background: var(--vf-bg-soft);
  aspect-ratio: 21 / 9;
  min-height: 320px;
  max-width: 100%;
}
/* Absoluto em vez de `height: 100%`.

   A altura da caixa vem do aspect-ratio no desktop e do min-height no
   celular — nas telas estreitas 21:9 daria uns 140px e o min-height passa a
   mandar. Com a altura vindo de min-height, a altura *computada* do pai
   continua `auto`, e um `height: 100%` no iframe não tem contra o que
   resolver: cada motor decide uma coisa, e o iframe cai para o tamanho
   padrão dele (300x150). Ancorado com inset:0 ele preenche a caixa exata,
   não importa de onde veio a altura, e não tem como ultrapassá-la. */
.vf-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   20. BOTÃO FLUTUANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
.vf-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 55;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .75);
  transition: transform .3s var(--vf-ease);
}
.vf-wa:hover { transform: scale(1.07); }
.vf-wa svg { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   20b. SELOS — esteira horizontal contínua

   O movimento é o próprio conteúdo: são só quatro entidades, e uma fileira
   estática de quatro logos centralizada lê como rodapé de patrocinador. Em
   esteira, a faixa vira uma linha viva entre duas seções pesadas.

   O trilho anda -25% e volta a zero. Como o build repete a fila 4 vezes
   (SELOS_COPIAS), 25% equivale exatamente à largura de uma fila: no instante
   em que a animação reinicia, a fila 2 está onde a fila 1 estava, e a emenda
   não existe. Mudar o número de cópias exige mudar esta porcentagem para
   100/N — por isso os dois valores andam comentados um no outro.
   -------------------------------------------------------------------------- */
.vf-selos {
  padding-block: clamp(38px, 5vw, 60px);
  border-top: 1px solid var(--vf-line);
  border-bottom: 1px solid var(--vf-line);
  background: var(--vf-bg);
}
.vf-selos__label {
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vf-muted);
  text-align: center;
}

/* As máscaras laterais evitam que os logos apareçam e sumam com corte seco
   na borda da tela. O `mask` é progressive enhancement: onde não houver
   suporte a esteira só fica sem o esmaecido. */
.vf-selos__esteira {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.vf-selos__trilho {
  display: flex;
  width: max-content;
  animation: vf-esteira 42s linear infinite;
}
/* Pausa ao passar o mouse: quem quiser ler um selo consegue parar nele. */
.vf-selos__esteira:hover .vf-selos__trilho { animation-play-state: paused; }

.vf-selos__fila {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  margin: 0;
  padding: 0 clamp(20px, 3vw, 44px) 0 0;
  list-style: none;
}
.vf-selos__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 12vw, 132px);
}
/* Cinza e translúcido para não competir com a logo do médico nem com os
   azuis da marca — o selo vale pela presença, não pelo destaque. */
.vf-selos__item img {
  max-width: 100%;
  max-height: clamp(48px, 6vw, 64px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: filter .35s var(--vf-ease), opacity .35s var(--vf-ease);
}
.vf-selos__item:hover img { filter: grayscale(0); opacity: 1; }

@keyframes vf-esteira {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }  /* 100 / SELOS_COPIAS */
}

/* Sem movimento: a esteira vira uma fileira estática. As cópias extras saem
   de cena para não repetir os mesmos quatro logos na horizontal. */
@media (prefers-reduced-motion: reduce) {
  .vf-selos__trilho {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .vf-selos__fila { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .vf-selos__fila[aria-hidden="true"] { display: none; }
}


/* --------------------------------------------------------------------------
   21. ANIMAÇÃO DE ENTRADA
   -------------------------------------------------------------------------- */
.vf-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--vf-ease), transform .7s var(--vf-ease);
}
.vf-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vf-root *,
  .vf-root *::before,
  .vf-root *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .vf-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVO
   -------------------------------------------------------------------------- */
/* Telas baixas (1366x768, monitores com escala 125%): comprime a hero para
   que a barra branca continue visível na dobra. Só no layout de duas
   colunas — no mobile a hero já empilha e rola normalmente. */
@media (min-width: 901px) and (max-height: 900px) {
  .vf-hero { padding-block: 22px clamp(40px, 4vw, 56px); }
  /* Redefine as variáveis, não o padding — a altura da foto depende delas */
  .vf-hero__block { --vf-hero-pad: 34px; --vf-hero-rise: 40px; --vf-hero-drop: 26px; }
  .vf-hero__cols { min-height: 330px; }
  .vf-hero__copy { padding-block: 6px; }
  .vf-hero__copy .vf-eyebrow { margin-bottom: 12px; }
  .vf-hero__title { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: 16px; }
  .vf-hero__lead { font-size: 1rem; margin-bottom: 24px; }
  .vf-hero__cred { margin-top: 18px; }
  .vf-hero__bar { padding: 13px 12px; }
  .vf-hero .vf-btn--lg { padding: 15px 28px; font-size: .9375rem; }
}

/* Viewports muito baixas (1366x768 com barra de favoritos, notebooks 16:9) */
@media (min-width: 901px) and (max-height: 720px) {
  .vf-hero { padding-block: 16px 38px; }
  .vf-hero__block { --vf-hero-pad: 24px; --vf-hero-rise: 30px; --vf-hero-drop: 18px; }
  .vf-hero__cols { min-height: 260px; }
  .vf-hero__copy { padding-block: 0; }
  .vf-hero__copy .vf-eyebrow { margin-bottom: 7px; }
  .vf-hero__title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 10px; }
  .vf-hero__lead { font-size: .875rem; margin-bottom: 18px; }
  .vf-hero__cred { margin-top: 12px; }
  .vf-hero__bar { padding: 9px; }
  .vf-hero__field { padding-inline: 13px; gap: 11px; }
  .vf-hero__field__value { font-size: .875rem; }
  .vf-hero .vf-btn--lg { padding: 12px 22px; font-size: .9375rem; }
}

@media (max-width: 1080px) {
  .vf-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .vf-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  /* Navegação vira menu lateral */
  .vf-nav { display: none; }
  .vf-header__cta .vf-btn { display: none; }
  .vf-burger { display: flex; }

  /* No mobile o conteúdo empilha e já passa da altura da tela — forçar uma
     tela cheia só criaria espaço vazio. A hero volta a ter altura natural. */
  .vf-hero { min-height: 0; padding-block: 18px clamp(64px, 10vw, 90px); }
  .vf-hero > .vf-wrap { display: block; }
  /* Empilhada, a barra tem três linhas — montá-la na borda deixaria metade
     do conteúdo fora da caixa. Volta para dentro, no fluxo normal. */
  .vf-hero__block { display: block; --vf-hero-drop: 0px; padding-bottom: var(--vf-hero-pad); }
  /* Barra colada na imagem do doutor, eliminando espaço vazio e sobrepondo levemente */
  .vf-hero__bar { position: relative; z-index: 5; margin-top: 0; transform: translateY(-15px); left: auto; right: auto; }

  /* Hero empilha: texto centralizado, depois a foto sangrando na base */
  .vf-hero__cols { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .vf-hero__copy { text-align: center; position: relative; z-index: 2; }
  .vf-hero__copy .vf-eyebrow { justify-content: center; margin-bottom: 12px; }
  .vf-hero__title { font-size: clamp(1.75rem, 5.6vw, 2.4rem); margin-bottom: 14px; }
  .vf-hero__lead { margin-inline: auto; margin-bottom: 26px; max-width: 42ch; }
  .vf-hero__actions { justify-content: center; }
  .vf-hero__cred { margin-top: 20px; }

  /* Ajuste da altura para que a foto não transborde para cima do texto */
  .vf-hero__media { min-height: 400px; position: relative; }
  .vf-hero__photo {
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    object-position: bottom center;
    max-width: 100%;
    height: 100%;
    filter: none;
  }
  
  /* Selo de avaliação integrado entre a foto e a barra, proporcionalmente reduzido */
  .vf-hero__badge {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, -35%) scale(0.85);
    padding: 8px 16px;
    width: max-content;
    z-index: 6;
  }

  .vf-intro { grid-template-columns: 1fr; gap: 36px; }
  .vf-intro__media { max-width: 420px; aspect-ratio: 3 / 2; }

  .vf-about { grid-template-columns: 1fr; }
  .vf-about__media {
    position: static;
    margin-inline: auto;
    --vf-about-h: 380px;
  }

  /* Empilha: a foto abre a entrada e o texto vem embaixo. As colunas fixas
     do desktop precisam ser soltas aqui — mantidas, o texto ficaria preso na
     coluna 2 de uma grade de uma coluna só. */
  .vf-entry__grid { grid-template-columns: 1fr; }
  .vf-entry__media,
  .vf-entry__body { grid-column: auto; grid-row: auto; }
  .vf-entry__media { max-width: 440px; }
  .vf-entry__num { width: 56px; height: 56px; font-size: 1.375rem; }
}

@media (max-width: 680px) {
  .vf-grid--3,
  .vf-grid--2 { grid-template-columns: 1fr; }

  /* O percurso vira vertical: quatro colunas num telefone dariam ~70px cada
     e "Subespecializacao" quebraria em quatro linhas. O trilho passa para a
     esquerda e as marcas descem por ele — mesma leitura, outro eixo. */
  .vf-percurso__linha { grid-template-columns: 1fr; gap: 28px; }
  .vf-percurso__linha::before {
    top: 6px;
    bottom: 6px;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .vf-percurso__etapa { padding-top: 0; padding-left: 32px; }
  .vf-percurso__marca { top: 4px; }

  /* No celular 21:9 vira uma fresta, e o min-height de 320px anulava a
     proporcao de qualquer jeito — as duas regras se cancelavam em silencio.
     Declarar a forma que o mapa realmente tem aqui e mais honesto do que
     deixar uma proporcao no CSS que nunca chega a valer. */
  .vf-map { aspect-ratio: 4 / 3; min-height: 0; }
  .vf-footer__grid { grid-template-columns: 1fr; gap: 32px; }

  /* Só a lista de Páginas vira duas colunas. São cinco rótulos curtos que,
     empilhados numa coluna só, alongavam o rodapé sem necessidade. A lista
     de Contato fica como está: cada item ali é um endereço, e precisa da
     linha inteira para não quebrar em três. */
  .vf-footer__list--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 20px;
  }

  .vf-hero__block { border-radius: var(--vf-r); }
  .vf-hero__media { min-height: 320px; }
  .vf-hero__badge { padding: 8px 15px 8px 9px; gap: 9px; }
  .vf-hero__badge__icon { width: 32px; height: 32px; }
  .vf-hero__cred { margin-top: 20px; }

  /* Barra vira lista de uma coluna consistente e alinhada */
  .vf-hero__bar { grid-template-columns: 1fr; gap: 0; padding: 12px 16px; }
  .vf-hero__field { 
    border-right: 0; 
    padding: 16px 8px; 
    align-items: flex-start; /* Alinhamento ao topo se o texto quebrar de linha */
    gap: 16px; 
  }
  .vf-hero__field + .vf-hero__field { border-top: 1px solid var(--vf-line); }
  
  /* Ajustes dos ícones e textos para alinhamento uniforme */
  .vf-hero__field__icon {
    width: 24px;
    display: flex;
    justify-content: center;
    margin-top: 2px;
  }
  .vf-hero__field__value { 
    white-space: normal; /* Permite quebra de linha natural */
    line-height: 1.4; 
  }

  .vf-hero__actions .vf-btn,
  .vf-cta__actions .vf-btn { width: 100%; }

  .vf-card, .vf-proc, .vf-quote, .vf-local, .vf-exam { padding: 26px 22px; }
  .vf-logo img { height: 34px; }
  .vf-wa { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .vf-wa svg { width: 27px; height: 27px; }
}

/* ==========================================================================
   TEMA EDITORIAL — camada opcional sobre o design base
   ==========================================================================

   COMO DESFAZER: em build/build.py, troque

       THEME = "editorial"   ->   THEME = None

   e rode `python build/build.py`. O site volta exatamente ao estado
   anterior. Nada aqui altera vf.css, vf-ui.css ou o HTML: tudo está
   escopado em .vf-editorial, uma classe que só é aplicada quando o tema
   está ligado. Este arquivo pode ficar no projeto sem efeito nenhum.

   Baseado em design_guidelines.md. As divergências em relação ao
   documento estão comentadas ao longo do arquivo, marcadas com DIVERGÊNCIA.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS — paleta mais madura
   -------------------------------------------------------------------------- */
.vf-root.vf-editorial {
  /* Fundo de papel, não branco puro: reduz fadiga visual — relevante para
     um público que já pode estar com a visão comprometida. */
  --vf-bg:       #FAF9F7;
  --vf-bg-soft:  #F2F1ED;

  /* Tinta quase preta para máximo contraste tipográfico */
  --vf-ink:      #0B1320;
  --vf-ink-soft: #1E2A3A;

  /* DIVERGÊNCIA: o documento sugere midnight puro também para o --vf-navy.
     Mantive um azul profundo em vez de preto — o navy é a superfície da
     hero e da caixa da página Sobre; levá-lo ao preto apagaria o azul da
     marca, que é o elo com a logomarca. */
  --vf-navy:     #0C1E38;

  --vf-muted:    #4E5761;   /* mais escuro que o original: AA com folga */
  --vf-line:     #E3E1DB;

  /* Cantos arquitetônicos no lugar dos totalmente arredondados */
  --vf-r:        16px;
  --vf-r-lg:     20px;
  --vf-r-sm:     10px;

  /* Sombras largas, difusas e muito transparentes */
  --vf-sh-sm:    0 1px 2px rgba(11, 19, 32, .04);
  --vf-sh:       0 24px 60px -28px rgba(11, 19, 32, .18);
  --vf-sh-lg:    0 50px 110px -40px rgba(11, 19, 32, .26);

  /* Espaço negativo como elemento ativo — mas medido também pela ALTURA da
     janela, não só pela largura. O respiro entre seções é o que decide se
     uma seção termina dentro da tela ou vaza um pedaço para a próxima; com
     a altura na conta, o ritmo acompanha o monitor de quem está lendo.
     Numa tela de 900px cada seção respira ~113px; numa de 1080px, ~136px. */
  --vf-sect:     clamp(72px, 6vw + 3vh, 136px);
  --vf-gap:      32px;

  --vf-serif: "Instrument Serif", "Iowan Old Style", Georgia,
              "Times New Roman", serif;
}


/* --------------------------------------------------------------------------
   2. TIPOGRAFIA — pareamento de alto contraste
   Serifada apenas no display. Corpo, UI e rótulos seguem em Plus Jakarta:
   serifada em tamanho pequeno perderia legibilidade, que é justamente o
   que não se pode perder neste projeto.
   -------------------------------------------------------------------------- */
.vf-editorial .vf-h1,
.vf-editorial .vf-h2,
.vf-editorial .vf-hero__title,
.vf-editorial .vf-cta__title,
.vf-editorial .vf-proc__num,
.vf-editorial .vf-proc__title,
.vf-editorial .vf-entry__num {
  font-family: var(--vf-serif);
  font-weight: 400;
  letter-spacing: -.015em;
}

.vf-editorial .vf-h1 { font-size: clamp(2.75rem, 6.2vw, 4.75rem); line-height: 1.03; }
.vf-editorial .vf-h2 { font-size: clamp(2.125rem, 4.4vw, 3.375rem); line-height: 1.08; }

/* Itálico serifado no trecho de destaque: acento editorial no lugar da cor */
.vf-editorial .vf-hero__title .vf-accent {
  font-style: italic;
  color: #BFDDF3;
}

/* Rótulos e olho de seção ganham tratamento de revista */
.vf-editorial .vf-eyebrow {
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--vf-muted);
}

/* MARCADOR DO RÓTULO — pupila dentro da íris.
   A versão anterior zerava o `background` do marcador e sobrava só o
   contorno: um anel oco de 9px que, na escala de um rótulo e colado ao
   texto, o olho lia como a letra "O" — o rótulo virava "O QUEM ATENDE
   VOCÊ". O ponto central volta, e três decisões separam a figura da letra:
     · o anel cresce para 12px, afastando-se do corpo do rótulo;
     · a pupila é sólida e pequena (3,5px), ~29% do diâmetro — a proporção
       da íris da logomarca, não a de um contorno de letra;
     · o anel afina para 1px e recua em opacidade, então quem tem mais peso
       na figura é o ponto, e não o círculo.
   O color-mix é progressivo: onde não existe, o anel fica em currentColor
   e a diferença de espessura entre anel e pupila já resolve a leitura. */
.vf-editorial .vf-eyebrow::before {
  width: 12px;
  height: 12px;
  border-width: 1px;
  border-color: currentColor;
  border-color: color-mix(in srgb, currentColor 58%, transparent);
  background: radial-gradient(circle at 50% 50%,
                currentColor 0 1.75px, transparent 2.25px);
}
/* Sobre o azul da hero o rótulo já é translúcido: mais uma redução de
   opacidade apagaria o anel. */
.vf-editorial .vf-hero__copy .vf-eyebrow::before { border-color: currentColor; }

/* O olho da seção também segue a altura da janela — ver nota em --vf-sect */
.vf-editorial .vf-head { margin-bottom: clamp(36px, 3vw + 2vh, 68px); }


/* --------------------------------------------------------------------------
   2b. DISPLAY EM SANS — este é o padrão
   O pareamento serifado da seção 2 acima só entra quando a classe .vf-serif
   está presente, ligada por THEME_SERIF em build/build.py. Sem ela, o
   display volta para Plus Jakarta com o peso e o tracking que a sans pede,
   e a escala recua um pouco: a serifada tem altura-x menor e suporta corpos
   maiores sem pesar.

   Só o DISPLAY mora aqui. Corpo de texto — a linha de apoio de "Quem atende
   você", os depoimentos — é dimensionado na seção do próprio componente:
   estas regras têm especificidade maior e venceriam as de lá.
   -------------------------------------------------------------------------- */
.vf-root.vf-editorial:not(.vf-serif) { --vf-serif: var(--vf-font); }

.vf-editorial:not(.vf-serif) .vf-h1,
.vf-editorial:not(.vf-serif) .vf-h2,
.vf-editorial:not(.vf-serif) .vf-hero__title,
.vf-editorial:not(.vf-serif) .vf-cta__title,
.vf-editorial:not(.vf-serif) .vf-proc__num,
.vf-editorial:not(.vf-serif) .vf-entry__num {
  font-weight: 800;
  letter-spacing: -.03em;
}
.vf-editorial:not(.vf-serif) .vf-proc__title,
.vf-editorial:not(.vf-serif) .vf-entry__title,
.vf-editorial:not(.vf-serif) .vf-creds__text strong {
  font-weight: 700;
  letter-spacing: -.022em;
}

/* Itálico não funciona numa geométrica — o destaque volta a ser cor */
.vf-editorial:not(.vf-serif) .vf-hero__title .vf-accent { font-style: normal; }

.vf-editorial:not(.vf-serif) .vf-h1           { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.05; }
.vf-editorial:not(.vf-serif) .vf-h2           { font-size: clamp(1.9rem, 3.9vw, 3rem); line-height: 1.1; }
.vf-editorial:not(.vf-serif) .vf-hero__title  { font-size: clamp(2.4rem, 4.9vw, 3.85rem); line-height: 1.04; }
.vf-editorial:not(.vf-serif) .vf-cta__title   { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.08; }
.vf-editorial:not(.vf-serif) .vf-entry__title { font-size: clamp(1.375rem, 2.1vw, 1.875rem); }


/* --------------------------------------------------------------------------
   3. LUZ E REFRAÇÃO — o motivo do projeto
   DIVERGÊNCIA: o documento pede remover os anéis. Eles são o motivo da
   marca, derivado da íris da logomarca, e foram pedidos explicitamente.
   Em vez de remover, reduzi a presença e somei a camada de luz difusa
   que o documento descreve — os dois convivem: o anel é a íris, o
   gradiente é a luz que ela recebe.
   -------------------------------------------------------------------------- */
.vf-editorial .vf-rings::after { opacity: .5; }

.vf-editorial .vf-section--soft {
  background:
    radial-gradient(58% 48% at 6% 100%, rgba(74, 159, 214, .13), transparent 70%),
    radial-gradient(48% 44% at 100% 2%, rgba(74, 159, 214, .09), transparent 70%),
    var(--vf-bg-soft);
}

/* Anel do canto dos cartões de procedimento: some na lista editorial */
.vf-editorial .vf-proc::before { display: none; }


/* --------------------------------------------------------------------------
   4. BOTÕES — menos massa, mais arquitetura
   -------------------------------------------------------------------------- */
.vf-editorial .vf-btn {
  border-radius: 10px;
  letter-spacing: .01em;
}
.vf-root.vf-editorial .vf-btn--primary { box-shadow: 0 14px 30px -16px rgba(11, 19, 32, .5); }
.vf-root.vf-editorial .vf-btn--light   { box-shadow: 0 14px 30px -18px rgba(11, 19, 32, .4); }

/* Ação secundária deixa de ser botão e vira link com filete animado */
.vf-root.vf-editorial .vf-btn--ghost {
  position: relative;
  padding-inline: 0;
  padding-block: 8px;
  border-radius: 0;
  box-shadow: none;
  color: var(--vf-ink);
}
.vf-editorial .vf-btn--ghost::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .3;
  transition: opacity .4s var(--vf-ease);
}
.vf-root.vf-editorial .vf-btn--ghost:hover {
  color: var(--vf-blue-700);
  box-shadow: none;
  transform: none;
}
.vf-editorial .vf-btn--ghost:hover::after { opacity: 1; }
.vf-editorial .vf-btn--ghost:hover svg { transform: translateX(4px); }
.vf-editorial .vf-btn--ghost svg { transition: transform .4s var(--vf-ease); }


/* --------------------------------------------------------------------------
   5. HERO
   DIVERGÊNCIA: o documento pede abandonar a caixa azul e adotar fundo
   off-white full-bleed. Não fiz — a caixa, o transbordo da foto e a barra
   montada na borda foram calibrados por você ao longo de várias rodadas, e
   são hoje a assinatura da página. O que fiz foi elevá-la: superfície mais
   profunda, sombra difusa, título serifado e barra mais discreta.
   -------------------------------------------------------------------------- */
.vf-editorial .vf-hero__block {
  background:
    radial-gradient(circle at 12% -8%,  transparent 0 168px, rgba(255,255,255,.10) 168px 169.5px, transparent 170px),
    radial-gradient(circle at 67% 60%,  transparent 0 94px,  rgba(255,255,255,.09) 94px 95.5px,  transparent 96px),
    radial-gradient(88% 68% at 80% 106%, rgba(120, 190, 240, .22) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(118deg, #071426 0%, var(--vf-navy) 48%, #14507F 100%);
  box-shadow: 0 60px 130px -55px rgba(11, 19, 32, .55);
}
.vf-editorial .vf-hero__title {
  font-size: clamp(2.6rem, 5.4vw, 4.25rem);
  line-height: 1.02;
  margin-bottom: 24px;
}
.vf-editorial .vf-hero__lead {
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
}
.vf-editorial .vf-hero__copy .vf-eyebrow { color: rgba(255, 255, 255, .62); }

/* Barra: vidro discreto em vez de bloco branco maciço */
.vf-editorial .vf-hero__bar {
  border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(11, 19, 32, .45);
}
.vf-editorial .vf-hero__field__label { letter-spacing: .12em; }


/* --------------------------------------------------------------------------
   6. QUEM ATENDE VOCÊ — a carta do curador

   HIERARQUIA. Antes havia três blocos disputando a primeira leitura: o
   título em 3rem/800, a linha de apoio logo abaixo em 1,625rem/700 e as
   credenciais em 1,125rem/700. Três pesos altos empilhados não formam uma
   ordem — o olho não sabe onde entrar, e o efeito é o de um subtítulo
   brigando com o título. Agora a distância entre os níveis é explícita:

     1º  título          display, ~3rem, tinta cheia
     2º  linha de apoio  parágrafo, ~1,1875rem, peso normal, tinta suave
     3º  credenciais     rótulo 1rem + texto .875rem, separados por filetes

   ALTURA. A seção passa a ser dimensionada para caber na dobra: a foto é
   limitada pela altura da janela — é ela que dita a altura do conjunto — e
   as credenciais compactam. Ver também o degrau por altura na seção 14.
   -------------------------------------------------------------------------- */
.vf-editorial .vf-intro { gap: clamp(32px, 4.5vw, 64px); }
.vf-editorial .vf-intro__media {
  border-radius: var(--vf-r-lg);
  max-height: min(60vh, 560px);
}

.vf-editorial .vf-intro__title { margin-bottom: 16px; max-width: 18ch; }

.vf-editorial .vf-intro__lead {
  font-family: var(--vf-font);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.62;
  color: var(--vf-ink-soft);
  letter-spacing: -.005em;
  max-width: 46ch;
  margin-bottom: clamp(24px, 2.6vw, 34px);
}

/* Credenciais viram bloco tipográfico: sem ícone genérico, organizadas
   por filetes finos e proximidade, como pede o documento. */
.vf-editorial .vf-creds {
  gap: 0;
  border-top: 1px solid var(--vf-line);
  margin-bottom: clamp(24px, 2.8vw, 34px);
}
.vf-editorial .vf-creds__item {
  gap: 0;
  padding-block: clamp(13px, 1.5vw, 18px);
  border-bottom: 1px solid var(--vf-line);
}
.vf-editorial .vf-creds__icon { display: none; }
.vf-editorial .vf-creds__text {
  max-width: 54ch;
  font-size: .875rem;
  line-height: 1.55;
}
.vf-editorial .vf-creds__text strong {
  font-family: var(--vf-serif);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}


/* --------------------------------------------------------------------------
   6b. SELOS — ajuste ao papel

   A seção "Quem atende você" tem fundo --vf-bg-soft e a esteira tem --vf-bg:
   a mudança de tom já desenha a divisa entre as duas. O filete de cima
   viraria uma segunda linha em cima da primeira, então sai. O de baixo fica,
   porque abaixo vem Procedimentos, que é do mesmo tom.
   -------------------------------------------------------------------------- */
.vf-editorial .vf-selos { border-top: 0; }
.vf-editorial .vf-selos__label { letter-spacing: .16em; }


/* --------------------------------------------------------------------------
   7. PROCEDIMENTOS — índice em duas colunas
   DIVERGÊNCIA: o documento sugere revelar imagens macro do olho no hover.
   Não há esse acervo no projeto, e inventá-lo não é possível. Mantive a
   interação, mas construída com tipografia e espaço.

   Em coluna única os seis procedimentos empilhavam ~650px e a seção virava
   um corredor vertical. Em duas colunas a altura cai para ~300px sem que
   nada encolha: o que muda é o aproveitamento da largura, que sobrava.
   Para não parecer uma lista partida ao meio, cada item é composto em dois
   níveis — número e nome na mesma linha de base, chamada embaixo, alinhada
   ao nome — e os filetes correm por coluna, formando um índice de revista
   em vez de duas pilhas paralelas.
   -------------------------------------------------------------------------- */
.vf-editorial .vf-grid--procs {
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 0;
}

.vf-editorial .vf-proc {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: clamp(16px, 1.8vw, 26px);
  row-gap: 4px;
  padding: clamp(18px, 2vw, 26px) 0;
  border: 0;
  border-top: 1px solid var(--vf-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Em duas colunas são os DOIS últimos itens que fecham a grade */
.vf-editorial .vf-proc:nth-last-of-type(-n+2) { border-bottom: 1px solid var(--vf-line); }

.vf-editorial .vf-proc__num   { grid-column: 1; grid-row: 1; }
.vf-editorial .vf-proc__title { grid-column: 2; grid-row: 1; }
.vf-editorial .vf-proc__arrow { grid-column: 2; grid-row: 2; }

/* O texto se mantém estático no lugar para não quebrar a linha ou invadir a
   coluna vizinha, apenas a cor acende e a seta avança */
.vf-editorial .vf-proc:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}
.vf-editorial .vf-proc__num {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1;
  color: var(--vf-line);
  transition: color .45s var(--vf-ease);
}
.vf-editorial .vf-proc:hover .vf-proc__num { color: var(--vf-blue); }
.vf-editorial .vf-proc__title {
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.15;
}
.vf-editorial .vf-proc__arrow {
  margin-top: 0;
  padding-top: 0;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vf-editorial .vf-proc__arrow svg { width: 14px; height: 14px; }


/* --------------------------------------------------------------------------
   8. DEPOIMENTOS — Slider
   -------------------------------------------------------------------------- */
.vf-editorial .vf-grid--quotes {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vf-editorial .vf-grid--quotes::-webkit-scrollbar { display: none; }

.vf-editorial .vf-quote {
  flex: 0 0 calc(100% / 3);
  scroll-snap-align: start;
  gap: 18px;
  padding: 24px clamp(20px, 2.6vw, 40px);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--vf-line);
  border-radius: 0;
  box-shadow: none;
  
  /* Centraliza o conteúdo inteiro em todos os dispositivos */
  align-items: center;
  text-align: center;
}
.vf-editorial .vf-quote:first-of-type { border-left: 0; }

/* Estrelas azuis para o tema e centralizadas */
.vf-editorial .vf-quote .vf-stars { color: var(--vf-blue); justify-content: center; }

/* Navegação do slider */
.vf-slider-nav {
  display: none; /* Hide on desktop since 3 fit perfectly */
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.vf-slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vf-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.vf-slider-dot.is-active { background: var(--vf-blue); transform: scale(1.2); }

.vf-editorial .vf-quote__text {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--vf-ink-soft);
}
.vf-editorial .vf-quote__author { 
  margin-top: auto; 
  justify-content: center; 
  flex-wrap: wrap; /* Ajuda a conter textos longos */
}
/* O margin-top:auto vem do vf.css e continua valendo: os nomes descem para
   a base e se alinham entre as três colunas, mesmo com citações de alturas
   diferentes. */
.vf-editorial .vf-quote__author {
  gap: 10px;
  border-top: 0;
  padding-top: 22px;
}
.vf-editorial .vf-quote__avatar { display: none; }
.vf-editorial .vf-quote__name {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vf-muted);
  white-space: normal; /* Garante que nomes longos quebrem linha */
  text-align: center;
  word-break: break-word; /* Previne corte abrupto do nome */
}
.vf-editorial .vf-quote .vf-stars svg { width: 13px; height: 13px; }


/* --------------------------------------------------------------------------
   9. CARTÕES SEM CAIXA — agrupamento por proximidade
   -------------------------------------------------------------------------- */
.vf-editorial .vf-card,
.vf-editorial .vf-exam,
.vf-editorial .vf-local {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--vf-line);
  border-radius: 0;
  box-shadow: none;
  padding: 30px 0 0;
}
.vf-editorial .vf-card:hover,
.vf-editorial .vf-exam:hover,
.vf-editorial .vf-local:hover {
  transform: none;
  box-shadow: none;
}
.vf-editorial .vf-card__icon,
.vf-editorial .vf-exam__icon {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--vf-blue-600);
  margin-bottom: 16px;
}
.vf-editorial .vf-card__icon svg,
.vf-editorial .vf-exam__icon svg { width: 26px; height: 26px; }
.vf-editorial .vf-local__pin {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--vf-blue-600);
}


/* --------------------------------------------------------------------------
   10. PÁGINAS INTERNAS
   -------------------------------------------------------------------------- */
.vf-editorial .vf-pagehero {
  background:
    radial-gradient(50% 60% at 90% 20%, rgba(74, 159, 214, .12), transparent 70%),
    var(--vf-bg-soft);
  border-bottom: 0;
}
.vf-editorial .vf-entry__num {
  border-color: var(--vf-line);
  color: var(--vf-blue-600);
  font-size: 1.5rem;
}
.vf-editorial .vf-entry__title {
  font-family: var(--vf-serif);
  font-weight: 400;
}
.vf-editorial .vf-tabs {
  background: rgba(250, 249, 247, .9);
  border-bottom-color: var(--vf-line);
}
/* Cantos arquitetônicos também na barra. O `background: transparent` que
   havia aqui saiu: agora é o padrão da própria aba, e era ele que anulava o
   fundo do estado ativo por empate de especificidade. */
.vf-editorial .vf-tabs a { border-radius: 8px; }
/* A pílula acompanha o canto das abas e troca o azul claro pelo azul
   profundo da marca: sobre papel, o --vf-blue-600 fica estridente ao lado
   de uma tipografia que é toda tinta escura. */
.vf-editorial .vf-tabs__marca { border-radius: 8px; background: var(--vf-navy); }
.vf-editorial .vf-map { border-radius: var(--vf-r-lg); }
.vf-editorial .vf-about__photo { border-radius: var(--vf-r-lg); }


/* --------------------------------------------------------------------------
   11. CHAMADA FINAL — a mesma superfície do rodapé

   O bloco e o rodapé já eram da mesma cor (#080F1B), mas o brilho azul da
   chamada estava ancorado embaixo à direita, em 108% da altura da caixa —
   isto é, fora dela. O `overflow: hidden` da caixa cortava esse brilho reto
   na emenda com o rodapé, e o corte desenhava exatamente o que não podia
   existir ali: uma linha clara separando os dois, como se a chamada fosse
   uma camada solta apoiada sobre o rodapé.

   A luz subiu para dentro do bloco, atrás do título — onde ilumina a
   mensagem em vez da junta. A emenda fica em preto chapado dos dois lados
   e desaparece: chamada e rodapé leem como um campo escuro só.
   -------------------------------------------------------------------------- */
.vf-editorial .vf-cta__box {
  background:
    radial-gradient(circle at 12% -8%,  transparent 0 168px, rgba(255,255,255,.10) 168px 169.5px, transparent 170px),
    radial-gradient(circle at 85% 60%,  transparent 0 94px,  rgba(255,255,255,.09) 94px 95.5px,  transparent 96px),
    radial-gradient(88% 68% at 80% 106%, rgba(120, 190, 240, .22) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(118deg, #071426 0%, var(--vf-navy) 48%, #14507F 100%);
  box-shadow: 0 60px 130px -55px rgba(11, 19, 32, .55);
}


.vf-editorial .vf-cta__title { max-width: 18ch; }
.vf-editorial .vf-cta__text { color: rgba(255, 255, 255, .68); }


/* --------------------------------------------------------------------------
   12. RODAPÉ
   -------------------------------------------------------------------------- */
.vf-editorial .vf-footer { background: #080F1B; }
.vf-editorial .vf-footer__title { letter-spacing: .16em; }


/* --------------------------------------------------------------------------
   13. MOVIMENTO — lento e fluido, nunca agitado
   -------------------------------------------------------------------------- */
.vf-root.vf-editorial { --vf-ease: cubic-bezier(.16, .84, .28, 1); }
/* O estado final precisa ser reafirmado aqui: `.vf-reveal.is-in` do vf-ui.css
   tem a mesma especificidade (0,2,0) que `.vf-editorial .vf-reveal` e vem
   antes na cascata, então sem esta regra o elemento nunca voltava para o
   lugar — ficava 30px abaixo para sempre. Nos procedimentos isso aparecia
   como um salto: `.vf-editorial .vf-proc:hover` (0,3,0) zerava o transform e
   o item pulava 30px para cima, cobrindo o título da seção. */
.vf-editorial .vf-reveal {
  transform: translateY(30px);
  transition: opacity 1.05s var(--vf-ease), transform 1.05s var(--vf-ease);
}
.vf-editorial .vf-reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vf-editorial .vf-reveal { transform: none; }
}


/* --------------------------------------------------------------------------
   14. RESPONSIVO

   ATENÇÃO — os degraus por altura de janela precisam ser repetidos aqui.
   O vf-ui.css tem `@media (max-height: 900px) { .vf-hero__title { ... } }`,
   mas `.vf-editorial .vf-hero__title` tem especificidade maior e carrega
   depois: sem estas regras, o título mantém o corpo de tela grande numa
   janela baixa e a hero passa da altura da tela.
   Se alterar a tipografia da hero na seção 2/2b, ajuste aqui também.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-height: 900px) {
  .vf-editorial .vf-hero__title,
  .vf-editorial:not(.vf-serif) .vf-hero__title {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    margin-bottom: 16px;
  }
  .vf-editorial .vf-hero__lead,
  .vf-editorial:not(.vf-serif) .vf-hero__lead { font-size: 1rem; }
}

@media (min-width: 901px) and (max-height: 720px) {
  .vf-editorial .vf-hero__title,
  .vf-editorial:not(.vf-serif) .vf-hero__title {
    font-size: clamp(1.7rem, 2.5vw, 2.15rem);
    margin-bottom: 12px;
  }
  .vf-editorial .vf-hero__lead,
  .vf-editorial:not(.vf-serif) .vf-hero__lead { font-size: .9375rem; }
}

/* A mesma ideia aplicada às seções de conteúdo: numa janela baixa o bloco
   de credenciais é o que mais cresce, então é ele que compacta primeiro. */
@media (min-width: 901px) and (max-height: 820px) {
  .vf-editorial .vf-intro__lead {
    font-size: 1.0625rem;
    margin-bottom: 22px;
  }
  .vf-editorial .vf-creds { margin-bottom: 22px; }
  .vf-editorial .vf-creds__item { padding-block: 11px; }
  .vf-editorial .vf-creds__text { font-size: .8125rem; line-height: 1.5; }
  .vf-editorial .vf-creds__text strong { font-size: .9375rem; }
  .vf-editorial .vf-proc { padding-block: 16px; }
}

@media (max-width: 900px) {
  /* Remove a sombra do bloco Hero no mobile */
  .vf-editorial .vf-hero__block { box-shadow: none; }

  /* Empilhado, o índice volta a ser uma coluna só */
  .vf-editorial .vf-grid--procs { grid-template-columns: 1fr; }
  .vf-editorial .vf-proc:nth-last-of-type(-n+2) { border-bottom: 0; }
  .vf-editorial .vf-proc:last-of-type { border-bottom: 1px solid var(--vf-line); }

  /* Depoimentos mobile: Carrossel de 1 item visível por vez */
  .vf-editorial .vf-grid--quotes { 
    grid-template-columns: none; 
    padding-bottom: 8px; /* space for the scrollbar se necessário */
    align-items: stretch;
  }
  .vf-editorial .vf-quote {
    flex: 0 0 100%; /* take full width */
    border-left: 0;
    border-top: 0;
    padding: 32px 16px; /* Mais respiro vertical para o texto não ficar imprensado */
    text-align: center; 
    align-items: center; 
  }
  .vf-editorial .vf-quote:first-of-type { border-top: 0; padding: 32px 16px; }
  .vf-editorial .vf-quote__author { justify-content: center; } /* Centraliza autor no mobile */
  
  /* Exibir a navegação por pontos no mobile */
  .vf-slider-nav { display: flex; }
}