/* =========================================================
   Bruxa Lorena (Ingrid Lorena Costa)
   Direção visual: branco de roupa de santo, verde-mata e o ouro do brasão dela.
   Por quê: as fotos dela são gente de branco na mata, na cachoeira e no terreiro;
   o ouro vem do próprio brasão e o vermelho de vela fica só nos trabalhos.
   Assinatura: nichos em arco com filete dourado (o congá), a frase da Vovó
   Maria Luiza em tipo grande, a mão da quiromancia e a bacia de ágata das ervas.
   ========================================================= */

:root {
  /* Claros: o branco da roupa de santo */
  --cal: #f7f6f0;
  --cal-2: #edeee4;
  --papel: #fcfbf7;

  /* Escuros: a mata da cachoeira */
  --mata: #12291f;
  --mata-2: #183327;
  --mata-3: #0c1d16;

  /* Texto */
  --tinta: #17241d;
  --tinta-suave: #4a5a51;
  --claro: #f3efe2;
  --claro-suave: rgba(243, 239, 226, .84);

  /* Ouro do brasão, vermelho de vela, verde das guias */
  --ouro: #8d6b27;
  --ouro-claro: #d9b868;
  --ouro-palido: #eadbb0;
  --vela: #9b1c25;
  --sangue: #170a0c;
  --sangue-2: #26100f;
  --rosa-vela: #ecbcb4;
  --guia: #3e8a68;

  --linha: rgba(23, 36, 29, .14);
  --linha-escura: rgba(234, 219, 176, .2);

  /* Tipografia */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --corpo: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo */
  --largura: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --secao: clamp(76px, 10vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --arco: 999px 999px 6px 6px;
}

*, *::before, *::after { box-sizing: border-box; font-variant-numeric: lining-nums; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -.01em;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 3px; }

.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;
}

.pular {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--mata); color: var(--claro);
  padding: 10px 16px; border-radius: 4px; font-weight: 700;
}
.pular:focus { top: 12px; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.secao { padding: var(--secao) 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------------------------------------------------------
   Botões: retângulo com filete interno, como a moldura do brasão
   --------------------------------------------------------- */
.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border: 0; border-radius: 3px;
  font-family: var(--corpo); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.botao::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid currentColor; border-radius: 2px;
  opacity: .32; pointer-events: none;
  transition: opacity .35s var(--ease), inset .35s var(--ease);
}
.botao:hover::after { opacity: .75; inset: 5px; }
.botao:active { transform: translateY(1px); }
.botao .ico { width: 1.25em; height: 1.25em; }

.botao--mata { background: var(--mata); color: var(--claro); }
.botao--mata::after { border-color: var(--ouro-claro); opacity: .5; }
.botao--mata:hover { background: var(--mata-2); }

.botao--ouro { background: var(--ouro-claro); color: var(--mata); }
.botao--ouro:hover { background: var(--ouro-palido); }

.botao--sangue { background: var(--vela); color: var(--claro); }
.botao--sangue::after { border-color: var(--ouro-claro); opacity: .45; }
.botao--sangue:hover { background: #b0232d; }

.botao--contorno { background: transparent; color: var(--claro); box-shadow: inset 0 0 0 1px var(--linha-escura); }
.botao--contorno::after { display: none; }
.botao--contorno:hover { box-shadow: inset 0 0 0 1px var(--ouro-claro); color: var(--ouro-palido); }

.botao--grande { min-height: 60px; padding: 16px 32px; font-size: 1.08rem; }

.link-sublinhado {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--mata);
  text-decoration: underline; text-decoration-color: var(--ouro-claro);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color .3s var(--ease);
  cursor: pointer;
}
.link-sublinhado:hover { text-decoration-color: var(--ouro); }

/* ---------------------------------------------------------
   Nicho em arco (o congá): moldura com filete dourado
   --------------------------------------------------------- */
.nicho {
  position: relative;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent);
  border-radius: var(--arco);
}
.nicho-midia {
  width: 100%; aspect-ratio: 3 / 4.6;
  object-fit: cover;
  border-radius: var(--arco);
  background: var(--cal-2);
}

/* ---------------------------------------------------------
   Títulos de seção
   --------------------------------------------------------- */
.cabeca { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.cabeca-marca { width: 34px; height: 34px; color: var(--ouro); margin-bottom: 18px; }
.titulo { font-size: clamp(2.1rem, 4.6vw, 3.5rem); color: var(--mata); }
.titulo--claro { color: var(--claro); }
.titulo--centro { text-align: center; }
.cabeca-sub { margin: 18px 0 0; font-size: 1.1rem; color: var(--tinta-suave); max-width: 60ch; }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.topo.rolado {
  background: color-mix(in srgb, var(--cal) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--linha);
}
.topo.menu-aberto { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--mata); box-shadow: none; }

.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }

.marca { display: inline-flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.marca-brasao { width: 46px; height: auto; }
.marca-nome { font-family: var(--display); font-size: 1.32rem; font-weight: 550; color: var(--mata); letter-spacing: -.01em; }
.topo.menu-aberto .marca-nome { color: var(--claro); }
.topo.menu-aberto .marca-brasao { filter: brightness(1.7) saturate(1.1); }

.nav { display: flex; align-items: center; gap: 34px; }
.nav-lista { display: flex; gap: 30px; }
.nav-lista a {
  position: relative; font-weight: 500; color: var(--tinta); padding: 6px 0;
}
.nav-lista a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ouro-claro); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav-lista a:hover::after, .nav-lista a.ativo::after { transform: scaleX(1); }
.nav-cta { min-height: 46px; padding: 10px 20px; }

.menu-botao {
  display: none; position: relative; z-index: 2;
  width: 46px; height: 46px; place-items: center;
  background: none; border: 1px solid var(--linha); border-radius: 3px; cursor: pointer; color: var(--mata);
}
.menu-botao .ico { width: 24px; height: 24px; }
.menu-botao .ico-fechar { display: none; }
.menu-botao[aria-expanded="true"] { color: var(--claro); border-color: var(--linha-escura); }
.menu-botao[aria-expanded="true"] .ico-abrir { display: none; }
.menu-botao[aria-expanded="true"] .ico-fechar { display: block; }

@media (max-width: 899px) {
  .menu-botao { display: grid; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px;
    padding: 96px var(--gutter) 48px;
    background: var(--mata);
    background-image: radial-gradient(circle at 85% 20%, rgba(217, 184, 104, .14), transparent 50%);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  .nav.aberto { opacity: 1; visibility: visible; transform: none; }
  .nav-lista { flex-direction: column; gap: 6px; }
  .nav-lista a { font-family: var(--display); font-size: clamp(2rem, 9vw, 2.6rem); color: var(--claro); }
  .nav-cta { min-height: 56px; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 8vw, 110px);
  overflow: hidden;
}
.hero::before {
  /* Pentagrama do brasão, bem apagado, atrás do nicho */
  content: ""; position: absolute; z-index: -1;
  width: min(760px, 120vw); aspect-ratio: 1;
  right: max(-180px, calc((100vw - var(--largura)) / 2 - 180px)); top: -60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%238d6b27' stroke-width='.12'%3E%3Ccircle cx='12' cy='12' r='11.5'/%3E%3Ccircle cx='12' cy='12' r='10.4'/%3E%3Cpath d='M12 1.6 18.1 20.4 2.1 8.8h19.8L5.9 20.4Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .22;
}
.hero-grade {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.hero-local {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px; color: var(--ouro); font-weight: 700; font-size: .98rem;
}
.hero-titulo {
  font-size: clamp(2.7rem, 6.6vw, 5.5rem);
  line-height: 1.01; font-weight: 500; letter-spacing: -.025em;
  color: var(--mata); max-width: 12ch;
}
.hero-sub { margin: 26px 0 0; font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--tinta-suave); max-width: 50ch; }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }

.hero-nicho { justify-self: end; width: 100%; max-width: 410px; }
.hero-nicho figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--tinta-suave);
}

/* Entrada da página: o único momento orquestrado */
@keyframes subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes abrir-nicho { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.motion .hero-texto > * { animation: subir 1s var(--ease) both; }
.motion .hero-texto > :nth-child(2) { animation-delay: .1s; }
.motion .hero-texto > :nth-child(3) { animation-delay: .22s; }
.motion .hero-texto > :nth-child(4) { animation-delay: .34s; }
.motion .hero-nicho .nicho { animation: abrir-nicho 1.5s .15s var(--ease) both; }

/* Os caminhos */
.caminhos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
}
.caminho-link {
  display: flex; align-items: center; gap: 18px; height: 100%;
  padding: 14px 18px 14px 14px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 6px;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.caminho-link:hover { border-color: color-mix(in srgb, var(--ouro) 60%, transparent); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(18, 41, 31, .35); }
.caminho-foto {
  width: 84px; height: 112px; flex: none; object-fit: cover;
  border-radius: var(--arco);
  transition: transform 1.2s var(--ease);
}
.caminho-link:hover .caminho-foto { transform: scale(1.04); }
.caminho-titulo { display: block; font-family: var(--display); font-size: 1.45rem; color: var(--mata); margin-bottom: 4px; }
.caminho-desc { display: block; font-size: .95rem; line-height: 1.5; color: var(--tinta-suave); }

/* ---------------------------------------------------------
   Vovó Maria Luiza: o momento mais forte da página
   --------------------------------------------------------- */
.vovo {
  position: relative; overflow: hidden;
  padding: clamp(80px, 11vw, 150px) 0;
  background:
    radial-gradient(circle at 22% 62%, rgba(217, 184, 104, .2), transparent 42%),
    radial-gradient(circle at 90% 10%, rgba(62, 138, 104, .18), transparent 40%),
    var(--mata);
  color: var(--claro);
}
.vovo-grade {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 110px); align-items: center;
}
.vovo-midias { position: relative; width: min(100%, 420px); margin-inline: auto; padding-bottom: 60px; }
.vovo-cartao {
  width: 74%;
  padding: 10px 10px 34px; background: var(--papel);
  border-radius: 2px; transform: rotate(-4deg);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6);
}
.vovo-cartao img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vovo-roda {
  position: absolute; right: 0; bottom: 0;
  width: 52%; aspect-ratio: 1; border-radius: 50%;
  padding: 7px; border: 1px solid var(--ouro-claro);
  background: var(--mata);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
}
.vovo-roda video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.vovo-frase {
  position: relative;
  font-size: clamp(3rem, 8.4vw, 7rem);
  font-style: italic; font-weight: 400; line-height: .98; letter-spacing: -.03em;
  color: var(--claro);
}
.vovo-frase .aspas {
  display: block; font-style: normal; font-size: .9em; line-height: .6;
  color: var(--ouro-claro); margin-bottom: .05em;
}
.vovo-assina {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 0; font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--ouro-claro);
}
.vovo-assina::before { content: ""; width: 44px; height: 1px; background: var(--ouro-claro); }
.vovo-sub { margin: 26px 0 0; max-width: 46ch; font-size: 1.08rem; color: var(--claro-suave); }
.vovo-salve { margin: 18px 0 0; font-weight: 700; color: var(--ouro-palido); }

/* ---------------------------------------------------------
   Atendimentos: filtro + cards com foto em arco
   --------------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filtro, .quiro-botao, .intencao {
  min-height: 44px; padding: 9px 18px;
  background: transparent; border: 1px solid var(--linha); border-radius: 3px;
  font-weight: 500; color: var(--tinta); cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filtro:hover, .intencao:hover { border-color: var(--ouro); }
.filtro[aria-pressed="true"], .intencao[aria-pressed="true"] { background: var(--mata); border-color: var(--mata); color: var(--claro); }

.servicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.servico {
  display: flex; flex-direction: column;
  padding: 12px; background: var(--papel);
  border: 1px solid var(--linha); border-radius: 6px;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.servico:hover { border-color: color-mix(in srgb, var(--ouro) 55%, transparent); transform: translateY(-2px); }
.servico[hidden] { display: none; }
.servico.surgindo { animation: subir .6s var(--ease) both; }
.servico-foto, .runas-arte {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--arco);
}
.servico-corpo { display: flex; flex-direction: column; flex: 1; padding: 22px 12px 12px; }
.servico-tipo { margin: 0 0 6px; font-size: .9rem; font-weight: 700; color: var(--ouro); }
.servico--vela .servico-tipo { color: var(--vela); }
.servico-titulo { font-size: 1.6rem; color: var(--mata); margin-bottom: 12px; }
.servico-corpo p:not(.servico-tipo) { color: var(--tinta-suave); font-size: .99rem; }
.servico-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: auto; align-self: flex-start;
  font-weight: 700; color: var(--mata); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--ouro-claro);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.servico--vela .servico-cta { text-decoration-color: color-mix(in srgb, var(--vela) 55%, transparent); }
.servico-cta:hover { text-decoration-color: var(--ouro); }

.runas-arte {
  display: grid; place-items: center; align-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 70%, var(--mata-2), var(--mata));
  color: var(--ouro-claro);
}
.runas-arte svg { width: 70%; }
.runas-arte span { font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--ouro-palido); }

.atend-nota { margin: 40px 0 0; text-align: center; color: var(--tinta-suave); }
.atend-nota .link-sublinhado { display: inline; }

/* ---------------------------------------------------------
   Quiromancia (interativo)
   --------------------------------------------------------- */
.quiro {
  position: relative; overflow: hidden;
  padding: var(--secao) 0;
  background:
    radial-gradient(circle at 75% 50%, rgba(217, 184, 104, .12), transparent 45%),
    var(--mata-2);
  color: var(--claro);
}
.quiro-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.quiro-intro { margin: 20px 0 28px; font-size: 1.1rem; color: var(--claro-suave); max-width: 48ch; }
.quiro-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.quiro-botao { border-color: var(--linha-escura); color: var(--claro); }
.quiro-botao:hover { border-color: var(--ouro-claro); }
.quiro-botao[aria-pressed="true"] { background: var(--ouro-claro); border-color: var(--ouro-claro); color: var(--mata); }

.quiro-leitura {
  min-height: 170px; margin: 30px 0 34px; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ouro-claro);
}
.quiro-leitura-titulo { font-size: 1.7rem; color: var(--ouro-palido); margin-bottom: 10px; }
.quiro-leitura p { color: var(--claro-suave); max-width: 52ch; margin: 0; }
.quiro-leitura.trocou { animation: subir .5s var(--ease) both; }

.quiro-palma { position: relative; width: min(100%, 440px); justify-self: center; }
.palma { width: 100%; height: auto; overflow: visible; }
.palma-contorno { fill: rgba(217, 184, 104, .05); stroke: var(--ouro-claro); stroke-width: 1.6; stroke-linejoin: round; }
.palma-dobras path { fill: none; stroke: rgba(234, 219, 176, .28); stroke-width: 1.2; stroke-linecap: round; }
.linha {
  fill: none; stroke: rgba(234, 219, 176, .42); stroke-width: 3; stroke-linecap: round;
  transition: stroke .4s var(--ease), stroke-width .4s var(--ease);
}
.linha.ativa {
  stroke: var(--ouro-claro); stroke-width: 4.6;
  filter: drop-shadow(0 0 6px rgba(217, 184, 104, .75));
}
.motion .linha.ativa { animation: tracar 1.1s var(--ease) both; stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.alvo { fill: none; stroke: transparent; stroke-width: 28; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.alvo:hover + .alvo, .alvo:hover { stroke: rgba(217, 184, 104, .06); }

.quiro-foto {
  position: absolute; left: -6%; bottom: -2%;
  width: 36%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 6px solid var(--mata-2); box-shadow: 0 0 0 1px var(--ouro-claro);
}

/* ---------------------------------------------------------
   Cursos
   --------------------------------------------------------- */
.cursos { background: var(--cal-2); }
.curso {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 90px); align-items: center;
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--linha);
}
.curso:first-of-type { border-top: 0; padding-top: 0; }
.curso--invertido .curso-midia { order: 2; }

.curso-midia { position: relative; width: min(100%, 420px); justify-self: center; }
.curso-video {
  padding: 8px; border: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent); border-radius: var(--arco);
}
.curso-video video { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; border-radius: var(--arco); background: var(--mata); }
.curso-midia--duo { padding-right: 18%; padding-bottom: 12%; }
.curso-foto-sobre {
  position: absolute; right: 0; bottom: 0; width: 44%;
  aspect-ratio: 3 / 4; object-fit: cover;
  border: 6px solid var(--cal-2); border-radius: 4px;
  box-shadow: 0 24px 40px -20px rgba(18, 41, 31, .5);
}

.apostila {
  width: min(100%, 320px); margin-inline: auto;
  padding: 16px; background: var(--vela); border-radius: 4px;
  transform: rotate(2.5deg);
  box-shadow: 0 30px 60px -28px rgba(18, 41, 31, .7);
}
.apostila img { width: 100%; border-radius: 2px; }

.curso-onde {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; font-weight: 700; color: var(--ouro); font-size: .98rem;
}
.curso-onde::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.curso-titulo { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--mata); margin-bottom: 18px; }
.curso-texto > p:not(.curso-onde):not(.curso-lema) { color: var(--tinta-suave); font-size: 1.05rem; max-width: 56ch; }
.curso-lista { display: grid; gap: 10px; margin: 22px 0 28px; }
.curso-lista--colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.curso-lista li { position: relative; padding-left: 22px; }
.curso-lista li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; background: var(--ouro-claro); transform: rotate(45deg);
}
.curso-lema { font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--ouro); margin-bottom: 26px; }

/* Bacia de ervas (interativo) */
.bacia {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(26px, 4vw, 52px);
  background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
}
.bacia-titulo { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--mata); }
.bacia-intro { margin: 12px 0 22px; color: var(--tinta-suave); }
.bacia-intencoes { display: flex; flex-wrap: wrap; gap: 8px; }
.bacia-resultado { min-height: 118px; margin: 26px 0 16px; }
.bacia-resultado.trocou { animation: subir .5s var(--ease) both; }
.bacia-ervas { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.75rem); color: var(--mata); margin-bottom: 8px; line-height: 1.2; }
.bacia-resultado p:not(.bacia-ervas) { color: var(--tinta-suave); margin: 0; }
.bacia-aviso { margin: 0; font-size: .92rem; color: var(--tinta-suave); font-style: italic; }
.bacia-arte svg { width: 100%; height: auto; }
.erva-anim { transform-box: fill-box; transform-origin: center; }
.motion .erva-anim { animation: cair .8s var(--ease) both; }
@keyframes cair { from { opacity: 0; transform: translateY(-70px) rotate(-30deg) scale(.8); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------
   Cuidados: famílias e crianças autistas
   --------------------------------------------------------- */
.familias-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 60px); }
.familias-topo .cabeca { margin-bottom: 0; }
.familias-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 40% 60%; border-radius: 6px; box-shadow: 0 24px 44px -26px rgba(18, 41, 31, .55); }
.familias-foto figcaption { margin-top: 10px; font-family: var(--display); font-style: italic; color: var(--tinta-suave); }
.cuidados-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px clamp(28px, 4vw, 56px); }
.cuidado-ico { width: 30px; height: 30px; color: var(--ouro); margin-bottom: 14px; }
.cuidado h3 { font-size: 1.42rem; color: var(--mata); margin-bottom: 10px; }
.cuidado p { color: var(--tinta-suave); margin: 0; font-size: 1rem; }

/* ---------------------------------------------------------
   Cuidados: animais domésticos e silvestres
   --------------------------------------------------------- */
.animais {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 78% 40%, rgba(62, 138, 104, .26), transparent 46%),
    radial-gradient(circle at 8% 90%, rgba(217, 184, 104, .1), transparent 38%),
    var(--mata-3);
  color: var(--claro);
}
.animais-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.animais .cabeca-marca { color: var(--ouro-claro); }
.animais .titulo { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 18ch; }
.animais-sub { margin: 22px 0 0; max-width: 54ch; font-size: 1.1rem; color: var(--claro-suave); }
.animais-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: clamp(32px, 4vw, 44px) 0 0; }
.animal-tipo { padding-top: 18px; border-top: 1px solid var(--linha-escura); }
.animal-tipo dt { font-family: var(--display); font-size: 1.42rem; color: var(--ouro-palido); margin-bottom: 8px; }
.animal-tipo dd { margin: 0; color: var(--claro-suave); }
.animais-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: clamp(34px, 4vw, 48px); }
.animais-aviso { margin: 0; font-size: .95rem; color: var(--claro-suave); padding-left: 14px; border-left: 2px solid var(--guia); }

/* ---------------------------------------------------------
   Amor, afastamento e corte de laços: a sala escura da casa
   --------------------------------------------------------- */
.corte {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  background:
    radial-gradient(circle at 82% 34%, rgba(155, 28, 37, .34), transparent 44%),
    radial-gradient(circle at 95% 95%, rgba(90, 40, 110, .18), transparent 40%),
    var(--sangue);
  color: var(--claro);
}
.corte-foto { position: relative; align-self: stretch; min-height: 640px; }
.corte-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; filter: saturate(1.08) contrast(1.06); }
.corte-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 55%, var(--sangue) 100%),
    radial-gradient(ellipse at 45% 50%, transparent 45%, rgba(23, 10, 12, .7) 100%);
}
.corte-texto { padding: var(--secao) var(--gutter) var(--secao) clamp(32px, 5vw, 80px); max-width: 760px; }
.corte .titulo { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
.corte-sub { margin: 22px 0 0; max-width: 56ch; font-size: 1.1rem; color: var(--claro-suave); }
.corte-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: clamp(34px, 4vw, 48px) 0 0; }
.corte-grupo { padding-top: 18px; border-top: 1px solid rgba(236, 188, 180, .28); }
.corte-grupo dt { font-family: var(--display); font-size: 1.38rem; color: var(--rosa-vela); margin-bottom: 8px; }
.corte-grupo dd { margin: 0; color: var(--claro-suave); }
.corte-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: clamp(34px, 4vw, 48px); }
.corte-aviso { margin: 0; max-width: 40ch; font-size: .95rem; color: var(--claro-suave); padding-left: 14px; border-left: 2px solid var(--vela); }

.bichos { position: relative; aspect-ratio: 4 / 4.6; width: min(100%, 440px); justify-self: center; }
.bicho { position: absolute; overflow: hidden; box-shadow: 0 24px 44px -24px rgba(18, 41, 31, .55); }
.bicho img { width: 100%; height: 100%; object-fit: cover; }
.bicho--3 { left: 0; top: 0; width: 60%; height: 72%; border-radius: var(--arco); border: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent); padding: 7px; background: var(--cal); }
.bicho--3 img { border-radius: var(--arco); }
.bicho--1 { right: 0; top: 4%; width: 40%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--cal); }
.bicho--2 { right: 4%; bottom: 0; width: 44%; aspect-ratio: 4 / 5; border-radius: 4px; border: 6px solid var(--cal); }

.cuidados-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px;
  margin-top: clamp(44px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--linha);
}
.cuidados-aviso { margin: 0; max-width: 62ch; color: var(--tinta-suave); font-size: .98rem; padding-left: 16px; border-left: 2px solid var(--guia); }

/* ---------------------------------------------------------
   A Bruxa + galeria do templo
   --------------------------------------------------------- */
.bruxa { background: var(--cal-2); padding-bottom: clamp(64px, 8vw, 110px); }
.bruxa-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.bruxa-retrato { width: min(100%, 420px); justify-self: center; }
.bruxa-citacao {
  margin: 26px 0 24px; padding-left: 20px; border-left: 2px solid var(--ouro-claro);
  font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.35; color: var(--mata);
}
.bruxa-texto > p:not(.bruxa-citacao) { color: var(--tinta-suave); font-size: 1.05rem; max-width: 60ch; }
.bruxa-fatos { display: grid; gap: 0; margin: 30px 0 0; border-top: 1px solid var(--linha); }
.bruxa-fatos div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.bruxa-fatos dt { font-weight: 700; color: var(--ouro); }
.bruxa-fatos dd { margin: 0; font-family: var(--display); font-size: 1.12rem; color: var(--mata); }

.galeria-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: clamp(64px, 8vw, 110px); margin-bottom: 26px; }
.galeria-titulo { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--mata); }
.galeria-setas { display: flex; gap: 10px; }
.seta {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: transparent; border: 1px solid var(--linha); border-radius: 50%; color: var(--mata); cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.seta:hover { background: var(--mata); color: var(--claro); border-color: var(--mata); }
.seta:disabled { opacity: .35; cursor: default; background: transparent; color: var(--mata); border-color: var(--linha); }

.galeria {
  --borda: max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter)));
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borda);
  padding: 4px var(--borda) 10px;
  scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria li { flex: none; scroll-snap-align: start; }
.galeria img { height: clamp(300px, 40vw, 460px); width: auto; max-width: 78vw; object-fit: cover; border-radius: 4px; }
.galeria figcaption { margin-top: 10px; font-family: var(--display); font-style: italic; color: var(--tinta-suave); }

/* ---------------------------------------------------------
   Como agendar
   --------------------------------------------------------- */
.passos { padding-bottom: clamp(48px, 6vw, 80px); }
.passos-lista {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  margin-top: clamp(40px, 5vw, 60px); text-align: center;
}
.passos-lista::before {
  content: ""; position: absolute; top: 27px; left: 17%; right: 17%;
  border-top: 1px dashed color-mix(in srgb, var(--ouro) 60%, transparent);
}
.passo { position: relative; }
.passo-num {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--cal); border: 1px solid var(--ouro);
  font-family: var(--display); font-size: 1.5rem; color: var(--mata);
  box-shadow: 0 0 0 6px var(--cal);
}
.passo h3 { font-size: 1.45rem; color: var(--mata); margin-bottom: 10px; }
.passo p { color: var(--tinta-suave); margin: 0 auto; max-width: 30ch; }

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq { padding-top: clamp(48px, 6vw, 80px); }
.faq-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.faq-grade > .titulo { position: sticky; top: 110px; }
.faq-lista { border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 22px 48px 22px 0;
  font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--mata); line-height: 1.3;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::before, .pergunta summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.6px;
  background: var(--ouro); transition: transform .35s var(--ease);
}
.pergunta summary::after { transform: rotate(90deg); }
.pergunta[open] summary::after { transform: rotate(0); }
.pergunta p { margin: 0; padding: 0 40px 24px 0; color: var(--tinta-suave); max-width: 64ch; }

/* ---------------------------------------------------------
   Contato
   --------------------------------------------------------- */
.contato {
  padding: var(--secao) 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(217, 184, 104, .16), transparent 45%),
    var(--mata);
  color: var(--claro);
}
.contato-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.contato-brasao { width: 130px; margin-bottom: 26px; }
.contato-texto > p { margin: 18px 0 30px; font-size: 1.12rem; color: var(--claro-suave); max-width: 44ch; }
.contato-acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.enderecos { display: grid; gap: 16px; }
.endereco {
  display: flex; gap: 16px; padding: 24px;
  border: 1px solid var(--linha-escura); border-radius: 6px;
}
.endereco > .ico { width: 24px; height: 24px; color: var(--ouro-claro); margin-top: 3px; }
.endereco h3 { font-size: 1.25rem; color: var(--ouro-palido); margin-bottom: 8px; line-height: 1.25; }
.endereco p { margin: 0 0 12px; color: var(--claro-suave); }
.endereco .link-sublinhado { color: var(--claro); }

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */
.rodape { padding: 64px 0 32px; background: var(--mata-3); color: var(--claro-suave); }
.rodape-grade { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--linha-escura); }
.rodape-nome { font-family: var(--display); font-size: 1.6rem; color: var(--claro); margin-bottom: 8px; }
.rodape-desc { max-width: 46ch; margin-bottom: 14px; }
.rodape-frase { font-family: var(--display); font-style: italic; color: var(--ouro-claro); margin: 0; }
.rodape-nav { display: flex; flex-wrap: wrap; gap: 0 26px; align-content: flex-start; }
.rodape-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape-nav a:hover { color: var(--ouro-palido); }
.rodape-base { padding-top: 26px; display: grid; gap: 6px; }
.rodape-credito, .rodape-aviso, .rodape-copy { font-size: .9rem; margin: 0; color: rgba(243, 239, 226, .8); }
.rodape-credito a { text-decoration: underline; text-underline-offset: 3px; color: var(--ouro-palido); }

/* ---------------------------------------------------------
   WhatsApp flutuante, no estilo da marca
   --------------------------------------------------------- */
.whats-flutuante {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--mata); color: var(--ouro-claro);
  box-shadow: 0 0 0 1px var(--ouro-claro), 0 0 0 5px var(--mata), 0 14px 30px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.whats-flutuante.visivel { opacity: 1; visibility: visible; transform: none; }
.whats-flutuante .ico { width: 28px; height: 28px; }

/* ---------------------------------------------------------
   Entrada por scroll
   --------------------------------------------------------- */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */
@media (max-width: 1080px) {
  .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caminhos { grid-template-columns: 1fr; max-width: 640px; }
  .cuidados-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .animais-grade { grid-template-columns: 1fr; }
  .familias-topo { grid-template-columns: 1fr; align-items: start; }
  .familias-foto { max-width: 640px; }
  .corte { grid-template-columns: 1fr; }
  .corte-foto { min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh; }
  .corte-foto::after { background: linear-gradient(180deg, transparent 55%, var(--sangue) 100%), radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(23, 10, 12, .6) 100%); }
  .corte-texto { padding: 8px var(--gutter) var(--secao); max-width: none; }
  .bichos { width: min(100%, 420px); }
}

@media (max-width: 899px) {
  .hero-grade, .vovo-grade, .quiro-grade, .curso, .bacia, .bruxa-grade, .contato-grade, .faq-grade { grid-template-columns: 1fr; }
  .hero-nicho { justify-self: center; max-width: 320px; }
  .bacia-arte { order: -1; width: min(100%, 360px); justify-self: center; }
  .hero-titulo { max-width: 14ch; }
  .hero::before { opacity: .1; top: auto; bottom: 120px; }
  .vovo-texto { order: -1; }
  .curso--invertido .curso-midia { order: 0; }
  .curso-midia { width: min(100%, 360px); }
  .faq-grade > .titulo { position: static; }
  .quiro-texto { display: contents; }
  .quiro-grade { gap: 0; }
  .quiro-grade > * { order: 5; }
  .quiro-texto > .titulo { order: 1; }
  .quiro-intro { order: 2; margin-bottom: 8px; }
  .quiro-palma { order: 3; width: min(78%, 300px); margin-bottom: 28px; }
  .quiro-botoes { order: 4; }
  .quiro-leitura { order: 5; min-height: 0; }
  .quiro-texto > .botao { order: 6; justify-self: start; }
  .bruxa-retrato { width: min(100%, 340px); }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .topo-linha { min-height: 66px; }
  .marca-brasao { width: 40px; }
  .hero { padding-top: 12px; }
  .hero-nicho { max-width: 270px; }
  .hero-local { margin-bottom: 16px; }
  .hero-acoes .botao { width: 100%; }
  .servicos { grid-template-columns: 1fr; gap: 16px; }
  .servico-foto, .runas-arte { aspect-ratio: 16 / 10; }
  .servico-corpo { padding: 18px 8px 4px; }
  .servico-titulo { font-size: 1.45rem; margin-bottom: 8px; }
  .whats-flutuante { width: 52px; height: 52px; right: 14px; }
  .whats-flutuante .ico { width: 25px; height: 25px; }
  .filtros { gap: 8px; }
  .cuidados-lista { grid-template-columns: 1fr; gap: 28px; }
  .animais-tipos { grid-template-columns: 1fr; gap: 22px; }
  .corte-grupos { grid-template-columns: 1fr; gap: 22px; }
  .corte-rodape .botao { width: 100%; }
  .animais-rodape .botao { width: 100%; }
  .curso-lista--colunas { grid-template-columns: 1fr; }
  .passos-lista { grid-template-columns: 1fr; gap: 34px; }
  .passos-lista::before { display: none; }
  .galeria img { height: 300px; }
  .galeria-setas { display: none; }
  .vovo-midias { width: min(100%, 330px); }
  .contato-acoes .botao { width: 100%; }
  .endereco { padding: 20px; }
  .quiro-foto { left: -2%; width: 32%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}