/* ================================================================
   DRA. AVA CASTRO — FOLHA DE ESTILO PRINCIPAL
   Organização:
   1. Variáveis (design tokens)
   2. Reset / base
   3. Utilitários (container, botões, textos)
   4. Cabeçalho / navegação
   5. Hero
   6. Seção Sobre
   7. Tratamentos
   8. Portfólio
   9. Depoimentos / carrossel
   10. FAQ
   11. Contato
   12. Rodapé
   13. WhatsApp flutuante / voltar ao topo
   14. Lightbox / carrossel (fotos do consultório)
   15. Responsividade (mobile-first — media queries ao final de cada bloco)
   ================================================================ */

/* ----------------------------------------------------------------
   1. VARIÁVEIS
   ---------------------------------------------------------------- */
:root {
  /* Paleta oficial (Canva) */
  --color-brown-dark: #44312b;
  --color-brown: #7e513d;
  --color-brown-mid: #735240;
  --color-terracotta: #cf8367;
  --color-cream: #e6e1db;
  --color-white: #faf9f8;
  --color-gold: #b08d4f;

  --color-text: var(--color-brown-dark);
  --color-text-soft: #6b5850;
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-cream);

  --font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;

  --container-width: 1180px;
  --container-narrow: 820px;
  --radius: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(68, 49, 43, 0.08);
  --shadow-md: 0 10px 30px rgba(68, 49, 43, 0.12);
  --transition: 0.25s ease;
  --header-height: 76px;
}

/* ----------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Rede de segurança: impede rolagem horizontal em telas pequenas caso
     algum elemento tente ser mais largo que a tela (comum em textos
     longos dentro de layouts flex/grid). A correção "de verdade" está no
     min-width: 0 aplicado nos itens flex/grid abaixo. */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-brown-dark);
  line-height: 1.25;
  margin: 0 0 0.6em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--color-text-soft); }

a { color: var(--color-brown); text-decoration: none; }
a:hover { color: var(--color-terracotta); }

ul { margin: 0; padding: 0; list-style: none; }

/* Reset importante para Safari/iOS: sem isso, o navegador aplica um
   estilo nativo de botão (sombra, cantos, fundo) por cima do nosso CSS
   customizado, o que pode deformar botões redondos (ex: setas do
   carrossel) fazendo parecer só "meio" botão. */
button {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

/* Acessibilidade: link para pular ao conteúdo */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-brown-dark);
  color: #fff;
  padding: 10px 16px;
  z-index: 999;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* Foco visível para navegação por teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   3. UTILITÁRIOS
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: var(--container-narrow); }

/* Menos respiro vertical em telas pequenas — em telas grandes o espaço
   extra ajuda a composição, mas no celular só significa mais rolagem. */
.section { padding: 56px 0; }
.section--alt { background: var(--color-bg-alt); }
.section__title { text-align: center; margin-bottom: 0.3em; }
.section__lead {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.2rem;
  color: var(--color-text-soft);
}

@media (min-width: 700px) {
  .section { padding: 90px 0; }
  .section__lead { margin-bottom: 3rem; }
}

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-terracotta);
  margin: 0 0 0.8em;
}
.eyebrow--center { text-align: center; }

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  border: 2px solid transparent;
  /* Alvo de toque confortável (mínimo recomendado: 44px de altura) */
  min-height: 48px;
}

@media (max-width: 480px) {
  /* Botões em coluna e ocupando a largura toda — mais fácil de tocar e
     de ler no celular do que dois botões espremidos lado a lado. */
  .hero__actions { flex-direction: column; }
  .hero__actions .btn,
  .treatments__cta .btn,
  .contact .btn--primary { width: 100%; }
}
.btn--primary {
  background: var(--color-brown);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-brown-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  border-color: var(--color-brown);
  color: var(--color-brown);
  background: transparent;
}
.btn--ghost:hover {
  background: var(--color-brown);
  color: #fff;
  transform: translateY(-2px);
}

.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.9em;
  color: var(--color-text-soft);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gold);
  font-weight: 700;
}


/* Moldura dourada — usada ao redor da foto de perfil (hero) e das
   fotos do consultório, para um acabamento mais elegante/premium. */
.photo-frame {
  padding: 5px;
  border-radius: calc(var(--radius-lg) + 5px);
  background: linear-gradient(135deg, #c69a4a 0%, var(--color-gold) 30%, #f1e0ac 55%, var(--color-gold) 78%, #c69a4a 100%);
}

/* Carrossel do Consultório: as 3 fotos ficam lado a lado numa "trilha"
   que desliza (transform: translateX) conforme passa a foto — com setas,
   bolinhas embaixo indicando a atual, e dá pra passar o dedo (swipe) no
   celular também. A JS só troca a posição da trilha, ver script.js. Ao
   tocar na foto, abre a mesma lightbox de antes, ampliada e com setas
   para ver as 3. */
.consultorio-carousel {
  max-width: 480px;
  margin: 2.2rem auto 0;
}
.consultorio-carousel .photo-frame { box-shadow: var(--shadow-md); }
.consultorio-carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.consultorio-carousel__track {
  display: flex;
  transition: transform 0.35s ease;
}
.consultorio-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  cursor: zoom-in;
}
/* Caixa de proporção fixa à prova de navegador antigo (mesma técnica do
   resto do site — ver nota completa na seção do vídeo). Precisa de uma
   proporção igual para as 3 fotos aqui porque elas ficam lado a lado na
   mesma trilha, deslizando juntas — por isso a foto 3 (que é mais alta
   que as outras) aparece com um corte central, como nas miniaturas. */
.consultorio-carousel__slide::before {
  content: '';
  display: block;
  /* min() trava a altura da foto em no máx. 60% da altura da tela — assim
     a foto nunca fica maior que a tela, sem precisar rolar pra ver ela
     inteira (a % continua valendo em telas mais baixas que a largura). */
  padding-top: min(133.3333%, 60vh);
}
.consultorio-carousel__slide img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.consultorio-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 249, 248, 0.9);
  color: var(--color-brown-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), background var(--transition);
  z-index: 2;
}
.consultorio-carousel__nav:hover { background: var(--color-white); transform: translateY(-50%) scale(1.08); }
.consultorio-carousel__nav--prev { left: 10px; }
.consultorio-carousel__nav--next { right: 10px; }

.consultorio-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.consultorio-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 1px solid var(--color-gold);
  transition: background var(--transition), transform var(--transition);
}
.consultorio-carousel__dot.is-active {
  background: var(--color-gold);
  transform: scale(1.25);
}

@media (min-width: 700px) {
  .consultorio-carousel { max-width: 560px; }
}

/* ----------------------------------------------------------------
   4. CABEÇALHO / NAVEGAÇÃO
   ---------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition), transform 0.3s ease;
}
.header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: rgba(68, 49, 43, 0.08);
}
.header.is-hidden { transform: translateY(-100%); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* flex-shrink: 0 evita que o flexbox do cabeçalho espreme a logo (ela é um
   item flex como o menu) quando falta espaço — sem isso, a logo aparecia
   distorcida/achatada bem na largura em que o menu passa a aparecer
   inteiro (por volta de 900px). */
.header__logo { flex-shrink: 0; }
.header__logo-img { height: 44px; width: auto; }

.header__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  /* Alvo de toque de 44x44px (mínimo recomendado), mesmo com os traços
     visuais sendo menores */
  width: 44px;
  height: 44px;
  padding: 0;
  margin: -8px;
  z-index: 110;
}
.header__toggle-bar {
  width: 26px;
  height: 2px;
  background: var(--color-brown-dark);
  transition: transform var(--transition), opacity var(--transition);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-white);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  box-shadow: var(--shadow-sm);
}
.nav.is-open { max-height: 480px; }

.nav__list { display: flex; flex-direction: column; padding: 10px 24px 20px; }
.nav__link {
  display: block;
  padding: 14px 4px;
  color: var(--color-brown-dark);
  font-weight: 500;
  border-bottom: 1px solid var(--color-cream);
}
.nav__link.is-active { color: var(--color-terracotta); }
.nav__link--cta {
  margin-top: 10px;
  display: inline-block;
  background: var(--color-brown);
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 22px;
  text-align: center;
  border-bottom: none;
}

/* 1040px (não 900px) porque com a logo mais larga (nome + monograma), o
   menu completo (todos os links numa linha só) só cabe sem apertar a
   partir daqui — abaixo disso, o menu "hambúrguer" garante que nada
   fique cortado/inacessível na lateral. */
@media (min-width: 1040px) {
  .header__toggle { display: none; }
  .nav {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }
  .nav__list { flex-direction: row; align-items: center; gap: 8px; padding: 0; }
  .nav__link { border-bottom: none; padding: 8px 14px; font-size: 0.95rem; position: relative; }
  .nav__link:not(.nav__link--cta)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--color-terracotta);
    transform: scaleX(0);
    transition: transform var(--transition);
  }
  .nav__link:not(.nav__link--cta):hover::after,
  .nav__link.is-active::after { transform: scaleX(1); }
  .nav__link--cta { margin-top: 0; padding: 10px 24px; }
}

/* ----------------------------------------------------------------
   5. HERO
   ---------------------------------------------------------------- */
.hero {
  padding: calc(var(--header-height) + 50px) 0 70px;
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-white) 100%);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.hero__inner > * { min-width: 0; }
.hero__title { margin-bottom: 0.4em; }
.hero__desc { max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }
.hero__media { display: flex; justify-content: center; }
.hero__media .photo-frame {
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 380px;
  position: relative;
  overflow: hidden;
}
/* Caixa de proporção fixa à prova de navegador antigo (ver nota completa
   na seção da galeria do Consultório, mais abaixo). */
.hero__media .photo-frame::before {
  content: '';
  display: block;
  padding-top: 150%;
}
.hero__photo {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  display: block;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

@media (min-width: 900px) {
  .hero { padding-top: calc(var(--header-height) + 90px); padding-bottom: 100px; }
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: 60px; }
  .hero__media .photo-frame { max-width: 440px; }
}

/* ----------------------------------------------------------------
   6. SOBRE
   ---------------------------------------------------------------- */
.about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}
.about__inner > * { min-width: 0; }

/* No celular, a foto desta seção vem logo depois da foto do topo (hero),
   o que deixava duas fotos grandes uma em cima da outra. Aqui invertemos
   a ordem visual (sem mexer no HTML) para o texto vir primeiro — no
   desktop volta à ordem original (foto à esquerda, texto à direita). */
.about__media { order: 2; }
.about__text { order: 1; }
.about__subtitle { margin-top: 1.8em; }
.cro-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-brown);
  background: var(--color-cream);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-bottom: 1em;
}
.about__media .photo-frame {
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.about__media .photo-frame::before {
  content: '';
  display: block;
  padding-top: 66.6667%;
}
.about__photo {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  display: block;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

@media (min-width: 900px) {
  .about__inner { grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; }
  .about__media { order: 1; }
  .about__text { order: 2; }
}

/* Vídeo de apresentação — bloco próprio em duas colunas (texto + vídeo),
   separado da foto/texto principal (o vídeo é vertical, estilo
   Reels/Stories, então não cabia bem espremido numa coluna ao lado da
   foto horizontal, nem sozinho e centralizado — ficava vazio demais nas
   laterais em telas largas). A moldura escura ao redor do vídeo imita um
   celular, pra deixar claro que o formato vertical é intencional. */
.about__video {
  margin-top: 4rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--color-cream);
}
.about__video-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.about__video-inner > * { min-width: 0; }
.about__video-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-brown-dark);
  margin: 0.3em 0 0.7em;
}
.about__video-text .btn { margin-top: 1.4rem; }

.about__video-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  overflow: hidden;
}
/* Mancha suave de cor atrás do celular — preenche o espaço vazio ao redor
   sem competir com o vídeo, só decorativa (some em telas pequenas). */
.about__video-media::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-terracotta) 0%, var(--color-gold) 55%, transparent 75%);
  opacity: 0.16;
  filter: blur(50px);
  border-radius: 50%;
  z-index: 0;
}
/* Caixa do celular (retrato 9:16). Não dependemos só da propriedade
   aspect-ratio aqui porque o vídeo é o único "conteúdo real" da caixa e
   fica em position:absolute — em navegadores que não combinam bem
   aspect-ratio com flex nesse caso, a caixa perdia a altura certa e
   ficava baixa/larga, cortando o vídeo do jeito errado (foi exatamente o
   que aconteceu no celular). O ::after abaixo reserva a altura certa a
   partir da largura, com uma técnica que funciona em qualquer navegador. */
.video-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  background: var(--color-brown-dark);
  border-radius: 32px;
  border: 8px solid var(--color-brown-dark);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.video-wrapper::after {
  content: '';
  display: block;
  padding-top: 177.7778%;
}
.video-wrapper::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: rgba(250, 249, 248, 0.35);
  z-index: 5;
}
.video-wrapper__video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-brown-dark);
  object-fit: cover;
}

@media (min-width: 700px) {
  .video-wrapper { max-width: 320px; }
}

@media (min-width: 900px) {
  .about__video-inner { grid-template-columns: 1fr 0.8fr; gap: 60px; }
}

/* ----------------------------------------------------------------
   7. TRATAMENTOS
   ---------------------------------------------------------------- */
.treatments__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.treatments__grid > * { min-width: 0; }
.treatment-card {
  background: var(--color-white);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 6px 22px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.treatment-card[open],
.treatment-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-terracotta);
}
.treatment-card__summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brown-dark);
}
.treatment-card__summary::-webkit-details-marker { display: none; }
/* Alinha o topo do ícone e do "Saiba mais" com a 1ª linha do título, com
   um pequeno ajuste fino — importante pros títulos mais longos (que
   quebram em 2-3 linhas no celular) não ficarem com ícone/toggle boiando
   no meio do bloco de texto. */
.treatment-card__icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }
.treatment-card__title { flex: 1; min-width: 0; font-size: 1.05rem; line-height: 1.3; }
.treatment-card__toggle {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-terracotta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 0.25em;
}
.treatment-card[open] .treatment-card__toggle::after { content: " ▲"; }
.treatment-card:not([open]) .treatment-card__toggle::after { content: " ▼"; }
.treatment-card__body { padding: 0 0 20px 38px; margin: 0; }
.treatment-card__body p { margin: 0 0 10px; }
.treatment-card__body p:last-child { margin-bottom: 0; }
.treatment-card__body-lead { font-weight: 700; color: var(--color-brown-dark); }

.treatments__cta { text-align: center; margin-top: 3rem; }

@media (min-width: 700px) {
  .treatments__grid { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------
   8. PORTFÓLIO — cards de antes/depois arrastáveis
   ---------------------------------------------------------------- */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.ba-grid > * { min-width: 0; }
.ba-card { margin: 0; }
@media (min-width: 700px) {
  .ba-card { max-width: 640px; width: 100%; margin: 0 auto; }
}
.ba-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brown-dark);
  font-size: 1.05rem;
  margin: 0 0 0.7em;
  text-align: center;
}

/* O slider em si: duas imagens empilhadas, a de cima ("antes") recortada
   por clip-path conforme o usuário arrasta o controle central. */
.ba-slider {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  box-shadow: var(--shadow-sm);
  cursor: ew-resize;
  background: var(--color-cream);
}
.ba-slider img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba-slider__after { z-index: 1; }
.ba-slider__before-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  clip-path: inset(0 50% 0 0);
}

.ba-slider__handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: var(--color-white);
  transform: translateX(-1.5px);
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(68, 49, 43, 0.15);
}
.ba-slider__handle::after {
  content: '‹ ›';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-brown);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.ba-slider__handle:focus-visible::after {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

.ba-slider__tag {
  position: absolute;
  bottom: 12px;
  z-index: 4;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(68, 49, 43, 0.65);
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
}
.ba-slider__tag--before { left: 12px; }
.ba-slider__tag--after { right: 12px; }


/* Antes/depois em fotos separadas, lado a lado (ex: Botox, Limpeza,
   Limpeza Dentária) — a foto do "antes" e a do "depois" ficam uma do lado
   da outra, sempre visíveis, sem precisar passar o mouse ou tocar. */
.ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ba-row > * { min-width: 0; }
.ba-row__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-cream);
}
/* Caixa de proporção fixa à prova de navegador antigo (mesma técnica do
   resto do site) — cada card define sua própria proporção via a variável
   --ba-row-ratio (inline), já que as fotos de cada caso têm tamanhos
   diferentes. */
.ba-row__item::before {
  content: '';
  display: block;
  padding-top: var(--ba-row-ratio, 75%);
}
.ba-row__item img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-row__tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(68, 49, 43, 0.65);
  padding: 4px 9px;
  border-radius: 999px;
  pointer-events: none;
}
.ba-row__tag--after { background: rgba(207, 131, 103, 0.85); }

/* Cada caso fica em sua própria linha (1 coluna só), um embaixo do
   outro — mesmo em telas largas — para cada foto ficar bem grande e
   fácil de ver o antes/depois. */
@media (min-width: 700px) {
  .ba-grid { gap: 44px; }
}

/* ----------------------------------------------------------------
   8b. INSTAGRAM — grade de posts selecionados (embed oficial do
   Instagram, carregado pelo embed.js dele; aqui só cuidamos do
   espaçamento em grade).
   ---------------------------------------------------------------- */
/* No celular, 9 posts empilhados em 1 coluna faziam uma rolagem enorme.
   Por isso, abaixo de 700px a grade vira um carrossel horizontal (arrasta
   pro lado, com "snap" parando um post de cada vez, e uma tirinha do
   próximo post aparecendo do lado para indicar que dá para arrastar). A
   partir de 700px volta a ser uma grade normal, sem rolagem lateral. */
.instagram-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  -webkit-overflow-scrolling: touch;
  margin: 0 -24px;
  padding: 4px 24px 14px;
  scrollbar-width: none;
}
.instagram-grid::-webkit-scrollbar { display: none; }
.instagram-grid > * { min-width: 0; }
.instagram-grid > .instagram-card {
  flex: 0 0 82%;
  scroll-snap-align: start;
}

/* .instagram-card é um <div> nosso, criado pelo js/instagram.js, e o
   script do Instagram NUNCA mexe nele — só no <blockquote> de dentro. Por
   isso ele é o cartão "de verdade": tem a borda, o fundo e o
   "overflow: hidden" que corta qualquer coisa que tente passar do
   tamanho certo. No Safari do iPhone (diferente do Chrome do Android) o
   post do Instagram às vezes é calculado maior do que o cartão — um
   comportamento antigo do WebKit — e a imagem vazava por cima do texto
   da página. Como o corte agora está num elemento que o Instagram nunca
   toca ou substitui, não tem como esse vazamento voltar a acontecer,
   não importa o que o Instagram calcule lá dentro. */
.instagram-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border, #e6ddd6);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.instagram-card > * {
  min-width: 0;
  max-width: 100% !important;
  width: 100% !important;
  position: static !important;
}

/* O <blockquote> é o placeholder até o Instagram carregar (e caso o
   script demore/falhe, fica um link para abrir o post direto lá). */
.instagram-media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  text-align: center;
}
.instagram-media a {
  color: var(--color-terracotta);
  font-weight: 600;
}

.instagram-swipe-hint {
  display: block;
  margin-top: 0.3em;
  font-size: 0.85rem;
  color: var(--color-terracotta);
}

@media (min-width: 700px) {
  .instagram-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    gap: 40px;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0 auto;
    padding: 0;
  }
  .instagram-grid > .instagram-card { flex: initial; scroll-snap-align: none; }
  .instagram-swipe-hint { display: none; }
}
@media (min-width: 1040px) {
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1180px;
  }
}

/* ----------------------------------------------------------------
   9. DEPOIMENTOS
   ---------------------------------------------------------------- */
/* O carrossel de avaliações é renderizado pelo widget da Elfsight
   (ver README.md) — o próprio widget cuida do seu estilo interno.
   Este wrapper só limita a largura para acompanhar o resto da seção. */
.elfsight-app-c1fe495e-3dcd-4416-ab7e-58f265873290 {
  max-width: 900px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   10. FAQ
   ---------------------------------------------------------------- */
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius);
  padding: 4px 22px;
}
.faq-item[open] { border-color: var(--color-terracotta); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 30px 18px 0;
  font-weight: 600;
  color: var(--color-brown-dark);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 1.4rem;
  color: var(--color-terracotta);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 18px; margin: 0; }

/* ----------------------------------------------------------------
   11. CONTATO
   ---------------------------------------------------------------- */
.contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.contact__inner > * { min-width: 0; }
.contact__flex-hours { font-style: italic; color: var(--color-brown-mid); }
.contact__list { margin: 1.6rem 0; display: flex; flex-direction: column; gap: 14px; }
.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-brown-dark);
  font-weight: 500;
}
.contact__icon {
  display: inline-flex;
  color: var(--color-brown);
}
.contact__map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {
  .contact__inner { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
}

/* ----------------------------------------------------------------
   12. RODAPÉ
   ---------------------------------------------------------------- */
.footer {
  background: var(--color-brown-dark);
  color: var(--color-cream);
  padding: 50px 0 30px;
  text-align: center;
}
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.footer__logo { filter: brightness(0) invert(1); opacity: 0.9; margin-bottom: 10px; }
.footer p { color: var(--color-cream); opacity: 0.85; margin: 0.2em 0; }
.footer__social { display: flex; gap: 20px; margin: 14px 0; }
.footer__social a { color: var(--color-cream); font-weight: 500; }
.footer__social a:hover { color: var(--color-terracotta); }
.footer__copy { font-size: 0.8rem; opacity: 0.6; margin-top: 10px; }

/* ----------------------------------------------------------------
   13. WHATSAPP FLUTUANTE / VOLTAR AO TOPO
   ---------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 58px;
  height: 58px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 90;
  transition: transform var(--transition);
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-cream);
  background: var(--color-white);
  color: var(--color-brown);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 90;
  font-size: 1.1rem;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ----------------------------------------------------------------
   14. LIGHTBOX / CARROSSEL — fotos do consultório ampliadas
   ---------------------------------------------------------------- */
.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(68, 49, 43, 0.92);
  animation: lightbox-fade 0.2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-brown-dark);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
.lightbox__close:hover { transform: scale(1.08); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(250, 249, 248, 0.9);
  color: var(--color-brown-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), background var(--transition);
}
.lightbox__nav:hover { background: var(--color-white); transform: translateY(-50%) scale(1.08); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }

.lightbox__counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  background: rgba(68, 49, 43, 0.55);
  padding: 5px 14px;
  border-radius: 999px;
}

@media (max-width: 600px) {
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------------------------------------------------------
   15. PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----------------------------------------------------------------
   16. AVISO DE COOKIES
   Só aparece quando há um medidor configurado no painel e enquanto a
   pessoa ainda não escolheu (ver js/analytics.js).
   ---------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--color-border, #e6ddd6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-banner--visivel {
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner__text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}
.cookie-banner__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}
.cookie-banner__btn {
  font-size: 0.82rem;
  padding: 9px 20px;
}

@media (max-width: 560px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 14px 16px;
    gap: 12px;
  }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1 1 auto; text-align: center; }
  /* não cobrir o botão flutuante do WhatsApp */
  .cookie-banner ~ .whatsapp-float { bottom: 160px; }
}