/* VRM Estética — folha das páginas internas.
   Mesma identidade da landing page: âmbar e carmim do logotipo sobre cinzas
   neutros. Os nomes antigos (--creme, --ouro, --rose…) viraram apelidos da
   paleta nova, então as regras abaixo continuam valendo sem reescrita. */
:root {
  /* — marca, amostrada do logotipo — */
  --carmim:        #b41824;
  --carmim-escuro: #8e1019;
  --carmim-tinta:  #5d0b12;
  --carmim-veu:    #fbecec;
  --ambar:         #fcb430;
  --ambar-fundo:   #e79a12;
  --ambar-tinta:   #8a5a05;   /* âmbar legível como texto */
  --ambar-veu:     #fdf3de;

  /* — cinzas — */
  --c0:   #ffffff;
  --c25:  #fbfbfa;
  --c50:  #f5f5f3;
  --c100: #ededea;
  --c200: #e0dfdc;
  --c300: #c8c6c2;
  --c400: #a09d99;
  --c500: #78756f;
  --c600: #575450;
  --c700: #403e3b;
  --c800: #2b2a28;
  --c900: #1b1a19;

  /* — apelidos: nomes antigos apontando para a paleta nova — */
  --creme:          var(--c25);
  --areia:          var(--c50);
  --branco:         var(--c0);
  --espresso:       var(--c900);
  --espresso-suave: var(--c600);
  --ouro:           var(--ambar-fundo);
  --ouro-texto:     var(--ambar-tinta);
  --ouro-claro:     var(--c200);
  --rose:           var(--carmim);
  --rose-texto:     var(--carmim);

  --verde-whats: #128c4a;     /* só sinaliza sucesso no formulário */
  --raio: 14px;
  --sombra:   0 28px 64px -32px rgba(27, 26, 25, .32);
  --sombra-1: 0 1px 2px rgba(27, 26, 25, .05);
  --serifa: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--c600);
  background: var(--creme);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--rose-texto); text-decoration: none; }
a:hover { opacity: .85; }
h1, h2, h3 { font-family: var(--serifa); font-weight: 500; line-height: 1.12; color: var(--espresso); }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; color: var(--carmim); }
:focus-visible { outline: 2px solid var(--carmim); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ambar); color: var(--c900); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 104px; padding: .7rem clamp(1rem, 4vw, 3rem);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 3px solid var(--carmim);
  border-bottom: 1px solid var(--c200);
}
.marca { display: flex; align-items: center; gap: .6rem; color: var(--espresso); }
.marca-logo { height: 76px; width: auto; display: block; }
.marca-svg { width: 34px; height: 34px; color: var(--ouro); flex: none; }
.marca span { font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.25; }
.marca strong { font-weight: 500; }
.marca em { display: block; font-style: normal; font-size: .62rem; letter-spacing: .34em; color: var(--espresso-suave); }
.menu ul { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); list-style: none; }
.menu a { color: var(--c600); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; transition: color .15s ease; }
.menu a:hover { color: var(--carmim); }
.menu-botao { display: none; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.9rem; border-radius: 999px;
  font-size: .95rem; font-weight: 500; letter-spacing: .02em; line-height: 1.2;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.botao:hover { transform: translateY(-2px); opacity: 1; }
/* .botao-ouro é a ação primária das páginas internas — agora carmim, como na LP */
.botao-ouro { background: var(--carmim); color: #fff !important; box-shadow: 0 12px 26px -14px rgba(180, 24, 36, .75); }
.botao-ouro:hover { background: var(--carmim-escuro); box-shadow: 0 18px 34px -14px rgba(180, 24, 36, .8); }
.botao-escuro { background: var(--c900); color: #fff !important; }
.botao-escuro:hover { background: var(--c800); }
.botao-fantasma { border-color: var(--c300); color: var(--c800) !important; }
.botao-fantasma:hover { border-color: var(--carmim); color: var(--carmim) !important; }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; min-height: 82vh;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 4rem);
  background:
    radial-gradient(58rem 32rem at 88% -8%, var(--ambar-veu), transparent 62%),
    linear-gradient(180deg, var(--c0) 0%, var(--c25) 100%);
}
.hero-selo, .secao-selo {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ambar-tinta); margin-bottom: 1.1rem;
}
.hero-selo::before, .secao-selo::before {
  content: ""; width: 30px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-fundo));
}
.hero-sub { margin: 1.4rem 0 2rem; max-width: 46ch; font-size: 1.08rem; color: var(--espresso-suave); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-provas { display: flex; flex-wrap: wrap; gap: 2rem; list-style: none; margin-top: 2.6rem; }
.hero-provas li { display: grid; font-size: .8rem; letter-spacing: .08em; color: var(--espresso-suave); }
.hero-provas strong { font-weight: 500; color: var(--espresso); font-size: .92rem; }
.hero-foto { position: relative; }
.hero-cartaozinho {
  position: absolute; left: -1.2rem; bottom: 1.6rem; display: grid; gap: .15rem;
  background: var(--branco); padding: .9rem 1.3rem; border-radius: 14px; box-shadow: var(--sombra);
  font-size: .8rem; letter-spacing: .06em;
}
.hero-cartaozinho strong { font-weight: 500; color: var(--ouro-texto); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- fotos (slots) ---------- */
.foto { position: relative; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.foto figcaption { display: none; }
.foto-hero { aspect-ratio: 4 / 5; }
.foto-servico { aspect-ratio: 4 / 3; }
.foto.sem-imagem {
  background: linear-gradient(150deg, var(--ambar-veu), var(--c100));
}
.foto.sem-imagem::before {
  content: "VRM"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serifa); font-size: 3rem; letter-spacing: .5em; padding-left: .5em;
  color: var(--c300);
}
.foto.sem-imagem figcaption {
  display: block; position: absolute; left: 0; right: 0; bottom: 0;
  padding: .6rem 1rem; font-size: .72rem; letter-spacing: .06em;
  color: var(--espresso-suave); background: color-mix(in srgb, var(--branco) 72%, transparent);
}

/* ---------- faixas e seções ---------- */
.faixa-filosofia {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; text-align: center;
  background: var(--c900); color: var(--c100);
}
.faixa-filosofia p { font-family: var(--serifa); font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.35; }
.faixa-filosofia em { color: var(--ambar); }
.secao { padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 4rem); max-width: 1200px; margin: 0 auto; }
.secao-cabeca { max-width: 640px; margin-bottom: 2.6rem; }
.secao-cabeca p:not(.secao-selo) { margin-top: .8rem; color: var(--espresso-suave); }

/* ---------- serviços ---------- */
.grupo-servicos { margin-bottom: 2.8rem; }
.grupo-servicos:last-child { margin-bottom: 0; }
.grupo-titulo { font-size: 1.15rem; letter-spacing: .02em; margin-bottom: .3rem; }
.grupo-titulo em { font-style: italic; color: var(--ouro-texto); }
.grupo-desc { color: var(--espresso-suave); font-size: .95rem; margin-bottom: 1.2rem; max-width: 60ch; }
.grade-servicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.cartao-servico {
  position: relative; display: grid; gap: .7rem; align-content: start;
  background: var(--branco); border: 1px solid var(--c200);
  border-radius: var(--raio); padding: 1.8rem 1.6rem 1.5rem; color: var(--espresso);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.cartao-servico:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--c300); opacity: 1; }
.cartao-foto {
  display: block; margin: -1.8rem -1.6rem .5rem; overflow: hidden;
  border-radius: 13px 13px 0 0; aspect-ratio: 16 / 10; background: var(--c100);
}
.cartao-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cartao-servico:hover .cartao-foto img { transform: scale(1.04); }
.cartao-num { font-family: var(--serifa); font-style: italic; color: var(--ouro-texto); font-size: 1.1rem; }
.cartao-servico p { font-size: .92rem; color: var(--espresso-suave); }
.cartao-seta { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-texto); margin-top: .4rem; }

/* ---------- clínica ---------- */
.secao-clinica { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.clinica-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.clinica-fotos .foto { aspect-ratio: 3 / 4; }
.clinica-fotos .foto:last-child { transform: translateY(2rem); }
.clinica-fotos.uma { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
.clinica-fotos.uma .foto:last-child { transform: none; }
.clinica-texto h2 { margin-bottom: 1.1rem; }
.clinica-texto p { color: var(--espresso-suave); margin-bottom: 1.2rem; }
.lista-check { list-style: none; display: grid; gap: .55rem; margin: 1.2rem 0 1.8rem; }
.lista-check li { padding-left: 1.7rem; position: relative; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: .95em; height: .5em;
  border-left: 2px solid var(--ouro); border-bottom: 2px solid var(--ouro); transform: rotate(-45deg);
}

/* indicações clínicas — marcador discreto, para não competir com o check dos benefícios */
.lista-indicacoes { list-style: none; display: grid; gap: .55rem; margin: 1.2rem 0 1.8rem; }
.lista-indicacoes li { padding-left: 1.7rem; position: relative; }
.lista-indicacoes li::before {
  content: ""; position: absolute; left: .28em; top: .62em;
  width: .42em; height: .42em; border-radius: 50%; background: var(--ambar-fundo);
}

/* ---------- depoimentos ---------- */
.secao-depoimentos { text-align: left; }
.grade-depoimentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.depoimento {
  background: var(--branco); border: 1px solid var(--c200); border-radius: var(--raio);
  padding: 1.8rem 1.6rem; box-shadow: var(--sombra-1);
}
.depoimento p { font-family: var(--serifa); font-size: 1.15rem; line-height: 1.5; }
.depoimento cite { display: block; margin-top: 1rem; font-style: normal; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-texto); }
.depoimentos-google { margin-top: 2rem; color: var(--espresso-suave); font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--c200); }
.faq:first-of-type { border-top: 1px solid var(--c200); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  cursor: pointer; list-style: none; padding: 1.4rem 0;
  font-family: var(--serifa); font-size: 1.3rem; font-weight: 500; color: var(--c900);
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--carmim); }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--ambar-fundo); border-bottom: 2px solid var(--ambar-fundo);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .22s ease;
}
.faq[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq p { padding: 0 3rem 1.5rem 0; color: var(--espresso-suave); }

/* ---------- contato ---------- */
.secao-contato { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); }
.contato-nap { margin: 1rem 0; }
.contato-mapa { margin-top: 1.4rem; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.contato-mapa iframe { width: 100%; height: 280px; border: 0; display: block; }
.contato-form {
  background: var(--branco); border-radius: var(--raio); padding: 2rem 1.8rem;
  box-shadow: var(--sombra); display: grid; gap: 1rem; align-content: start;
  border: 1px solid var(--c200); border-top: 3px solid var(--carmim);
}
.contato-form p { color: var(--espresso-suave); font-size: .95rem; }
.contato-form label { display: grid; gap: .35rem; font-size: .85rem; letter-spacing: .06em; }
.contato-form input[type=text], .contato-form input[type=tel], .contato-form select {
  padding: .8rem .95rem; border: 1px solid var(--c200); border-radius: 10px;
  font: inherit; background: var(--c25); color: var(--espresso);
}
.consentimento { grid-template-columns: auto 1fr; align-items: start; gap: .6rem !important; font-size: .78rem !important; color: var(--espresso-suave); }
.consentimento input { margin-top: .25rem; }
.form-status { min-height: 1.2em; font-size: .88rem; color: var(--verde-whats); }

/* ---------- páginas de serviço ---------- */
.migalhas { max-width: 1200px; margin: 0 auto; padding: 1.2rem clamp(1rem, 5vw, 4rem) 0; font-size: .82rem; letter-spacing: .08em; color: var(--espresso-suave); }
.migalhas span { margin: 0 .4rem; color: var(--ouro); }
.servico-hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  max-width: 1200px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 4rem);
}
.servico-corpo { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.servico-corpo article h2 { margin: 2.2rem 0 .9rem; }
.servico-corpo article h2:first-child { margin-top: 0; }
.servico-corpo article > p { color: var(--espresso-suave); }
.lista-passos { counter-reset: passo; list-style: none; display: grid; gap: .9rem; margin: 1rem 0; }
.lista-passos li { position: relative; padding-left: 3rem; color: var(--espresso-suave); }
.lista-passos li::before {
  counter-increment: passo; content: counter(passo, decimal-leading-zero);
  position: absolute; left: 0; top: 0; font-family: var(--serifa); font-style: italic;
  font-size: 1.35rem; color: var(--ouro);
}
.chamada-avaliacao {
  position: relative; overflow: hidden;
  margin: 2.4rem 0; padding: 2.2rem 1.9rem; border-radius: var(--raio);
  background: linear-gradient(135deg, var(--carmim-tinta) 0%, var(--carmim) 58%, var(--carmim-escuro) 100%);
  color: #fff;
}
.chamada-avaliacao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30rem 14rem at 50% -30%, rgba(252, 180, 48, .17), transparent 72%);
}
.chamada-avaliacao > * { position: relative; }
.chamada-avaliacao h2 { color: #fff; margin: 0 0 .7rem !important; }
.chamada-avaliacao p { color: rgba(255, 255, 255, .86); margin-bottom: 1.3rem; }
.chamada-avaliacao .botao-ouro { background: #fff; color: var(--carmim) !important; box-shadow: none; }
.chamada-avaliacao .botao-ouro:hover { background: var(--ambar-veu); }
.servico-lateral { position: sticky; top: 90px; }
.lateral-cartao {
  background: var(--branco); border-radius: var(--raio); padding: 1.6rem; display: grid; gap: .7rem;
  border: 1px solid var(--c200); border-top: 3px solid var(--carmim);
  box-shadow: var(--sombra); font-size: .92rem;
}
.lateral-cartao small { color: var(--espresso-suave); }

/* ---------- rodapé ---------- */
.rodape { background: var(--c900); color: var(--c300); margin-top: 3rem; }
.rodape a { color: var(--c300); transition: color .15s ease; }
.rodape a:hover { color: var(--ambar); opacity: 1; }
.rodape-grade {
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1200px; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 5vw, 4rem) 2.5rem;
}
.rodape-marca img { height: 84px; width: auto; margin-bottom: 1.3rem; }
.rodape-marca p { font-size: .93rem; color: var(--c400); max-width: 38ch; }
.rodape h3 {
  font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ambar); margin-bottom: 1.1rem;
}
.rodape ul { list-style: none; display: grid; gap: .6rem; font-size: .93rem; }
.rodape-base {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem 2rem; max-width: 1200px; margin: 0 auto;
  padding: 1.6rem clamp(1rem, 5vw, 4rem) 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem; line-height: 1.6; color: var(--c400);
}
.rodape-base p { max-width: 62ch; }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--carmim); color: #fff; box-shadow: 0 16px 34px -12px rgba(180, 24, 36, .8);
  transition: transform .25s;
}
.whats-flutuante:hover { transform: scale(1.07); background: var(--carmim-escuro); opacity: 1; }

/* ---------- animação de entrada ---------- */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--atraso, 0ms), transform .7s ease var(--atraso, 0ms); }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .marca-logo { height: 54px; }
  .topo { min-height: 80px; }
  .hero, .secao-clinica, .secao-contato, .servico-hero, .servico-corpo { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-foto { order: -1; max-width: 420px; }
  .servico-lateral { position: static; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
  .clinica-fotos .foto:last-child { transform: none; }
  .menu-botao {
    display: block; background: none; border: 1px solid var(--c300); border-radius: 999px;
    padding: .45rem 1.1rem; font: inherit; font-size: .8rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--espresso); cursor: pointer;
  }
  .menu ul {
    display: none; position: absolute; right: 1rem; top: calc(100% + .4rem);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--branco); border: 1px solid var(--c200); border-radius: var(--raio); box-shadow: var(--sombra); padding: .6rem;
    min-width: 230px;
  }
  .menu ul.aberto { display: flex; }
  .menu ul a { display: block; padding: .7rem .9rem; }
}

@media (max-width: 560px) { .rodape-grade { grid-template-columns: 1fr; } }

/* ---------- alinhamento com a home ----------
   A landing page usa um contêiner de 1180px centrado; estas páginas usavam
   1200px + padding fluido, e o conteúdo (logo inclusive) caía ~82px à esquerda
   do da home. Aqui as duas passam a compartilhar a mesma caixa. */
.secao,
.migalhas,
.servico-hero,
.rodape-grade,
.rodape-base {
  width: min(1180px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
/* o topo é faixa cheia (fundo e fio vão de ponta a ponta), então o recuo
   vive no padding e reproduz a margem do contêiner */
.topo { padding-inline: max(24px, calc((100% - 1180px) / 2)); }

@media (max-width: 760px) {
  .secao, .migalhas, .servico-hero, .rodape-grade, .rodape-base { width: calc(100% - 36px); }
  .topo { padding-inline: 18px; }
}