/* ==========================================================================
   Duality Clinic — folha de estilo do site
   --------------------------------------------------------------------------
   Remontagem em HTML e CSS do site feito no Framer. Os valores abaixo saíram
   do CSS do próprio Framer (copia-exata/<página>/index.html): cores, fontes, tamanhos,
   espaçamentos e raios são os mesmos do site no ar.

   Pontos de quebra (iguais aos do Framer):
     computador  ≥ 1200 px   (quadro de 1440 px)
     tablet      768–1199 px (quadro de 810 px)
     celular     ≤ 767 px    (quadro de 390 px)
   Alguns títulos têm um degrau extra entre 1200 e 1439 px, como no Framer.

   Índice
     1. Fontes
     2. Tokens (:root)
     3. Base
     4. Estrutura da página (página, principal, seção, espaços)
     5. Tipografia
     6. Botões e links com seta
     7. Cabeçalho e menu do celular
     8. Rodapé
     9. Painéis e cartões
    10. Avaliações do Google
    11. Seção de contato e mapa
    12. Tipografia de artigo (texto corrido do blog)
    13. Perguntas frequentes (<details>)
    14. Componentes da página inicial (antes e depois, carrossel, vídeo)
    15. Botão flutuante do WhatsApp (15b. Aviso de cookies)
    16. Formulário
    17. Entrada suave dos blocos
    18. Utilitários
   ========================================================================== */


/* ==========================================================================
   1. Fontes
   Noto Sans (texto e títulos) e Inter (o negrito dos títulos grandes).
   Arquivos locais em /assets/fontes. "font-display: swap" mostra o texto
   na hora, com a fonte de reserva ajustada para não pular o layout.
   Só os pesos que o site usa (Noto Sans 400, 500, 600, 700, 800 e 400
   itálico; Inter 400, 600, 700 e 400 itálico), recortados por alfabeto: o
   arquivo "latin" (uns 21 KB) tem tudo do português; o "latin-ext" só
   baixa se a página tiver uma letra de fora (ex.: ł, ő), o que hoje não
   acontece. Peso novo no CSS precisa de @font-face (e arquivo) novo aqui.
   ========================================================================== */

@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-800-latin.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-800-latin-ext.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-400-italico-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; src: url("/assets/fontes/noto-sans-400-italico-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Inter: só latim e latim estendido (o português cabe aqui) */
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-400-italico-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fontes/inter-400-italico-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Fontes de reserva com as métricas que o Framer usa (evitam o "pulo" quando a fonte chega) */
@font-face { font-family: "Noto Sans Reserva"; src: local("Arial"); ascent-override: 100.41%; descent-override: 27.52%; line-gap-override: 0%; size-adjust: 106.47%; }
@font-face { font-family: "Inter Reserva"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0%; size-adjust: 107.89%; }


/* ==========================================================================
   2. Tokens
   Os nomes entre parênteses são os tokens do Framer, para conferir na cópia.
   ========================================================================== */

:root {
  /* Cores */
  --cor-branco: #fff;              /* token-71962182 — fundo da página e dos cartões */
  --cor-fundo-suave: #fafafa;      /* token-6dad0940 — painéis grandes, depoimentos, links do rodapé */
  --cor-cinza-claro: #f2f2f2;      /* token-6a0ea805 — fundo do topo da página inicial, anel dos avatares */
  --cor-borda: #ededed;            /* token-3bf1c51a — divisórias */
  --cor-creme: #fbf9f5;            /* token-3770b5de — seção de contato, carrossel */
  --cor-lavanda: #f5f4fd;          /* token-15930c7b — cartão do antes e depois */
  --cor-verde-claro: #f0f4ef;      /* token-2a97403c — fundo atrás do vídeo */
  --cor-salvia: #a3a8a0;           /* token-3f451fff — ícone do Google, divisórias finas */
  --cor-cinza-medio: #858585;      /* token-062bba44 — texto do rodapé, texto do topo da inicial */
  --cor-texto: #666570;            /* token-0ba4c52e — texto corrido ("Mid Gray") */
  --cor-titulo: #3d3d3d;           /* token-7ecc38b2 — títulos */
  --cor-oliva: #4d5249;            /* token-d5d88554 — menu, links com seta, estrelas ("Gray Asparagus") */
  --cor-preto: #0f0f0f;            /* token-4d0df09e — botões escuros, rodapé */
  --cor-ponto-verde: #9ad66f;      /* ponto que pulsa no botão "Agende sua consulta" */
  --cor-whatsapp: #25d366;
  --cor-texto-suave: rgba(0, 0, 0, 0.46);  /* especialidade nos cartões da equipe */
  --cor-anel-menu: #e6e3e0;        /* círculo do botão do menu */
  --cor-citacao-barra: #ddd;       /* barra da citação no artigo */
  --cor-citacao-texto: #999;       /* texto da citação no artigo */
  --cor-foco: #4d5249;             /* contorno do foco do teclado */

  /* Famílias */
  --fonte-texto: "Noto Sans", "Noto Sans Reserva", sans-serif;
  --fonte-destaque: "Inter", "Inter Reserva", sans-serif;  /* negrito (<strong>) dos títulos grandes */

  /* Escala de tipos (rem; raiz = 16 px) */
  --fs-legenda: 0.75rem;     /* 12 px    — preset 1hlmdl6 */
  --fs-texto: 0.9rem;        /* 14,4 px  — preset tx36tu (texto) e 1w3399z (menu) */
  --fs-base: 1rem;           /* 16 px    — preset emgdmd (botão) e ahr2x4 */
  --fs-nome: 1.4rem;         /* 22,4 px  — preset 11716dl (nomes da equipe) */
  --fs-titulo-hero: 4rem;    /* 64 px    — preset 1we2f4n; 3,4 no tablet; 2,8 no celular */
  --fs-titulo-secao: 2.5rem; /* 40 px    — preset 1aisfki; 3,4 entre 1200–1439; 2,8 tablet; 2,4 celular */
  --fs-titulo-cartao: 2.5rem;/* 40 px    — preset 10d7ess; 2 no tablet; 1,6 no celular */
  --fs-artigo-h1: 2.5rem;    /* preset cqxyrf; 2 no tablet; 1,6 no celular */
  --fs-artigo-h2: 1.9rem;    /* preset 1ln45ax */
  --fs-artigo-h3: 1.65rem;   /* preset 1ntvpy3 */
  --fs-artigo-h4: 1.4rem;    /* preset 7runhu */
  --fs-artigo-h5: 1.15rem;   /* preset 1c0yyz4 */
  --fs-artigo-h6: 1rem;      /* preset 1gw0axf */

  --ls-padrao: -0.02em;      /* espaçamento entre letras de quase todo o site */
  --ls-justo: -0.04em;       /* título de artigo */

  /* Larguras */
  --largura-conteudo: 1310px;   /* largura máxima das seções e do rodapé */
  --largura-cabecalho: 1390px;  /* largura máxima do cabeçalho (com 80 px de recuo de cada lado) */
  --margem-lateral: 40px;       /* recuo lateral da página; 20 px no tablet e no celular */

  /* Espaços entre blocos (os "P40/P64/P80/P120" do Framer) */
  --espaco-40: 40px;
  --espaco-64: 64px;            /* vira 40 px no celular */
  --espaco-80: 80px;
  --espaco-120: 120px;          /* vira 80 px no tablet e no celular */

  /* Raios */
  --raio-secao: 32px;           /* painéis grandes e rodapé; 24 px no celular */
  --raio-cartao: 24px;          /* cartões brancos; 16 px no celular */
  --raio-imagem: 16px;
  --raio-botao: 40px;
  --raio-pilula: 50px;

  /* Sombras */
  --sombra-cartao: 0 0.602187px 0.602187px -1.25px rgba(0, 0, 0, 0.04),
                   0 2.28853px 2.28853px -2.5px rgba(0, 0, 0, 0.03),
                   0 10px 10px -3.75px rgba(0, 0, 0, 0.01);
  --sombra-whatsapp: 0 4px 20px rgba(37, 211, 102, 0.45);
  --anel-avatar: 0 0 0 2px var(--cor-cinza-claro);
  --anel-selo: 0 0 0 1px rgba(63, 78, 97, 0.1);

  /* Movimento */
  --curva-suave: cubic-bezier(0.44, 0, 0.56, 1);
  --duracao-entrada: 0.8s;
}

@media (max-width: 1199.98px) {
  :root {
    --margem-lateral: 20px;
    --espaco-120: 80px;
    --fs-titulo-hero: 3.4rem;
    --fs-titulo-secao: 2.8rem;
    --fs-titulo-cartao: 2rem;
    --fs-artigo-h1: 2rem;
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  :root {
    --fs-titulo-secao: 3.4rem;   /* sim, maior que em 1440: é assim no Framer */
  }
}

@media (max-width: 767.98px) {
  :root {
    --espaco-64: 40px;
    --raio-secao: 24px;
    --raio-cartao: 16px;
    --fs-titulo-hero: 2.8rem;
    --fs-titulo-secao: 2.4rem;
    --fs-titulo-cartao: 1.6rem;
    --fs-artigo-h1: 1.6rem;
  }
}


/* ==========================================================================
   3. Base
   ========================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--cor-branco);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--fs-texto);
  line-height: 1.6;
  letter-spacing: var(--ls-padrao);
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Foco visível só para quem navega pelo teclado */
:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Texto só para leitores de tela */
.so-leitor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Atalho "Pular para o conteúdo" (aparece com o Tab) */
.pular-conteudo {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: var(--raio-botao);
  background: var(--cor-preto);
  color: var(--cor-branco);
  font-weight: 500;
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: none;
}


/* ==========================================================================
   4. Estrutura da página
   <body>
     <a class="pular-conteudo" href="#conteudo">…</a>
     (cabeçalho)
     <main class="principal" id="conteudo"> seções </main>
     (rodapé)
   ========================================================================== */

.principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 var(--margem-lateral);
}

/* Cada bloco grande da página: ocupa a largura toda até 1310 px */
.secao {
  position: relative;
  width: 100%;
  max-width: var(--largura-conteudo);
}

/* Espaços entre blocos: os componentes "P40–0", "P64–0", "P80–0" e "P120–0" do Framer */
.espaco-40,
.espaco-64,
.espaco-80,
.espaco-120 {
  flex: none;
  width: 100%;
}

.espaco-40 { height: var(--espaco-40); }
.espaco-64 { height: var(--espaco-64); }
.espaco-80 { height: var(--espaco-80); }
.espaco-120 { height: var(--espaco-120); }

/* Cabeça de seção centralizada (título + frase curta), como "Equipe Multidisciplinar…" */
.cabeca-secao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.cabeca-secao > p {
  max-width: 400px;
}


/* ==========================================================================
   5. Tipografia
   Uma classe por estilo de texto do Framer. Nos títulos grandes, o trecho
   em <strong> sai em Inter Bold, exatamente como no site no ar.
   ========================================================================== */

/* Título do topo da página inicial — preset 1we2f4n */
.titulo-hero {
  font-family: var(--fonte-texto);
  font-size: var(--fs-titulo-hero);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

/* Título de seção — preset 1aisfki ("Entre em contato", "Equipe…", títulos de página) */
.titulo-secao {
  font-family: var(--fonte-texto);
  font-size: var(--fs-titulo-secao);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

/* Título dentro de cartão — preset 10d7ess ("Preenchimento", "Toxina Botulínica"…) */
.titulo-cartao {
  font-family: var(--fonte-texto);
  font-size: var(--fs-titulo-cartao);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

@media (min-width: 1200px) and (max-width: 1439.98px),
       (max-width: 767.98px) {
  .titulo-cartao { letter-spacing: var(--ls-justo); }
}

/* Nome em destaque — preset 11716dl ("Dra. Mariane Felin") */
.titulo-nome {
  font-family: var(--fonte-texto);
  font-size: var(--fs-nome);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

.titulo-hero strong,
.titulo-secao strong,
.titulo-cartao strong,
.titulo-nome strong {
  font-family: var(--fonte-destaque);
  font-weight: 700;
}

/* Texto corrido — preset tx36tu (14,4 px, entrelinha 1,6) */
.texto {
  font-size: var(--fs-texto);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
}

.texto strong { font-weight: 600; }
.texto em { font-style: italic; }
.texto + .texto { margin-top: 16px; }

/* Texto de 16 px — preset ahr2x4 (itens de lista, cargos) */
.texto-base {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

.texto-base strong { font-weight: 700; }

/* Rótulo — preset 1w3399z (itens do menu, títulos do rodapé). Herda a cor. */
.texto-rotulo {
  font-size: var(--fs-texto);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-padrao);
}

.texto-rotulo strong { font-weight: 600; }

/* Legenda — preset 1hlmdl6 (12 px: "Procedimento", "Avaliações no Google", direitos) */
.legenda {
  font-size: var(--fs-legenda);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

.legenda strong { font-weight: 500; }

/* Cores de texto (o Framer troca a cor do estilo em vários lugares) */
.cor-titulo { color: var(--cor-titulo); }
.cor-texto { color: var(--cor-texto); }
.cor-oliva { color: var(--cor-oliva); }
.cor-cinza { color: var(--cor-cinza-medio); }
.cor-suave { color: var(--cor-texto-suave); }
.cor-preto { color: var(--cor-preto); }
.cor-branco { color: var(--cor-branco); }

.centro { text-align: center; }


/* ==========================================================================
   6. Botões e links com seta
   --------------------------------------------------------------------------
   <a class="botao botao--escuro" href="/agendamento">
     <svg class="botao__icone" …></svg>
     <span class="botao__rotulo" data-texto="Agende sua consulta">Agende sua consulta</span>
   </a>
   Ao passar o mouse, o texto sobe e uma cópia entra por baixo (a cópia vem
   do atributo data-texto, que precisa ser igual ao texto).
   ========================================================================== */

.botao {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  padding: 16px 26px;
  border: 0;
  border-radius: var(--raio-botao);
  background: transparent;
  font-family: var(--fonte-texto);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-padrao);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

.botao:focus-visible {
  border-radius: var(--raio-botao);
}

/* Escuro: fundo #0f0f0f, texto branco ("Pill Button") */
.botao--escuro {
  background: var(--cor-preto);
  color: var(--cor-branco);
}

/* Contorno: borda de 1 px #0f0f0f ("Pill Button Border") */
.botao--contorno {
  background: transparent;
  color: var(--cor-preto);
  box-shadow: inset 0 0 0 1px var(--cor-preto);
}

/* Pequeno, com o ponto verde que pulsa ("Pill Button S" do cabeçalho) */
.botao--p {
  padding: 12px 26px 12px 34px;
  font-size: var(--fs-texto);
}

/* Ícone de 16 px (calendário, etiqueta, prancheta, medalha…) */
.botao__icone {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Rótulo que "rola" no hover */
.botao__rotulo {
  position: relative;
  display: block;
  transition: transform 0.5s var(--curva-suave);
}

.botao__rotulo::after {
  content: attr(data-texto);
  content: attr(data-texto) / "";
  position: absolute;
  top: calc(100% + 24px);
  left: 0;
}

.botao:hover .botao__rotulo,
.botao:focus-visible .botao__rotulo {
  transform: translateY(calc(-100% - 24px));
}

/* Ponto verde: um núcleo de 5 px e uma onda que cresce e some */
.botao__ponto {
  position: absolute;
  top: calc(50% - 7px);
  left: 13px;
  width: 14px;
  height: 14px;
}

.botao__ponto::before,
.botao__ponto::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--cor-ponto-verde);
}

.botao__ponto::after {
  animation: ponto-pulsa 1.6s ease-out infinite;
}

@keyframes ponto-pulsa {
  0%   { transform: scale(1); opacity: 0.95; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Link com seta: "Saiba mais →", "Fale conosco →"
   <a class="link-seta" href="…"><strong>Saiba mais</strong></a>
   As setas são desenhadas pelo CSS. No hover, uma seta entra pela esquerda
   e a da direita sai, como no Framer.
   -------------------------------------------------------------------------- */

.link-seta {
  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .75a.75.75 0 0 1 .75.75v7.19l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0L1.72 7.28a.75.75 0 0 1 1.06-1.06l2.47 2.47V1.5A.75.75 0 0 1 6 .75Z'/%3E%3C/svg%3E");
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--cor-oliva);
  text-decoration: none;
}

.link-seta strong {
  font-weight: 700;
}

.link-seta::before,
.link-seta::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--seta) center / contain no-repeat;
  mask: var(--seta) center / contain no-repeat;
  transform: rotate(-90deg);
  transition: margin 0.4s var(--curva-suave);
}

.link-seta::before {
  margin-left: -19px;   /* escondida à esquerda (12 px da seta + 7 px de espaço) */
}

.link-seta:hover::before,
.link-seta:focus-visible::before {
  margin-left: 0;
}

.link-seta:hover::after,
.link-seta:focus-visible::after {
  margin-right: -19px;
}

/* "← Voltar" e "← Voltar ao blog": seta para a esquerda antes do texto */
.link-seta--voltar::before {
  margin-left: 0;
  transform: rotate(90deg);
}

.link-seta--voltar::after {
  display: none;
}

.link-seta--voltar:hover::before,
.link-seta--voltar:focus-visible::before {
  margin-left: 0;
  transform: rotate(90deg) translateY(3px);
}

/* Versão discreta: 14,4 px, cinza, opacidade 0,65 ("Voltar ao blog") */
.link-seta--suave {
  font-size: var(--fs-texto);
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
  opacity: 0.65;
}

.link-seta--suave strong {
  font-weight: 600;
}


/* ==========================================================================
   7. Cabeçalho e menu do celular
   ========================================================================== */

.cabecalho {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--largura-cabecalho);
  margin: 0 auto;
  background: var(--cor-branco);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 80px 40px;
  background: var(--cor-branco);
}

.cabecalho__marca {
  display: block;
  flex: none;
  width: 110px;
  height: 35px;
}

.cabecalho__marca img {
  width: 110px;
  height: 35px;
  object-fit: cover;
}

/* Menu do computador */
.cabecalho__itens {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
}

.cabecalho__link {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 11px;
  font-size: var(--fs-texto);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-oliva);
}

.cabecalho__link > span {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.cabecalho__seta {
  position: absolute;
  top: 3px;
  left: 0;
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cabecalho__link:hover > span {
  opacity: 1;
}

.cabecalho__link[aria-current] > span {
  opacity: 1;
  font-weight: 600;
}

.cabecalho__link[aria-current] .cabecalho__seta {
  opacity: 1;
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Botão redondo do menu (43 px), só no tablet e no celular */
.cabecalho__menu {
  display: none;
  flex: none;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cor-preto);
  cursor: pointer;
}

.cabecalho__menu svg {
  width: 43px;
  height: 43px;
}

.cabecalho__menu .icone-fechar {
  display: none;
}

.cabecalho__menu[aria-expanded="true"] .icone-abrir {
  display: none;
}

.cabecalho__menu[aria-expanded="true"] .icone-fechar {
  display: block;
}

/* Tela cheia do menu do celular */
.menu-celular {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px var(--recuo-cabecalho, 20px) 30px;   /* começa a 100 px do topo, como no Framer */
  background: var(--cor-branco);
  overflow-y: auto;
}

.menu-celular[hidden] {
  display: none;
}

.menu-celular__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 31px;
  list-style: none;
}

.menu-celular__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 22px;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--cor-oliva);
}

.menu-celular__link > span {
  opacity: 0.75;
}

.menu-celular__seta {
  position: absolute;
  top: 16px;
  left: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
}

.menu-celular__link[aria-current] > span {
  opacity: 1;
  font-weight: 700;
}

.menu-celular__link[aria-current] .menu-celular__seta {
  opacity: 1;
}

.menu-celular__rodape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  border-top: 1px solid var(--cor-borda);
  padding-top: 30px;
}

/* Com o menu aberto a barra fica presa no topo e a página não rola */
.cabecalho[data-aberto] .cabecalho__barra {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 11;
}

html.menu-aberto,
html.menu-aberto body {
  overflow: hidden;
}

@media (max-width: 1199.98px) {
  .cabecalho {
    --recuo-cabecalho: 40px;
  }

  .cabecalho__barra {
    padding: 32px 40px;
  }

  .cabecalho__nav {
    display: none;
  }

  .cabecalho__menu {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .cabecalho {
    --recuo-cabecalho: 20px;
  }

  .cabecalho__barra {
    padding: 32px 20px;
  }

  /* No celular o botão "Agende sua consulta" sai do topo (fica dentro do menu) */
  .cabecalho__acoes > .botao {
    display: none;
  }
}

@media (min-width: 1200px) {
  .menu-celular {
    display: none !important;
  }
}


/* ==========================================================================
   8. Rodapé
   ========================================================================== */

.rodape {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 var(--margem-lateral);
  margin: 64px 0 40px;          /* 64 px depois da última seção, 40 px até o fim da página */
}

/* Nas páginas com o botão do WhatsApp o Framer deixa 56 px (o botão ocupa esse espaço no fluxo) */
.com-whatsapp .rodape {
  margin-top: 56px;
}

.rodape__caixa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--largura-conteudo);
  padding: 40px 40px 32px;
  border-radius: var(--raio-secao);
  background: var(--cor-preto);
  color: var(--cor-cinza-medio);
  overflow: hidden;
}

.rodape :focus-visible {
  outline-color: var(--cor-branco);
}

.rodape__topo {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.rodape__marca {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 120px;
  min-width: 0;
}

.rodape__logo {
  display: block;
  width: 110px;
  height: 35px;
}

.rodape__logo img {
  width: 110px;
  height: 35px;
  object-fit: cover;
}

/* Colunas: links | endereço | horário + redes */
.rodape__colunas {
  display: grid;
  flex: 2 1 0;
  grid-template-columns: auto auto auto;
  grid-template-areas:
    "links endereco horario"
    "links endereco social";
  grid-template-rows: auto 1fr;
  justify-content: space-between;
  row-gap: 32px;
  min-width: 0;
}

.rodape__links {
  grid-area: links;
}

.rodape__links ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

.rodape__links li {
  line-height: 1;
}

.rodape__links a {
  display: block;
  width: max-content;
  font-size: var(--fs-texto);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-fundo-suave);
  white-space: nowrap;
}

.rodape__links a:hover {
  color: var(--cor-branco);
}

.rodape__endereco {
  grid-area: endereco;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rodape__horario {
  grid-area: horario;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rodape__titulo {
  font-size: var(--fs-texto);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-branco);
}

.rodape__texto {
  font-size: var(--fs-texto);
  line-height: 1.6;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-cinza-medio);
  white-space: nowrap;          /* as quebras de linha são as do site (<br>) */
}

@media (max-width: 767.98px) {
  .rodape__texto { white-space: normal; }
}

.rodape__social {
  grid-area: social;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.rodape__social a {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--cor-branco);
}

.rodape__social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Registros da clínica (razão social, CNPJ, CRO e CRM com os responsáveis técnicos) */
.rodape__registros {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
  font-size: var(--fs-legenda);
  line-height: 1.5;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-cinza-medio);
}

.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rodape__direitos {
  font-size: var(--fs-legenda);
  line-height: 1.3;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
  opacity: 0.9;
}

/* Botão redondo "voltar ao topo" */
.rodape__subir {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 12px;
  border: 0;
  border-radius: 160px;
  background: var(--cor-texto);
  color: var(--cor-branco);
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.rodape__subir:hover {
  opacity: 1;
}

.rodape__subir svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transform: rotate(180deg);
}

/* Tablet: duas colunas (links | endereço, horário e redes). O horário fica à vista
   também aqui: a /sobre e a 404 não têm a seção de contato e não teriam outro lugar com ele. */
@media (max-width: 1199.98px) {
  .rodape__colunas {
    flex: 1 1 0;
    grid-template-columns: auto auto;
    grid-template-areas:
      "links endereco"
      "links horario"
      "links social";
    grid-template-rows: auto auto 1fr;
    row-gap: 24px;
  }
}

/* Celular: tudo empilhado */
@media (max-width: 767.98px) {
  .rodape__caixa {
    gap: 0;
    padding: 32px 24px;
  }

  .rodape__topo,
  .rodape__marca,
  .rodape__base {
    display: contents;
  }

  .rodape__logo { order: 1; }

  .rodape__colunas {
    order: 2;
    flex: none;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
    column-gap: 56px;
    margin-top: 48px;
  }

  .rodape__subir {
    order: 4;
    margin-top: 64px;
  }

  .rodape__registros {
    order: 5;
    gap: 8px;
    margin-top: 40px;
    text-align: center;
  }

  .rodape__direitos {
    order: 6;
    margin: 24px -24px 0;   /* usa a largura toda da caixa, como no Framer: cabe numa linha */
    text-align: center;
  }
}


/* ==========================================================================
   9. Painéis e cartões
   ========================================================================== */

/* Painel grande cinza-claro que envolve uma seção ("Column" #fafafa) */
.painel {
  position: relative;
  width: 100%;
  padding: 40px;
  border-radius: var(--raio-secao);
  background: var(--cor-fundo-suave);
  overflow: hidden;
}

.painel--creme { background: var(--cor-creme); }
.painel--lavanda { background: var(--cor-lavanda); }
.painel--cinza { background: var(--cor-cinza-claro); }
.painel--verde { background: var(--cor-verde-claro); }
.painel--sem-recuo { padding: 0; }

@media (max-width: 767.98px) {
  .painel { padding: 24px; }
  .painel--sem-recuo { padding: 0; }
}

/* Cartão branco com sombra leve ("Item") */
.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--raio-cartao);
  background: var(--cor-branco);
  box-shadow: var(--sombra-cartao);
}

/* Cartões que se empilham ao rolar (lista de procedimentos) */
.cartao--fixo {
  position: sticky;
  top: 40px;
}

/* Imagem com cantos de 16 px; a proporção vem de --proporcao (ex.: 1, 3/2) */
.imagem {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--proporcao, auto);
  border-radius: var(--raio-imagem);
  overflow: hidden;
}

.imagem img,
.imagem video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grades de cartões (24 px entre eles) */
.grade {
  display: grid;
  gap: 24px;
  width: 100%;
}

.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Duas colunas no tablet, quando a página pedir */
@media (max-width: 1199.98px) {
  .grade--3.grade--t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .grade--2,
  .grade--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Cartão de mídia: imagem de um lado, texto do outro (procedimentos) */
.cartao-midia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

.cartao-midia--invertido > :first-child {
  order: 2;
}

.cartao-midia__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  padding: 30px 0;
}

@media (max-width: 767.98px) {
  .cartao-midia {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .cartao-midia--invertido > :first-child {
    order: 0;
  }

  .cartao-midia__texto {
    padding: 0;
  }
}

/* Cartão da equipe: foto quadrada, nome, especialidade e cargo */
.cartao-equipe {
  align-items: center;
  text-align: center;
}

.cartao-equipe__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Cartão de post do blog */
.cartao-post__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cartao-post__titulo {
  font-size: var(--fs-artigo-h2);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

/* Lista com "✓" (aplicações de cada tratamento) */
.lista-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.lista-check li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  line-height: 1.4;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

.lista-check li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -4.5 16 16'%3E%3Cpath d='M10 0 3.125 6.875 0 3.75' fill='none' stroke='%234d5249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}


/* ==========================================================================
   10. Avaliações do Google
   ========================================================================== */

/* Selo "Avaliações no Google" do topo da inicial: louros, avatares, (81) e estrelas */
.selo-google {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--cor-oliva);
}

.selo-google__louros {
  flex: none;
  width: 51px;
  height: 46px;
  opacity: 0.5;
}

.selo-google__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.selo-google__titulo {
  font-size: var(--fs-legenda);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.35;
}

.selo-google__linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.selo-google__avatares {
  display: flex;
}

.selo-google__avatares img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: var(--anel-avatar);
  object-fit: cover;
}

.selo-google__avatares img + img {
  margin-left: -10px;
}

.selo-google__nota {
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0.75;
}

.selo-google__nota strong {
  font-size: var(--fs-legenda);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.75;
}

/* Cinco estrelas de 9 px */
.estrelas {
  display: flex;
  gap: 1px;
  color: var(--cor-oliva);
  opacity: 0.85;
}

.estrelas svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
}

/* Cartão de depoimento do Google */
.depoimento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 310px;
  padding: 20px;
  border-radius: 16px;
  background: var(--cor-fundo-suave);
}

.depoimento__perfil {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.depoimento__foto {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.depoimento__quem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.depoimento__nome {
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--cor-texto);
}

/* "G" do Google sobre a foto */
.depoimento__plataforma {
  position: absolute;
  top: 52px;
  left: 52px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: var(--anel-selo);
  object-fit: cover;
}


/* ==========================================================================
   11. Seção de contato e mapa (aparece em quase todas as páginas)
   ========================================================================== */

.contato {
  display: flex;
  align-items: stretch;
  gap: 56px;
  width: 100%;
  max-width: var(--largura-conteudo);
  border-radius: var(--raio-secao);
  background: var(--cor-creme);
  overflow: hidden;
}

.contato__texto {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  min-width: 0;
  padding: 64px 0 64px 40px;
}

.contato__chamada {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

.contato__cabeca .texto {
  max-width: 320px;
}

.contato__botoes {
  display: flex;
  align-items: center;
  gap: 24px;
}

.contato__dados {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  list-style: none;
}

.contato__dado {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 180px;
  color: var(--cor-texto);
}

.contato__dado svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.contato__dado a:hover {
  color: var(--cor-oliva);
}

.contato__mapa {
  position: relative;
  flex: 1.25 1 0;
  min-width: 0;
  aspect-ratio: 0.996497;
  background: #e9e9e9;
}

/* Mapa da ficha do Google ("Incorporar um mapa"), sem chave de API */
.contato__mapa-quadro {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Antes do mapa carregar: link para abrir a ficha no Google Maps (fica por baixo do mapa) */
.contato__mapa-reserva {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--cor-texto);
  text-align: center;
}

@media (max-width: 1199.98px) {
  .contato {
    flex-direction: column;
    gap: 32px;
  }

  .contato__texto {
    flex: none;
    justify-content: center;
    padding: 56px 40px 40px;
  }

  .contato__dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(48px, 1fr));
    width: 75%;
  }

  .contato__mapa {
    flex: none;
    width: 100%;
    height: 540px;
    aspect-ratio: auto;
  }
}

@media (max-width: 767.98px) {
  .contato {
    gap: 0;
  }

  .contato__texto {
    padding: 40px 24px 48px;
  }

  .contato__botoes {
    flex-direction: column;
    width: 100%;
  }

  .contato__dados {
    display: flex;
    width: 100%;
  }

  .contato__mapa {
    height: auto;
    aspect-ratio: 0.996497;
  }
}


/* ==========================================================================
   12. Tipografia de artigo (o texto corrido dos posts do blog)
   <div class="artigo"> h1, p, h2, h3, ul, ol, blockquote… </div>
   Espaços iguais aos do Framer: 16 px antes de cada parágrafo e 40 px antes
   de cada subtítulo; listas e citações sem espaço extra.
   ========================================================================== */

.artigo {
  width: 100%;
  color: var(--cor-texto);
}

.artigo h1 {
  font-size: var(--fs-artigo-h1);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ls-justo);
  color: var(--cor-titulo);
}

.artigo h2,
.artigo h3,
.artigo h4,
.artigo h5,
.artigo h6 {
  line-height: 1.4;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
}

.artigo h2 { font-size: var(--fs-artigo-h2); font-weight: 800; }
.artigo h3 { font-size: var(--fs-artigo-h3); font-weight: 800; }
.artigo h4 { font-size: var(--fs-artigo-h4); font-weight: 800; }
.artigo h5 { font-size: var(--fs-artigo-h5); font-weight: 700; }
.artigo h6 { font-size: var(--fs-artigo-h6); font-weight: 700; }

.artigo h1 strong,
.artigo h2 strong,
.artigo h3 strong,
.artigo h4 strong,
.artigo h5 strong,
.artigo h6 strong {
  font-weight: 900;
}

.artigo p,
.artigo li {
  font-size: var(--fs-texto);
  line-height: 1.6;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
}

.artigo strong { font-weight: 600; }
.artigo em { font-style: italic; }

.artigo > p:not(:first-child) { margin-top: 16px; }

.artigo > h1:not(:first-child),
.artigo > h2:not(:first-child),
.artigo > h3:not(:first-child),
.artigo > h4:not(:first-child),
.artigo > h5:not(:first-child),
.artigo > h6:not(:first-child) {
  margin-top: 40px;
}

/* Links do texto: mesma cor do texto, ficam oliva no hover (preset 1tsnfhv) */
.artigo a {
  color: var(--cor-texto);
  text-decoration: none;
}

.artigo a:hover {
  color: var(--cor-oliva);
}

/* Listas: marcador "•" e recuo de 2ch, como no Framer */
.artigo ul,
.artigo ol {
  position: relative;
  list-style: none;
}

.artigo li {
  position: relative;
  padding-inline-start: 2ch;
}

.artigo ul > li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
}

.artigo ol {
  counter-reset: item;
}

.artigo ol > li {
  counter-increment: item;
}

.artigo ol > li::before {
  content: counter(item) ".";
  position: absolute;
  inset-inline-start: 0;
  font-variant-numeric: tabular-nums;
}

/* Citação: barra cinza de 2 px à esquerda e texto de 16 px */
.artigo blockquote {
  position: relative;
  padding-left: 22px;
}

.artigo blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--cor-citacao-barra);
}

.artigo blockquote p {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--cor-citacao-texto);
}

.artigo img {
  width: 100%;
  border-radius: var(--raio-imagem);
}

/* Linha "← Voltar ao blog ……… 1 de abr. de 2026" acima do título */
.artigo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.artigo-topo time {
  font-size: var(--fs-texto);
  color: var(--cor-texto);
  opacity: 0.65;
}

/* Caixa do autor no fim do artigo */
.autor {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.autor__foto {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 80px;
  object-fit: cover;
}


/* ==========================================================================
   13. Perguntas frequentes com <details>
   <div class="perguntas">
     <details class="pergunta">
       <summary>Pergunta</summary>
       <div class="pergunta__resposta"><p>Resposta</p></div>
     </details>
   </div>
   Abre e fecha sem JavaScript. Nos navegadores que aceitam, a abertura é
   animada só com CSS (::details-content).
   ========================================================================== */

.perguntas {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--cor-borda);
}

.pergunta {
  border-bottom: 1px solid var(--cor-borda);
}

.pergunta summary {
  position: relative;
  display: block;
  padding: 20px 40px 20px 0;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-titulo);
  list-style: none;
  cursor: pointer;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

/* "+" que vira "−" */
.pergunta summary::before,
.pergunta summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--cor-oliva);
  transition: transform 0.3s var(--curva-suave);
}

.pergunta summary::after {
  transform: rotate(90deg);
}

.pergunta[open] summary::after {
  transform: rotate(0deg);
}

.pergunta__resposta {
  padding: 0 40px 20px 0;
}

.pergunta__resposta > * + * {
  margin-top: 16px;
}

@supports (interpolate-size: allow-keywords) {
  .pergunta {
    interpolate-size: allow-keywords;
  }

  .pergunta::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s var(--curva-suave), content-visibility 0.3s allow-discrete;
  }

  .pergunta[open]::details-content {
    block-size: auto;
  }
}


/* ==========================================================================
   14. Componentes da página inicial
   ========================================================================== */

/* ---- Antes e depois: duas fotos sobrepostas e uma alça para arrastar ----
   <div class="antes-depois" data-antes-depois style="--posicao: 50%">
     <img class="antes-depois__depois" src="…" alt="…">
     <img class="antes-depois__antes" src="…" alt="…">
     <span class="antes-depois__linha" aria-hidden="true"></span>
     <span class="antes-depois__alca" aria-hidden="true"><img src="/assets/img/9RoHFkMblaYam3RLOJ9AoRRfBA.png" alt=""></span>
     <input class="antes-depois__controle" type="range" min="0" max="100" value="50" aria-label="Comparar antes e depois">
   </div> */

.antes-depois {
  --posicao: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--raio-cartao);
  background: var(--cor-lavanda);
  overflow: hidden;
  touch-action: pan-y;
}

.antes-depois > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.antes-depois__antes {
  clip-path: inset(0 calc(100% - var(--posicao)) 0 0);
}

.antes-depois__linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--posicao);
  width: 5px;
  margin-left: -2.5px;
  background: var(--cor-branco);
  pointer-events: none;
}

.antes-depois__alca {
  position: absolute;
  top: 50%;
  left: var(--posicao);
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  pointer-events: none;
}

.antes-depois__alca img {
  width: 56px;
  height: 56px;
}

/* O controle de verdade é um <input type="range"> invisível por cima de tudo */
.antes-depois__controle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.antes-depois:has(.antes-depois__controle:focus-visible) {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}

/* Legenda dentro da foto, embaixo à esquerda: não muda o tamanho do bloco.
   Fica por cima do controle sem pegar o toque nem o mouse.
   <figure class="antes-depois" …> … <figcaption class="antes-depois__legenda">…</figcaption></figure> */
.antes-depois__legenda {
  position: absolute;
  bottom: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--cor-titulo);
  font-size: var(--fs-legenda);
  line-height: 1.4;
  letter-spacing: var(--ls-padrao);
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .antes-depois__legenda {
    bottom: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
  }
}

/* ---- Carrossel de fotos (o "Slideshow" do Framer) ----
   <div class="carrossel" data-carrossel data-intervalo="3.5" aria-roledescription="carrossel" aria-label="…">
     <ul class="carrossel__trilho">
       <li class="carrossel__slide"><img …></li> …
     </ul>
     <button class="carrossel__seta carrossel__seta--anterior" type="button" aria-label="Foto anterior">…</button>
     <button class="carrossel__seta carrossel__seta--proxima" type="button" aria-label="Próxima foto">…</button>
     <div class="carrossel__pontos"></div>   (os pontos são criados pelo site.js)
   </div> */

.carrossel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--raio-cartao);
  overflow: hidden;
}

.carrossel__trilho {
  display: flex;
  height: 100%;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carrossel__trilho::-webkit-scrollbar {
  display: none;
}

.carrossel__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

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

.carrossel__seta {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.carrossel__seta img {
  width: 32px;
  height: 32px;
}

.carrossel__seta--anterior { left: 20px; }
.carrossel__seta--proxima { right: 20px; }

.carrossel__pontos {
  position: absolute;
  bottom: 10px;
  left: 50%;
  display: flex;
  padding: 0 5px;
  border-radius: var(--raio-pilula);
  background: rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
}

.carrossel__ponto {
  display: block;
  padding: 10px 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carrossel__ponto::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-branco);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.carrossel__ponto[aria-current="true"]::before {
  opacity: 1;
}

/* ---- Vídeo em laço (sem som), toca quando aparece na tela ----
   <video class="video-laco" data-video-laco src="/assets/video/…mp4" muted loop playsinline preload="none"></video> */

.video-laco {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: var(--cor-verde-claro);
  object-fit: cover;
}

/* Com data-video-tocar-no-celular, no celular e no tablet o vídeo só toca
   quando a pessoa toca nele (site.js, item 3). Enquanto toca, o "play"
   desenhado por cima some; parado, ele volta. */
.video-laco[data-video-tocar-no-celular][role="button"] {
  cursor: pointer;
}

/* no toque o :hover fica preso; aqui o vídeo não fica meio transparente */
.video-laco[data-video-tocar-no-celular][role="button"]:hover {
  opacity: 1;
}

.depoimento-video__caixa:has(> .video-laco[data-tocando]) > .depoimento-video__play {
  opacity: 0;
}

/* Bordas que esmaecem para o branco (lados da seção de depoimentos) */
.esmaecer-esquerda,
.esmaecer-direita {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 100px;
  pointer-events: none;
}

.esmaecer-esquerda { left: 0; background: linear-gradient(90deg, var(--cor-branco) 0%, rgba(255, 255, 255, 0) 100%); }
.esmaecer-direita { right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--cor-branco) 100%); }


/* ==========================================================================
   15. Botão flutuante do WhatsApp
   Aparece 1,5 s depois de a página abrir, como no site no ar. Vai em todas
   as páginas (veja _partes/whatsapp.html).
   ========================================================================== */

.whatsapp {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cor-whatsapp);
  box-shadow: var(--sombra-whatsapp);
  animation: whatsapp-entra 0.3s ease 1.5s both;
}

.whatsapp svg {
  width: 28px;
  height: 28px;
  fill: var(--cor-branco);
}

.whatsapp:focus-visible {
  border-radius: 50%;
}

@keyframes whatsapp-entra {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   15b. Aviso de cookies (criado pelo site.js até a pessoa escolher)
   Caixa branca no canto de baixo à esquerda, longe do botão do WhatsApp.
   ========================================================================== */

.aviso-cookies {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 340px;
  max-width: calc(100% - 140px);
  padding: 16px 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-imagem);
  background: var(--cor-branco);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  animation: aviso-entra 0.3s ease 0.8s both;
}

.aviso-cookies__texto {
  font-size: var(--fs-texto);
  line-height: 1.5;
  letter-spacing: var(--ls-padrao);
  color: var(--cor-texto);
}

.aviso-cookies__texto a {
  color: var(--cor-titulo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aviso-cookies__texto a:hover {
  color: var(--cor-oliva);
}

.aviso-cookies__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aviso-cookies__botao {
  min-height: 40px;
  padding: 8px 20px;
  border: 1px solid var(--cor-preto);
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--cor-preto);
  font: inherit;
  font-size: var(--fs-texto);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-padrao);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.aviso-cookies__botao:hover {
  opacity: 0.8;
}

.aviso-cookies__botao--escuro {
  background: var(--cor-preto);
  color: var(--cor-branco);
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Com o menu do celular aberto, o aviso sai da frente (ele cobriria o "Agendar consulta").
   Volta quando o menu fecha, e a escolha continua pendente. */
html.menu-aberto .aviso-cookies {
  display: none;
}

/* Celular: ocupa a largura até o botão do WhatsApp (que fica à direita) */
@media (max-width: 767.98px) {
  .aviso-cookies {
    left: 16px;
    right: 96px;
    bottom: 16px;
    width: auto;
    max-width: none;
    padding: 14px 16px;
  }
}


/* ==========================================================================
   16. Formulário (página Sobre, "Envie uma mensagem")
   ========================================================================== */

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.campo label {
  font-size: var(--fs-legenda);
  font-weight: 500;
  line-height: 1.3;
  color: var(--cor-titulo);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo-suave);
  color: var(--cor-titulo);
  font: inherit;
  font-size: var(--fs-legenda);
  letter-spacing: var(--ls-padrao);
}

.campo textarea {
  min-height: 120px;
  resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--cor-cinza-medio);
  opacity: 0.6;
}

.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 1px;
  border-radius: 8px;
}


/* ==========================================================================
   17. Entrada suave dos blocos
   Os blocos com [data-surgir] sobem 20 px e aparecem quando entram na tela.
   Só ficam escondidos quando o site.js marca o <html> com .js-surgir —
   sem JavaScript, ou com "reduzir movimento", tudo já aparece de cara.
   ========================================================================== */

.js-surgir [data-surgir] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duracao-entrada) var(--curva-suave),
              transform var(--duracao-entrada) var(--curva-suave);
  transition-delay: var(--atraso, 0s);
}

.js-surgir [data-surgir].surgiu {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-surgir [data-surgir] {
    opacity: 1;
    transform: none;
  }

  .botao__ponto::after {
    animation: none;
    opacity: 0;
  }

  .carrossel__trilho {
    scroll-behavior: auto;
  }
}

/* Na impressão tudo aparece */
@media print {
  .js-surgir [data-surgir] {
    opacity: 1 !important;
    transform: none !important;
  }

  .whatsapp,
  .aviso-cookies,
  .cabecalho__menu,
  .menu-celular {
    display: none !important;
  }
}


/* ==========================================================================
   18. Utilitários
   ========================================================================== */

/* Mostrar só em um tamanho de tela */
@media (min-width: 1200px) {
  .so-tablet, .so-celular, .ate-tablet { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .so-computador, .so-celular { display: none !important; }
}

@media (max-width: 767.98px) {
  .so-computador, .so-tablet, .desde-tablet { display: none !important; }
}

/* Pilhas (coluna) e linhas com espaço fixo entre os itens */
.pilha { display: flex; flex-direction: column; }
.linha { display: flex; flex-wrap: wrap; align-items: center; }

.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-56 { gap: 56px; }
.gap-64 { gap: 64px; }

/* Larguras máximas de texto usadas no Framer */
.mw-320 { max-width: 320px; }
.mw-400 { max-width: 400px; }
.mw-480 { max-width: 480px; }
.mw-550 { max-width: 550px; }
.mw-640 { max-width: 640px; }
.mw-800 { max-width: 800px; }