/* =========================================================
   Feiticeiro das Sombras (Alexandre), Quimbanda luciferiana
   Direção: o selo à luz de vela. Preto e vermelho, as cores da
   vertente dele; o luxo vem do latão fino nos detalhes e da
   tipografia gótica, que conversa com a logo.
   Grenze Gotisch nos títulos e Crimson Pro no texto (clássica,
   elegante e formal, como a comunidade espera).
   Símbolos: só pentagrama invertido, tridente e caveira.
   Nenhum símbolo do cristianismo, a pedido do cliente.
   ========================================================= */

:root {
  /* cor */
  --noite: #000000;
  --carvao: #0e0607;      /* superfícies, um preto puxado para o sangue */
  --vinho: #2a0508;
  --sangue: #8e0b14;
  --rubi: #c8151f;
  --osso: #efe5d4;
  --fumaca: #ab9e93;
  --latao: #b8925a;

  /* tipografia */
  --display: "Grenze Gotisch", "Times New Roman", serif;
  --texto: "Crimson Pro", Georgia, "Times New Roman", serif;

  /* medidas */
  --largura: 1180px;
  --respiro: clamp(16px, 4vw, 40px);
  --secao: clamp(72px, 9vw, 120px);
  --topo-h: 72px;
  --raio: 4px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--topo-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--texto); font-size: 1.16rem; line-height: 1.6;
  color: var(--osso); background: var(--noite); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.ico { width: 1.2em; height: 1.2em; flex: none; }

.wrap { width: min(100% - var(--respiro) * 2, var(--largura)); margin: 0 auto; }
:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; }

.pular { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 16px; background: var(--rubi); color: #fff; text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.pular:focus { transform: none; }

/* ---------- Títulos de seção ---------- */
.secao-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; align-items: end; }
.secao-titulo { font-size: clamp(2.8rem, 5.6vw, 4.4rem); color: var(--osso); }
.secao-texto { max-width: 34rem; color: var(--fumaca); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 14px 30px; border: 1px solid var(--rubi); border-radius: var(--raio);
  background: linear-gradient(180deg, var(--rubi), var(--sangue)); color: #fff;
  font-family: var(--texto); font-weight: 600; font-size: 1.12rem; letter-spacing: .02em; line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(184, 146, 90, .35), 0 18px 34px -16px rgba(200, 21, 31, .75);
  transition: transform .2s var(--ease), filter .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
.btn .ico { width: 22px; height: 22px; }
.btn-contorno { background: transparent; border-color: var(--latao); box-shadow: none; color: var(--osso); }
.btn-contorno:hover { background: rgba(184, 146, 90, .1); filter: none; }
.link-linha { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rubi); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.link-linha:hover { text-decoration-color: var(--latao); }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topo-h); transition: background .3s, box-shadow .3s, transform .35s var(--ease); }
.topo.com-fundo { background: rgba(0, 0, 0, .92); box-shadow: 0 1px 0 rgba(184, 146, 90, .25); backdrop-filter: blur(8px); }
.topo.escondido { transform: translateY(-100%); }
.topo-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-selo { width: 30px; height: 30px; color: var(--rubi); flex: none; }
.marca-nome { font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu a { padding: 10px 14px; font-size: 1.1rem; text-decoration: none; color: var(--osso); transition: color .2s; }
.menu a:hover { color: var(--latao); }
.menu .menu-cta { margin-left: 10px; padding: 9px 22px; border: 1px solid var(--rubi); border-radius: var(--raio); background: var(--sangue); color: #fff; font-weight: 600; }
.menu .menu-cta:hover { background: var(--rubi); color: #fff; }
.menu-botao { display: none; }

/* =========================================================
   ABERTURA: o selo
   ========================================================= */
.abertura {
  position: relative; overflow: hidden;
  padding: calc(var(--topo-h) + clamp(24px, 4vw, 56px)) 0 clamp(56px, 7vw, 100px);
  background: radial-gradient(ellipse 45% 60% at 72% 48%, rgba(142, 11, 20, .5), transparent 70%), var(--noite);
}
.abertura-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.abertura-linha { font-style: italic; font-size: 1.25rem; color: var(--latao); }
.abertura h1 { margin-top: 10px; font-size: clamp(3.6rem, 8.4vw, 7rem); line-height: .92; color: var(--osso); text-shadow: 0 0 40px rgba(200, 21, 31, .35); }
.abertura-lead { margin-top: 24px; max-width: 32rem; font-size: clamp(1.18rem, 1.5vw, 1.3rem); color: rgba(239, 229, 212, .82); }
.abertura-acoes { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.fatos { margin-top: 44px; padding-top: 22px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 44px; border-top: 1px solid rgba(184, 146, 90, .35); }
.fatos li { display: grid; line-height: 1.2; }
.fatos strong { font-family: var(--display); font-weight: 500; font-size: 1.8rem; color: var(--rubi); }
.fatos span { font-size: 1rem; color: var(--fumaca); }

.selo-cena { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; display: grid; place-items: center; }
.selo-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.selo-anel path, .selo-anel circle { fill: none; stroke: var(--rubi); stroke-width: .5; vector-effect: non-scaling-stroke; }
.selo-circulo { stroke: var(--latao) !important; opacity: .7; }
.selo-estrela { opacity: .55; }
.selo-logo { position: relative; width: 74%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(184, 146, 90, .5), 0 0 80px -10px rgba(200, 21, 31, .7); }
/* o pentagrama é traçado uma vez ao carregar */
.motion .selo-estrela, .motion .selo-circulo { stroke-dasharray: 480; stroke-dashoffset: 480; animation: tracar 2.6s var(--ease) forwards .3s; }
.motion .selo-circulo { animation-delay: 0s; animation-duration: 2s; }
@keyframes tracar { to { stroke-dashoffset: 0; } }

/* =========================================================
   TRABALHOS: três grupos, cada feitiço é um link para o WhatsApp
   ========================================================= */
.trabalhos { padding: var(--secao) 0; background: linear-gradient(180deg, var(--noite), var(--carvao)); border-top: 1px solid rgba(184, 146, 90, .2); }
.grupos { margin-top: clamp(40px, 5vw, 60px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 5vw, 72px); }
.grupo-cab { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--sangue); }
.grupo-cab-segundo { margin-top: 44px; }
.grupo-ico { width: 40px; height: 40px; color: var(--rubi); }
.grupo-cab h3 { font-size: 2.2rem; color: var(--latao); }
.feiticos li { border-bottom: 1px solid rgba(184, 146, 90, .18); }
.feiticos a { display: grid; gap: 2px; padding: 16px 0; min-height: 44px; text-decoration: none; transition: padding-left .3s var(--ease); }
.feitico-nome { font-family: var(--display); font-size: 1.65rem; line-height: 1.1; color: var(--osso); }
.feitico-texto { color: var(--fumaca); font-size: 1.08rem; }
.feiticos a:hover, .feiticos a:focus-visible { padding-left: 12px; }
.feiticos a:hover .feitico-nome { color: var(--rubi); }
.trabalhos-nota { margin-top: 44px; display: flex; align-items: center; gap: 14px; max-width: 46rem; font-size: 1.15rem; color: var(--osso); }
.trabalhos-nota .ico { width: 36px; height: 36px; color: var(--rubi); }

/* =========================================================
   O ALTAR: fotos dos trabalhos
   ========================================================= */
.altar { padding: var(--secao) 0; background: var(--noite); }
.galeria { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.foto { position: relative; overflow: hidden; border: 1px solid rgba(184, 146, 90, .3); background: var(--carvao); }
.foto img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.foto-larga { grid-column: span 2; }
.foto-larga img { aspect-ratio: auto; }
.foto-convite { display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(22px, 3vw, 34px); background: radial-gradient(ellipse 80% 70% at 30% 20%, rgba(142, 11, 20, .55), transparent 70%), var(--carvao); }
.convite-ico { width: 54px; height: 54px; color: var(--rubi); }
.convite-titulo { font-family: var(--display); font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.05; }
.foto-convite p:not(.convite-titulo) { color: var(--fumaca); }
.foto figcaption { position: absolute; inset: auto 0 0; padding: 40px 16px 12px; font-family: var(--display); font-size: 1.4rem; line-height: 1.1; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85)); }

/* =========================================================
   ÓLEOS
   ========================================================= */
.oleos { padding: clamp(48px, 6vw, 72px) 0; background: var(--vinho); border-block: 1px solid rgba(184, 146, 90, .3); }
.oleos-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 36px; align-items: center; }
.oleos-ico { width: 64px; height: 64px; color: var(--latao); }
.oleos-titulo { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.oleos-inner p { margin-top: 4px; color: rgba(239, 229, 212, .82); max-width: 36rem; }

/* =========================================================
   COMO FUNCIONA (é uma sequência)
   ========================================================= */
.passos { padding: var(--secao) 0; background: var(--carvao); }
.passos-lista { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: passo; }
.passos-lista li { counter-increment: passo; padding-top: 18px; border-top: 1px solid var(--sangue); }
.passos-lista li::before { content: counter(passo, upper-roman); display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--rubi); margin-bottom: 12px; }
.passos-lista h3 { font-size: 1.7rem; }
.passos-lista p { margin-top: 6px; color: var(--fumaca); font-size: 1.08rem; }

/* =========================================================
   SOBRE
   ========================================================= */
.sobre { padding: var(--secao) 0; background: radial-gradient(ellipse 45% 70% at 15% 50%, rgba(142, 11, 20, .35), transparent 70%), var(--noite); }
.sobre-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.sobre-foto { justify-self: center; width: min(100%, 420px); padding: 10px; border: 1px solid rgba(184, 146, 90, .45); }
.sobre-foto img { width: 100%; filter: saturate(.9) contrast(1.05); }
.sobre-texto > p { margin-top: 18px; max-width: 36rem; color: rgba(239, 229, 212, .85); }
.simbolos { margin: 30px 0 22px; display: flex; flex-wrap: wrap; gap: 26px; }
.simbolos li { display: grid; justify-items: center; gap: 8px; font-family: var(--display); font-size: 1.25rem; color: var(--latao); }
.simbolos svg { width: 48px; height: 48px; color: var(--rubi); }

/* =========================================================
   DÚVIDAS
   ========================================================= */
.duvidas { padding: var(--secao) 0; background: var(--carvao); }
.duvidas-grade { display: grid; grid-template-columns: .7fr 1.3fr; gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.faq details { border-bottom: 1px solid rgba(184, 146, 90, .25); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; font-family: var(--display); font-size: clamp(1.45rem, 2vw, 1.7rem); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--rubi); transition: transform .3s var(--ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 48px 22px 0; color: var(--fumaca); }

/* =========================================================
   CHAMADA FINAL
   ========================================================= */
.final { padding: var(--secao) 0; text-align: center; background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(200, 21, 31, .45), transparent 70%), var(--noite); }
.final-inner { display: grid; justify-items: center; }
.final-selo { width: 64px; height: 64px; color: var(--rubi); }
.final-titulo { margin-top: 16px; font-size: clamp(3rem, 6vw, 5rem); }
.final-texto { margin-top: 14px; max-width: 32rem; font-size: 1.2rem; color: rgba(239, 229, 212, .85); }
.final .btn { margin-top: 30px; }
.final-numero { margin-top: 14px; color: var(--latao); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { background: var(--noite); border-top: 1px solid rgba(184, 146, 90, .25); color: var(--fumaca); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 1.02rem; }
.rodape-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; }
.rodape-nome { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 1.9rem; color: var(--osso); }
.rodape-nome + p { margin-top: 8px; max-width: 32rem; }
.rodape-contato { display: grid; gap: 2px; align-content: start; }
.rodape-contato a, .rodape-horario { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--osso); text-decoration: none; }
.rodape-contato a:hover { color: var(--latao); }
.rodape-contato .ico { color: var(--rubi); }
.rodape-aviso, .rodape-pe { grid-column: 1 / -1; }
.rodape-aviso { padding-top: 22px; border-top: 1px solid rgba(184, 146, 90, .18); font-size: .95rem; }
.rodape-pe { font-size: .95rem; }
.rodape-pe a { color: var(--latao); }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #1f9d5b; color: #fff; box-shadow: 0 0 0 2px var(--sangue), 0 14px 30px -10px rgba(0, 0, 0, .6); transform: scale(0); transition: transform .4s var(--ease); }
.whats-flutuante.visivel { transform: scale(1); }
.whats-flutuante .ico { width: 30px; height: 30px; }
html:not(.js) .whats-flutuante { transform: scale(1); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 960px) {
  .passos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --topo-h: 64px; }
  .menu-botao { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(184, 146, 90, .5); border-radius: var(--raio); background: transparent; color: var(--osso); cursor: pointer; }
  .menu-botao .ico { width: 22px; height: 22px; }
  .menu { position: fixed; inset: var(--topo-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--respiro) 24px; background: var(--noite); border-bottom: 1px solid rgba(184, 146, 90, .3); transform: translateY(-120%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
  .menu.aberto { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  .menu a { padding: 14px 0; font-family: var(--display); font-size: 1.7rem; border-bottom: 1px solid rgba(184, 146, 90, .15); }
  .menu .menu-cta { margin: 16px 0 0; text-align: center; font-family: var(--texto); font-size: 1.1rem; }
  .topo.menu-aberto { background: var(--noite); }

  .abertura-grade, .secao-topo, .grupos, .sobre-grade, .duvidas-grade { grid-template-columns: 1fr; }
  .selo-cena { order: -1; width: min(80%, 380px); }
  .abertura-texto { text-align: center; }
  .abertura-lead { margin-left: auto; margin-right: auto; }
  .abertura-acoes, .fatos { justify-content: center; }
  .oleos-inner { grid-template-columns: auto 1fr; }
  .oleos-inner .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px) {
  body { font-size: 1.1rem; }
  .abertura { padding-top: calc(var(--topo-h) + 12px); }
  .selo-cena { width: min(72%, 280px); }
  .abertura h1 { font-size: clamp(3rem, 15vw, 4rem); }
  .abertura-acoes .btn { width: 100%; }
  .fatos { margin-top: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
  .fatos strong { font-size: 1.4rem; }
  .fatos span { font-size: .9rem; }
  .galeria { grid-template-columns: 1fr 1fr; gap: 8px; }
  .foto figcaption { font-size: 1.15rem; padding: 30px 10px 8px; }
  .foto-convite { grid-column: 1 / -1; }
  .foto-convite .btn { width: 100%; }
  .passos-lista { grid-template-columns: 1fr; }
  .oleos-inner { grid-template-columns: 1fr; justify-items: start; }
  .oleos-inner .btn, .final .btn { width: 100%; }
  .rodape-inner { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}