/* ============================================================
   Clinica Sant'Ana, Boa Esperanca/MG
   Preto e dourado alternando com off-white quente.
   Titulos: Fraunces. Texto: Bricolage Grotesque.
   ============================================================ */

:root {
  --preto-profundo: #0D0C0A;
  --preto-suave: #171512;
  --dourado: #C6A15B;
  --dourado-claro: #E5CF9F;
  --dourado-escuro: #8F7440;
  --champanhe: #F3EBDD;
  --off-white: #FAF7F1;
  --grafite: #2B2925;
  --cinza-texto: #6E6A63;
  --whatsapp: #1FAF5F;

  --fonte-titulo: "Fraunces", Georgia, serif;
  --fonte-texto: "Bricolage Grotesque", Arial, sans-serif;

  --largura-max: 1180px;
  --altura-header: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--off-white);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.7;
  padding-top: var(--altura-header);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 4.7vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
}

h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--dourado);
}

p {
  font-size: 1.1rem;
  max-width: 62ch;
  text-wrap: pretty;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
}

.container {
  width: min(var(--largura-max), 88vw);
  margin-inline: auto;
}

.pular {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--dourado);
  color: var(--preto-profundo);
  padding: 10px 20px;
  border-radius: 0;
  text-decoration: none;
  font-weight: 600;
}
.pular:focus { left: 8px; }

section[id] { scroll-margin-top: calc(var(--altura-header) + 12px); }

/* ============================================================
   SISTEMA DE BOTOES (2 estilos, mesma altura e forma)
   .btn-gold    = primario (preenchido, dourado)
   .btn-outline = secundario (contorno, "ghost")
   ============================================================ */
.btn-gold,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 32px;
  max-width: 100%;
  border-radius: 0;
  border: 1.5px solid transparent;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: po\69 nter;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.btn-gold:hover,
.btn-outline:hover { transform: translateY(-1px); }

.btn-gold {
  background: var(--dourado);
  border-color: var(--dourado);
  color: #FFFFFF;
}
.btn-gold:hover {
  background: var(--dourado-claro);
  border-color: var(--dourado-claro);
}

/* Secundario em fundo ESCURO (padrao): contorno dourado, texto champanhe */
.btn-outline {
  background: transparent;
  border-color: var(--dourado);
  color: var(--champanhe);
}
.btn-outline:hover {
  background: var(--dourado);
  color: var(--preto-profundo);
}

/* Secundario em fundo CLARO: contorno dourado, texto grafite */
.clara .btn-outline,
.rodape .btn-outline { color: var(--grafite); }
.clara .btn-outline:hover { color: var(--preto-profundo); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--altura-header);
  background: var(--preto-profundo);
  transition: transform 300ms ease, box-shadow 200ms ease;
  will-change: transform;
}
.site-header.rolou { box-shadow: 0 10px 28px rgba(13, 12, 10, 0.45); }
.site-header.oculto { transform: translateY(-100%); }

.header-linha {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marca { display: inline-flex; align-items: center; }
.marca img { height: 42px; width: auto; }

.nav {
  display: none;
}

.header-cta {
  display: none;
  min-height: 46px;
  padding: 0 22px;
  font-size: 0.95rem;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: none;
  border: 1px solid rgba(198, 161, 91, 0.4);
  border-radius: 0;
  cursor: po\69 nter;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--champanhe);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Painel mobile fullscreen */
.nav.aberto {
  display: flex;
  position: fixed;
  top: var(--altura-header);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  flex-direction: column;
  gap: 8px;
  padding: 48px 6vw;
  background: var(--preto-profundo);
  overflow-y: auto;
}
.nav.aberto a {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  color: var(--champanhe);
  text-decoration: none;
  padding: 10px 0;
}
.nav.aberto a:hover { color: var(--dourado-claro); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--altura-header));
  min-height: calc(100dvh - var(--altura-header));
  display: flex;
  /* mobile: o sujeito da foto fica em cima, entao o texto vai para a area preta de baixo */
  align-items: flex-end;
  background: var(--preto-profundo);
  color: var(--champanhe);
}

.hero-foto {
  position: absolute;
  inset: 0;
  display: block;
}
.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* As imagens ja trazem o degrade embutido; o veu so reforca onde o texto fica */
.hero-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(13, 12, 10, 1) 0%,
    rgba(13, 12, 10, 0.97) 45%,
    rgba(13, 12, 10, 0.88) 62%,
    rgba(13, 12, 10, 0.55) 75%,
    rgba(13, 12, 10, 0) 88%);
}

.hero-conteudo {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: 52px;
  /* UMA unica caixa de largura para titulo, texto e botoes.
     Nada dentro da hero pode passar desta linha. */
  --col-hero: 100%;
}
.hero-conteudo h1 {
  font-size: 1.75rem;
  max-width: var(--col-hero);
  /* preenche melhor a linha que o balance, sem deixar palavra orfa */
  text-wrap: pretty;
}
.hero-conteudo p {
  margin-top: 18px;
  max-width: min(42ch, var(--col-hero));
  font-size: 0.97rem;
  color: var(--champanhe);
}

/* Primario e secundario SEMPRE com a mesma largura */
.hero-acoes {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  /* mesma caixa do H1 */
  max-width: var(--col-hero);
}

/* ---------- Secoes ---------- */
.secao { padding-block: clamp(64px, 10vh, 110px); }

.secao.clara {
  background: var(--off-white);
  color: var(--grafite);
}

.secao.escura {
  background: var(--preto-profundo);
  color: var(--champanhe);
}
.secao.escura h2 { color: var(--champanhe); }
.secao.escura p { color: var(--champanhe); }

.divisoria { border-top: 1px solid rgba(198, 161, 91, 0.25); }

.centro { text-align: center; }
.centro h2 { margin-inline: auto; max-width: 24ch; }

.paragrafo-centro {
  margin: 20px auto 0;
  max-width: 62ch;
  color: var(--cinza-texto);
}
.secao.escura .paragrafo-centro { color: var(--champanhe); }

.grid-55-45,
.grid-45-55,
.grid-50-50 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* ---------- Sobre / A clinica ---------- */
.sobre-texto h2 { max-width: none; }
.sobre-texto p { margin-top: 20px; color: var(--cinza-texto); }
.sobre-texto p:first-of-type { margin-top: 28px; }

.equipe {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(198, 161, 91, 0.25);
  padding-top: 24px;
}
.equipe-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  color: var(--grafite);
}
.equipe-ponto { color: var(--dourado); }
.equipe-area {
  font-size: 0.95rem;
  color: var(--cinza-texto);
}

/* foto unica desta secao: mesmo tratamento das demais fotos de secao
   (ver .transformacao-foto img, mais abaixo) */

/* ---------- Estrutura (galeria) ---------- */
.galeria {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 48px;
  padding-inline: max(6vw, calc(50vw - (var(--largura-max) / 2)));
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--dourado) transparent;
}
.galeria-foto {
  flex: none;
  height: 260px;
  object-fit: cover;
  border-radius: 0;
  scroll-snap-align: start;
}
.galeria-foto.larga { width: 330px; }
.galeria-foto.estreita { width: 250px; }

/* ---------- Tratamentos ---------- */
.card {
  background: #FFFFFF;
  border: 1px solid rgba(198, 161, 91, 0.28);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(13, 12, 10, 0.07);
  overflow: hidden;
}

.card-corpo { padding: 26px 26px 28px; }

.card h3 {
  font-size: 1.4rem;
  color: var(--grafite);
}

.card p {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--cinza-texto);
}

.card-foto { border-bottom: 3px solid var(--dourado); }
.card-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.cards-principais {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

.cards-secundarios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
}

.nota-secao {
  margin: 36px auto 0;
  font-size: 0.9rem;
  color: var(--cinza-texto);
}

/* ---------- Transformacao ---------- */
.transformacao-texto h2 { max-width: none; }
.transformacao-texto p { margin-top: 20px; }
.transformacao-texto p:first-of-type { margin-top: 28px; }
.transformacao-texto strong { color: var(--dourado-claro); }
.transformacao-texto .btn-gold { margin-top: 32px; }

/* TODAS as fotos de secao usam este mesmo tratamento: 3:4, filete dourado,
   cantos retos. Nova foto de secao? Adicione o seletor aqui, nao crie outra regra. */
.transformacao-foto img,
.foto-sobre img,
.franquia-foto img {
  width: 100%;
  /* height auto e obrigatorio: sem ele os atributos width/height do HTML
     sobrescrevem o aspect-ratio e a foto estica */
  height: auto;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--dourado);
  border-radius: 0;
  margin-inline: auto;
}

/* ---------- Nao e franquia ---------- */
.franquia-texto h2 { max-width: none; }
.franquia-texto p { margin-top: 20px; color: var(--cinza-texto); }
.franquia-texto p:first-of-type { margin-top: 28px; }
.franquia-texto strong { color: var(--grafite); }

/* .franquia-foto img entra na mesma regra das demais fotos de secao
   (ver .transformacao-foto img) para todas terem o mesmo tratamento */

/* ---------- Avaliacoes ---------- */
.nota-bloco {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.nota-gigante {
  font-family: var(--fonte-titulo);
  font-size: clamp(4rem, 9vw, 6rem);
  line-height: 1;
  color: var(--dourado);
}

.estrelas { color: var(--dourado); }

.nota-linha {
  font-size: 1rem;
  color: var(--cinza-texto);
}

.depoimentos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
  text-align: left;
}

.card-depo .card-corpo {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.depo-estrelas { color: var(--dourado); margin-bottom: 14px; }
.depo-texto { color: var(--grafite); font-size: 1rem; line-height: 1.6; }
.depo-nome {
  margin-top: 18px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--grafite);
}
.depo-origem { margin-top: 2px; font-size: 0.82rem; color: var(--cinza-texto); }

.link-discreto {
  display: inline-block;
  margin-top: 40px;
  font-size: 0.95rem;
  color: var(--grafite);
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-underline-offset: 4px;
}
.link-discreto:hover { color: var(--dourado-escuro); }

/* ---------- Localizacao ---------- */
.grid-50-50 { margin-top: 40px; }

.mapa iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(198, 161, 91, 0.28);
  border-radius: 0;
}

.info-blocos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-item { display: flex; flex-direction: column; gap: 2px; }

.info-rotulo {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
}

.info-valor {
  font-size: 1.05rem;
  color: var(--grafite);
  max-width: 46ch;
}
.info-valor a { text-decoration: none; }
.info-valor a:hover { text-decoration: underline; text-underline-offset: 3px; }

.info-final { font-size: 1rem; color: var(--cinza-texto); }

.info-blocos .btn-gold { align-self: flex-start; margin-top: 6px; }

/* ---------- FAQ ---------- */
.faq {
  max-width: 760px;
  margin-top: 40px;
  border-top: 1px solid rgba(198, 161, 91, 0.25);
}

.faq-item { border-bottom: 1px solid rgba(198, 161, 91, 0.25); }

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--grafite);
  cursor: po\69 nter;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--dourado);
}
.faq-item[open] summary::after { content: "\2212"; }

.faq-resposta { padding: 0 4px 22px; }
.faq-resposta p { font-size: 1rem; color: var(--cinza-texto); max-width: 66ch; }

.faq-fechamento {
  margin: 40px auto 0;
  max-width: 52ch;
  color: var(--cinza-texto);
}
.faq-fechamento + .btn-outline { margin-top: 26px; }

/* ---------- CTA final ---------- */
.cta-final h2 { margin-inline: auto; }
.cta-final .btn-gold { margin-top: 36px; }

/* ---------- Footer ---------- */
.rodape {
  background: var(--preto-profundo);
  color: var(--champanhe);
  border-top: 1px solid rgba(198, 161, 91, 0.25);
}

.rodape-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-block: 64px 44px;
}

.rodape-logo { height: 58px; width: auto; margin-bottom: 18px; }

.rodape-frase {
  font-size: 0.95rem;
  color: rgba(243, 235, 221, 0.72);
  max-width: 30ch;
}

.rodape-social {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}
.rodape-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 1px solid rgba(198, 161, 91, 0.4);
  color: var(--champanhe);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.rodape-social a:hover {
  background: var(--dourado);
  color: var(--preto-profundo);
  border-color: var(--dourado);
}

.rodape-titulo {
  font-family: var(--fonte-texto);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado);
}

.rodape-col ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rodape-col li,
.rodape-endereco {
  font-size: 0.95rem;
  color: rgba(243, 235, 221, 0.72);
  line-height: 1.6;
}
.rodape-endereco { margin-top: 16px; max-width: 30ch; }

.rodape-col a {
  text-decoration: none;
  color: rgba(243, 235, 221, 0.82);
  transition: color 200ms ease;
}
.rodape-col a:hover { color: var(--dourado-claro); }

.rodape-final {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px 28px;
  border-top: 1px solid rgba(198, 161, 91, 0.18);
}
.rodape-final p {
  font-size: 0.85rem;
  color: rgba(243, 235, 221, 0.55);
}

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(13, 12, 10, 0.35);
  transition: transform 200ms ease;
}
.whats-flutuante:hover { transform: scale(1.05); }

/* ---------- Reveal (unica animacao permitida) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
html.js .reveal.visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn-gold, .btn-outline, .whats-flutuante, .nav-toggle span { transition: none; }
}

/* ---------- Tablet (768px) ---------- */
@media (min-width: 768px) {
  .container { width: min(var(--largura-max), 92vw); }
  .galeria { padding-inline: max(4vw, calc(50vw - (var(--largura-max) / 2))); }
  /* a caixa cresce, mas segue sendo a MESMA para titulo, texto e botoes */
  .hero-conteudo { --col-hero: 35rem; padding-block: 72px; }
  .hero-conteudo h1 { font-size: clamp(2rem, 3.6vw, 2.65rem); }
  .hero-conteudo p { margin-top: 22px; font-size: 1.15rem; }
  /* lado a lado, mas os dois exatamente com a mesma largura */
  .hero-acoes { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
  .cards-secundarios { grid-template-columns: repeat(2, 1fr); }
  .cards-principais { grid-template-columns: repeat(3, 1fr); }
  .depoimentos { grid-template-columns: repeat(2, 1fr); }
  .galeria-foto { height: 380px; }
  .galeria-foto.larga { width: 480px; }
  .galeria-foto.estreita { width: 360px; }
  .rodape-grid { grid-template-columns: 1.6fr 1fr 1.1fr 1.3fr; gap: 48px; }
}

/* ---------- Hero por PROPORCAO de tela (art direction) ----------
   Tela deitada usa a foto 16:9 (sujeito a direita, preto a esquerda).
   Tela em pe usa a foto vertical (sujeito em cima, preto embaixo).
   Por isso a regra e de aspect-ratio e nao de largura: um tablet em pe
   com a foto 16:9 cortaria justamente a area preta onde o texto fica. */
@media (min-aspect-ratio: 1/1) {
  .hero { align-items: center; }
  .hero-foto img { object-position: center; }
  .hero-veu {
    background: linear-gradient(to right,
      rgba(13, 12, 10, 0.6) 0%,
      rgba(13, 12, 10, 0.15) 38%,
      rgba(13, 12, 10, 0) 55%);
  }
}

/* ---------- Desktop (1024px) ---------- */
@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .nav a {
    font-size: 0.95rem;
    color: var(--champanhe);
    text-decoration: none;
    transition: color 200ms ease;
  }
  .nav a:hover { color: var(--dourado-claro); }

  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }

  .grid-55-45 { grid-template-columns: 55fr 45fr; gap: 64px; }
  .grid-45-55 { grid-template-columns: 45fr 55fr; gap: 64px; }
  .grid-50-50 { grid-template-columns: 1fr 1fr; gap: 56px; }

  .cards-secundarios { grid-template-columns: repeat(2, 1fr); }
  .depoimentos { grid-template-columns: repeat(3, 1fr); }
}