/* =========================================================
   Veronica | Tarô e orientação espiritual
   Direção visual: altar de mármore. Mármore negro e lápis-lazúli com
   veio de ouro (texturas renderizadas para este site), nichos em arco
   emoldurando as fotos e o nome gravado em Cinzel com folha de ouro.
   Por quê: ela pediu azul, dourado e preto marmorizado, fonte clássica,
   e as fotos dela são de devoção (velas, Oxum, oferendas). O mármore e o
   arco dão o peso de templo e a credibilidade que ela quer passar.
   ========================================================= */

:root {
  /* Paleta */
  --onix: #05060a;          /* base: mármore negro */
  --onix-2: #0d1019;
  --lapis: #13297a;         /* apoio: a blusa azul dela, Iemanjá */
  --lapis-fundo: #0a1747;
  --ouro: #c9a45c;          /* destaque: folha de ouro */
  --ouro-claro: #ecd39a;
  --ouro-escuro: #8a6a2c;
  --marfim: #f3ead8;        /* texto e seção clara: cera de vela */
  --vela: #93abf2;          /* azul das velas, só em detalhe */

  --texto: var(--marfim);
  --texto-suave: rgba(243, 234, 216, .84);
  --linha: rgba(201, 164, 92, .28);

  --folha: linear-gradient(100deg, #8a6a2c 0%, #e9cf8f 20%, #b8913f 38%, #f7e6b6 52%, #a8812f 68%, #e2c27c 86%, #9c7a34 100%);

  --display: "Cinzel", Georgia, serif;
  --corpo: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --largura: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --secao: clamp(80px, 10vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--onix);
  color: var(--texto);
  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-weight: 600; font-family: var(--display); line-height: 1.1; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

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

.pular {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--ouro); color: var(--onix);
  padding: 10px 16px; font-weight: 600;
}
.pular:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------
   Superfícies: mármore negro e lápis-lazúli
   Cada seção desloca a textura para os veios não se repetirem.
   --------------------------------------------------------- */
.marmore {
  background:
    linear-gradient(180deg, rgba(5, 6, 10, .62), rgba(5, 6, 10, .78)),
    url("../assets/img/marmore-negro.webp") center / cover;
}
.lapis {
  background:
    linear-gradient(180deg, rgba(8, 18, 58, .62), rgba(6, 13, 44, .8)),
    url("../assets/img/marmore-lapis.webp") center / cover;
}
.consultas { background-position: center, 30% 70%; background-size: auto, 160%; }
.passos { background-position: center, 80% 20%; background-size: auto, 140%; }
.duvidas { background-position: center, 10% 40%; background-size: auto, 180%; }
.monte { background-position: center, 70% 30%; background-size: auto, 150%; }

/* ---------------------------------------------------------
   Botões: placa de ouro com cantos chanfrados
   --------------------------------------------------------- */
.btn {
  --chanfro: 10px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 13px 26px;
  font-family: var(--corpo); font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  line-height: 1.2; text-align: center;
  clip-path: polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  cursor: pointer; border: 0;
  transition: transform .5s var(--ease), filter .5s var(--ease), background-position .9s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-ouro {
  color: #1b1405;
  background: var(--folha);
  background-size: 220% 100%;
  background-position: 100% 0;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .45);
}
.btn-ouro:hover { background-position: 0 0; transform: translateY(-2px); }

/* Contorno de ouro: a borda é um fundo dourado com o miolo escuro por cima */
.btn-linha {
  color: var(--ouro-claro);
  background: var(--folha);
  background-size: 220% 100%;
  isolation: isolate;
}
.btn-linha::before {
  content: ""; position: absolute; inset: 1.5px; z-index: -1;
  background: rgba(7, 9, 16, .92);
  clip-path: inherit;
  transition: background .5s var(--ease);
}
.btn-linha:hover { transform: translateY(-2px); background-position: 100% 0; }
.btn-linha:hover::before { background: rgba(19, 41, 122, .88); }

.btn-grande { min-height: 60px; padding: 16px 34px; font-size: 1.06rem; }
.btn-cheio { width: 100%; }

/* ---------------------------------------------------------
   Nicho em arco: a moldura que se repete no site todo
   --------------------------------------------------------- */
.nicho {
  position: relative;
  padding: 5px;
  background: var(--folha);
  border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
}
.nicho img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 50% 50% 2px 2px / 40% 40% 2px 2px;
  filter: saturate(.92) contrast(1.04);
}
.nicho::after {   /* segundo arco, fino, por fora */
  content: ""; position: absolute; inset: -12px; pointer-events: none;
  border: 1px solid rgba(201, 164, 92, .45);
  border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
}
.nicho-34, .nicho-34::after { border-radius: 50% 50% 4px 4px / 37.5% 37.5% 4px 4px; }
.nicho-34 img { aspect-ratio: 3 / 4; border-radius: 50% 50% 2px 2px / 37.5% 37.5% 2px 2px; }

/* ---------------------------------------------------------
   Cabeça de seção
   --------------------------------------------------------- */
.cabeca { max-width: 720px; margin: 0 auto clamp(44px, 6vw, 72px); text-align: center; }
.cabeca h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  color: var(--marfim);
  letter-spacing: .01em;
}
.cabeca h2::after {   /* filete de ouro com o losango ao centro */
  content: ""; display: block; width: 132px; height: 12px; margin: 22px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23d8b56c' d='M6 0l1.6 4.4L12 6l-4.4 1.6L6 12 4.4 7.6 0 6l4.4-1.6z'/%3E%3C/svg%3E") center / 12px no-repeat,
    linear-gradient(90deg, transparent, var(--ouro) 30%, transparent 46%, transparent 54%, var(--ouro) 70%, transparent) center / 100% 1px no-repeat;
}
.cabeca p { margin: 20px auto 0; color: var(--texto-suave); font-size: 1.06rem; max-width: 600px; }
.cabeca-esq { text-align: left; margin-left: 0; }
.cabeca-esq h2::after { margin-left: 0; }

/* ---------------------------------------------------------
   Topo
   --------------------------------------------------------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.topo.rolado {
  background: rgba(5, 6, 10, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--linha);
}
.topo.escondido { transform: translateY(-100%); }
.topo.menu-aberto { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }

.topo-in {
  max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter);
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.marca { position: relative; z-index: 2; padding: 8px 0; display: inline-flex; align-items: center; gap: 10px; color: var(--ouro-claro); }
.marca-ico { width: 24px; height: 29px; color: var(--ouro); }
.marca span { font-family: var(--display); font-weight: 600; font-size: 1.28rem; letter-spacing: .14em; }

.menu { display: flex; align-items: center; gap: 34px; }
.menu ul { display: flex; gap: 30px; }
.menu ul a {
  position: relative; padding: 8px 0; font-size: .96rem; color: var(--texto-suave);
  transition: color .4s var(--ease);
}
.menu ul a::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px;
  background: var(--ouro); transform: translateX(-50%) rotate(45deg) scale(0);
  transition: transform .4s var(--ease);
}
.menu ul a:hover, .menu ul a.ativo { color: var(--marfim); }
.menu ul a.ativo::after { transform: translateX(-50%) rotate(45deg) scale(1); }
.menu-cta { min-height: 44px; padding: 10px 20px; font-size: .92rem; }

.menu-botao {
  display: none; width: 46px; height: 46px; place-items: center;
  background: none; border: 1px solid var(--linha); color: var(--ouro-claro); cursor: pointer;
}
.menu-botao svg { width: 24px; height: 24px; }
.menu-botao .ico-fechar { display: none; }
.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; position: relative; z-index: 2; }
  .menu {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 40px;
    background:
      linear-gradient(180deg, rgba(5, 6, 10, .8), rgba(5, 6, 10, .92)),
      url("../assets/img/marmore-negro.webp") 30% 50% / cover;
    opacity: 0; visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s;
  }
  .menu.aberto { opacity: 1; visibility: visible; }
  .menu ul { flex-direction: column; align-items: center; gap: 14px; }
  .menu ul a { font-family: var(--display); font-size: 1.7rem; color: var(--marfim); padding: 8px 0 14px; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  padding: 112px 0 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(ellipse 60% 70% at 25% 50%, rgba(5, 6, 10, .7), transparent 75%),
    linear-gradient(180deg, rgba(5, 6, 10, .7), rgba(5, 6, 10, .82)),
    url("../assets/img/marmore-negro.webp") 60% 40% / cover;
}
.hero::before {   /* luz de vela vinda de baixo, atrás da foto */
  content: ""; position: absolute; right: 8%; bottom: 10%; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(236, 196, 120, .16), transparent 62%);
  pointer-events: none;
}
.hero-in {
  position: relative;
  width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(40px, 6vw, 96px);
}

.hero h1 { font-weight: 600; }
.hero-nome {
  display: block;
  font-size: clamp(3.2rem, 6.2vw, 6rem);
  line-height: .95; letter-spacing: .03em;
  background: var(--folha);
  background-size: 260% 100%;
  background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}
.hero-oficio {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px;
  font-family: var(--corpo); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: .02em; color: var(--marfim);
}
.hero-oficio::before {
  content: ""; width: 56px; height: 1px; background: var(--ouro); flex: none;
  transform-origin: left;
}
.hero-lede { margin: 26px 0 0; max-width: 34em; font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--texto-suave); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-nota { margin: 18px 0 0; font-size: .92rem; color: rgba(243, 234, 216, .8); }

.hero-foto { margin: 0; justify-self: center; width: min(100%, 460px); }
.hero-foto figcaption {
  margin-top: 26px; text-align: center; font-size: .86rem; font-style: italic; color: rgba(243, 234, 216, .8);
}

/* Entrada do hero: o único momento coreografado do site.
   O nome ganha a folha de ouro passando por cima, o resto sobe em sequência. */
.motion .hero-nome { animation: dourar 2.4s var(--ease) .15s both; }
.motion .hero-oficio, .motion .hero-lede, .motion .hero-acoes, .motion .hero-nota, .motion .hero-foto {
  animation: subir 1s var(--ease) both;
}
.motion .hero-oficio { animation-delay: .5s; }
.motion .hero-oficio::before { animation: filete 1.2s var(--ease) .6s both; }
.motion .hero-lede { animation-delay: .62s; }
.motion .hero-acoes { animation-delay: .74s; }
.motion .hero-nota { animation-delay: .86s; }
.motion .hero-foto { animation: surgir 1.6s var(--ease) .1s both; }

@keyframes dourar {
  from { background-position: 100% 0; opacity: 0; letter-spacing: .09em; }
  30% { opacity: 1; }
  to { background-position: 0 0; opacity: 1; letter-spacing: .03em; }
}
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes filete { from { transform: scaleX(0); } to { transform: none; } }

/* Inscrição: faixa gravada na base do hero */
.inscricao {
  position: relative;
  width: 100%; max-width: var(--largura); margin: clamp(48px, 7vw, 88px) auto 0; padding: 26px var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border-top: 1px solid var(--linha);
}
.inscricao li {
  position: relative; padding-left: 22px;
  font-size: .95rem; color: var(--texto-suave); line-height: 1.4;
}
.inscricao li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px;
  background: var(--ouro); transform: rotate(45deg);
}
.inscricao strong {
  display: block; margin-bottom: 2px;
  font-family: var(--display); font-weight: 600; font-size: 1.18rem; letter-spacing: .04em; color: var(--ouro-claro);
}

/* ---------------------------------------------------------
   Sobre
   --------------------------------------------------------- */
.sobre { padding: var(--secao) 0; }
.sobre-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 7vw, 110px); align-items: center; }
.sobre-foto { margin: 0; padding: 12px; }
.sobre-texto h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 30px; }
.sobre-texto h2::after {
  content: ""; display: block; width: 72px; height: 1px; margin-top: 22px; background: var(--ouro);
}
.sobre-abre { font-size: clamp(1.12rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--marfim); }
.sobre-texto p:not(.sobre-abre) { color: var(--texto-suave); max-width: 38em; }
.sobre-selos { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--linha); }
.sobre-selos li { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ouro-claro); }
.sobre-selos svg { width: 11px; height: 11px; color: var(--ouro); }

/* ---------------------------------------------------------
   União amorosa: a especialidade em destaque
   Fundo negro aquecido pela luz das velas vermelhas das fotos dela,
   filetes de ouro em cima e embaixo, e dois nichos que se aproximam
   e se entrelaçam quando a seção entra na tela (a própria união).
   --------------------------------------------------------- */
.uniao {
  position: relative;
  padding: var(--secao) 0;
  background:
    radial-gradient(ellipse 46% 60% at 24% 55%, rgba(150, 28, 34, .34), transparent 70%),
    radial-gradient(ellipse 40% 50% at 78% 30%, rgba(201, 164, 92, .08), transparent 70%),
    linear-gradient(180deg, rgba(5, 6, 10, .88), rgba(5, 6, 10, .94)),
    url("../assets/img/marmore-negro.webp") 70% 60% / 170%;
  overflow: hidden;
}
.uniao::before, .uniao::after {   /* filetes de ouro que emolduram a seção */
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro) 20%, var(--ouro-claro) 50%, var(--ouro) 80%, transparent);
}
.uniao::before { top: 0; }
.uniao::after { bottom: 0; }

.uniao-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 110px); align-items: center; }

/* Os dois arcos */
.uniao-arcos { position: relative; aspect-ratio: 1 / 1.06; width: 100%; max-width: 600px; justify-self: center; }
.uniao-arco { position: absolute; margin: 0; transition: transform 1.8s var(--ease); }
.uniao-arco-a { left: 0; top: 0; width: 60%; }
.uniao-arco-b { right: 0; bottom: 0; width: 49%; z-index: 1; }
.uniao-arco-b .nicho { box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.uniao-elo {
  position: absolute; left: 50%; top: 56%; z-index: 2;
  width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 14px;
  color: var(--ouro-claro);
  background: radial-gradient(circle, rgba(5, 6, 10, .95) 58%, transparent 60%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(201, 164, 92, .6), 0 0 30px rgba(236, 196, 120, .25);
  transition: transform 1.2s var(--ease) .9s, opacity 1.2s var(--ease) .9s;
}
/* Antes de entrar na tela os arcos estão afastados; ao entrar, se unem */
.motion .uniao-arcos:not(.unido) .uniao-arco-a { transform: translateX(-9%); }
.motion .uniao-arcos:not(.unido) .uniao-arco-b { transform: translateX(11%); }
.motion .uniao-arcos:not(.unido) .uniao-elo { transform: scale(.4); opacity: 0; }

/* Texto */
.uniao-selo {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-weight: 500; color: var(--ouro-claro);
}
.uniao-selo::before { content: ""; width: 40px; height: 1px; background: var(--ouro); }
.uniao-texto h2 {
  font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1; letter-spacing: .02em;
  background: var(--folha); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5));
}
.uniao-lede {
  margin: 22px 0 18px; max-width: 30em;
  font-size: clamp(1.15rem, 1.8vw, 1.36rem); font-style: italic; line-height: 1.5; color: var(--marfim);
}
.uniao-texto > p:not(.uniao-lede):not(.uniao-selo):not(.uniao-nota) { color: var(--texto-suave); max-width: 36em; }

.uniao-casos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 26px 0 36px; }
.uniao-casos li {
  position: relative; padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--linha); font-weight: 500; color: var(--marfim); line-height: 1.35;
}
.uniao-casos li::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  background: #c4323b; transform: rotate(45deg);   /* vermelho das velas, só aqui */
}

/* Como o trabalho é feito: três etapas ligadas por um fio de ouro */
.uniao-como { margin-top: clamp(64px, 8vw, 104px); }
.uniao-sub { text-align: center; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--marfim); letter-spacing: .03em; margin-bottom: 40px; }
.uniao-etapas { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.uniao-etapas::before {
  content: ""; position: absolute; top: 22px; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, rgba(201, 164, 92, .2), var(--ouro) 30%, var(--ouro) 70%, rgba(201, 164, 92, .2));
}
.uniao-etapas li { position: relative; text-align: center; }
.uniao-n {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%;
  font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--ouro-claro);
  background: var(--onix); border: 1px solid var(--ouro);
  box-shadow: 0 0 0 6px rgba(5, 6, 10, .9);
}
.uniao-etapas h4 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--marfim); margin: 0 0 8px; }
.uniao-etapas p { margin: 0 auto; max-width: 24em; color: var(--texto-suave); font-size: .98rem; }

.uniao-acoes { margin-top: 36px; }
.uniao-nota { margin: 16px 0 0; font-size: .9rem; color: rgba(243, 234, 216, .8); max-width: 34em; }

/* Na ficha, a união amorosa ganha a borda de ouro */
.opcao-uniao > span { border-color: rgba(201, 164, 92, .75); }

/* ---------------------------------------------------------
   Consultas: tábuas de mármore com topo em arco
   --------------------------------------------------------- */
.consultas { padding: var(--secao) 0; }
.tabuas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }

.tabua {
  position: relative;
  display: flex; flex-direction: column;
  padding: 64px clamp(24px, 2.6vw, 36px) 32px;
  background:
    linear-gradient(180deg, rgba(13, 16, 25, .86), rgba(8, 10, 16, .95)),
    url("../assets/img/marmore-negro.webp") 50% 50% / 260%;
  border-radius: 999px 999px 4px 4px / 150px 150px 4px 4px;
  transition: transform .7s var(--ease);
}
.tabua::before {   /* borda de ouro do arco */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, var(--ouro), rgba(201, 164, 92, .2) 60%, rgba(201, 164, 92, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tabua:hover { transform: translateY(-4px); }
.tabua:nth-child(3) { background-position: 0 0, 80% 20%; }
.tabua:nth-child(1) { background-position: 0 0, 10% 90%; }

.tabua-destaque {
  background:
    linear-gradient(180deg, rgba(19, 41, 122, .82), rgba(10, 23, 71, .94)),
    url("../assets/img/marmore-lapis.webp") 40% 40% / 260%;
}
.tabua-destaque::before { background: var(--folha); padding: 1.5px; }
.tabua-selo {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 4px 16px; white-space: nowrap;
  background: var(--folha); color: #1b1405; font-size: .8rem; font-weight: 600;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.tabua-ico { width: 40px; height: 40px; margin: 0 auto 18px; color: var(--ouro); }
.tabua h3 { text-align: center; font-size: clamp(1.25rem, 1.8vw, 1.45rem); color: var(--marfim); }
.tabua-para { margin: 12px auto 22px; text-align: center; font-style: italic; color: var(--ouro-claro); max-width: 22em; }
.tabua ul { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--linha); margin-bottom: 26px; }
.tabua li { display: flex; gap: 10px; color: var(--texto-suave); font-size: .98rem; line-height: 1.45; }
.tabua li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ouro); }
.tabua-valor { margin: auto 0 16px; text-align: center; font-size: .88rem; color: rgba(243, 234, 216, .8); }
.tabua .btn { width: 100%; }

/* ---------------------------------------------------------
   Monte a sua consulta: formulário + ficha que se preenche
   --------------------------------------------------------- */
.monte { padding: var(--secao) 0; }
.monte-grade { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 64px); align-items: start; }

.monte-form { display: grid; gap: 34px; }
.passo legend {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 0;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--marfim);
}
.passo-n {   /* algarismo romano dentro de um losango de ouro */
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  font-size: .92rem; line-height: 1; color: var(--ouro-claro);
}
.passo-n::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid var(--ouro); transform: rotate(45deg);
}

.opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.opcoes-col { display: grid; grid-template-columns: 1fr; gap: 10px; }

.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao > span {
  display: block; padding: 12px 18px; min-height: 46px;
  background: rgba(5, 8, 22, .55);
  border: 1px solid rgba(201, 164, 92, .35);
  color: var(--marfim); font-weight: 500; line-height: 1.35;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.opcao:hover > span { border-color: var(--ouro); }
.opcao input:checked + span {
  background: var(--folha); background-size: 220% 100%; color: #1b1405; border-color: transparent;
}
.opcao input:focus-visible + span { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }

.opcao-larga > span { padding: 14px 20px; padding-right: 110px; }
.opcao-larga small { display: block; margin-top: 2px; font-size: .88rem; font-weight: 400; color: var(--texto-suave); }
.opcao-larga input:checked + span small { color: rgba(27, 20, 5, .8); }
.sugestao {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(.8);
  padding: 3px 10px; font-style: normal; font-size: .76rem; font-weight: 600;
  color: var(--onix); background: var(--vela);
  opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.opcao-larga.sugerida .sugestao { opacity: 1; transform: translateY(-50%); }
.opcao-larga.sugerida > span { border-color: var(--vela); }

.campos { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }
.campo { display: grid; gap: 8px; align-content: start; }
.campo span { font-size: .92rem; color: var(--texto-suave); }
.campo i { font-style: normal; opacity: .85; }
.campo input, .campo textarea {
  width: 100%; padding: 12px 14px; min-height: 48px;
  background: rgba(5, 8, 22, .6); border: 1px solid rgba(201, 164, 92, .35);
  color: var(--marfim); border-radius: 0; resize: vertical;
  transition: border-color .4s var(--ease);
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ouro-claro); }

/* Ficha: placa de mármore negro com moldura dupla */
.ficha { position: relative; }   /* parada no lugar: não acompanha o scroll */
.ficha-in {
  position: relative;
  padding: 36px clamp(22px, 2.4vw, 32px) 28px;
  background:
    linear-gradient(180deg, rgba(8, 10, 16, .84), rgba(5, 6, 10, .94)),
    url("../assets/img/marmore-negro.webp") 70% 30% / 300%;
  border: 1px solid var(--ouro);
  box-shadow: 0 0 0 6px rgba(5, 6, 10, .65), 0 0 0 7px rgba(201, 164, 92, .45), 0 30px 60px rgba(0, 0, 0, .45);
}
.ficha-marca { width: 30px; height: 36px; margin: 0 auto 10px; color: var(--ouro); }
.ficha h3 { text-align: center; font-size: 1.3rem; color: var(--ouro-claro); letter-spacing: .06em; }
.ficha-lista { margin: 22px 0 18px; }
.ficha-lista > div {
  display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px dashed rgba(201, 164, 92, .3);
}
.ficha-lista dt { font-size: .82rem; color: rgba(243, 234, 216, .8); }
.ficha-lista dd { margin: 0; font-weight: 500; color: var(--marfim); line-height: 1.4; overflow-wrap: anywhere; }
.ficha-lista dd.vazio { color: rgba(243, 234, 216, .8); font-style: italic; font-weight: 400; }
.ficha-lista dd.mudou { animation: tinta .9s var(--ease); }
@keyframes tinta { from { color: var(--ouro-claro); } to { color: var(--marfim); } }

.ficha-aviso { min-height: 1.4em; margin: 0 0 12px; font-size: .9rem; color: var(--ouro-claro); }
.ficha-nota { margin: 14px 0 0; text-align: center; font-size: .84rem; color: rgba(243, 234, 216, .8); }

/* ---------------------------------------------------------
   Como funciona: quatro passos em algarismo romano
   --------------------------------------------------------- */
.passos { padding: var(--secao) 0; }
.passos-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: none; }
.passos-lista li { position: relative; padding: 0 clamp(16px, 2vw, 30px); text-align: center; }
.passos-lista li + li { border-left: 1px solid var(--linha); }
.passos-n {
  display: block; margin-bottom: 20px;
  font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1;
  background: var(--folha); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.passos-lista h3 { font-size: 1.12rem; color: var(--marfim); margin-bottom: 12px; }
.passos-lista p { margin: 0; color: var(--texto-suave); font-size: .98rem; }

/* ---------------------------------------------------------
   Fé e devoção: três nichos de altar
   --------------------------------------------------------- */
.fe {
  padding: var(--secao) 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(201, 120, 50, .14), transparent 70%),
    linear-gradient(180deg, var(--onix), #0a0c14);
}
.cabeca-lado { max-width: 760px; }
.altar { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); align-items: end; padding: 12px; }
.altar-item { margin: 0; }
.altar-meio { transform: translateY(-36px); }
.motion .altar-meio[data-reveal].is-in { transform: translateY(-36px); }
.altar-item .nicho img { transition: transform 1.4s var(--ease); }
.altar-item .nicho { overflow: visible; }
.altar-item .nicho > img { will-change: transform; }
.altar-item:hover .nicho img { transform: scale(1.03); }
.altar-item figcaption {
  margin-top: 24px; text-align: center;
  font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: .03em; color: var(--ouro-claro);
}

/* ---------------------------------------------------------
   Compromisso: a única seção clara, placa de mármore branco
   --------------------------------------------------------- */
.compromisso {
  padding: var(--secao) 0;
  background:
    linear-gradient(180deg, rgba(243, 234, 216, .9), rgba(236, 226, 205, .94)),
    url("../assets/img/marmore-negro.webp") 50% 50% / cover;
  color: #1a1610;
}
.compromisso-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.compromisso h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--lapis); }
.compromisso h2::after { content: ""; display: block; width: 72px; height: 1px; margin-top: 22px; background: var(--ouro-escuro); }
.compromisso-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; }
.comp { padding-top: 20px; border-top: 1px solid rgba(138, 106, 44, .5); }
.comp h3 { font-size: 1.14rem; color: #14110b; margin-bottom: 10px; }
.comp p { margin: 0; color: rgba(26, 22, 16, .84); }

/* ---------------------------------------------------------
   Dúvidas
   --------------------------------------------------------- */
.duvidas { padding: var(--secao) 0; }
.duvidas-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.duvidas .cabeca { margin-bottom: 0; position: sticky; top: 110px; }
.duvidas .cabeca p { margin-left: 0; margin-bottom: 26px; }

.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-child { border-top: 1px solid var(--linha); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--marfim);
  transition: color .4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ouro-claro); }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--ouro); transition: transform .5s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 40px 24px 0; color: var(--texto-suave); }
.motion .faq details[open] p { animation: subir .6s var(--ease); }

/* ---------------------------------------------------------
   Contato final
   --------------------------------------------------------- */
.contato { padding: var(--secao) 0; text-align: center; background-position: center, 20% 60%; }
.contato-in { max-width: 820px; }
.contato-marca { width: 46px; height: 56px; margin: 0 auto 26px; color: var(--ouro); }
.contato h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.contato p { margin: 22px auto 0; max-width: 34em; color: var(--texto-suave); font-size: 1.08rem; }
.contato-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */
.rodape { padding: 64px 0 28px; background: var(--onix); border-top: 1px solid var(--linha); }
.rodape-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.rodape-marca p { margin: 14px 0 0; max-width: 30em; color: var(--texto-suave); font-size: .95rem; }
.rodape-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; align-content: flex-start; }
.rodape-nav a { padding: 8px 0; color: var(--texto-suave); transition: color .4s var(--ease); }
.rodape-nav a:hover { color: var(--ouro-claro); }
.rodape-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(201, 164, 92, .16); font-size: .86rem; color: rgba(243, 234, 216, .8); }
.rodape-base p { margin: 0 0 6px; }
.rodape-base a { color: var(--ouro-claro); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------
   WhatsApp flutuante: moeda de ouro
   --------------------------------------------------------- */
.whats-flutuante {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--folha); background-size: 220% 100%; color: #1b1405;
  box-shadow: 0 0 0 4px rgba(5, 6, 10, .7), 0 0 0 5px rgba(201, 164, 92, .6), 0 14px 30px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.whats-flutuante svg { width: 28px; height: 28px; }
.whats-flutuante.visivel { opacity: 1; visibility: visible; transform: none; }

/* ---------------------------------------------------------
   Entrada por scroll (só em grades e passos, nunca em seção inteira)
   --------------------------------------------------------- */
.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; }
.motion .tabua[data-reveal].is-in:hover { transform: translateY(-4px); }

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */
@media (max-width: 1080px) {
  .tabuas { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 40px; }
  .monte-grade { grid-template-columns: 1fr; }
  .ficha { position: static; }
  .passos-lista { grid-template-columns: 1fr 1fr; gap: 48px 0; }
  .passos-lista li:nth-child(3) { border-left: 0; }
}

@media (max-width: 899px) {
  .hero { padding-top: 92px; min-height: 0; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .hero-foto { order: -1; width: min(64vw, 300px); }
  .hero-foto figcaption { display: none; }
  .hero-oficio { justify-content: center; }
  .hero-oficio::before { display: none; }
  .hero-lede { margin-left: auto; margin-right: auto; }
  .hero-acoes { justify-content: center; }
  .inscricao { grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 44px; padding-bottom: 36px; }

  .sobre-in, .compromisso-in, .duvidas-in, .uniao-in { grid-template-columns: 1fr; }
  .uniao-arcos { max-width: 420px; }
  .sobre-foto { width: min(76vw, 360px); margin: 0 auto; }
  .duvidas .cabeca { position: static; }

  .altar { grid-template-columns: repeat(3, 76%); overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; padding: 18px 12px 16px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
  .altar::-webkit-scrollbar { display: none; }
  .altar-item { scroll-snap-align: center; }
  .altar-meio, .motion .altar-meio[data-reveal].is-in { transform: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero-nome { font-size: clamp(3rem, 15vw, 4.4rem); }
  .hero-acoes { flex-direction: column; align-items: stretch; }
  .hero-acoes .btn { width: 100%; }
  .hero-nota { font-size: .86rem; }
  .compromisso-lista { grid-template-columns: 1fr; gap: 26px; }
  .uniao-casos { grid-template-columns: 1fr; gap: 0; }
  .uniao-acoes .btn { width: 100%; }
  .uniao-etapas { grid-template-columns: 1fr; gap: 22px; }
  .uniao-etapas::before { top: 22px; bottom: 22px; left: 22px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--ouro), rgba(201, 164, 92, .25)); }
  .uniao-etapas li { display: grid; grid-template-columns: 46px 1fr; gap: 0 16px; text-align: left; }
  .uniao-n { margin: 0; grid-row: span 2; }
  .uniao-etapas h4 { margin-top: 11px; }
  .uniao-etapas p { margin: 0; }
  .uniao-sub { text-align: left; margin-bottom: 26px; }
  .uniao-elo { width: 54px; height: 54px; margin: -27px 0 0 -27px; padding: 12px; }
  .campos { grid-template-columns: 1fr; }
  .passos-lista { grid-template-columns: 1fr; gap: 0; }
  .passos-lista li { display: grid; grid-template-columns: 64px 1fr; text-align: left; gap: 0 14px; padding: 22px 0; }
  .passos-lista li + li { border-left: 0; border-top: 1px solid var(--linha); }
  .passos-n { grid-row: span 2; margin: 0; font-size: 2.4rem; }
  .passos-lista h3 { margin-bottom: 6px; }
  .opcao-larga > span { padding-right: 20px; padding-top: 28px; }
  .sugestao { top: 8px; right: 10px; transform: scale(.8); }
  .opcao-larga.sugerida .sugestao { transform: none; }
  .faq details p { padding-right: 0; }
  .contato-acoes .btn { width: 100%; }
  .tabua { border-radius: 999px 999px 4px 4px / 110px 110px 4px 4px; }
}

@media (max-width: 360px) {
  .inscricao { grid-template-columns: 1fr; }
  .marca span { font-size: 1.1rem; }
}

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