/* ------------------------------------------------------------------
   Camada de refinamento — Dra. Marcela Moura
   Só micro-interação, movimento e acabamento. Nenhuma estrutura de
   layout mora aqui: a página inteira continua montada com widget
   nativo do Elementor.
   ------------------------------------------------------------------ */
:root{
  --mm-ink:#4B2A29;
  --mm-rose:#C4A096;
  --mm-rose-claro:#D4B3A9;
  --mm-blush:#E9C7BC;
  --mm-linha:#CFCECE;
  --mm-suave:#7A6260;
  --mm-mola:cubic-bezier(.22,.61,.36,1);
}

body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

/* Anel de foco de teclado — lacuna registrada no DESIGN.md 1.0 */
.mm-btn a:focus-visible,
.mm-chip a:focus-visible,
.mm-link a:focus-visible,
.hfe-nav-menu a:focus-visible,
.elementor a:focus-visible{
  outline:2px solid var(--mm-ink);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------------- BOTÕES */
.mm-btn .elementor-button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .35s var(--mm-mola), border-color .35s var(--mm-mola),
             transform .35s var(--mm-mola), box-shadow .45s var(--mm-mola);
}
/* o preenchimento do hover entra deslizando por baixo do rótulo, em vez de
   trocar a cor de fundo de uma vez */
.mm-btn .elementor-button::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:var(--mm-ink);
  transform:translateY(101%);
  transition:transform .45s var(--mm-mola);
}
.mm-btn .elementor-button:hover::before,
.mm-btn .elementor-button:focus-visible::before{ transform:translateY(0) }
.mm-btn .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -16px rgba(75,42,41,.55);
}
.mm-btn .elementor-button-icon{
  transition:transform .4s var(--mm-mola);
  display:inline-flex;
}
.mm-btn .elementor-button:hover .elementor-button-icon{ transform:translateX(5px) }
/* na banda escura o preenchimento do hover é o rosé, não o marrom */
.mm-btn--claro .elementor-button::before{ background:var(--mm-rose) }

/* ---------------------------------------------------------------- CHIPS */
.mm-chip .elementor-button{
  transition:background-color .3s var(--mm-mola), color .3s var(--mm-mola),
             border-color .3s var(--mm-mola), transform .3s var(--mm-mola);
}
.mm-chip .elementor-button:hover{ transform:translateY(-3px) }
@media (max-width:1024px){
  /* as etiquetas ficavam com 44px de altura; o Documento 02 pede 48 */
  .mm-chip .elementor-button{
    min-height:48px;
    display:inline-flex;
    align-items:center;
  }
}

/* ------------------------------------------------------------- LINK EM LINHA */
.mm-link .elementor-button{ background:transparent !important }
.mm-link .elementor-button-text{
  background-image:linear-gradient(var(--mm-rose),var(--mm-rose));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  padding-bottom:4px;
  transition:background-size .45s var(--mm-mola);
}
.mm-link .elementor-button:hover .elementor-button-text{ background-size:100% 1px }

/* ---------------------------------------------------------------- CARTÕES */
.mm-card{
  transition:transform .5s var(--mm-mola), box-shadow .5s var(--mm-mola),
             border-color .5s var(--mm-mola);
  will-change:transform;
}
.mm-card:hover{
  transform:translateY(-8px);
  border-color:var(--mm-rose) !important;
  box-shadow:0 30px 54px -28px rgba(75,42,41,.45) !important;
}
.mm-card img{ transition:transform .9s var(--mm-mola); display:block }
.mm-card:hover img{ transform:scale(1.07) }
/* o link do cartão acompanha o hover do cartão inteiro */
.mm-card:hover .mm-link .elementor-button-text{ background-size:100% 1px }

/* ------------------------------------------------------------ FOTO EM MOLDURA */
.mm-foto img{ transition:transform .9s var(--mm-mola) }
.mm-foto:hover img{ transform:scale(1.03) }

/* ---------------------------------------------------------------- MARQUEE */
.mm-marquee{ overflow:hidden !important }
.mm-marquee .e-con-inner{ max-width:none !important; padding-left:0; padding-right:0 }
.mm-marquee__trilho{
  width:max-content !important;
  flex-wrap:nowrap !important;
  animation:mm-desliza 38s linear infinite;
}
.mm-marquee:hover .mm-marquee__trilho{ animation-play-state:paused }
.mm-marquee__trilho > .elementor-widget{ white-space:nowrap }
@keyframes mm-desliza{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ------------------------------------------------------------ ENTRADA (REVEAL) */
.mm-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--mm-mola), transform .85s var(--mm-mola);
  transition-delay:var(--mm-atraso, 0ms);
}
.mm-reveal.is-in{ opacity:1; transform:none }

/* ---------------------------------------------------------------- CABEÇALHO */
/* Sticky com vidro fosco — Documento 02, seção IV. O Elementor free não tem
   efeito "sticky", então fica por CSS mesmo. */
.mm-header{
  position:sticky; top:0; z-index:999;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 rgba(207,206,206,.75);
  transition:padding .35s var(--mm-mola), box-shadow .35s var(--mm-mola),
             background-color .35s var(--mm-mola);
}
.admin-bar .mm-header{ top:32px }
@media (max-width:782px){ .admin-bar .mm-header{ top:46px } }
.mm-header .elementor-widget-image img{ display:block }

/* Barra fina acima do cabeçalho. Some no mobile: em 375px ela não cabe ao lado
   de nada e só empurra o conteúdo para baixo. */
.mm-topbar{ position:relative; z-index:1000 }
.mm-topbar a{ transition:color .3s var(--mm-mola) }
.mm-topbar a:hover{ color:#fff !important }
/* Some abaixo de 1025px: o endereço completo quebra em duas linhas e, no
   celular deitado (797x375), a barra come 55px de uma tela de 375 de altura.
   A mesma informação está inteira no rodapé. */
@media (max-width:1024px){ .mm-topbar{ display:none !important } }

@media (max-width:1024px){
  /* alvo de toque de 48px em todo item do menu aberto — o seletor antigo
     dependia da classe `hfe-menu-item`, que nem sempre está no <a> */
  .mm-header .hfe-nav-menu .menu-item > a{
    min-height:48px;
    display:flex;
    align-items:center;
  }
  /* Fechada, a lista do menu tem altura 0 mas continua com 345px de largura, e
     isso estourava a página (scrollWidth 502 numa viewport de 375). Só quando o
     hambúrguer abre (`menu-is-active`) ela volta a ocupar espaço. */
  .mm-header .hfe-nav-menu__layout-horizontal:not(.menu-is-active){
    width:0 !important;
    min-width:0 !important;
    overflow:hidden;
  }
  /* alvo de toque de 48px nos links de texto (Documento 02) */
  .mm-link .elementor-button{
    min-height:48px;
    display:inline-flex;
    align-items:center;
  }
  /* os pontos do carrossel têm 6px; a área clicável cresce sem mudar o desenho */
  .swiper-pagination-bullet{ position:relative }
  .swiper-pagination-bullet::after{
    content:""; position:absolute; inset:-17px;
  }
}
@media (max-width:767px){
  /* As três colunas herdam a largura percentual do desktop e o CTA não cabe em
     100px: estourava a janela e criava rolagem horizontal em todas as páginas. */
  /* logo, hambúrguer e CTA em uma linha só. Sem isto os três empilham e o
     cabeçalho fica com três alturas no celular. */
  .mm-header > .e-con-inner{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .mm-header .e-con-inner{ gap:10px !important }
  /* Os filhos da barra herdam largura percentual do desktop e o CTA não cabe em
     100px: estourava a janela e criava rolagem horizontal em todas as páginas.
     Vale tanto para a estrutura em 3 colunas quanto para os widgets soltos. */
  .mm-header .e-con-inner > .e-con{ width:100% !important }
  .mm-header .e-con-inner > .e-con > .e-con,
  .mm-header .e-con-inner > .e-con > .elementor-widget,
  .mm-header .e-con-inner > .elementor-widget,
  .mm-header .e-con-inner > .e-con.e-child{
    width:auto !important; flex:0 0 auto !important; padding:0 !important;
  }
  .mm-header .elementor-widget-navigation-menu{
    flex:1 1 48px !important; min-width:48px;
  }
  .mm-header .hfe-nav-menu__toggle{
    min-width:48px; min-height:48px;
    display:flex; align-items:center; justify-content:center;
  }
  .mm-header .elementor-widget-image img{ max-width:132px }
  /* o logo é o link para a home e tem só 25px de altura natural */
  .mm-header .elementor-widget-image a{ display:inline-block; padding:12px 0 }
  .mm-header .elementor-widget-button .elementor-button{
    font-size:12px !important; padding:14px 16px !important; white-space:nowrap;
  }
  /* "Agendar Consulta" não cabe ao lado do logo e do hambúrguer em 375px.
     O texto completo continua no DOM (leitor de tela lê); só o rótulo encurta. */
  .mm-header .elementor-widget-button .elementor-button-text{ font-size:0 }
  .mm-header .elementor-widget-button .elementor-button-text::after{
    content:"Agendar"; font-size:12px; letter-spacing:.2px;
  }
  .mm-header .elementor-widget-button .elementor-button-icon{ display:none }
}
.mm-header.is-stuck{
  padding-top:4px !important; padding-bottom:4px !important;
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(207,206,206,.9), 0 10px 30px rgba(75,42,41,.10);
}
.mm-header.is-stuck .elementor-widget-image img{ max-height:40px; transition:max-height .35s var(--mm-mola) }

/* menu: sublinhado que cresce do centro */
.mm-header .hfe-nav-menu .menu-item a.hfe-menu-item{ position:relative }
.mm-header .hfe-nav-menu .menu-item a.hfe-menu-item::after{
  content:"";
  position:absolute; left:50%; bottom:6px;
  width:0; height:1.5px;
  background:var(--mm-rose);
  transform:translateX(-50%);
  transition:width .38s var(--mm-mola);
}
.mm-header .hfe-nav-menu .menu-item a.hfe-menu-item:hover::after,
.mm-header .hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item::after{ width:26px }

/* ---------------------------------------------------- BOTÃO FLUTUANTE (WHATSAPP) */
/* A seção existe só para carregar o botão; ela mesma não ocupa lugar. O que fica
   fixo é a própria âncora, não o wrapper do widget: o wrapper é mais largo que o
   botão e o afastamento das bordas não bateria. */
.mm-flutuante-wrap,
.mm-flutuante-wrap > .e-con-inner,
.mm-flutuante{
  position:static !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
}
.mm-flutuante .elementor-button{
  position:fixed !important;
  right:22px; bottom:22px;
  z-index:998;
  padding:15px 22px !important;
  box-shadow:0 16px 32px -12px rgba(75,42,41,.6);
}
.mm-flutuante .elementor-button-icon{ font-size:19px }
/* Pulso discreto: é o CTA principal do site e precisa ser achado sem gritar.
   O anel vai no `box-shadow` do próprio botão, não num `::after`: o botão tem
   `overflow:hidden` (por causa do preenchimento que sobe no hover) e isso
   recortava o pseudo-elemento — foi assim que o pulso sumiu em 02/09/2026.
   `box-shadow` do próprio elemento não é recortado pelo overflow dele. */
.mm-flutuante .elementor-button{
  animation:mm-pulso 3s ease-out infinite;
}
.mm-flutuante .elementor-button:hover{ animation-play-state:paused }
@keyframes mm-pulso{
  0%{   box-shadow:0 16px 32px -12px rgba(75,42,41,.6), 0 0 0 0 rgba(196,160,150,.6) }
  70%{  box-shadow:0 16px 32px -12px rgba(75,42,41,.6), 0 0 0 22px rgba(196,160,150,0) }
  100%{ box-shadow:0 16px 32px -12px rgba(75,42,41,.6), 0 0 0 0 rgba(196,160,150,0) }
}
/* Celular deitado: 375px de altura é pouco e a pílula cobre o título do hero.
   Vira disco também aqui. */
@media (max-height:520px){
  .mm-flutuante .elementor-button{
    right:16px; bottom:16px;
    width:52px; height:52px; padding:0 !important;
    display:flex; align-items:center; justify-content:center;
  }
  .mm-flutuante .elementor-button-text{ display:none }
  .mm-flutuante .elementor-button-icon{ margin:0 !important; font-size:23px }
}
@media (max-width:767px){
  /* no celular fica só o glifo, senão o botão come a largura da tela */
  .mm-flutuante .elementor-button{
    right:16px; bottom:16px;
    width:58px; height:58px; padding:0 !important;
    display:flex; align-items:center; justify-content:center;
  }
  .mm-flutuante .elementor-button-text{ display:none }
  .mm-flutuante .elementor-button-icon{ margin:0 !important; font-size:25px }
}

/* ---------------------------------------------------------------- RODAPÉ */
.mm-footer a{ text-decoration:none; transition:color .3s var(--mm-mola), opacity .3s var(--mm-mola) }
.mm-footer a:hover{ color:var(--mm-rose) !important }
/* divisória vertical entre as colunas, só no desktop */
@media (min-width:1025px){
  .mm-footer-col + .mm-footer-col{ border-left:1px solid rgba(255,255,255,.14) }
}
.mm-footer .elementor-icon-list-item{ transition:transform .3s var(--mm-mola) }
@media (max-width:1024px){
  /* alvo de toque de 48px nos links do rodapé (Documento 02). No desktop as
     listas continuam compactas. */
  .mm-footer .elementor-icon-list-item,
  .mm-footer .elementor-icon-list-item > a{
    min-height:48px;
    display:flex;
    align-items:center;
  }
}
.mm-footer .elementor-icon-list-item:hover{ transform:translateX(4px) }
.mm-social a{ transition:transform .35s var(--mm-mola); min-width:48px; min-height:48px;
  display:inline-flex !important; align-items:center; justify-content:center }
.mm-social a:hover{ transform:translateY(-3px) }

/* ------------------------------------------------------- JORNADA (PASSO A PASSO) */
/* A trilha corre atrás dos cartões, na altura do centro do disco. Como o cartão
   é opaco, ela só aparece nos vãos entre um passo e outro — que é exatamente o
   efeito de sequência. */
.mm-jornada{ position:relative }
.mm-jornada::before{
  content:"";
  position:absolute;
  left:0; right:0; top:54px;
  border-top:1px dashed rgba(75,42,41,.32);
  z-index:0;
}
.mm-jornada > .e-con{ position:relative; z-index:1 }
@media (max-width:1024px){ .mm-jornada::before{ display:none } }

.mm-passo{
  position:relative;
  transition:transform .45s var(--mm-mola), box-shadow .45s var(--mm-mola),
             border-color .45s var(--mm-mola);
}
.mm-passo:hover{
  transform:translateY(-6px);
  border-color:var(--mm-rose) !important;
  box-shadow:0 26px 46px -26px rgba(75,42,41,.4) !important;
}
/* O numeral vira marca d'água no canto e sai do fluxo — o texto sobe e o cartão
   fica com a altura do conteúdo, não do numeral. Precisa de classe própria:
   `:nth-of-type` conta entre irmãos do mesmo elemento e todo widget do Elementor
   é `div`, então o seletor pegava o ícone. */
.mm-passo__num{
  position:absolute !important;
  top:18px; right:20px;
  z-index:0;
  opacity:.5;
  pointer-events:none;
}
.mm-passo .elementor-widget-icon{ position:relative; z-index:1 }
.mm-passo .elementor-icon{ transition:transform .45s var(--mm-mola) }
.mm-passo:hover .elementor-icon{ transform:scale(1.08) rotate(-4deg) }

/* --------------------------------------------- CARTÕES DE VIDRO (BANDA ESCURA) */
.mm-vidro{
  transition:background-color .4s var(--mm-mola), border-color .4s var(--mm-mola),
             transform .4s var(--mm-mola);
}
.mm-vidro:hover{
  background-color:rgba(255,255,255,.10) !important;
  border-color:rgba(196,160,150,.65) !important;
  transform:translateY(-4px);
}

/* ------------------------------------------------------- LOCALIZAÇÃO (MAPA) */
/* No desktop o cartão flutua sobre o mapa; no tablet e no mobile ele volta para
   o fluxo, abaixo do mapa. */
.mm-local{ position:relative }
@media (min-width:1025px){
  .mm-local > .mm-local__card{
    position:absolute;
    right:34px; top:50%;
    transform:translateY(-50%);
    z-index:3;
  }
}
.mm-mapa iframe{ display:block }

/* ------------------------------------------------------- CARTÃO DA NOTA GOOGLE */
.mm-google{ position:relative; overflow:visible !important }
/* o "G" fica como marca d'água, na cor da paleta — a forma oficial colorida
   brigaria com a banda (DESIGN.md, exceção dos glifos de terceiros) */
.mm-google::before{
  content:"G";
  position:absolute; top:-16px; left:50%;
  transform:translateX(-50%);
  width:38px; height:38px;
  border-radius:999px;
  background:var(--mm-ink);
  color:#fff;
  font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}

/* ------------------------------------------------ CARROSSEL DE DEPOIMENTOS */
/* Scroll-snap: rola no toque e no trackpad sem JS, e é navegável por teclado.
   As setas são injetadas pelo refinamento.js e só aparecem se houver transbordo. */
.mm-slider-wrap{ position:relative }
.mm-slider{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  flex-wrap:nowrap !important;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:6px;
}
.mm-slider::-webkit-scrollbar{ display:none }
.mm-slide{
  position:relative;
  flex:0 0 calc((100% - 44px) / 2.4) !important;
  width:auto !important;
  scroll-snap-align:start;
  transition:border-color .4s var(--mm-mola), box-shadow .4s var(--mm-mola);
}
.mm-slide:hover{
  border-color:var(--mm-rose) !important;
  box-shadow:0 22px 44px -28px rgba(75,42,41,.4);
}
/* aspas decorativas do cartão de avaliação */
.mm-slide::before{
  content:"”";
  position:absolute; top:6px; right:22px;
  font-size:76px; line-height:1;
  color:rgba(196,160,150,.32);
  font-family:Georgia, serif;
  pointer-events:none;
}
/* inicial do autor num disco */
.mm-avatar{
  width:38px; height:38px;
  border-radius:999px;
  background:var(--mm-rose);
  display:flex !important; align-items:center; justify-content:center;
  flex:0 0 38px;
}
.mm-avatar .elementor-heading-title{ line-height:38px }
@media (max-width:1024px){ .mm-slide{ flex-basis:calc((100% - 22px) / 1.8) !important } }
@media (max-width:767px){ .mm-slide{ flex-basis:88% !important } }

.mm-setas{
  display:flex; gap:10px; justify-content:flex-end;
  width:100%;              /* o container do Elementor alinha os filhos à esquerda */
  margin-top:18px;
}
.mm-seta{
  width:48px; height:48px;
  border-radius:999px;
  border:1px solid rgba(75,42,41,.28);
  background:transparent;
  color:var(--mm-ink);
  font-size:17px; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--mm-mola), color .3s var(--mm-mola),
             border-color .3s var(--mm-mola), transform .3s var(--mm-mola);
}
.mm-seta:hover:not(:disabled){
  background:var(--mm-ink); color:#fff; border-color:var(--mm-ink);
  transform:translateY(-2px);
}
.mm-seta:disabled{ opacity:.3; cursor:default }
.mm-seta:focus-visible{ outline:2px solid var(--mm-ink); outline-offset:3px }

/* ---------------------------------------------------------------- CARROSSEL */
.elementor-image-carousel-wrapper .elementor-swiper-button{
  background:#fff;
  width:46px; height:46px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -14px rgba(75,42,41,.5);
  color:var(--mm-ink);
  transition:background-color .3s var(--mm-mola), color .3s var(--mm-mola),
             transform .3s var(--mm-mola);
}
.elementor-image-carousel-wrapper .elementor-swiper-button:hover{
  background:var(--mm-ink); color:#fff; transform:scale(1.06);
}
.elementor-image-carousel .swiper-slide img{ transition:transform .9s var(--mm-mola) }
.elementor-image-carousel .swiper-slide:hover img{ transform:scale(1.05) }
.elementor-image-carousel .swiper-slide{ overflow:hidden; border-radius:16px }
.swiper-pagination-bullet-active{ background:var(--mm-ink) !important }

/* ------------------------------------------------------------------- FAQ */
/* O alvo de clique e de teclado é o <h3> (`role=button`, 70-100px). O <a> de
   rótulo dentro dele vira bloco só para ocupar a linha inteira; o `tabindex`
   redundante dele é removido no refinamento.js. */
.elementor-accordion .elementor-tab-title a{ display:block }
.elementor-accordion .elementor-tab-title{
  transition:background-color .3s var(--mm-mola), color .3s var(--mm-mola);
}

/* ---------------------------------------------------------------- MAPA */
.mm-mapa iframe{ filter:saturate(.88) contrast(1.02); transition:filter .5s var(--mm-mola) }
.mm-mapa:hover iframe{ filter:none }

/* ------------------------------------------------------- MOVIMENTO REDUZIDO */
@media (prefers-reduced-motion: reduce){
  .mm-reveal{ opacity:1 !important; transform:none !important; transition:none !important }
  .mm-marquee__trilho{ animation:none !important }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}