/* =============================================================
   CLÍNICA MÉDICA MP — style.css
   =============================================================
   Folha de estilo única de TODAS as páginas do site.
   Organização:
     1. Reset & base
     2. Design tokens (variáveis CSS) + temas por serviço
     3. Tipografia
     4. Utilitários (container, btn, marcador "a confirmar")
     5. Header + navegação (dropdown de serviços + menu mobile)
     6. Hero da página inicial + painel de atalhos dos serviços
     7. Sections (estrutura comum)
     8. A Clínica (texto, vídeo, galeria, lightbox)
     9. (removida — os serviços usam o painel de atalhos da seção 6)
    10. Depoimentos (carrossel)
    11. Blog
    12. Contato e localização
    13. Páginas de serviço (hero, texto, informações,
        profissional, chamada, próximo serviço)
    14. Páginas internas (banner, privacidade, 404)
    15. Footer
    16. Botões flutuantes
    17. Animações
    18. Modal do blog
    19. Media queries (responsivo)
    20. Banner de instalação iOS
   ============================================================= */


/* =============================================================
   1. RESET & BASE
   ============================================================= */

/* Reset moderno: zera margem/padding e usa box-sizing previsível */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Suaviza o scroll quando clica em links de âncora (#secao) */
html {
  scroll-behavior: smooth;
  /* Scroll-padding evita que o header fixo cubra o título da seção */
  scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Imagens: sempre responsivas por padrão */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links: sem sublinhado por padrão; herdam cor */
a {
  color: inherit;
  text-decoration: none;
}

/* Botões e inputs herdam a fonte (não o feio padrão do browser) */
button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Listas sem marcadores por padrão (vamos estilizar caso a caso) */
ul,
ol {
  list-style: none;
}

/* Foco visível e acessível em todos os elementos interativos */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* O <main> recebe foco pelo link "Pular para o conteúdo"; sem contorno */
main:focus {
  outline: none;
}

/* Garante que [hidden] sempre funcione, mesmo com display: flex/inline-flex no elemento */
[hidden] { display: none !important; }

/* SVG sprite de ícones — invisível e sem ocupar espaço */
.svg-sprite { display: none; }

/* Remove borda padrão do iframe do Google Maps */
.localizacao__mapa iframe { border: 0; }


/* =============================================================
   2. DESIGN TOKENS — Variáveis CSS
   Centralizar valores aqui facilita manutenção e tema.
   ============================================================= */

:root {
  /* --- Cores: paleta extraída da logo --- */
  --color-gold-dark: #8B6508;     /* dourado escuro (textos sobre fundo claro) */
  --color-gold: #B8860B;          /* dourado principal (logo) */
  --color-gold-light: #C9A227;    /* dourado mais claro */
  --color-gold-soft: #D4AF37;     /* dourado suave (hover) */
  --color-gold-pale: #F5EFE0;     /* dourado bem pálido (fundos sutis) */

  --color-green: #6B7F3A;         /* verde trevo principal */
  --color-green-dark: #4E5E28;    /* verde escuro (textos pequenos) */
  --color-green-light: #7A8B4A;
  --color-green-pale: #EAEEDC;    /* verde pálido (fundos sutis) */

  /* --- Neutros --- */
  --color-bg: #FAFAF7;            /* fundo principal (off-white) */
  --color-bg-alt: #F4F1EA;        /* fundo alternativo (seções intercaladas) */
  --color-white: #FFFFFF;
  --color-text: #2C2C2C;          /* texto principal */
  --color-text-muted: #6B6B68;    /* texto secundário */
  --color-text-light: #9A9A95;    /* texto auxiliar */
  --color-border: #E8E5DC;        /* bordas sutis */

  /* --- Acento: muda conforme o serviço (ver "Temas" abaixo).
         Por padrão, é o dourado da marca. --- */
  --accent: var(--color-gold);
  --accent-dark: var(--color-gold-dark);
  --accent-pale: var(--color-gold-pale);

  /* --- Tipografia --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-padding: 1rem;
  --header-height: 80px;

  /* --- Bordas --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* --- Sombras (sutis, refinadas) --- */
  --shadow-sm: 0 2px 10px rgba(35, 28, 10, 0.04);
  --shadow-md: 0 10px 30px rgba(35, 28, 10, 0.07);
  --shadow-lg: 0 20px 60px rgba(35, 28, 10, 0.10);
  --shadow-gold: 0 12px 32px rgba(184, 134, 11, 0.18);

  /* --- Transições --- */
  --transition: 0.3s var(--ease);
  --transition-slow: 0.6s var(--ease);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------------
   TEMAS POR SERVIÇO
   Cada página de serviço usa <body data-tema="...">. O mesmo atributo
   também pode ir num card (ex.: "Conheça também"), que então assume
   as cores daquele serviço. Botões, fontes e animações não mudam:
   só o acento, para manter a identidade da marca em todo o site.
   Contraste de --accent-dark verificado (WCAG AA) sobre branco
   e sobre --accent-pale.
   ----------------------------------------------------------------- */
[data-tema="clinico-geral"] {
  --accent: var(--color-gold);
  --accent-dark: var(--color-gold-dark);
  --accent-pale: var(--color-gold-pale);
}

[data-tema="oncologia"] {
  --accent: #6B7F3A;
  --accent-dark: #4E5E28;
  --accent-pale: #EAEEDC;
}

[data-tema="saude-mental"] {
  --accent: #8A7BB0;
  --accent-dark: #5E4F86;
  --accent-pale: #EEEAF5;
}

[data-tema="pedagogia"] {
  --accent: #4A8A96;
  --accent-dark: #2F6570;
  --accent-pale: #E2F0F2;
}

[data-tema="estetica"] {
  --accent: #C08B76;
  --accent-dark: #8A5442;
  --accent-pale: #F7ECE7;
}


/* =============================================================
   3. TIPOGRAFIA
   Hierarquia clara entre Fraunces (títulos) e Manrope (corpo).
   ============================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

p {
  line-height: 1.7;
}

strong {
  font-weight: 600;
  color: var(--color-text);
}


/* =============================================================
   4. UTILITÁRIOS
   ============================================================= */

/* Container central, com padding lateral em telas pequenas */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Link "Pular para o conteúdo": invisível até receber foco pelo teclado */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1200;
  padding: 0.75rem 1.25rem;
  background: var(--color-gold-dark);
  color: var(--color-white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-align: center;
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-gold);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(184, 134, 11, 0.28);
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 100%);
}

.btn--ghost {
  background: transparent;
  color: var(--color-gold-dark);
  border: 1.5px solid var(--color-gold);
}

.btn--ghost:hover {
  background: var(--color-gold-pale);
  border-color: var(--color-gold-dark);
}

/* --- Marcador de conteúdo pendente (dados que a clínica precisa
       confirmar). Bem visível de propósito: deve sumir antes do
       site ir para o ar no domínio oficial. --- */
.a-confirmar {
  background: #FFF4CC;
  color: #7A5300;
  border: 1px dashed #D9A400;
  border-radius: 4px;
  padding: 0 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* =============================================================
   5. HEADER + NAVEGAÇÃO
   ============================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.85);
  /* backdrop-filter: efeito de "vidro fosco" no header */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Quando rola a página, JS adiciona a classe .scrolled */
.header.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo: maior para o nome "Clínica Médica MP" ficar bem legível */
.header__logo img {
  height: 56px;
  width: auto;
}

/* Menu desktop */
.nav__list {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.nav__link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition);
}

/* Linha dourada que aparece no hover e na página/seção ativa */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: width var(--transition);
}

.nav__link:hover::after,
.nav__link.active::after,
.nav__link[aria-current="page"]::after,
.nav__item--dropdown:has([aria-current="page"]) > .nav__toggle::after {
  width: 100%;
}

.nav__link:hover,
.nav__link.active,
.nav__link[aria-current="page"],
.nav__item--dropdown:has([aria-current="page"]) > .nav__toggle {
  color: var(--color-gold-dark);
}

/* --- Dropdown "Serviços" --- */
.nav__item--dropdown {
  position: relative;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  line-height: inherit;
}

.nav__toggle svg {
  transition: transform var(--transition);
}

.nav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  min-width: 260px;
  padding: 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

/* "Ponte" invisível entre o botão e o submenu: o hover não se perde no vão */
.nav__submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.75rem;
  height: 0.75rem;
}

/* Abre pelo clique/teclado (JS controla aria-expanded) ... */
.nav__toggle[aria-expanded="true"] + .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ... e pelo hover, só em dispositivos com mouse */
@media (hover: hover) {
  .nav__item--dropdown:hover .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .nav__item--dropdown:hover .nav__toggle svg {
    transform: rotate(180deg);
  }
}

.nav__sublink {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.nav__sublink:hover,
.nav__sublink[aria-current="page"] {
  background: var(--accent-pale);
  color: var(--accent-dark);
}

.nav__sublink[aria-current="page"] {
  font-weight: 600;
}

/* Ícone colorido de cada serviço (no submenu e no menu mobile) */
.nav__sublink-icone {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-pale);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav__sublink--todos {
  justify-content: space-between;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  color: var(--color-gold-dark);
}

/* Nav desktop e CTA: escondidos na base (mobile) */
.nav {
  display: none;
}

.header__cta {
  display: none;
  padding: 0.7rem 1.4rem;
  font-size: 0.88rem;
}

/* --- Hamburguer: visível na base (mobile) --- */
.hamburger {
  display: flex;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Animação do hamburguer quando ativo (vira X) */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Menu mobile (escondido por padrão; JS abre) ---
   visibility: hidden tira os links fechados da navegação por teclado */
.mobile-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.4s var(--ease), visibility 0.4s var(--ease);
}

.mobile-menu.active {
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  visibility: visible;
}

.mobile-menu__list {
  padding: 1rem var(--container-padding) 2rem;
  display: flex;
  flex-direction: column;
}

.mobile-menu__link {
  display: block;
  padding: 0.95rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}

.mobile-menu__link:hover,
.mobile-menu__link[aria-current="page"] {
  color: var(--color-gold-dark);
}

.mobile-menu__link[aria-current="page"] {
  font-weight: 600;
}

/* Grupo "Serviços": título + sublinks sempre visíveis */
.mobile-menu__grupo > .mobile-menu__link {
  border-bottom: none;
  padding-bottom: 0.4rem;
}

.mobile-menu__sublist {
  display: flex;
  flex-direction: column;
  padding: 0 0 0.75rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu__sublink {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.mobile-menu__sublink:hover,
.mobile-menu__sublink[aria-current="page"] {
  color: var(--accent-dark);
}

.mobile-menu__sublink[aria-current="page"] {
  font-weight: 600;
}

.mobile-menu .btn {
  margin-top: 1.5rem;
  width: 100%;
}


/* =============================================================
   6. HERO DA PÁGINA INICIAL
   Coluna única e centralizada. Os círculos decorativos flutuam
   suavemente (mesma animação "float" usada no site todo).
   ============================================================= */

.hero {
  position: relative;
  padding: 4rem 0 4.5rem;
  overflow: hidden;
  /* Gradiente sutil de fundo, com toque dourado */
  background:
    radial-gradient(circle at 80% 20%, var(--color-gold-pale) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, var(--color-green-pale) 0%, transparent 50%),
    var(--color-bg);
}

/* Círculos decorativos (não interferem no clique nem na leitura) */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}

.hero::before {
  width: 320px;
  height: 320px;
  top: -110px;
  right: -120px;
  border: 1px solid rgba(184, 134, 11, 0.22);
}

.hero::after {
  width: 220px;
  height: 220px;
  bottom: -80px;
  left: -90px;
  border: 1px solid rgba(107, 127, 58, 0.25);
  animation-delay: -3s;
}

.hero__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 1.5rem;
  padding: 0.4rem 1rem;
  background: var(--color-gold-pale);
  border-radius: var(--radius-full);
}

.hero__title {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

/* O <em> dentro do título recebe estilo especial: italic dourado */
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold-dark);
  position: relative;
  white-space: nowrap;
}

.hero__description {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 560px;
}

.servico-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: stretch;
}

/* -----------------------------------------------------------------
   PAINEL DE ATALHOS DOS SERVIÇOS (seção Serviços da página inicial e 404)
   Cada atalho usa as cores do próprio serviço (data-tema no <li>).
   Mobile: lista. Tablet/desktop: 5 colunas.
   ----------------------------------------------------------------- */
.atalhos {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.atalhos li + li {
  border-top: 1px solid var(--color-border);
}

.atalho {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1.25rem;
  transition: background var(--transition);
}

/* Linha colorida que aparece no hover (mesmo efeito dos cards) */
.atalho::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.4s var(--ease);
}

.atalho:hover {
  background: var(--accent-pale);
}

.atalho:hover::before {
  transform: scaleY(1);
}

.atalho__icone {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.atalho:hover .atalho__icone {
  background: var(--accent);
  color: var(--color-white);
  transform: scale(1.06);
}

.atalho__texto {
  flex: 1;
  min-width: 0;
}

.atalho__nome {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text);
}

.atalho__desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.atalho__seta {
  display: flex;
  color: var(--accent-dark);
  opacity: 0.55;
  transition: transform var(--transition), opacity var(--transition);
}

.atalho:hover .atalho__seta {
  opacity: 1;
  transform: translateX(4px);
}

/* Animação suave de flutuação */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}


/* =============================================================
   7. SECTIONS — estrutura comum
   Fundos intercalados: .section (claro) e .section--alt (bege).
   ============================================================= */

.section {
  padding: 4rem 0;
  background: var(--color-bg);
}

.section--alt {
  background: var(--color-bg-alt);
}

/* Header padrão de cada seção */
.section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

.section__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1rem;
}

.section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: 1rem;
}

.section__description {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Botão centralizado ao final de uma seção (ex.: "Acessar o blog") */
.section__acoes {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}


/* =============================================================
   8. A CLÍNICA — texto institucional, vídeo e galeria
   ============================================================= */

.sobre__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

.sobre__content {
  padding: 2rem 1.5rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.sobre__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-gold-dark);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

.sobre__text {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.sobre__text + .sobre__text {
  margin-top: 1rem;
}

/* Links para os serviços dentro do texto */
.sobre__text a {
  color: var(--color-gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(184, 134, 11, 0.35);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.sobre__text a:hover {
  color: var(--color-gold);
  text-decoration-color: currentColor;
}

.sobre__content .btn {
  margin-top: 1.75rem;
}

/* Subtítulo acima da galeria */
.sobre__subtitulo {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.sobre__subtitulo-desc {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

/* Vídeo institucional (vertical): largura limitada */
.video-wrapper {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-text);
}

.video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border: 0;
}

/* Galeria em grid responsivo */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.galeria__item {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  position: relative;
  transition: transform var(--transition);
}

.galeria__item:hover {
  transform: translateY(-4px);
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria__btn {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  display: block;
}

/* Lightbox da galeria */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox-overlay.aberto {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.lightbox-overlay.aberto .lightbox__img {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  z-index: 1;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }


/* =============================================================
   10. DEPOIMENTOS — carrossel
   ============================================================= */

.depoimentos-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.depoimentos-track {
  position: relative;
  min-height: 280px;
}

.depoimento-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
  text-align: center;
  padding: 1.75rem 1.25rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.depoimento-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

/* Aspas decorativas em Fraunces */
.depoimento-slide__quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.depoimento-slide__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.depoimento-slide__author {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

/* Botões prev/next */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-gold-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.carousel__btn:hover {
  background: var(--color-gold);
  color: var(--color-white);
  border-color: var(--color-gold);
  transform: translateY(-50%) scale(1.05);
}

.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }

/* Bolinhas indicadoras */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}

.carousel__dot.active {
  background: var(--color-gold);
  width: 28px;
  border-radius: var(--radius-full);
}


/* =============================================================
   11. BLOG
   ============================================================= */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.blog-card__image {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--color-gold-pale) 0%, var(--color-green-pale) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-gold-dark);
  font-size: 0.95rem;
}

.blog-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__content {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green-dark);
  margin-bottom: 0.75rem;
}

.blog-card__title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-card__excerpt {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* "Ler mais": botão (abre o modal no blog) ou link (na página inicial) */
.blog-card__link {
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gold-dark);
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  gap: 0.5rem;
  transition: gap var(--transition);
}

.blog-card__link:hover {
  gap: 0.75rem;
}


/* =============================================================
   12. CONTATO E LOCALIZAÇÃO
   ============================================================= */

/* --- Cards de redes sociais --- */
.contato-redes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}

.rede-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}

.rede-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-gold-pale);
}

.rede-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.rede-card div {
  display: flex;
  flex-direction: column;
}

.rede-card strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.rede-card span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Cores específicas de cada rede */
.rede-card--whatsapp .rede-card__icon { background: #25D366; color: #fff; }
.rede-card--instagram .rede-card__icon { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }

/* --- Endereço, horário e mapa --- */
.localizacao__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.localizacao__info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Card de informação (usado na página inicial e nas páginas de serviço) */
.info-card {
  background: var(--color-white);
  padding: 1.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--accent);
}

.info-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  color: var(--accent-dark);
  margin-bottom: 0.75rem;
}

.info-card h3 svg {
  flex-shrink: 0;
}

.info-card p {
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.info-card p:last-child {
  margin-bottom: 0;
}

.info-card a {
  color: var(--color-text);
  transition: color var(--transition);
}

.info-card a:hover {
  color: var(--accent-dark);
}

/* Link de ação dentro do card (ex.: "Agendar pelo WhatsApp") */
.info-card .info-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--accent-dark);
  transition: gap var(--transition);
}

.info-card .info-card__link:hover {
  gap: 0.65rem;
  color: var(--accent-dark);
}

.info-card small {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.5rem;
}

.localizacao__mapa {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.localizacao__mapa iframe {
  display: block;
}


/* =============================================================
   13. PÁGINAS DE SERVIÇO
   Mesma estrutura em todas: hero → sobre → informações úteis →
   profissional → chamada → próximo serviço. As cores de acento
   vêm do tema do <body> (ver seção 2).
   ============================================================= */

/* --- Hero do serviço --- */
.servico-hero {
  position: relative;
  padding: 2rem 0 3.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, var(--accent-pale) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, var(--color-gold-pale) 0%, transparent 45%),
    var(--color-bg);
}

.servico-hero__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  text-align: center;
}

.servico-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-pale);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
}

.servico-hero__title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.servico-hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-dark);
}

.servico-hero__description {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
}

.servico-hero__visual {
  display: flex;
  justify-content: center;
}

.servico-hero__foto {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 4px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--accent-pale), var(--shadow-lg);
  animation: float 6s ease-in-out infinite;
}

.servico-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Variação sem foto: painel com gradiente e ícone grande */
.servico-hero__foto--icone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  background:
    radial-gradient(circle at 30% 25%, var(--color-white) 0%, transparent 45%),
    linear-gradient(135deg, var(--accent-pale) 0%, var(--color-gold-pale) 100%);
}

.servico-hero__foto--icone svg {
  width: 36%;
  height: auto;
  opacity: 0.85;
}

/* --- Breadcrumb ("Você está em") --- */
.breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: 0.35rem;
  color: var(--color-text-light);
}

.breadcrumb a {
  color: var(--color-gold-dark);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--color-gold);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
}

/* --- Texto "Sobre o serviço" --- */
.servico-texto {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.servico-texto__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--accent-dark);
  margin-bottom: 1.25rem;
}

.servico-texto p:not(.servico-texto__lead) {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text-muted);
}

.servico-texto p + p:not(.servico-texto__lead) {
  margin-top: 1.1rem;
}

.servico-texto .btn {
  margin-top: 1.75rem;
}

/* --- Grade de informações úteis (até 2 colunas, leitura confortável) --- */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 980px;
  margin: 0 auto;
}

/* Lista com marcadores na cor do serviço */
.lista-marcada {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lista-marcada li {
  display: flex;
  gap: 0.6rem;
  line-height: 1.6;
}

.lista-marcada li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* --- Aviso importante (ex.: Oncologia, Saúde Mental) --- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 860px;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  background: var(--accent-pale);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}

.aviso svg {
  color: var(--accent-dark);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.aviso p {
  font-size: 0.95rem;
  line-height: 1.7;
}

.aviso strong {
  color: var(--accent-dark);
}

/* --- Profissional responsável --- */
.profissional-card {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.profissional-card__foto {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-white);
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-md);
}

.profissional-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profissional-card__nome {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.profissional-card__registro {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1rem;
}

.profissional-card__bio {
  color: var(--color-text-muted);
  line-height: 1.8;
}

/* --- Faixa de chamada (dúvidas → WhatsApp) --- */
.cta-banda {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, var(--accent-pale) 0%, var(--color-gold-pale) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cta-banda__titulo {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.cta-banda__texto {
  color: var(--color-text-muted);
  max-width: 540px;
  margin: 0 auto 1.75rem;
}

/* --- "Conheça também": convite para o próximo serviço ---
   Fica logo abaixo da faixa de chamada, na mesma seção */
.cta-banda + .proximo-servico {
  margin-top: 2.5rem;
}

.proximo-servico {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.proximo-servico::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.proximo-servico:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-pale);
}

.proximo-servico:hover::before {
  transform: scaleX(1);
}

.proximo-servico__icone {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.proximo-servico:hover .proximo-servico__icone {
  background: var(--accent);
  color: var(--color-white);
}

.proximo-servico__texto {
  flex: 1;
}

.proximo-servico__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.35rem;
}

.proximo-servico__titulo {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.proximo-servico__descricao {
  display: block;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.proximo-servico__seta {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.proximo-servico:hover .proximo-servico__seta {
  background: var(--accent);
  color: var(--color-white);
  transform: translateX(4px);
}

.proximo-servico__todos {
  text-align: center;
  margin-top: 1.5rem;
}

.proximo-servico__todos a {
  font-weight: 600;
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.proximo-servico__todos a:hover {
  color: var(--color-gold);
}


/* =============================================================
   14. PÁGINAS INTERNAS — banner, privacidade e 404
   ============================================================= */

/* -----------------------------------------------------------------
   Banner de páginas internas (hero simplificado, sem elemento
   visual decorativo). Usa as mesmas variáveis de cor e fonte.
   ----------------------------------------------------------------- */
.page-banner {
  padding: 2rem 0 2.5rem;
  text-align: center;
  background:
    radial-gradient(circle at 70% 20%, var(--color-gold-pale) 0%, transparent 50%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Título h1 da página interna — usa Fraunces como todos os headings */
.page-banner__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.page-banner__desc {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

.page-banner__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* Página 404: banner mais alto, ocupa a primeira tela */
.page-banner--404 {
  padding: 4rem 0 5rem;
  border-bottom: none;
}

/* Painel de serviços na página 404 */
.page-banner .atalhos {
  margin-top: 3rem;
}

/* -----------------------------------------------------------------
   Metadado de data da política (aparece abaixo da descrição
   no banner).
   ----------------------------------------------------------------- */
.privacidade__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 1rem;
}

/* -----------------------------------------------------------------
   Wrapper do conteúdo: coluna única centralizada, leitura confortável.
   ----------------------------------------------------------------- */
.privacidade__content {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* -----------------------------------------------------------------
   Cada tópico da política num card com borda dourada à esquerda
   — mesmo padrão dos .info-card.
   ----------------------------------------------------------------- */
.privacidade__topic {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  transition: box-shadow var(--transition);
}

.privacidade__topic:hover {
  box-shadow: var(--shadow-sm);
}

/* Heading de cada tópico: usa font-body (Manrope) em vez de Fraunces
   para manter hierarquia abaixo do h1 da página */
.privacidade__topic h2 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.privacidade__topic p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.85;
  margin-bottom: 0.75rem;
}

.privacidade__topic p:last-child {
  margin-bottom: 0;
}

/* Links dentro do conteúdo da política */
.privacidade__topic a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.privacidade__topic a:hover {
  color: var(--color-gold);
}

/* Lista de itens dentro dos tópicos — mantém marcadores (disc)
   ao contrário do reset global que remove list-style */
.privacidade__topic ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.privacidade__topic ul li {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0.3rem;
}


/* =============================================================
   15. FOOTER
   Igual em todas as páginas, com o botão "Voltar à tela inicial".
   ============================================================= */

.footer {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2820 100%);
  color: rgba(255, 255, 255, 0.85);
  padding: 3.5rem 0 2rem;
}

/* Faixa superior com o botão "Voltar à tela inicial" */
.footer__inicio {
  display: flex;
  justify-content: center;
  padding-bottom: 2.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__home-btn {
  color: var(--color-gold-soft);
  border-color: rgba(212, 175, 55, 0.6);
}

.footer__home-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--color-gold-soft);
  color: var(--color-white);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer__titulo {
  color: var(--color-gold-soft);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

/* Espaço entre blocos empilhados na mesma coluna */
.footer__col > * + .footer__titulo {
  margin-top: 1.75rem;
}

.footer__logo {
  height: 64px;
  width: auto;
  margin-bottom: 1.25rem;
  filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(10deg);
  /* Esse filter clareia/dourar a logo no fundo escuro.
     Se ficar feio, troque por uma versão branca da logo. */
}

.footer__description {
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0.8;
  max-width: 320px;
}

.footer address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.8;
  opacity: 0.85;
}

.footer__col p {
  font-size: 0.95rem;
  opacity: 0.85;
}

.footer__list li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  opacity: 0.85;
}

.footer__list a {
  transition: color var(--transition);
}

.footer__list a:hover {
  color: var(--color-gold-soft);
}

/* Redes sociais no footer */
.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.footer__social a:hover {
  background: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-3px);
}

/* Linha inferior */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  text-align: center;
}

.footer__legal p {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

/* Responsáveis Técnicos */
.footer__medicos {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}

.footer__medicos-label {
  color: var(--color-gold-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__medicos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
}

.footer__medico {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.footer__medico strong {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

.footer__medico span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.03em;
}

.footer__privacy-link,
.footer__google-link {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.footer__google-link {
  display: inline-block;
  margin-top: 0.75rem;
}

.footer__privacy-link:hover,
.footer__google-link:hover {
  color: var(--color-gold-soft);
}


/* =============================================================
   16. BOTÕES FLUTUANTES
   ============================================================= */

.float-btn {
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-md);
  z-index: 90;
  transition: all var(--transition);
}

.float-btn--whatsapp {
  bottom: 1.5rem;
  right: 1.5rem;
  background: #25D366;
  color: #fff;
  /* Pulsação sutil chamando atenção */
  animation: pulse 2.5s ease-in-out infinite;
}

.float-btn--whatsapp:hover {
  transform: scale(1.08);
  background: #20bd5a;
  animation: none;
}

.float-btn--top {
  bottom: 6rem; /* fica acima do whatsapp */
  right: 1.5rem;
  background: var(--color-gold);
  color: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

/* Quando JS adiciona .visible, o botão aparece */
.float-btn--top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.float-btn--top:hover {
  background: var(--color-gold-dark);
  transform: translateY(-4px);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5), var(--shadow-md); }
  50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), var(--shadow-md); }
}


/* =============================================================
   17. ANIMAÇÕES — fade-in ao entrar na viewport
   JavaScript adiciona a classe .visible quando o elemento
   entra na tela (Intersection Observer).
   ============================================================= */

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: 0.15s;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Acessibilidade: respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}


/* =============================================================
   18. MODAL DO BLOG
   ============================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 22, 8, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

.modal-overlay.aberto {
  opacity: 1;
  pointer-events: auto;
}

/* Base = mobile (padding menor, quase full-height) */
.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 680px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 2rem 1.25rem;
  position: relative;
  transform: translateY(28px) scale(0.98);
  transition: transform 0.35s var(--ease);
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold-pale) transparent;
}

.modal-overlay.aberto .modal {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.modal__close:hover {
  background: var(--color-gold-pale);
  color: var(--color-gold-dark);
  border-color: var(--color-gold);
}

.modal__categoria {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green-dark);
  margin-bottom: 0.75rem;
}

.modal__titulo {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  padding-right: 3rem;
  border-bottom: 1px solid var(--color-border);
}

.modal__body p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.modal__body p:last-of-type {
  margin-bottom: 0;
}

.modal__cta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.modal__cta p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.modal__cta .btn {
  width: 100%;
}


/* =============================================================
   19. MEDIA QUERIES — Mobile-First (min-width)
   Base = mobile. Expandimos progressivamente:
     - min-width: 541px  → mobile grande / small tablet
     - min-width: 640px  → blog em grade
     - min-width: 769px  → tablet retrato e desktop médio
     - min-width: 1025px → desktop (layout + navegação completa)
   ============================================================= */

/* --- Mobile grande / small tablet (≥541px) --- */
@media (min-width: 541px) {
  :root {
    --container-padding: 1.5rem;
  }

  .servico-hero__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .servico-hero__actions .btn {
    width: auto;
  }

  .contato-redes {
    grid-template-columns: 1fr 1fr;
  }

  .header__logo img {
    height: 62px;
  }

  .modal {
    padding: 3rem;
    max-height: 88vh;
  }

  .modal__titulo {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }

  .modal__cta {
    flex-direction: row;
    align-items: center;
  }

  .modal__cta .btn {
    width: auto;
  }
}

/* --- Blog em grade (≥640px) --- */
@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* --- Tablet / desktop médio (≥769px) --- */
@media (min-width: 769px) {

  /* Seções */
  .section {
    padding: 5.5rem 0;
  }

  .section__header {
    margin-bottom: 3.5rem;
  }

  /* Hero */
  .hero {
    padding: 5.5rem 0 6rem;
  }

  /* Painel de serviços: 5 colunas, conteúdo centralizado */
  .atalhos {
    grid-template-columns: repeat(5, 1fr);
  }

  .atalhos li + li {
    border-top: none;
    border-left: 1px solid var(--color-border);
  }

  .atalho {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 1.75rem 0.9rem 1.5rem;
    text-align: center;
  }

  /* No layout em colunas, a linha de hover fica no topo */
  .atalho::before {
    right: 0;
    bottom: auto;
    width: auto;
    height: 3px;
    transform: scaleX(0);
  }

  .atalho:hover::before {
    transform: scaleX(1);
  }

  .atalho__icone {
    width: 56px;
    height: 56px;
  }

  .atalho__texto {
    flex: 1;
  }

  .hero__description {
    font-size: 1.15rem;
  }

  .servico-hero {
    padding: 2.5rem 0 4.5rem;
  }

  .page-banner {
    padding: 3rem 0 3.5rem;
  }

  /* Conteúdo */
  .sobre__content,
  .servico-texto {
    padding: 2.5rem;
  }

  .galeria {
    gap: 1rem;
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .profissional-card {
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    padding: 2.5rem;
    text-align: left;
  }

  .profissional-card__foto {
    width: 180px;
    height: 180px;
  }

  .cta-banda {
    padding: 3rem;
  }

  .proximo-servico {
    flex-direction: row;
    gap: 2rem;
    padding: 2.25rem 2.5rem;
    text-align: left;
  }

  .depoimentos-carousel {
    padding: 0 4rem;
  }

  .depoimento-slide {
    padding: 2.5rem;
  }

  .localizacao__mapa {
    min-height: 380px;
  }

  .privacidade__topic {
    padding: 2.25rem 2rem;
  }

  /* Footer */
  .footer__medicos {
    flex-wrap: nowrap;
    align-items: center;
  }

  .footer__medicos-label {
    flex-shrink: 0;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
  }
}

/* --- Desktop (≥1025px) --- */
@media (min-width: 1025px) {

  /* Seções */
  .section {
    padding: 6rem 0;
  }

  .section__header {
    margin-bottom: 4rem;
  }

  /* Hero */
  .hero {
    padding: 6.5rem 0 7rem;
  }

  .hero::before {
    width: 460px;
    height: 460px;
  }

  .hero::after {
    width: 300px;
    height: 300px;
  }

  /* Hero dos serviços: 2 colunas, texto à esquerda */
  .servico-hero {
    padding: 3rem 0 5.5rem;
  }

  .servico-hero__container {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    text-align: left;
  }

  .servico-hero__description {
    font-size: 1.15rem;
    margin-left: 0;
    margin-right: 0;
  }

  .servico-hero__actions,
  .servico-hero .breadcrumb ol {
    justify-content: flex-start;
  }

  /* A Clínica: texto + vídeo lado a lado */
  .sobre__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
  }

  .sobre__content {
    padding: 3rem;
  }

  .galeria {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  /* Faixa de chamada: texto à esquerda, botão à direita */
  .cta-banda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    text-align: left;
  }

  .cta-banda__texto {
    margin: 0;
  }

  .depoimento-slide {
    padding: 2.5rem;
  }

  .localizacao__grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
  }

  .localizacao__mapa {
    min-height: 420px;
  }

  /* Header maior no desktop: logo com o nome bem legível */
  :root {
    --header-height: 92px;
  }

  .header__logo img {
    height: 70px;
  }

  /* Navegação desktop */
  .nav {
    display: block;
  }

  .mobile-menu {
    display: none;
  }

  .header__cta {
    display: inline-flex;
  }

  .hamburger {
    display: none;
  }

  /* Footer: 4 colunas */
  .footer__grid {
    grid-template-columns: 1.3fr 0.8fr 1.2fr 1fr;
    gap: 3rem;
  }
}


/* =============================================================
   20. BANNER DE INSTALAÇÃO iOS (PWA — Add to Home Screen)
   Aparece apenas no Safari/iOS via JS. Sobe do rodapé.
   ============================================================= */

.ios-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--color-white);
  border-top: 2px solid var(--color-gold);
  padding: 1rem 3rem 1.75rem 1.25rem;
  box-shadow: 0 -8px 30px rgba(35, 28, 10, 0.12);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}

.ios-install-banner.visible {
  transform: translateY(0);
}

/* Esconde o banner no modo standalone (já instalado) */
@media (display-mode: standalone) {
  .ios-install-banner { display: none !important; }
}

.ios-install-banner__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.35rem;
  line-height: 0;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.ios-install-banner__close:hover {
  color: var(--color-text);
}

.ios-install-banner__content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.ios-install-banner__icon {
  color: var(--color-gold);
  flex-shrink: 0;
}

.ios-install-banner__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}

.ios-install-banner__text strong {
  color: var(--color-gold-dark);
}

/* Ícone "compartilhar" no meio do texto (substitui estilo inline,
   bloqueado pela Content Security Policy) */
.ios-install-banner__share {
  display: inline;
  vertical-align: middle;
  margin: 0 2px;
}