/* ==========================================================================
   Espaço Bela Harmonia — folha de estilo única do site
   Escrita partindo do celular e crescendo para o desktop.
   ========================================================================== */

:root {
  --preto:       #0A0A0A;
  --carvao:      #1B1B1B;
  --branco:      #FFFFFF;
  --papel:       #F4F3F1;
  --pedra:       #E8E6E1;
  --tinta:       #121212;
  --cinza:       #5F5F5A;
  --cinza-claro: #9C9C96;
  --cinza-escuro-fundo: #83837D; /* texto pequeno sobre preto */
  --cinza-borda: rgba(10, 10, 10, 0.12);
  --linha-clara: rgba(255, 255, 255, 0.14);

  --fonte: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Tipografia fluida: cresce sozinha entre o celular e o desktop */
  --t-h1:    clamp(2rem, 1.35rem + 2.6vw, 2.9rem);
  --t-h2:    clamp(1.4rem, 1.15rem + 1.05vw, 1.85rem);
  --t-h3:    clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --t-corpo: clamp(0.95rem, 0.9rem + 0.2vw, 1.06rem);
  --t-apoio: clamp(0.85rem, 0.82rem + 0.12vw, 0.93rem);

  --gutter: clamp(20px, 5vw, 64px);
  --largura: 1180px;

  --barra-mobile: 0px; /* vira 60px no celular, para o botão fixo não cobrir nada */
}

* { box-sizing: border-box; }

:target, .categoria, .faq__item { scroll-margin-top: 24px; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  padding-bottom: var(--barra-mobile);
}

h1, h2, h3 { margin: 0; line-height: 1.22; font-weight: 700; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.container { max-width: var(--largura); margin: 0 auto; }
.secao { padding: clamp(48px, 8vw, 76px) var(--gutter); }
.secao--escura { background: var(--preto); color: var(--branco); }
.secao--papel  { background: var(--papel); }
.secao--pedra  { background: var(--pedra); }
.secao--branca { background: var(--branco); }

.sobretitulo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cinza);
  margin: 0 0 0.5rem;
}
.secao--escura .sobretitulo { color: #A3A39D; }

/* --- Botões ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;              /* alvo de toque confortável */
  padding: 14px 26px;
  border: 0;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn--claro  { background: var(--branco); color: var(--preto); box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
.btn--claro:hover  { background: #EDEDED; }
.btn--escuro { background: var(--preto); color: var(--branco); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.btn--escuro:hover { background: #000; }
.btn--vazado { background: transparent; color: var(--branco); border: 1.5px solid rgba(255,255,255,0.55); }
.btn--vazado:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.9); }
.btn--linha  { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); }
.btn--linha:hover { background: var(--tinta); color: var(--branco); }
.btn--bloco  { width: 100%; }

/* --- Cabeçalho ---------------------------------------------------------- */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: var(--branco);
  border-bottom: 1px solid rgba(10,10,10,0.08);
}
.topo__logo { display: flex; align-items: center; min-height: 44px; }
.topo__logo img { height: 34px; width: auto; }

.topo__nav { display: none; }               /* escondido no celular */
.topo__nav a {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #141414;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}
.topo__nav a:hover { border-bottom-color: rgba(20,20,20,0.35); }
.topo__nav a[aria-current="page"] { border-bottom-color: #141414; }

.topo__cta { padding: 10px 18px; min-height: 42px; font-size: 0.8rem; }
.topo__cta--desktop { display: none; }

/* Menu do celular: usa <details>, sem JavaScript */
.menu-mobile { position: relative; }
.menu-mobile > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile__lista {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(10,10,10,0.16);
  padding: 8px;
}
.menu-mobile__lista a {
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 2px;
}
.menu-mobile__lista a:hover { background: var(--papel); }

/* --- Hero --------------------------------------------------------------- */

.hero { background: var(--preto); color: var(--branco); }
.hero__grade { display: grid; grid-template-columns: 1fr; }
.hero__texto {
  padding: clamp(40px, 8vw, 72px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.hero__nota { display: flex; align-items: center; gap: 8px; color: #C9C9C4; font-size: 0.9rem; font-weight: 600; }
.hero h1 { color: var(--branco); text-shadow: 0 4px 30px rgba(0,0,0,0.6); }
.hero__sub { color: #B7B7B1; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.12rem); max-width: 30rem; margin: 0; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero__dados { display: flex; flex-wrap: wrap; gap: 8px 24px; color: #8A8A84; font-size: var(--t-apoio); }
.hero__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.45), transparent 45%);
}

/* --- Cartões de avaliação ----------------------------------------------- */

.avaliacoes { display: grid; grid-template-columns: 1fr; gap: 20px; }
.avaliacao {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 3px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(10,10,10,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.avaliacao__estrelas { display: flex; gap: 2px; }
.avaliacao__texto { color: #333330; margin: 0; flex: 1; }
.avaliacao__nome { font-size: var(--t-apoio); font-weight: 700; }
.avaliacao__fonte { font-size: 0.8rem; color: var(--cinza); }

/* Assinatura da avaliação: círculo com a inicial + nome + origem */
.avaliacao__pessoa { display: flex; align-items: center; gap: 12px; }
.avaliacao__inicial {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pedra);
  border: 1px solid var(--cinza-borda);
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.avaliacao__inicial svg { opacity: 0.5; }

/* Link de verificação embaixo da grade */
.avaliacoes-conferir { margin-top: clamp(24px, 4vw, 34px); text-align: center; }
.avaliacoes-conferir .btn { max-width: 100%; }
.avaliacoes-conferir p { margin: 10px 0 0; font-size: 0.82rem; color: var(--cinza); }

/* --- Grade de serviços -------------------------------------------------- */

.servicos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.servico {
  background: var(--branco);
  border-radius: 3px;
  padding: 22px;
  box-shadow: 0 10px 26px rgba(10,10,10,0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.servico:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(10,10,10,0.12); }
.servico__nome  { font-weight: 700; font-size: 1rem; }
.servico__itens { font-size: var(--t-apoio); color: var(--cinza); margin: 0; }
.servico__preco { font-size: var(--t-apoio); font-weight: 700; margin-top: auto; padding-top: 6px; }

/* --- Bloco da unidade --------------------------------------------------- */

.unidade { display: grid; grid-template-columns: 1fr; background: var(--branco); }
.unidade__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.unidade__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.unidade__texto {
  padding: clamp(32px, 6vw, 56px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* --- Chamada final ------------------------------------------------------ */

.chamada { text-align: center; }
.chamada h2 { color: var(--branco); max-width: 34rem; margin: 0 auto 12px; }
.chamada p  { color: var(--cinza-claro); margin-bottom: 24px; }

/* --- Rodapé ------------------------------------------------------------- */

.rodape { background: var(--preto); color: var(--branco); padding: 32px var(--gutter) 36px; border-top: 1px solid var(--linha-clara); }
.rodape__descricao { max-width: 58rem; margin: 0 0 22px; color: var(--cinza-escuro-fundo); font-size: 0.79rem; line-height: 1.7; }
.rodape__linha { display: flex; flex-direction: column; gap: 14px; }
.rodape__marca { color: #7E7E78; font-size: var(--t-apoio); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 2px 22px; color: #B7B7B1; font-size: var(--t-apoio); }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__links a:hover { color: var(--branco); }
.rodape__avec { margin-bottom: 22px; }

/* --- Barra fixa de WhatsApp (somente celular) --------------------------- */

.barra-zap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  background: var(--preto);
  color: var(--branco);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.22);
  padding-bottom: env(safe-area-inset-bottom); /* respeita a faixa do iPhone */
}

.link-toque { display: inline-block; padding: 12px 4px; margin: -12px -4px; text-decoration: underline; }

/* --- Aparição ao rolar --------------------------------------------------- */
/* O conteúdo nasce visível no HTML. Só quando o JavaScript confirma que está
   rodando (classe .js-anim) é que ele é escondido para depois surgir.
   Assim, se o script falhar, nada some da tela. Quem pediu menos movimento
   no aparelho vê tudo de uma vez, sem animação. */

@media (prefers-reduced-motion: no-preference) {

  .js-anim .revela {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--atraso, 0ms);
    will-change: opacity, transform;
  }
  .js-anim .revela.dentro {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Título e subtítulo de seção sobem um pouco menos, para o bloco não
     parecer que está se desmontando em pedaços. */
  .js-anim .revela--suave { transform: translateY(16px); }

  /* Alvos de atalho não se deslocam: só aparecem. */
  .js-anim .categoria.revela { transform: none; }

  /* A foto não sobe: ela abre de um leve zoom, como uma lente ajustando. */
  .js-anim .revela-foto img {
    transform: scale(1.08);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js-anim .revela-foto.dentro img { transform: none; }
}

/* ==========================================================================
   A partir de 600px
   ========================================================================== */
@media (min-width: 600px) {
  .avaliacoes { grid-template-columns: repeat(2, 1fr); }
  .servicos   { grid-template-columns: repeat(2, 1fr); }
  .rodape__linha { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   A partir de 900px — some a barra fixa, aparece o menu completo
   ========================================================================== */
@media (min-width: 900px) {
  :root { --barra-mobile: 0px; }

  .barra-zap { display: none; }
  .menu-mobile { display: none; }

  .topo__nav { display: flex; gap: 26px; }
  .topo__cta--desktop { display: inline-flex; }

  .avaliacoes { grid-template-columns: repeat(3, 1fr); }
  .servicos   { grid-template-columns: repeat(4, 1fr); }

  .hero__grade { grid-template-columns: 1fr 1fr; min-height: 600px; }
  .hero__texto { padding-right: clamp(32px, 4vw, 56px); }
  .hero__foto  { aspect-ratio: auto; height: 100%; border-left: 1px solid var(--linha-clara); }

  .unidade { grid-template-columns: 1fr 1fr; min-height: 420px; }
  .unidade__foto { aspect-ratio: auto; height: 100%; }
}

/* Abaixo de 900px a barra fixa existe, então o corpo ganha folga no fim */
@media (max-width: 899px) {
  :root { --barra-mobile: 60px; }
}

/* ==========================================================================
   Componentes das páginas internas
   ========================================================================== */

/* --- Capa das páginas internas (faixa escura do topo) -------------------- */

.capa { background: var(--preto); color: var(--branco); padding: clamp(40px, 7vw, 72px) var(--gutter) clamp(44px, 7vw, 76px); }
.capa__caminho { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8A8A84; margin: 0 0 12px; }
.capa__caminho a { display: inline-block; padding: 14px 6px; margin: -14px -6px; }
.capa__caminho a:hover { color: var(--branco); }
.capa h1 { color: var(--branco); max-width: 24ch; }
.capa__texto { color: #B7B7B1; margin: 18px 0 0; max-width: 62ch; }
.capa__acoes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Lista de preços ----------------------------------------------------- */

.precos { list-style: none; margin: 0; padding: 0; }
.precos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cinza-borda);
}
.precos li:first-child { border-top: 1px solid var(--cinza-borda); }
.precos__nome  { font-weight: 600; }
.precos__valor { font-size: var(--t-apoio); font-weight: 700; white-space: nowrap; }
.precos__nota  { font-size: var(--t-apoio); color: var(--cinza); margin: 14px 0 0; }

/* --- Bloco de categoria (página Serviços) -------------------------------- */

.categorias { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
.categoria {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 3px;
  padding: clamp(24px, 4vw, 34px);
  box-shadow: 0 10px 26px rgba(10,10,10,0.06);
}
.categoria + .categoria { margin-top: 0; }
.categoria h3 { margin-bottom: 8px; }
.categoria__intro { color: var(--cinza); margin-bottom: 20px; }
.categoria__bloco + .categoria__bloco { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--cinza-borda); }

/* --- Depoimento avulso --------------------------------------------------- */

.depoimento { border-left: 2px solid var(--tinta); padding-left: 18px; margin: 26px 0 0; }
.depoimento p { margin: 0 0 10px; color: #333330; }
.depoimento__nome  { font-size: var(--t-apoio); font-weight: 700; display: block; }
.depoimento__fonte { font-size: 0.8rem; color: var(--cinza); }
.secao--escura .depoimento { border-left-color: var(--branco); }
.secao--escura .depoimento p { color: #D6D6D1; }
.secao--escura .depoimento__fonte { color: #8A8A84; }

/* --- Faixa de foto ------------------------------------------------------- */

.faixa { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.faixa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faixa__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px var(--gutter) 16px;
  color: var(--branco);
  font-size: var(--t-apoio);
  background: linear-gradient(0deg, rgba(0,0,0,0.78), rgba(0,0,0,0.35) 55%, transparent);
}

/* --- Galeria de resultados ----------------------------------------------- */

.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.galeria figure { margin: 0; }
.galeria__foto { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 3px; }
.galeria__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galeria figcaption { margin-top: 8px; font-size: 0.8rem; color: var(--cinza); }

/* --- Perguntas frequentes ------------------------------------------------ */

.faq { display: grid; grid-template-columns: 1fr; gap: 0; }
.faq__item { padding: 22px 0; border-bottom: 1px solid var(--cinza-borda); }
.faq__item:first-child { border-top: 1px solid var(--cinza-borda); }
.faq__item h3 { margin-bottom: 8px; }
.faq__item p { margin: 0; color: #3A3A36; }
.faq__grupo + .faq__grupo { margin-top: clamp(36px, 6vw, 56px); }

/* --- Texto legal --------------------------------------------------------- */

.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); margin: 34px 0 10px; }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.legal li { margin-bottom: 6px; }
.legal__data { font-size: var(--t-apoio); color: var(--cinza); margin-bottom: 26px; }

/* --- Números (página Sobre) ---------------------------------------------- */

.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.numeros div { text-align: center; }
.numeros strong { display: block; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.1; }
.numeros span { font-size: var(--t-apoio); color: var(--cinza); }
.secao--escura .numeros span { color: #8A8A84; }

/* --- Pilares (página Sobre) ---------------------------------------------- */

.pilares { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pilar { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 3px; padding: 24px; }
.pilar h3 { margin-bottom: 8px; }
.pilar p { margin: 0; color: var(--cinza); font-size: var(--t-apoio); }

/* --- Dados de contato ---------------------------------------------------- */

.dados { list-style: none; margin: 0; padding: 0; }
.dados li { padding: 14px 0; border-bottom: 1px solid var(--cinza-borda); }
.dados li:first-child { border-top: 1px solid var(--cinza-borda); }
.dados a { display: inline-flex; align-items: center; min-height: 44px; }
.dados dt, .dados__rotulo { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinza); display: block; margin-bottom: 3px; }

/* --- Formulário ---------------------------------------------------------- */

.formulario { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo > span { font-size: var(--t-apoio); font-weight: 600; }
.campo input, .campo select {
  font-family: inherit;
  font-size: 1rem;              /* 16px evita o zoom automático do iPhone */
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  padding: 13px 14px;
  min-height: 48px;
  width: 100%;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); }
.formulario__ou { text-align: center; font-size: var(--t-apoio); color: var(--cinza); }

/* --- Índice de categorias ------------------------------------------------ */

.indice { background: var(--branco); border-bottom: 1px solid var(--cinza-borda); padding: 16px var(--gutter); }
.indice__titulo { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinza); margin: 0 0 10px; }
.indice__lista { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--largura); margin: 0 auto; }
.indice__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  font-size: var(--t-apoio);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.indice__lista a:hover { background: var(--tinta); color: var(--branco); border-color: var(--tinta); }
.indice .container { max-width: var(--largura); margin: 0 auto; }

/* --- Atalhos para as outras especialidades ------------------------------- */

.outras { display: flex; flex-wrap: wrap; gap: 10px; }
.outras a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 9px 16px;
  border: 1px solid var(--cinza-borda);
  border-radius: 2px;
  background: var(--branco);
  font-size: var(--t-apoio);
  font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.outras a:hover { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }

/* --- Duas colunas de conteúdo -------------------------------------------- */

.duas { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
.texto-longo p:last-child { margin-bottom: 0; }

@media (min-width: 600px) {
  .galeria { gap: 16px; }
  .galeria figcaption { font-size: var(--t-apoio); }
  .pilares  { grid-template-columns: repeat(2, 1fr); }
  .numeros  { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .categorias { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .pilares    { grid-template-columns: repeat(4, 1fr); }
  .duas       { grid-template-columns: 1.15fr 1fr; }
  .faixa      { aspect-ratio: 21 / 7; }
  .capa__texto { font-size: 1.06rem; }
}