/* ==========================================================================
   FONTES LOCAIS
   ========================================================================== */
/* Só os pesos usados no site, em WOFF2 com o conjunto de caracteres latino (inclui acentos).
   Os .ttf originais completos estão em fonts/_originais. */
@font-face { font-family: "Ivy Mode"; src: url("../fonts/IvyMode-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ivy Mode"; src: url("../fonts/IvyMode-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* Textos dos acordeões de Áreas: abertura em 500 e fechamento em itálico */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ==========================================================================
   VARIÁVEIS
   ========================================================================== */
:root {
  --branco: #FFFFFF;
  --branco-gelo-claro: #FFFFFE;
  --gelo: #F5ECDB;
  --bege: #C9B29A;
  --marrom-claro: #907365;
  --marrom: #31190C;
  --preto-texto: #2C2C2C;
  --preto: #000000;
  --cinza-borda: #EAEAEA;
  --dourado: #CFA55F;
  --transparente-claro: rgba(233, 233, 233, 0.1);
  --efeito-botao: rgba(217, 217, 217, 0.2);

  /* Botões CTA (.btn-cta) - estado inicial e final do hover */
  --btn-cta-fundo: #F5ECDB;
  --btn-cta-fundo-translucido: rgba(245, 236, 219, 0);
  --btn-cta-texto: #907365;
  --btn-cta-fundo-hover: #C9B29A;
  --btn-cta-texto-hover: #FFFFFF;
  --btn-cta-duracao: 0.5s;
  --btn-cta-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* Botões CTA escuros (.btn-cta--escuro) - estado inicial e final do hover */
  --btn-cta-escuro-fundo: #907365;
  --btn-cta-escuro-fundo-translucido: rgba(144, 115, 101, 0);
  --btn-cta-escuro-texto: #FFFFFF;
  --btn-cta-escuro-fundo-hover: #C9B29A;
  --btn-cta-escuro-texto-hover: #907365;

  /* Botões redondos de seta (.btn-seta) - estado inicial e final do hover */
  --btn-seta-fundo: #907365;
  --btn-seta-icone: #FFFFFF;
  --btn-seta-fundo-hover: #C9B29A;
  --btn-seta-icone-hover: #31190C;
  --btn-seta-duracao: 0.3s;

  /* Botão CONTATO do menu - hover */
  --menu-contato-fundo-hover: var(--marrom-claro);
  --menu-contato-duracao: 0.3s;

  /* Botão MENU do header - hover (cores: --gelo/--marrom-claro → --bege/--marrom) */
  --menu-botao-duracao: 0.3s;

  /* Botões dos cards de Tratamentos (.btn-card) - hover */
  --btn-card-fundo-hover: var(--bege);
  --btn-card-duracao: 0.3s;

  /* Ícones redondos (.btn-icone: Instagram, WhatsApp, localização) - círculo gelo → bege no hover */
  --btn-icone-fundo: var(--gelo);
  --btn-icone-fundo-hover: var(--bege);
  --btn-icone-duracao: 0.3s;

  /* Botão flutuante de WhatsApp (.whatsapp-flutuante) */
  --whatsapp-flutuante-fundo: var(--marrom-claro);
  --whatsapp-flutuante-icone: var(--branco);
  --whatsapp-flutuante-fundo-hover: var(--bege);
  --whatsapp-flutuante-sombra: rgba(49, 25, 12, 0.25);
  --whatsapp-flutuante-entrada: 0.4s;
  --whatsapp-flutuante-duracao: 0.3s;

  /* Acordeões (Áreas e Projetos) */
  --acordeao-duracao: 0.5s;
  --acordeao-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* FAQ (cores: --marrom-claro fechada → --marrom aberta/hover) */
  --faq-pergunta: var(--marrom-claro);
  --faq-pergunta-aberta: var(--marrom);
  --faq-duracao: 0.5s;
  --faq-hover: 0.3s;
  --faq-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* Mega menu - só cores já existentes do site */
  --mega-menu-fundo: var(--marrom);
  --mega-menu-texto: var(--gelo);
  --mega-menu-destaque: var(--bege);
  --mega-menu-abrir: 0.6s;
  --mega-menu-fechar: 0.45s;
  --mega-menu-hover: 0.35s;
  --mega-menu-atraso: 0.3s;
  --mega-menu-intervalo: 60ms;
  --mega-menu-easing: cubic-bezier(0.22, 1, 0.36, 1);

  --fonte-titulo: "Ivy Mode", Georgia, serif;
  --fonte-texto: "Montserrat", Arial, sans-serif;

  --container: 1204px;
  --margem-lateral: 20px;
}

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

html { scroll-behavior: smooth; }
/* Lenis controla a rolagem sozinha; o smooth nativo do CSS atrapalharia */
html.lenis { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: 400;
  color: var(--preto-texto);
  background: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 600; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--margem-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.so-mobile { display: none; }

.cor-preto { color: var(--preto-texto); }
.cor-gelo { color: var(--gelo); }
.cor-marrom-claro { color: var(--marrom-claro); }

.titulo-secao {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  color: var(--marrom-claro);
}

/* Traço dourado no topo das seções Áreas e Tratamentos */
.secao-traco { position: relative; }
.secao-traco::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--transparente-claro) 0%, var(--dourado) 20%, var(--dourado) 80%, var(--transparente-claro) 100%);
}

/* ==========================================================================
   BOTÃO COM EFEITO (moldura translúcida + botão + seta)
   ========================================================================== */
.botao-efeito {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  border-radius: 15px;
  background: var(--efeito-botao);
  align-self: flex-start;
}
.botao-efeito__interno {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 246px;
  height: 60px;
  padding: 19px 39px;
  border-radius: 15px;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}
.botao-efeito__seta { width: 29px; height: 12px; flex-shrink: 0; }

.botao-efeito--claro .botao-efeito__interno {
  height: 62px;
  background: var(--gelo);
  color: var(--marrom-claro);
}
.botao-efeito--escuro .botao-efeito__interno {
  background: var(--marrom-claro);
  color: var(--branco);
}

.botao-efeito--pequeno {
  gap: 9.6px;
  padding: 4.8px 14.4px 4.8px 4.8px;
  border-radius: 12px;
}
.botao-efeito--pequeno .botao-efeito__interno {
  width: 197px;
  height: 49.6px;
  padding: 0;
  border-radius: 12px;
  font-size: 14.41px;
}
.botao-efeito--pequeno .botao-efeito__seta { width: 23.2px; height: 9.6px; }

/* Hover dos botões CTA (moldura + bloco claro + seta): cortina da direita para a esquerda */
.btn-cta .botao-efeito__interno {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--btn-cta-fundo);
  color: var(--btn-cta-texto);
  transition:
    background-color var(--btn-cta-duracao) var(--btn-cta-easing),
    color var(--btn-cta-duracao) var(--btn-cta-easing);
}
.btn-cta .botao-efeito__interno::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--btn-cta-fundo-hover);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--btn-cta-duracao) var(--btn-cta-easing);
}
.btn-cta .botao-efeito__seta {
  transition: transform var(--btn-cta-duracao) var(--btn-cta-easing);
}

/* Variação escura: mesma animação, só troca as cores (a seta mantém a cor atual) */
.btn-cta--escuro {
  --btn-cta-fundo: var(--btn-cta-escuro-fundo);
  --btn-cta-fundo-translucido: var(--btn-cta-escuro-fundo-translucido);
  --btn-cta-texto: var(--btn-cta-escuro-texto);
  --btn-cta-fundo-hover: var(--btn-cta-escuro-fundo-hover);
  --btn-cta-texto-hover: var(--btn-cta-escuro-texto-hover);
}

/* Estado final: hover (só com mouse), teclado e toque */
@media (hover: hover) {
  .btn-cta:hover .botao-efeito__interno {
    background-color: var(--btn-cta-fundo-translucido);
    color: var(--btn-cta-texto-hover);
  }
  .btn-cta:hover .botao-efeito__interno::before { transform: scaleX(1); }
  .btn-cta:hover .botao-efeito__seta { transform: rotate(-45deg); }
}
.btn-cta:focus-visible .botao-efeito__interno,
.btn-cta.is-tapped .botao-efeito__interno {
  background-color: var(--btn-cta-fundo-translucido);
  color: var(--btn-cta-texto-hover);
}
.btn-cta:focus-visible .botao-efeito__interno::before,
.btn-cta.is-tapped .botao-efeito__interno::before { transform: scaleX(1); }
.btn-cta:focus-visible .botao-efeito__seta,
.btn-cta.is-tapped .botao-efeito__seta { transform: rotate(-45deg); }

/* Movimento reduzido: só troca de cor, sem cortina e sem girar a seta */
@media (prefers-reduced-motion: reduce) {
  .btn-cta .botao-efeito__interno::before { display: none; }
  .btn-cta .botao-efeito__seta { transition: none; transform: none !important; }
  .btn-cta .botao-efeito__interno { transition-timing-function: ease; }
  .btn-cta:focus-visible .botao-efeito__interno,
  .btn-cta.is-tapped .botao-efeito__interno { background-color: var(--btn-cta-fundo-hover); }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .btn-cta:hover .botao-efeito__interno { background-color: var(--btn-cta-fundo-hover); }
}

/* Setas e pontos dos carrosséis */
.setas { display: flex; align-items: center; }
.seta { display: block; flex-shrink: 0; }
.seta img { width: 100%; height: 100%; }

/* Botões redondos de seta: só transição de cor (fundo e seta), sem movimento */
.btn-seta { color: var(--btn-seta-icone); }
.btn-seta svg { display: block; width: 100%; height: 100%; }
.btn-seta__fundo {
  fill: var(--btn-seta-fundo);
  transition: fill var(--btn-seta-duracao) ease;
}
.btn-seta path { transition: fill var(--btn-seta-duracao) ease; }

@media (hover: hover) {
  .btn-seta:hover { color: var(--btn-seta-icone-hover); }
  .btn-seta:hover .btn-seta__fundo { fill: var(--btn-seta-fundo-hover); }
}
.btn-seta:focus-visible,
.btn-seta.is-tapped { color: var(--btn-seta-icone-hover); }
.btn-seta:focus-visible .btn-seta__fundo,
.btn-seta.is-tapped .btn-seta__fundo { fill: var(--btn-seta-fundo-hover); }

.pontos { display: flex; align-items: center; gap: 6px; }
.ponto {
  display: block;
  width: 8.6px;
  height: 8.6px;
  border-radius: 72px;
  background: var(--bege);
}
.ponto--ativo { width: 23.65px; background: var(--marrom-claro); }

/* ==========================================================================
   MENU
   ========================================================================== */
.menu {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
.menu__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 140px;
  padding-block: 23px;
}
.menu__botao,
.menu__contato {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9.1px;
  padding: 18.19px 36.39px;
  border-radius: 8px;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
}
.menu__botao {
  justify-self: start;
  background: var(--gelo);
  color: var(--marrom-claro);
  transition:
    background-color var(--menu-botao-duracao) ease,
    color var(--menu-botao-duracao) ease;
}
.menu__botao-icone { display: block; flex-shrink: 0; width: 16.37px; height: 10.92px; }

/* Hover do MENU: só troca de cor (fundo, ícone e texto juntos), sem movimento */
@media (hover: hover) {
  .menu__botao:hover {
    background-color: var(--bege);
    color: var(--marrom);
  }
}
.menu__botao:focus-visible,
.menu__botao.is-tapped {
  background-color: var(--bege);
  color: var(--marrom);
}
.menu__logo { justify-self: center; }
.menu__logo img { width: 146px; }
.menu__contato {
  justify-self: end;
  background: rgba(245, 236, 219, 0.05);
  border: 1px solid var(--cinza-borda);
  color: var(--branco-gelo-claro);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  transition:
    background-color var(--menu-contato-duracao) ease,
    border-color var(--menu-contato-duracao) ease;
}

/* Hover do CONTATO: preenche com a cor sólida e a borda some na mesma cor (sem movimento) */
@media (hover: hover) {
  .menu__contato:hover {
    background-color: var(--menu-contato-fundo-hover);
    border-color: var(--menu-contato-fundo-hover);
  }
}
.menu__contato:focus-visible {
  background-color: var(--menu-contato-fundo-hover);
  border-color: var(--menu-contato-fundo-hover);
}

/* ==========================================================================
   MEGA MENU (overlay de tela cheia)
   - Fechado: invisível e recortado no topo (clip-path).
   - .is-aberto: a cortina desce e os itens entram um após o outro (--i).
   ========================================================================== */
.mega-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mega-menu-fundo);
  color: var(--mega-menu-texto);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  /* Fechar: os itens somem e a cortina sobe logo depois */
  transition:
    clip-path var(--mega-menu-fechar) var(--mega-menu-easing) 0.1s,
    visibility 0s linear calc(var(--mega-menu-fechar) + 0.1s);
}
.mega-menu.is-aberto {
  visibility: visible;
  clip-path: inset(0);
  transition:
    clip-path var(--mega-menu-abrir) var(--mega-menu-easing),
    visibility 0s;
}

/* Contorno de foco (teclado) visível sobre o fundo escuro */
.mega-menu :focus-visible {
  outline: 1px solid var(--mega-menu-destaque);
  outline-offset: 4px;
}

.mega-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Topo: logo à esquerda e X à direita (mesma altura do header) */
.mega-menu__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 140px;
  padding-block: 23px;
}
.mega-menu__logo img { width: 146px; }
.mega-menu__fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 53px;
  border-radius: 8px;
  background: var(--gelo);
  color: var(--marrom-claro);
  transition: background-color var(--mega-menu-hover) ease;
}
@media (hover: hover) {
  .mega-menu__fechar:hover { background-color: var(--mega-menu-destaque); }
}
.mega-menu__fechar:focus-visible { background-color: var(--mega-menu-destaque); }

/* Lista de links */
.mega-menu__nav {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 16px 32px;
}
.mega-menu__lista {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-menu__item { position: relative; }
.mega-menu__item + .mega-menu__item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--mega-menu-texto);
  opacity: 0.15;
}
.mega-menu__link {
  display: block;
  padding-block: clamp(6px, 1.3vh, 14px);
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(30px, 5.2vh, 56px);
  line-height: 1.1;
  color: var(--mega-menu-texto);
  transition:
    color var(--mega-menu-hover) ease,
    transform var(--mega-menu-hover) var(--mega-menu-easing);
}
@media (hover: hover) {
  .mega-menu__link:hover {
    color: var(--mega-menu-destaque);
    transform: translateX(12px);
  }
}
.mega-menu__link:focus-visible {
  color: var(--mega-menu-destaque);
  transform: translateX(12px);
}

/* Rodapé do menu: atendimento + botão de agendamento */
.mega-menu__rodape {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding-block: 32px 48px;
}
.mega-menu__rodape::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--mega-menu-texto);
  opacity: 0.15;
}
.mega-menu__atendimento {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.mega-menu__rotulo {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--mega-menu-destaque);
}
.mega-menu__info {
  font-size: 16px;
  line-height: 1.4;
  color: var(--mega-menu-texto);
}
.mega-menu__redes {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.mega-menu__redes img,
.mega-menu__redes svg { width: 40px; height: 40px; }
.mega-menu__agendar { align-self: flex-end; }

/* Entrada escalonada dos itens e do rodapé */
.mega-menu__item,
.mega-menu__rodape {
  opacity: 0;
  transform: translateY(20px);
  /* Fechar: todos somem juntos */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mega-menu.is-aberto .mega-menu__item,
.mega-menu.is-aberto .mega-menu__rodape {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease calc(var(--mega-menu-atraso) + var(--i, 0) * var(--mega-menu-intervalo)),
    transform 0.6s var(--mega-menu-easing) calc(var(--mega-menu-atraso) + var(--i, 0) * var(--mega-menu-intervalo));
}

/* Telas de desktop baixas (ex.: notebook 1366 × 768): menu mais compacto para caber sem rolagem */
@media (min-width: 769px) and (max-height: 800px) {
  .mega-menu__topo { min-height: 100px; padding-block: 16px; }
  .mega-menu__nav { padding-block: 8px 16px; }
  .mega-menu__link { font-size: clamp(28px, 4.6vh, 40px); }
  .mega-menu__rodape { padding-block: 20px 28px; }
}

/* Página de fundo travada enquanto o menu está aberto */
html.menu-aberto { scrollbar-gutter: stable; }
body.menu-travado {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* Movimento reduzido: só fade, sem cortina, sem escalonamento e sem deslizar */
@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .mega-menu.is-aberto {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .mega-menu.is-aberto {
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s;
  }
  .mega-menu__item,
  .mega-menu__rodape,
  .mega-menu.is-aberto .mega-menu__item,
  .mega-menu.is-aberto .mega-menu__rodape {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mega-menu__link,
  .mega-menu__link:hover,
  .mega-menu__link:focus-visible {
    transform: none;
    transition: color var(--mega-menu-hover) ease;
  }
}

/* ==========================================================================
   01 - HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 200px;
  background: var(--bege) url("../assets/hero-fundo.webp") center / cover no-repeat;
}
.hero__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 603px;
  color: var(--branco);
}
.hero__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.2;
}
.hero__descricao {
  font-size: 18px;
  line-height: 1.2;
}

/* ==========================================================================
   SEPARADOR
   ========================================================================== */
.separador {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.separador::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--dourado) 0%, var(--transparente-claro) 50%, var(--dourado) 100%);
}
.separador img {
  position: relative;
  width: 71px;
  height: 64px;
}

/* ==========================================================================
   02 - INTRO
   ========================================================================== */
.intro { padding: 68px 0 100px; }
.intro__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.intro__imagem { flex: 0 1 592px; }
.intro__imagem img {
  width: 100%;
  aspect-ratio: 592 / 716;
  object-fit: cover;
  border-radius: 20px;
}
.intro__texto {
  flex: 0 1 573px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.intro__titulo { max-width: 475px; }
.intro__descricao {
  max-width: 548px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--preto-texto);
}

/* ==========================================================================
   ACORDEÃO (genérico: Áreas e Projetos)
   - Item com .acordeao--aberto: altura fluida (grid 0fr → 1fr), texto com
     fade + subida e seta girando 180°. O espaçamento fica dentro do conteúdo.
   ========================================================================== */
.acordeao__seta { transition: transform var(--acordeao-duracao) var(--acordeao-easing); }
.acordeao--aberto .acordeao__seta { transform: rotate(180deg); }
.acordeao__corpo {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  visibility: hidden; /* fechado: fora do Tab e dos leitores de tela */
  transition:
    grid-template-rows var(--acordeao-duracao) var(--acordeao-easing),
    visibility 0s linear var(--acordeao-duracao);
}
.acordeao--aberto .acordeao__corpo {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--acordeao-duracao) var(--acordeao-easing),
    visibility 0s;
}
.acordeao__interno { min-height: 0; overflow: hidden; }
.acordeao__conteudo {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--acordeao-duracao) var(--acordeao-easing),
    transform var(--acordeao-duracao) var(--acordeao-easing);
}
.acordeao--aberto .acordeao__conteudo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .acordeao__seta,
  .acordeao__corpo,
  .acordeao--aberto .acordeao__corpo,
  .acordeao__conteudo { transition: none; }
  .acordeao__conteudo { transform: none; }
}
/* ==========================================================================
   03 - ÁREAS
   ========================================================================== */
.areas { padding-block: 100px; }
.areas__titulo { max-width: 899px; margin-bottom: 24px; }
.areas__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* abrir um card não estica os outros da mesma linha */
  gap: 20px;
}
.area-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 298px;
  padding: 32px 16px 24px;
  background: var(--branco);
  border: 1px solid var(--marrom-claro);
  border-radius: 30px;
}
.area-card--centro { justify-content: center; padding-top: 24px; }
.area-card__icone {
  width: 108px;
  height: 108px;
  border-radius: 50%;
}
.area-card__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  color: var(--preto);
}
.area-card__titulo--102 { max-width: 102px; }
.area-card__titulo--168 { max-width: 168px; }
.area-card__titulo--178 { max-width: 178px; }
.area-card__titulo--224 { max-width: 224px; }
.area-card__titulo--322 { max-width: 322px; }
.area-card__saiba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 178px;
  height: 24px;
  padding: 10px;
  border-radius: 5px;
  background: var(--marrom-claro);
  color: var(--gelo);
  font-size: 10px;
  line-height: 1.2;
}
.area-card__saiba img { width: 5.5px; height: auto; }

/* Acordeão "Saiba mais": botão + texto num só bloco (fechado, o card fica igual) */
.area-card__acordeao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.area-card__saiba {
  position: relative;
  text-align: left;
}
/* Área de toque de 44px sem mudar o tamanho visível do botão */
.area-card__saiba::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}
/* Texto à esquerda, na largura toda do card (as margens vêm do padding do card) */
.area-card__texto {
  padding-top: 16px; /* mesmo espaço (gap) entre os itens do card */
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: var(--preto-texto);
}
.area-card__texto p { margin: 0; }
.area-card__texto p + p { margin-top: 12px; }
.area-card__texto p:first-child { font-weight: 500; } /* abertura: leve destaque */
.area-card__fechamento { font-style: italic; }

.area-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 298px;
  padding: 40px 24px;
  border-radius: 30px;
  background: var(--marrom-claro) url("../assets/areas-cta-fundo.webp") center / cover no-repeat;
}
.area-cta__titulo {
  font-family: var(--fonte-titulo);
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  color: var(--branco);
}
.area-cta .botao-efeito { align-self: center; }

/* ==========================================================================
   04 - CLAREZA
   ========================================================================== */
.clareza {
  padding-block: 100px;
  overflow-x: hidden; /* fallback */
  overflow-x: clip;   /* o carrossel vai até a borda da tela sem gerar rolagem horizontal */
}
.clareza .container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.clareza__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.clareza__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 699px;
}
.clareza__descricao {
  max-width: 490px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--preto-texto);
}
.clareza__setas { gap: 18.77px; }
.clareza__setas .seta { width: 61.72px; height: 62.18px; }

/* Carrossel: viewport com a largura do container; 4 cards inteiros visíveis
   (ativo + 3 próximos). Cards extras e clones ficam fora e só aparecem na transição. */
.clareza__carrossel {
  --card-visiveis: 4;
  --card-gap: 20px;
  /* 286px no container de 1204px */
  --card-largura: calc((100% - var(--card-gap) * (var(--card-visiveis) - 1)) / var(--card-visiveis));
  --card-altura: 384px;   /* altura do card ativo (reservada no container) */
  --card-subida: 45px;    /* quanto o card ativo cresce para cima */
  --card-borda: 11px;     /* margem marrom em volta da imagem */
  --card-imagem: 317px;   /* altura da imagem */
  --clareza-duracao: 0.7s;
  --clareza-easing: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  height: var(--card-altura); /* já inclui a subida do card ativo: nada é cortado em cima */
  overflow: hidden; /* fallback */
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
}
.clareza__trilho {
  position: relative;
  height: 100%;
  transition: opacity 0.3s ease;
}
.clareza__trilho.is-oculto { opacity: 0; }

.clareza-card {
  --slot: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--card-largura);
  height: var(--card-altura);
  /* 100% = largura do próprio card */
  transform: translateX(calc(var(--slot) * (100% + var(--card-gap))));
  transition:
    transform var(--clareza-duracao) var(--clareza-easing),
    opacity var(--clareza-duracao) var(--clareza-easing);
}
/* Posição inicial antes do JS */
.clareza-card:nth-child(2) { --slot: 1; }
.clareza-card:nth-child(3) { --slot: 2; }
.clareza-card:nth-child(4) { --slot: 3; }
.clareza-card:nth-child(5) { --slot: 4; }
.clareza-card.is-saindo { opacity: 0; }

/* Camada de baixo: moldura marrom (inativo: só a parte de baixo aparece) */
.clareza-card__fundo {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--marrom-claro);
  clip-path: inset(var(--card-subida) 0 0 0 round 20px);
  transition: clip-path var(--clareza-duracao) var(--clareza-easing);
}
/* Legenda: na faixa de baixo, escondida atrás da imagem no card inativo */
.clareza-card__legenda {
  position: absolute;
  z-index: 1;
  left: var(--card-borda);
  right: var(--card-borda);
  top: calc(var(--card-borda) + var(--card-imagem));
  bottom: var(--card-borda);
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  color: var(--branco);
}
/* Legenda que não cabe em 2 linhas a 14px: 3 linhas mais juntas para caber na faixa */
.clareza-card__legenda--longa { line-height: 1.05; }
/* Camada de cima: quadro da imagem */
.clareza-card__quadro {
  position: absolute;
  z-index: 2;
  left: var(--card-borda);
  right: var(--card-borda);
  top: calc(var(--card-subida) + var(--card-borda));
  height: var(--card-imagem);
  border-radius: 20px;
  overflow: hidden;
  background: var(--marrom-claro); /* cobre a legenda nos cantos transparentes das imagens */
  transition: transform var(--clareza-duracao) var(--clareza-easing);
}
.clareza-card__quadro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card ativo: cresce para cima e a imagem sobe, revelando a legenda */
.clareza-card.is-ativo .clareza-card__fundo { clip-path: inset(0 0 0 0 round 20px); }
.clareza-card.is-ativo .clareza-card__quadro { transform: translateY(calc(var(--card-subida) * -1)); }

/* Reposicionamento invisível (loop) e modo sem movimento */
.clareza-card.sem-transicao,
.clareza-card.sem-transicao .clareza-card__fundo,
.clareza-card.sem-transicao .clareza-card__quadro { transition: none; }

/* ==========================================================================
   05 - TRATAMENTOS
   ========================================================================== */
.tratamentos { padding-block: 100px; }
.tratamentos__titulo { margin-bottom: 24px; }
.tratamentos__lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trat-card {
  display: grid;
  grid-template-columns: 694fr 489fr;
  gap: 21px;
}
.trat-card--invertido { grid-template-columns: 489fr 694fr; }
.trat-card--invertido .trat-card__imagem { order: 2; }

.trat-card__imagem { display: block; }
.trat-card__imagem img {
  width: 100%;
  height: 100%;
  aspect-ratio: 694 / 464;
  object-fit: cover;
  border-radius: 15px;
  background: var(--gelo);
}
.trat-card__quadro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 464px;
  padding: 40px 24px;
  background: var(--branco);
  border: 2px solid var(--marrom-claro);
  border-radius: 15px;
}
.trat-card__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 347px;
}
.trat-card__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--marrom);
}
.trat-card__titulo--estreito { max-width: 232px; }
.trat-card__descricao {
  max-width: 317px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--preto-texto);
}
.trat-card__descricao--larga { max-width: none; }
.trat-card__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 10px;
  min-height: 50px;
  padding: 16px 24px 15px;
  border-radius: 10px;
  background: var(--marrom-claro);
  color: var(--branco);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
.trat-card__botao img { width: 23px; height: 10px; }

/* Hover dos botões dos cards: só o fundo muda (texto e seta continuam brancos) */
.btn-card { transition: background-color var(--btn-card-duracao) ease; }
@media (hover: hover) {
  .btn-card:hover { background-color: var(--btn-card-fundo-hover); }
}
.btn-card:focus-visible,
.btn-card.is-tapped { background-color: var(--btn-card-fundo-hover); }

/* ==========================================================================
   06 - SOBRE
   ========================================================================== */
.sobre {
  padding-block: 160px;
  background: var(--marrom-claro) url("../assets/sobre-fundo.webp") right center / cover no-repeat;
}
.sobre__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 692px;
}
.sobre__titulo { max-width: 428px; color: var(--gelo); }
.sobre__descricao {
  max-width: 667px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--branco);
}
.sobre__local {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--branco);
}
.sobre__local > img { width: 24px; height: 30.87px; flex-shrink: 0; }
.sobre__endereco { max-width: 476px; }
.sobre__cidade {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  line-height: 1.2;
}
.sobre__rua {
  font-size: 18px;
  line-height: 1.2;
}

/* ==========================================================================
   07 - EQUIPE
   ========================================================================== */
.equipe {
  --equipe-duracao: 0.7s;
  --equipe-easing: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  padding: 99px 0 100px;
  background: var(--branco);
}
.equipe::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 812px;
  background: url("../assets/equipe-fundo.webp") center top / cover no-repeat;
}
.equipe .container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.equipe__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 389px;
}
.equipe__titulo { color: var(--preto-texto); }
.equipe__descricao {
  font-size: 18px;
  line-height: 1.2;
  color: var(--preto-texto);
}
/* Carrossel: viewport com a largura do container; 3 cards inteiros visíveis.
   Os demais ficam fora (à direita) e só aparecem na transição. */
.equipe__carrossel {
  --card-visiveis: 3;
  --card-gap: 20px;
  /* 388px no container de 1204px */
  --card-largura: calc((100% - var(--card-gap) * (var(--card-visiveis) - 1)) / var(--card-visiveis));
  overflow: hidden; /* fallback */
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
}
/* Todos os cards na mesma célula do grid: a altura vem do próprio card (aspect-ratio) */
.equipe__trilho {
  display: grid;
  transition: opacity 0.3s ease;
}
.equipe__trilho.is-oculto { opacity: 0; }
.equipe-card {
  --slot: 0;
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: var(--card-largura);
  aspect-ratio: 388 / 500;
  padding: 68px 24px;
  border-radius: 20px;
  overflow: hidden;
  transform: translateX(calc(var(--slot) * (100% + var(--card-gap))));
  transition:
    transform var(--equipe-duracao) var(--equipe-easing),
    opacity var(--equipe-duracao) var(--equipe-easing);
}
/* Posições iniciais (antes do JS) */
.equipe-card:nth-child(2) { --slot: 1; }
.equipe-card:nth-child(3) { --slot: 2; }
.equipe-card:nth-child(4) { --slot: 3; }
.equipe-card:nth-child(5) { --slot: 4; }
.equipe-card:nth-child(6) { --slot: 5; }
.equipe-card:nth-child(7) { --slot: 6; }
.equipe-card.is-saindo { opacity: 0; }
.equipe-card.sem-transicao { transition: none; }
.equipe-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.equipe-card__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%; /* a especialidade ocupa uma linha só e precisa da largura do card */
  text-align: center;
  color: var(--branco);
}
.equipe-card__nome {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}
.equipe-card__area {
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap; /* especialidade sempre em uma linha */
}
/* Duas linhas (quebra com <br>): a 2ª desce para dentro do espaço de baixo do card,
   assim o nome fica na mesma altura dos outros cards (1.2em = altura de uma linha) */
.equipe-card__area--duas-linhas {
  margin-bottom: -1.2em;
}
.equipe__baixo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.equipe__setas { gap: 18px; }
.equipe__setas .seta { width: 52px; height: 53px; }

/* Paginação: a pílula "escorrega" junto com o carrossel */
.equipe__pontos .ponto {
  flex-shrink: 0;
  transition:
    width 0.5s var(--equipe-easing),
    background-color 0.5s var(--equipe-easing);
}
@media (prefers-reduced-motion: reduce) {
  .equipe__pontos .ponto { transition: none; }
}

/* ==========================================================================
   08 - PROJETOS
   ========================================================================== */
.projetos { padding-block: 100px; background: var(--branco); }
.projetos__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* abrir um card não estica os outros */
  gap: 20px;
}
.projeto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.projeto__imagem {
  width: 100%;
  aspect-ratio: 388 / 329;
  object-fit: cover;
  border-radius: 50px;
}
.projeto__sobre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 309px;
  height: 42px;
  padding: 10px;
  border-radius: 43px;
  background: var(--marrom-claro);
  color: var(--gelo);
  font-size: 12px;
  line-height: 1.2;
}
.projeto__sobre img { width: 9px; height: 5px; }

/* Acordeão "Sobre o...": pílula + texto num só bloco, para o espaço até o
   botão "Agendar" continuar o mesmo (gap do card) quando estiver fechado.
   A animação vem das classes genéricas .acordeao__* */
.projeto__acordeao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 309px; /* mesma largura da pílula: o texto alinha com ela */
}
.projeto__sobre {
  position: relative;
  text-align: left;
}
/* Área de toque de 46px sem mudar o tamanho visível da pílula */
.projeto__sobre::after {
  content: "";
  position: absolute;
  inset: -2px 0;
}
.projeto__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px; /* mesmo espaço do card entre pílula e conteúdo */
  font-size: 18px;
  line-height: 1.2;
  color: var(--preto-texto);
}
.projeto__grupo { display: flex; flex-direction: column; gap: 8px; }
.projeto__subtitulo {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--preto-texto);
}
.projeto__tags {
  font-size: 14px;
  line-height: 1.5;
  color: var(--marrom-claro);
}
.projeto__fechamento {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  line-height: 1.2;
  color: var(--marrom);
}
.projeto__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 224px;
  max-width: 100%;
  height: 42px;
  border-radius: 71px;
  background: var(--bege);
  color: var(--marrom);
  font-family: var(--fonte-titulo);
  font-size: 16px;
  line-height: 1.2;
}

/* ==========================================================================
   09 - DEPOIMENTOS
   ========================================================================== */
.depoimentos {
  --depo-duracao: 0.7s;
  --depo-easing: cubic-bezier(0.22, 1, 0.36, 1);
  padding-block: 100px;
  background: var(--branco);
}
.depoimentos__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 93px;
}
.depoimentos__esq {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 224px;
}
.depoimentos__setas { gap: 28px; }
.depoimentos__setas .seta { width: 71px; height: 71.53px; }

.depoimentos__carrossel {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
/* No Figma o indicador ativo é vertical (8,6 × 23,65) */
.depoimentos__pontos { flex-direction: column; flex-shrink: 0; }
.depoimentos__pontos .ponto {
  flex-shrink: 0;
  transition:
    width 0.5s var(--depo-easing),
    height 0.5s var(--depo-easing),
    background-color 0.5s var(--depo-easing);
}
.depoimentos__pontos .ponto--ativo { width: 8.6px; height: 23.65px; }
@media (prefers-reduced-motion: reduce) {
  .depoimentos__pontos .ponto { transition: none; }
}

.depo-card {
  --depo-rodape: 112px; /* altura da faixa marrom */
  --depo-desloca: 40px; /* quanto o conteúdo sobe/desce na troca (desktop) */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 694px;
  min-height: 561px;
  border: 1px solid var(--marrom-claro);
  border-radius: 20px;
  background: var(--branco);
  overflow: hidden; /* fallback */
  overflow: clip;
  touch-action: pan-y; /* swipe horizontal sem bloquear a rolagem vertical */
}
/* Faixa marrom parada: só o nome e as estrelas trocam por cima dela */
.depo-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: var(--depo-rodape);
  background: var(--marrom-claro);
}
/* Todos os depoimentos na mesma célula: a altura do card vem do mais longo */
.depo-card__trilho {
  flex: 1;
  display: grid;
  transition: opacity 0.3s ease;
}
.depo-card__trilho.is-oculto { opacity: 0; }
.depo-slide {
  --slot: 0;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Desktop: troca vertical. Abaixo (slot > 0) e acima (slot < 0), invisível */
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(clamp(-1, var(--slot), 1) * var(--depo-desloca)));
  transition:
    transform var(--depo-duracao) var(--depo-easing),
    opacity var(--depo-duracao) var(--depo-easing),
    visibility 0s linear var(--depo-duracao);
}
.depo-slide.is-ativo {
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--depo-duracao) var(--depo-easing),
    opacity var(--depo-duracao) var(--depo-easing),
    visibility 0s;
}
.depo-slide.sem-transicao { transition: none; }
.depo-card__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 89px 71px 40px;
}
.depo-card__aspas { width: 77.67px; height: 64.68px; }
.depo-card__texto {
  max-width: 550px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--preto);
}
.depo-card__rodape {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--depo-rodape);
  padding: 16px 71px;
}
.depo-card__nome {
  font-family: var(--fonte-titulo);
  font-size: 32px;
  line-height: 1.2;
  color: var(--branco);
}
.depo-card__estrelas { width: 140px; height: 20px; }

/* ==========================================================================
   10 - FAQ
   ========================================================================== */
.faq { padding-block: 100px; background: var(--branco); }
.faq .container {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.faq__titulo { color: var(--preto-texto); }
.faq__lista {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.faq-item {
  --faq-espaco: 45px; /* distância entre a pergunta e a resposta */
  display: flex;
  flex-direction: column;
  padding-bottom: 45px;
  border-bottom: 1px solid var(--marrom-claro);
}
.faq-item__pergunta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  text-align: left;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 24px;
  line-height: normal;
  color: var(--faq-pergunta);
  /* Hover e fechamento */
  transition: color var(--faq-hover) ease;
}
.faq-item--aberto .faq-item__pergunta {
  color: var(--faq-pergunta-aberta);
  /* Abertura: cor muda junto com a altura */
  transition: color var(--faq-duracao) var(--faq-easing);
}
@media (hover: hover) {
  .faq-item__pergunta:hover { color: var(--faq-pergunta-aberta); }
}
.faq-item__pergunta:focus-visible { color: var(--faq-pergunta-aberta); }

/* Ícone "+" / "−": a linha vertical gira 90° e some ao abrir */
.faq-icone { display: block; width: 20px; height: 20px; flex-shrink: 0; overflow: visible; }
.faq-icone__vertical {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--faq-duracao) var(--faq-easing),
    opacity var(--faq-duracao) var(--faq-easing);
}
.faq-item--aberto .faq-icone__vertical { transform: rotate(90deg); opacity: 0; }

/* Altura fluida: grid 0fr → 1fr */
.faq-item__corpo {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden; /* fechado: fora do Tab e dos leitores de tela */
  transition:
    grid-template-rows var(--faq-duracao) var(--faq-easing),
    visibility 0s linear var(--faq-duracao);
}
.faq-item--aberto .faq-item__corpo {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--faq-duracao) var(--faq-easing),
    visibility 0s;
}
.faq-item__corpo-interno { min-height: 0; overflow: hidden; }
.faq-item__resposta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: var(--faq-espaco);
  font-size: 18px;
  line-height: normal;
  color: var(--preto-texto);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--faq-duracao) var(--faq-easing),
    transform var(--faq-duracao) var(--faq-easing);
}
.faq-item--aberto .faq-item__resposta { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .faq-item__corpo,
  .faq-item--aberto .faq-item__corpo,
  .faq-item__resposta,
  .faq-icone__vertical { transition: none; }
  .faq-item__resposta { transform: none; }
}

/* ==========================================================================
   11 - CTA
   ========================================================================== */
.cta {
  padding-block: 100px;
  background: var(--marrom) url("../assets/cta-fundo.webp") center / cover no-repeat;
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: calc(616px + var(--margem-lateral) * 2);
  text-align: center;
  color: var(--branco);
}
.cta__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 59px;
  line-height: 1.2;
}
.cta__descricao {
  max-width: 542px;
  font-size: 18px;
  line-height: 1.2;
}
.cta .botao-efeito { align-self: center; }

/* ==========================================================================
   12 - MAPA
   ========================================================================== */
.mapa {
  display: flex;
  align-items: flex-end;
  min-height: 720px;
  padding-block: 100px;
  position: relative;
  overflow: hidden;
}
/* Mapa do Google ocupando toda a área da seção (fundo claro até carregar) */
.mapa__quadro {
  position: absolute;
  inset: 0;
  background: var(--gelo);
}
.mapa__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Desktop com Lenis: camada que deixa a rodinha rolar a página; um clique
   libera o mapa e, ao sair com o mouse, a camada volta */
.mapa__trava {
  position: absolute;
  inset: 0;
  display: none;
  cursor: pointer;
}
.mapa--com-trava .mapa__trava { display: block; }
.mapa--com-trava.mapa--livre .mapa__trava { display: none; }
/* O conteúdo fica por cima do mapa, sem bloquear o mapa fora do botão */
.mapa__inner { position: relative; pointer-events: none; }
.mapa__botao { pointer-events: auto; }
.mapa__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 65px;
  padding: 16px 24px 15px;
  border-radius: 10px;
  background: var(--marrom-claro);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
  color: var(--branco);
  font-size: 16px;
  line-height: 1.2;
}
.mapa__botao img { width: 23px; height: 10px; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape {
  padding: 60px 0 62px;
  background: var(--marrom-claro);
}
.rodape__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.rodape__logo { width: 190px; }
.rodape__direita {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 384px;
}
.rodape__redes {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.rodape__redes img,
.rodape__redes svg { width: 44.97px; height: 44.53px; }

/* Ícones redondos de redes/localização (Instagram, WhatsApp, localização) no
   mega menu e no rodapé, ambos sobre fundo escuro: só o círculo muda de cor */
.btn-icone { display: block; color: var(--btn-icone-fundo); transition: color var(--btn-icone-duracao) ease; }
.btn-icone svg { display: block; }
.btn-icone__desenho { fill: var(--preto-texto); }
@media (hover: hover) {
  .btn-icone:hover { color: var(--btn-icone-fundo-hover); }
}
.btn-icone:focus-visible,
.btn-icone.is-tapped { color: var(--btn-icone-fundo-hover); }

/* ==========================================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   - Escondido até passar do hero e quando o rodapé aparece (.is-visivel, js/main.js).
   - Some com o mega menu aberto (html.menu-aberto). z-index abaixo do mega menu (100).
   - Entrada usa translate; hover usa scale: propriedades separadas, durações separadas.
   ========================================================================== */
.whatsapp-flutuante {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--whatsapp-flutuante-fundo);
  color: var(--whatsapp-flutuante-icone);
  box-shadow: 0 4px 14px var(--whatsapp-flutuante-sombra);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 16px;
  transition:
    opacity var(--whatsapp-flutuante-entrada) ease,
    translate var(--whatsapp-flutuante-entrada) ease,
    visibility 0s linear var(--whatsapp-flutuante-entrada),
    background-color var(--whatsapp-flutuante-duracao) ease,
    scale var(--whatsapp-flutuante-duracao) ease;
}
.whatsapp-flutuante svg { width: 30px; height: 30px; }
.whatsapp-flutuante.is-visivel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
  transition:
    opacity var(--whatsapp-flutuante-entrada) ease,
    translate var(--whatsapp-flutuante-entrada) ease,
    visibility 0s,
    background-color var(--whatsapp-flutuante-duracao) ease,
    scale var(--whatsapp-flutuante-duracao) ease;
}
html.menu-aberto .whatsapp-flutuante {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (hover: hover) {
  .whatsapp-flutuante:hover {
    background-color: var(--whatsapp-flutuante-fundo-hover);
    scale: 1.06;
  }
}
.whatsapp-flutuante:focus-visible,
.whatsapp-flutuante.is-tapped {
  background-color: var(--whatsapp-flutuante-fundo-hover);
  scale: 1.06;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-flutuante,
  .whatsapp-flutuante.is-visivel {
    translate: none;
    scale: none;
    transition:
      opacity var(--whatsapp-flutuante-entrada) ease,
      visibility 0s linear var(--whatsapp-flutuante-entrada),
      background-color var(--whatsapp-flutuante-duracao) ease;
  }
  .whatsapp-flutuante.is-visivel { transition-delay: 0s; }
  .whatsapp-flutuante:hover,
  .whatsapp-flutuante:focus-visible,
  .whatsapp-flutuante.is-tapped { scale: none; }
}
.rodape__copy {
  font-size: 13.56px;
  line-height: 1.2;
  text-align: center;
  color: var(--branco);
}

/* ==========================================================================
   TELAS INTERMEDIÁRIAS (evita quebra entre desktop e mobile)
   ========================================================================== */
@media (max-width: 1100px) {
  .trat-card,
  .trat-card--invertido { grid-template-columns: 1fr 1fr; }
  .depoimentos__inner { gap: 40px; }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  .so-desktop { display: none; }
  .so-mobile { display: inline; }

  /* Botão flutuante de WhatsApp: menor e mais perto das bordas */
  .whatsapp-flutuante {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
  }
  .whatsapp-flutuante svg { width: 27px; height: 27px; }

  .titulo-secao { font-size: 32px; }

  /* Botão com efeito (versões mobile: largura total de 380) */
  .hero .botao-efeito,
  .intro .botao-efeito,
  .sobre .botao-efeito {
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
    padding: 6px 25px 6px 6px;
  }
  .hero .botao-efeito__interno,
  .intro .botao-efeito__interno,
  .sobre .botao-efeito__interno {
    width: 294px;
    max-width: calc(100% - 60px);
    height: 62px;
  }
  .intro .botao-efeito__interno { color: var(--gelo); }

  /* MENU */
  .menu__inner {
    display: flex;
    justify-content: space-between;
    min-height: 80px;
    padding-block: 0;
  }
  .menu__logo { order: 1; }
  .menu__logo img { width: 71px; }
  .menu__botao {
    order: 2;
    width: 34px;
    height: 34px;
    padding: 0;
  }
  .menu__botao-texto,
  .menu__contato { display: none; }

  /* MEGA MENU */
  .mega-menu__topo { min-height: 80px; padding-block: 0; }
  .mega-menu__logo img { width: 71px; }
  .mega-menu__fechar { width: 44px; height: 44px; }
  .mega-menu__nav { padding-block: 8px 24px; }
  .mega-menu__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-block: clamp(4px, 0.8vh, 8px);
    font-size: clamp(24px, 4vh, 32px);
  }
  .mega-menu__rodape {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-block: 24px 32px;
  }
  .mega-menu__info { font-size: 15px; }
  .mega-menu__agendar {
    align-self: stretch;
    gap: 18px;
    padding: 6px 25px 6px 6px;
  }
  .mega-menu__agendar .botao-efeito__interno {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  /* HERO */
  .hero {
    padding: 451px 0 60px;
    background: var(--marrom-claro) url("../assets/hero-fundo-mobile.webp") center top / 100% auto no-repeat;
  }
  .hero__texto { max-width: 380px; margin-inline: auto; }
  .hero__titulo { font-size: 40px; }
  .hero__descricao { font-size: 16px; }

  /* SEPARADOR */
  .separador { margin-top: 60px; }
  .separador::before {
    background: linear-gradient(90deg, var(--dourado) 0%, var(--transparente-claro) 35%, var(--transparente-claro) 65%, var(--dourado) 100%);
  }
  .separador img { width: 54px; height: 50px; }

  /* INTRO */
  .intro { padding: 60px 0; }
  .intro__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    max-width: calc(380px + var(--margem-lateral) * 2);
  }
  .intro__imagem { flex: none; }
  .intro__imagem img { aspect-ratio: 380 / 460; }
  .intro__texto { flex: none; gap: 16px; }
  .intro__titulo { max-width: 304px; }
  .intro__descricao { font-size: 16px; }

  /* ÁREAS */
  .areas { padding-block: 60px; }
  .secao-traco::before { display: none; }
  .areas .container { max-width: calc(380px + var(--margem-lateral) * 2); }
  .areas__titulo { max-width: 380px; }
  .areas__grade { grid-template-columns: 1fr; gap: 16px; }

  /* CLAREZA */
  .clareza { padding-block: 60px; }
  .clareza .container {
    align-items: center;
    max-width: calc(380px + var(--margem-lateral) * 2);
  }
  .clareza__topo { display: contents; }
  .clareza__texto { gap: 16px; align-items: center; text-align: center; order: 1; }
  .clareza__titulo { max-width: 308px; }
  .clareza__descricao { max-width: 298px; font-size: 16px; }
  .clareza__carrossel {
    order: 2;
    --card-visiveis: 1;
    width: 100%;
    max-width: 286px;
  }
  /* Mobile: um card por vez, centralizado, sempre no estado ativo */
  .clareza-card__legenda { justify-content: center; text-align: center; }
  .clareza__setas { order: 3; }
  .clareza__botao { order: 4; align-self: center; }

  /* TRATAMENTOS */
  .tratamentos { padding-block: 60px; }
  .tratamentos .container { max-width: calc(380px + var(--margem-lateral) * 2); }
  .tratamentos__titulo { max-width: 280px; margin-inline: auto; text-align: center; }
  .tratamentos__lista { gap: 16px; }
  .trat-card,
  .trat-card--invertido {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .trat-card__quadro { order: 1; min-height: 400px; padding: 40px 16px; }
  .trat-card__imagem,
  .trat-card--invertido .trat-card__imagem { order: 2; }
  .trat-card__imagem img { height: auto; aspect-ratio: 380 / 464; }
  .trat-card__botao { white-space: normal; text-align: left; }

  /* SOBRE */
  .sobre {
    padding: 248px 0 60px;
    background: var(--marrom-claro) url("../assets/sobre-fundo-mobile.webp") center top / 100% auto no-repeat;
  }
  .sobre__texto {
    align-items: center;
    gap: 16px;
    max-width: 380px;
    margin-inline: auto;
  }
  .sobre__titulo { max-width: 282px; text-align: center; }
  .sobre__descricao { font-size: 16px; }
  .sobre__local { align-self: stretch; }
  .sobre__local > img { width: 24.88px; height: 32.01px; }
  .sobre__cidade { font-size: 18px; }
  .sobre__rua { font-size: 13px; }

  /* EQUIPE */
  .equipe { padding: 262px 0 60px; }
  .equipe::before {
    height: auto;
    aspect-ratio: 420 / 316;
    background: url("../assets/equipe-fundo-mobile.webp") center top / 100% auto no-repeat;
  }
  .equipe .container {
    align-items: center;
    gap: 24px;
    max-width: calc(380px + var(--margem-lateral) * 2);
  }
  .equipe__texto { max-width: 380px; }
  .equipe__descricao { font-size: 16px; }
  .equipe__carrossel { --card-visiveis: 1; width: 100%; }
  .equipe__baixo { flex-direction: column; gap: 24px; }

  /* PROJETOS */
  .projetos { padding: 60px 0; }
  .projetos__grade {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: calc(388px + 32px);
    padding-inline: 16px;
  }
  .projeto__imagem { max-width: 379px; }
  .projeto__texto { font-size: 16px; }
  .projeto__fechamento { font-size: 20px; }

  /* DEPOIMENTOS */
  .depoimentos { padding-block: 60px; }
  .depoimentos__inner {
    flex-direction: column;
    gap: 24px;
    max-width: calc(380px + var(--margem-lateral) * 2);
  }
  .depoimentos__esq { display: contents; }
  .depoimentos__titulo { order: 1; max-width: 170px; text-align: center; }
  .depoimentos__carrossel {
    order: 2;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .depoimentos__pontos { order: 2; flex-direction: row; }
  .depoimentos__pontos .ponto--ativo { width: 23.65px; height: 8.6px; }
  .depoimentos__setas { order: 3; justify-content: center; }

  .depo-card { --depo-rodape: 84px; max-width: 380px; }
  /* Mobile: troca lado a lado (o atual sai pela esquerda desbotando) */
  .depo-slide,
  .depo-slide.is-ativo {
    opacity: 1;
    visibility: visible;
    transform: translateX(calc(var(--slot) * 100%));
    transition:
      transform var(--depo-duracao) var(--depo-easing),
      opacity var(--depo-duracao) var(--depo-easing);
  }
  .depo-slide.is-saindo { opacity: 0; }
  .depo-slide.sem-transicao { transition: none; }
  .depo-card__corpo { gap: 24px; padding: 40px 20px 32px; }
  .depo-card__texto { max-width: 324px; }
  .depo-card__rodape {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 84px;
    padding: 12px 20px;
  }
  .depo-card__nome { font-size: 24px; }

  /* FAQ */
  .faq { padding-block: 60px; }
  .faq .container {
    align-items: center;
    gap: 24px;
    max-width: calc(380px + var(--margem-lateral) * 2);
  }
  .faq__titulo { max-width: 210px; text-align: center; }
  .faq__lista { gap: 18px; width: 100%; }
  .faq-item { --faq-espaco: 24px; padding-bottom: 24px; }
  .faq-item__pergunta { align-items: center; font-size: 18px; }
  .faq-item__pergunta > span { max-width: 326px; }
  .faq-item__resposta { font-size: 16px; }

  /* CTA */
  .cta {
    padding-block: 100px;
    background-image: url("../assets/cta-fundo-mobile.webp");
  }
  .cta__inner { max-width: calc(380px + var(--margem-lateral) * 2); }
  .cta__titulo { font-size: 40px; }

  /* MAPA */
  .mapa {
    min-height: 526px;
    padding-block: 60px;
  }
  .mapa__inner { display: flex; justify-content: center; }
  .mapa__botao { min-height: 49px; }

  /* RODAPÉ */
  .rodape { padding: 60px 0; }
  .rodape__inner { flex-direction: column; gap: 45px; }
  .rodape__direita { align-items: center; }
  .rodape__redes { justify-content: center; gap: 16px; }
  .rodape__copy { max-width: 194px; }
}