/* ==========================================================================
   Dr. Evaldo de Oliveira — Consultório de Pediatria e Estética
   Folha de estilos principal
   ========================================================================== */

/* ---------- Tipografia local (sem chamadas externas ao Google Fonts) ----------
   Arquivos em assets/fonts/, licenciados sob SIL Open Font License 1.1
   (ver assets/fonts/LICENSE-*.txt). */
@font-face{
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2'),
       url('../fonts/cormorant-garamond-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-600.woff2') format('woff2'),
       url('../fonts/cormorant-garamond-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-700.woff2') format('woff2'),
       url('../fonts/cormorant-garamond-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Mulish';
  src: url('../fonts/mulish-400.woff2') format('woff2'),
       url('../fonts/mulish-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Mulish';
  src: url('../fonts/mulish-500.woff2') format('woff2'),
       url('../fonts/mulish-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Mulish';
  src: url('../fonts/mulish-600.woff2') format('woff2'),
       url('../fonts/mulish-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Mulish';
  src: url('../fonts/mulish-700.woff2') format('woff2'),
       url('../fonts/mulish-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Paleta — identidade dourada/clara */
  --dourado-principal: #B08D57;
  --dourado-escuro: #8C6A35;
  --dourado-claro: #E8DCC5;
  --fundo-principal: #FAF9F6;
  --fundo-secundario: #F4F0E8;
  --branco: #FFFFFF;
  --texto: #292622;
  --texto-suave: #686159;
  --borda: #DED5C7;

  /* Tipografia */
  --fonte-titulo: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --fonte-texto: 'Mulish', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaçamento — escala compacta (revisão de densidade vertical) */
  --espaco-xs: 0.5rem;   /* 8px  — micro-espaços (ícones, chips) */
  --espaco-sm: 0.75rem;  /* 12px — título → subtítulo */
  --espaco-md: 1.125rem; /* 18px — subtítulo → conteúdo, padding horizontal de cards */
  --espaco-lg: 1.5rem;   /* 24px — padding vertical de cards, blocos internos */
  --espaco-xl: 2.125rem; /* 34px — respiro entre grandes blocos (grids, colunas) */

  /* Densidade vertical compacta: seções próximas, sem perder legibilidade. */
  --secao-padding: 24px;

  /* Layout */
  --largura-max: 1180px;
  --raio: 6px;
  --sombra: 0 10px 30px -12px rgba(41, 38, 34, 0.14);
  --transicao: 220ms ease;
}

@media (min-width: 768px){
  :root{ --secao-padding: 32px; }
}
@media (min-width: 1000px){
  :root{ --secao-padding: 40px; }
}

/* ---------- Reset básico ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body{
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--texto);
  background: var(--fundo-principal);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
figure{ margin: 0; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--fonte-titulo); font-weight: 600; color: var(--texto); line-height: 1.2; margin: 0; }
p{ margin: 0; }

.container{
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px){
  .container{ padding: 0 2.5rem; }
}

/* ---------- Acessibilidade ---------- */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--texto);
  color: var(--branco);
  padding: 0.9rem 1.4rem;
  z-index: 1000;
  border-radius: 0 0 6px 0;
  font-weight: 600;
}
.skip-link:focus{
  left: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--dourado-escuro);
  outline-offset: 3px;
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Utilitários ---------- */
.eyebrow{
  display: inline-block;
  font-family: var(--fonte-texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
  margin-bottom: var(--espaco-sm);
}

.section-head{
  max-width: 680px;
  margin-bottom: 1.125rem;
}
.section-head.centro{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2{
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.section-head .lead{
  color: var(--texto-suave);
  font-size: 1.02rem;
  max-width: 60ch;
}

section{
  padding-block: var(--secao-padding);
}

.section-alt{
  background: var(--fundo-secundario);
}

.divisor-fina{
  width: 64px;
  height: 2px;
  background: var(--dourado-principal);
  border: 0;
  margin: var(--espaco-sm) 0 var(--espaco-md);
}

/* ---------- Botões ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--raio);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao), border-color var(--transicao);
  min-height: 44px;
  line-height: 1;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primario{
  background: var(--dourado-principal);
  color: var(--texto);
  box-shadow: var(--sombra);
}
.btn-primario:hover{ background: var(--dourado-escuro); color: var(--branco); }

.btn-secundario{
  background: transparent;
  color: var(--dourado-escuro);
  border-color: var(--dourado-escuro);
}
.btn-secundario:hover{ background: var(--dourado-escuro); color: var(--branco); }

.btn-whats{
  background: var(--dourado-principal);
  color: var(--texto);
}
.btn-whats:hover{ background: var(--dourado-escuro); color: var(--branco); }

.btn-outline-claro{
  background: transparent;
  color: var(--texto);
  border-color: var(--borda);
}
.btn-outline-claro:hover{ background: var(--fundo-secundario); border-color: var(--dourado-principal); }

.btn-bloco{ width: 100%; }

.icone-whats{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--borda);
}

.cabecalho-linha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
  gap: 1rem;
}

.identidade{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.identidade .nome{
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
}
.identidade .crm{
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  text-transform: uppercase;
}

.nav-desktop{
  display: none;
}
.nav-desktop ul{
  display: flex;
  gap: 1.75rem;
}
.nav-desktop a{
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--texto);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicao), color var(--transicao);
}
.nav-desktop a:hover{ border-color: var(--dourado-escuro); color: var(--dourado-escuro); }

.acoes-cabecalho{
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* No cabeçalho mobile, apenas o menu hambúrguer fica visível: o
   agendamento já está sempre acessível pela barra fixa inferior. */
.acoes-cabecalho .btn-primario{
  display: none;
}

.btn-menu{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
}
.btn-menu svg{ width: 24px; height: 24px; }

@media (min-width: 1000px){
  .nav-desktop{ display: block; }
  .btn-menu{ display: none; }
  .acoes-cabecalho .btn-primario{ display: inline-flex; }
}

/* Menu mobile (painel) */
.menu-mobile{
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--branco);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 2rem;
  transform: translateX(100%);
  transition: transform 280ms ease;
  visibility: hidden;
  overflow-y: auto;
}
.menu-mobile.aberto{
  transform: translateX(0);
  visibility: visible;
}
.menu-mobile-topo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espaco-lg);
}
.menu-mobile .fechar{
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  background: transparent;
  color: var(--texto);
}
.menu-mobile .fechar svg{ width: 22px; height: 22px; }

.menu-mobile nav ul{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.menu-mobile nav a{
  display: block;
  padding: 0.85rem 0.25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
  min-height: 44px;
}
.menu-mobile .menu-cta{
  margin-top: var(--espaco-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.menu-aberto{ overflow: hidden; }
body.lightbox-aberto{ overflow: hidden; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: linear-gradient(180deg, var(--fundo-principal) 0%, var(--fundo-secundario) 100%);
  color: var(--texto);
  padding-block: var(--secao-padding);
  overflow: hidden;
}
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(176,141,87,0.10), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(176,141,87,0.07), transparent 40%);
  pointer-events: none;
}

.hero-grid{
  position: relative;
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 960px){
  .hero-grid{
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--espaco-xl);
  }
}

.hero-texto h1{
  color: var(--texto);
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  margin-bottom: var(--espaco-sm);
}

.hero-texto p.lead{
  color: var(--texto-suave);
  font-size: 1.15rem;
  max-width: 52ch;
  margin-bottom: var(--espaco-md);
}

.hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: var(--espaco-md);
}

.hero-credenciais{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.86rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--borda);
  padding-top: var(--espaco-md);
}
.hero-credenciais strong{ color: var(--texto); }

.hero-foto{
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 25px 50px -20px rgba(41,38,34,0.28);
  max-width: 400px;
  margin: 0 auto;
}
.hero-foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  aspect-ratio: 3/4;
}
.hero-foto-moldura{
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(176,141,87,0.55);
  pointer-events: none;
}

/* ---------- Atendimentos (cards) ---------- */
.grade-atendimentos{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px){
  .grade-atendimentos{ grid-template-columns: repeat(3, 1fr); }
}

.cartao-atendimento{
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.25rem var(--espaco-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}
.cartao-atendimento:hover{
  box-shadow: var(--sombra);
  transform: translateY(-4px);
  border-color: var(--dourado-escuro);
}

.cartao-atendimento .icone{
  width: 42px; height: 42px;
  margin-bottom: var(--espaco-sm);
  color: var(--dourado-principal);
}
.cartao-atendimento .icone svg{ width: 100%; height: 100%; }

.cartao-atendimento h3{
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--dourado-escuro);
}

.cartao-atendimento .descricao{
  color: var(--texto-suave);
  margin-bottom: var(--espaco-md);
  flex-grow: 1;
}

.cartao-atendimento .meta-lista{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--espaco-md);
  padding-top: var(--espaco-md);
  border-top: 1px solid var(--borda);
}
.cartao-atendimento .meta-item{
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  gap: 0.75rem;
}
.cartao-atendimento .meta-label{ color: var(--texto-suave); }
.cartao-atendimento .meta-valor{ font-weight: 700; color: var(--texto); text-align: right; }

@media (max-width: 640px){
  .cartao-atendimento{ padding: 1.15rem 1rem; }
}

/* Link de navegação (cartões-resumo de Atendimentos): leva à seção completa,
   sem repetir uma ação de agendamento que já existe na própria seção. */
.link-navegacao{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--texto);
  transition: gap var(--transicao), color var(--transicao);
}
.link-navegacao svg{ width: 18px; height: 18px; flex-shrink: 0; }
.link-navegacao:hover{ color: var(--dourado-escuro); gap: 0.75rem; }

/* ---------- Sobre / Trajetória (foto + texto) ---------- */
.bloco-imagem-texto{
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 700px){
  .bloco-imagem-texto{ grid-template-columns: 0.85fr 1.15fr; }
  .bloco-imagem-texto.inverso{ grid-template-columns: 1.15fr 0.85fr; }
  .bloco-imagem-texto.inverso .bloco-imagem{ order: 2; }
}

.bloco-imagem img{
  border-radius: var(--raio);
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 12%;
  aspect-ratio: 3/4;
  box-shadow: var(--sombra);
}

/* Fotos do médico (hero + blocos de conteúdo): a proporção 3/4 é a
   proporção real dos arquivos originais (1050x1400 / 1050x1400), então
   a foto inteira sempre aparece, sem cortar o rosto, em qualquer largura
   — sem depender de "aspect-ratio: auto", que zera a altura reservada da
   imagem antes dela carregar (com loading="lazy") e causa um salto de
   layout (a página "pula" enquanto rola, inclusive fazendo os links do
   menu pararem no lugar errado). Cada imagem tem seu próprio
   object-position, ajustado à composição da própria foto. */
.hero-foto img.foto-medico{ object-position: 50% 8%; }
.bloco-imagem img.foto-medico{ object-position: 55% 12%; }

@media (max-width: 640px){
  .hero-foto img.foto-medico,
  .bloco-imagem img.foto-medico{
    aspect-ratio: 3/4;
    height: auto;
    object-fit: contain;
  }
}

.bloco-texto h2{
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  margin-bottom: var(--espaco-sm);
}

.bloco-texto p + p{ margin-top: 0.75rem; }
.bloco-texto p{ color: var(--texto-suave); }

.lista-destaques{
  margin-top: var(--espaco-md);
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, 1fr);
}
.destaque-item{
  border-left: 2px solid var(--dourado-principal);
  padding-left: 0.9rem;
}
.destaque-item .numero{
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dourado-escuro);
}
.destaque-item .rotulo{
  font-size: 0.86rem;
  color: var(--texto-suave);
}

/* ---------- Observação / avisos ---------- */
.aviso{
  background: var(--fundo-secundario);
  border-left: 3px solid var(--dourado-principal);
  padding: 0.95rem 1.25rem;
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-top: var(--espaco-md);
}
.aviso strong{ color: var(--texto); }

/* ---------- Pediatria / Estética detalhe ---------- */
.tabela-modalidades{
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 640px){
  .tabela-modalidades{ grid-template-columns: 1fr 1fr; }
}

.cartao-modalidade{
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--espaco-md);
}
.cartao-modalidade h3{
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--dourado-escuro);
}
.cartao-modalidade .preco{
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  color: var(--texto);
  font-weight: 700;
  margin: 0.35rem 0;
}
.cartao-modalidade .preco small{
  font-family: var(--fonte-texto);
  font-size: 0.85rem;
  color: var(--texto-suave);
  font-weight: 500;
}
.cartao-modalidade ul{ margin-bottom: var(--espaco-md); }
.cartao-modalidade li{
  display: flex;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--texto-suave);
  margin-bottom: 0.35rem;
}
.cartao-modalidade li svg{
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--dourado-principal);
  margin-top: 2px;
}

@media (max-width: 640px){
  .cartao-modalidade{ padding: 1rem; }
}

.painel-lateral{
  background: var(--branco);
  color: var(--texto);
  border: 1px solid var(--dourado-claro);
  border-radius: var(--raio);
  padding: 1.25rem var(--espaco-md);
  box-shadow: var(--sombra);
}
.painel-lateral h3{
  color: var(--dourado-escuro);
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}
.painel-lateral p{
  color: var(--texto-suave);
  margin-bottom: var(--espaco-md);
}
.painel-lateral .preco-grande{
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 0.5rem;
}
.painel-lateral .preco-grande small{
  font-family: var(--fonte-texto);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texto-suave);
}

@media (max-width: 640px){
  .painel-lateral{ padding: 1.25rem 1rem; }
}

/* Painel de valor da Estética como destaque autônomo (sem foto ao lado) */
.painel-lateral-solo{
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- Procedimentos (grupos) ---------- */
.grade-grupos{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .grade-grupos{ grid-template-columns: repeat(2, 1fr); }
}

.grupo-procedimento{
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--espaco-md);
}
.grupo-procedimento h3{
  font-size: 1.25rem;
  margin-bottom: var(--espaco-sm);
  padding-bottom: var(--espaco-sm);
  border-bottom: 1px solid var(--borda);
  color: var(--dourado-escuro);
}
.grupo-procedimento ul{
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.grupo-procedimento li{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--texto-suave);
  font-size: 0.98rem;
}
.grupo-procedimento li svg{
  width: 18px; height: 18px;
  color: var(--dourado-principal);
  flex-shrink: 0;
  margin-top: 3px;
}

@media (max-width: 640px){
  .grupo-procedimento{ padding: 1rem; }
}

/* ---------- Trajetória (linha do tempo) ---------- */
.linha-tempo{
  position: relative;
  margin-top: var(--espaco-md);
  padding-left: 1.75rem;
  border-left: 2px solid var(--borda);
}
.evento-tempo{
  position: relative;
  padding-bottom: var(--espaco-lg);
}
.evento-tempo:last-child{ padding-bottom: 0; }
.evento-tempo::before{
  content: "";
  position: absolute;
  left: -2.35rem;
  top: 0.3rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dourado-principal);
  border: 3px solid var(--branco);
  box-shadow: 0 0 0 2px var(--dourado-principal);
}
.evento-tempo .ano{
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--dourado-escuro);
  display: block;
  margin-bottom: 0.2rem;
}
.evento-tempo p{ color: var(--texto-suave); max-width: 60ch; }

/* ---------- Formação complementar (lista de pós-graduações confirmadas) ---------- */
.lista-pos-graduacoes{
  margin-top: var(--espaco-lg);
  display: grid;
  gap: 0.7rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .lista-pos-graduacoes{ grid-template-columns: 1fr 1fr; }
}
.lista-pos-graduacoes li{
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texto);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--borda);
}
.lista-pos-graduacoes li svg{
  width: 20px; height: 20px;
  color: var(--dourado-principal);
  flex-shrink: 0;
  margin-top: 4px;
}

/* ---------- Consultório (galeria) ---------- */
.grade-galeria{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .grade-galeria{ grid-template-columns: repeat(3, 1fr); }
}
.galeria-item{
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.galeria-botao{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}
.galeria-item img{
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 420ms ease;
}
.galeria-item:hover img{ transform: scale(1.04); }

/* ---------- Lightbox da galeria do consultório ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(41, 38, 34, 0.92);
}
.lightbox.aberto{ display: flex; }
.lightbox-figura{
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 90vh;
}
.lightbox-figura img{
  display: block;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--raio);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.lightbox-fechar{
  position: absolute;
  top: -3.25rem;
  right: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  color: var(--branco);
}
.lightbox-fechar svg{ width: 20px; height: 20px; }
@media (max-width: 640px){
  .lightbox-fechar{ top: -3rem; right: 0; }
}

/* ---------- Localização e contato ---------- */
.grade-contato{
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 960px){
  .grade-contato{ grid-template-columns: 1fr 1fr; }
}

.lista-contato{
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: var(--espaco-lg);
}
.item-contato{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.item-contato .icone{
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--fundo-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dourado-escuro);
}
.item-contato .icone svg{ width: 22px; height: 22px; }
.item-contato h3{
  font-size: 1rem;
  font-family: var(--fonte-texto);
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 0.2rem;
}
.item-contato p, .item-contato a{
  color: var(--texto-suave);
}
.item-contato a:hover{ color: var(--dourado-escuro); text-decoration: underline; }
.item-contato .acoes-contato-item{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mapa-wrapper{
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid var(--borda);
}
.mapa-wrapper iframe{
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

.contato-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--espaco-lg);
}

.formas-pagamento{
  margin-top: var(--espaco-lg);
  padding-top: var(--espaco-lg);
  border-top: 1px solid var(--borda);
}
.formas-pagamento h4{
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  margin-bottom: 0.65rem;
}
.chips-pagamento{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.chips-pagamento span{
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.86rem;
  color: var(--texto);
}

/* ---------- Rodapé ---------- */
.rodape{
  background: var(--fundo-secundario);
  color: var(--texto-suave);
  padding-block: var(--secao-padding);
}
.rodape-grade{
  display: grid;
  gap: var(--espaco-xl);
  padding-bottom: var(--espaco-lg);
  border-bottom: 1px solid var(--borda);
}
@media (min-width: 800px){
  .rodape-grade{ grid-template-columns: 1.3fr 1fr 1fr; }
}
.rodape h3, .rodape .nome{
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.rodape .crm-rodape{
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: var(--espaco-sm);
}
.rodape p{ font-size: 0.94rem; line-height: 1.7; }
.rodape h4{
  color: var(--texto);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--espaco-sm);
  font-family: var(--fonte-texto);
}
.rodape ul{ display: flex; flex-direction: column; gap: 0.5rem; }
.rodape a{ font-size: 0.94rem; }
.rodape a:hover{ color: var(--dourado-escuro); text-decoration: underline; }

.rodape-base{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: var(--espaco-md);
  font-size: 0.82rem;
  color: var(--texto-suave);
}
.rodape-base a{ color: var(--texto-suave); }

/* ---------- WhatsApp flutuante (desktop) ---------- */
.whats-flutuante{
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 400;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--dourado-principal);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(41,38,34,0.35);
  transition: transform var(--transicao), background var(--transicao);
}
.whats-flutuante:hover{ transform: scale(1.06); background: var(--dourado-escuro); }
.whats-flutuante svg{ width: 28px; height: 28px; color: var(--texto); transition: color var(--transicao); }
.whats-flutuante:hover svg{ color: var(--branco); }

@media (min-width: 1000px){
  .whats-flutuante{ display: flex; }
}

/* ---------- Barra fixa mobile ---------- */
.barra-mobile{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: var(--branco);
  border-top: 1px solid var(--borda);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px -12px rgba(41,38,34,0.18);
}
.barra-mobile a{
  width: 100%;
}
@media (min-width: 1000px){
  .barra-mobile{ display: none; }
}

/* Espaço reservado no fim do documento, só para a barra fixa do celular
   não cobrir o rodapé — some no desktop, onde a barra não existe. */
.espaco-barra-mobile{ height: 70px; }
@media (min-width: 1000px){
  .espaco-barra-mobile{ display: none; }
}

/* ---------- Responsividade fina ---------- */

/* Compensa a altura do cabeçalho fixo (sticky) ao navegar por âncora
   (menu do cabeçalho, menu mobile, rodapé e links "Ver detalhes"), para
   que o título da seção não fique escondido atrás do cabeçalho. */
section[id]{ scroll-margin-top: 84px; }

/* Área de toque mínima (44x44px) para o link do logotipo no cabeçalho. */
a.identidade{ padding: 0.35rem 0; }

@media (max-width: 480px){
  body{ font-size: 16px; line-height: 1.55; }
  .container{ padding-inline: 1rem; }
  .cabecalho-linha{ padding-block: 0.55rem; }
  .identidade .nome{ font-size: 1.2rem; }
  .identidade .crm{ font-size: 0.66rem; }
  .hero-texto h1{ font-size: clamp(2rem, 11vw, 2.55rem); }
  .hero-texto p.lead{ font-size: 1rem; }
  .hero-cta .btn{ width: 100%; }
  .hero-foto{ max-width: 300px; }
  .section-head{ margin-bottom: 1rem; }
  .section-head .lead{ font-size: 0.98rem; }
  .lista-destaques{ grid-template-columns: 1fr 1fr; }
  .hero-credenciais{ flex-direction: column; gap: 0.35rem; }
  .grade-atendimentos,
  .tabela-modalidades,
  .grade-grupos,
  .grade-galeria,
  .grade-contato{ gap: 0.875rem; }
  .lista-pos-graduacoes{ margin-top: var(--espaco-md); gap: 0.5rem; }
  .lista-pos-graduacoes li{ padding-bottom: 0.55rem; }
  .mapa-wrapper iframe{ min-height: 240px; }
  .lista-contato{ margin-top: var(--espaco-md); gap: 0.875rem; }
  .contato-ctas,
  .formas-pagamento{ margin-top: var(--espaco-md); }
}

/* Áreas de toque de pelo menos 44px de altura para links de texto que,
   no design compacto, ficariam abaixo do recomendado no celular
   (rótulos "Ver detalhes", ações de contato, links do rodapé). Isolado
   em telas de toque para não alterar o espaçamento mais compacto do
   layout de desktop. */
@media (max-width: 999px){
  .link-navegacao{ padding: 0.7rem 0; }
  .acoes-contato-item a{ display: inline-block; padding: 0.65rem 0; }
  .item-contato > div > a{ display: inline-block; padding: 0.85rem 0; }
  .rodape a{ display: inline-block; padding: 0.85rem 0; }
  .rodape-base a{ display: inline-block; padding: 0.65rem 0; }
}

/* Garantir sem rolagem horizontal indevida */
html, body{ max-width: 100%; overflow-x: hidden; }