/* =========================================================
   Taróloga Melissa
   Direção visual: mesa de atendimento. Um fundo claro único (névoa) do
   começo ao fim, e os blocos escuros entram como painéis dentro dele,
   com o mesmo canto e a mesma margem. Petróleo das guias, ouro do Ganesha,
   vermelho das pétalas só no amor. Serifada editorial (Newsreader).
   Por quê: a cliente pediu mais credibilidade e seções que conversem.
   Fundo que não muda e painéis repetidos dão ritmo calmo; as cores vêm
   das guias, das imagens e dos cartazes dela, sem o amarelo do vestido.
   Nada se mexe com o scroll: só o que a pessoa toca responde.
   ========================================================= */

:root {
  /* Paleta */
  --nevoa: #EEF2F0;        /* fundo da página inteira */
  --nevoa-2: #E2E9E6;      /* faixas e painéis claros */
  --branco: #FAFBFA;
  --petroleo: #0F2C33;     /* guias, texto e painéis escuros */
  --petroleo-2: #17404A;
  --guia: #2E7F87;         /* azul das contas das guias */
  --ouro: #C9A35B;         /* Ganesha e cartazes, sobre o escuro */
  --ouro-escuro: #8A6A2C;  /* ouro legível sobre o claro */
  --petala: #A8233A;       /* só no que é de amor */

  --texto: var(--petroleo);
  --texto-suave: rgba(15, 44, 51, .78);
  --linha: rgba(15, 44, 51, .16);
  --claro: #EEF2F0;
  --claro-suave: rgba(238, 242, 240, .82);

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

  /* Ritmo */
  --largura: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --secao: clamp(72px, 9vw, 128px);
  --raio-painel: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--nevoa);
  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-family: var(--display); font-weight: 500; line-height: 1.08;
  font-variant-numeric: lining-nums; font-optical-sizing: auto;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
figure, blockquote { margin: 0; }

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

.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(--petroleo); color: var(--claro);
  padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.pular:focus { top: 12px; }

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

/* Fio entre seções claras: a mesma linha fina, sempre na largura do conteúdo */
.sobre > .container::before, .trabalhos > .container::before,
.altar > .container::before, .duvidas > .container::before {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--secao) * -1);
  height: 1px; background: var(--linha);
}
.sobre > .container, .trabalhos > .container, .passos > .container, .altar > .container, .duvidas > .container { position: relative; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

.titulo {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Painel escuro: o mesmo bloco em Carta, Portugal e Final */
.painel {
  background: var(--petroleo);
  color: var(--claro);
  border-radius: var(--raio-painel);
  position: relative; overflow: hidden;
}
.painel::before { /* filete de ouro por dentro, como a moldura de uma carta */
  content: ""; position: absolute; inset: 10px; border-radius: calc(var(--raio-painel) - 8px);
  border: 1px solid rgba(201, 163, 91, .28); pointer-events: none;
}

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 1rem; line-height: 1.2; cursor: pointer; text-align: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.botao .ico { width: 1.25em; height: 1.25em; }
.botao-escuro { background: var(--petroleo); color: var(--claro); }
.botao-escuro:hover { background: var(--petroleo-2); box-shadow: 0 0 0 4px rgba(46, 127, 135, .18); }
.botao-linha { background: transparent; color: var(--petroleo); box-shadow: inset 0 0 0 1.5px var(--petroleo); }
.botao-linha:hover { background: var(--branco); }
.botao-ouro { background: var(--ouro); color: var(--petroleo); }
.botao-ouro:hover { background: #D8B571; box-shadow: 0 0 0 4px rgba(201, 163, 91, .22); }
.botao-linha-clara { background: transparent; color: var(--claro); box-shadow: inset 0 0 0 1.5px rgba(238, 242, 240, .5); }
.botao-linha-clara:hover { box-shadow: inset 0 0 0 1.5px var(--claro); background: rgba(238, 242, 240, .06); }
.botao-pequeno {
  min-height: 44px; padding: 10px 20px; font-size: .95rem;
  background: transparent; color: var(--petroleo); box-shadow: inset 0 0 0 1.5px var(--linha);
}
.botao-pequeno:hover { background: var(--petroleo); color: var(--claro); box-shadow: none; }
.botao-grande { min-height: 58px; padding: 16px 30px; font-size: 1.05rem; }

/* ---------------------------------------------------------
   Header (sem backdrop-filter, para o menu fixo não ser cortado)
   --------------------------------------------------------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--nevoa); transition: box-shadow .3s var(--ease); }
.topo.rolado { box-shadow: 0 1px 0 var(--linha); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }

.marca { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding-top: 6px; }
.marca-nome { font-family: var(--display); font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.marca-sub { font-size: .9rem; color: var(--texto-suave); }

.menu { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.menu ul { display: flex; gap: clamp(18px, 2.4vw, 32px); }
.menu ul a { position: relative; font-weight: 500; padding: 8px 0; }
.menu ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--ouro-escuro);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.menu ul a:hover::after, .menu ul a.ativo::after { transform: scaleX(1); }
.menu-cta { min-height: 46px; padding: 10px 20px; font-size: .95rem; }

.menu-botao { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; }
.menu-botao .ico { width: 28px; height: 28px; }
.menu-botao .ico-fechar { display: none; }
.menu-botao[aria-expanded="true"] .ico-menu { display: none; }
.menu-botao[aria-expanded="true"] .ico-fechar { display: block; }

@media (max-width: 899px) {
  .menu-botao { display: inline-flex; position: relative; z-index: 2; }
  .menu {
    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(--petroleo); color: var(--claro);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
  }
  .menu.aberto { opacity: 1; visibility: visible; }
  .menu ul { flex-direction: column; gap: 4px; }
  .menu ul a { font-family: var(--display); font-size: 2.4rem; line-height: 1.35; }
  .menu ul a::after { background: var(--ouro); }
  .menu .menu-cta { background: var(--ouro); color: var(--petroleo); min-height: 54px; }
  .topo:has(.menu.aberto) .marca, .topo:has(.menu.aberto) .menu-botao { color: var(--claro); position: relative; z-index: 2; }
  .topo:has(.menu.aberto) .marca-sub { color: var(--claro-suave); }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero { padding: clamp(28px, 5vw, 72px) 0 var(--secao); }
.hero-grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.hero-titulo { font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: .98; letter-spacing: -.03em; }
.hero-lead { max-width: 31em; font-size: clamp(1.06rem, 1.5vw, 1.22rem); color: var(--texto-suave); margin-top: clamp(20px, 2.6vw, 30px); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

.selos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--linha); }
.selos li { display: flex; gap: 12px; padding: 18px 18px 0 0; font-size: .93rem; line-height: 1.45; color: var(--texto-suave); }
.selos li + li { padding-left: 18px; border-left: 1px solid var(--linha); }
.selos .ico { width: 22px; height: 22px; color: var(--ouro-escuro); margin-top: 1px; }
.selos strong { display: block; color: var(--texto); font-weight: 600; }

.hero-foto { position: relative; justify-self: end; width: 100%; max-width: 420px; }
.moldura {
  position: relative; border-radius: 999px 999px 26px 26px; overflow: hidden;
  background: var(--petroleo); aspect-ratio: 4 / 5.4;
  box-shadow: 0 0 0 1px var(--linha), 0 40px 70px -40px rgba(15, 44, 51, .55);
}
.moldura img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.moldura::after { /* filete de ouro por dentro do arco */
  content: ""; position: absolute; inset: 10px; border-radius: 999px 999px 18px 18px;
  border: 1px solid rgba(201, 163, 91, .65); pointer-events: none;
}
.hero-leg {
  position: absolute; left: -28px; bottom: 32px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--branco); border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 18px 40px -22px rgba(15, 44, 51, .45);
  font-size: .9rem; color: var(--texto-suave); line-height: 1.35;
}
.hero-leg-titulo { font-family: var(--display); font-size: 1.2rem; color: var(--texto); font-weight: 500; }

/* ---------------------------------------------------------
   Sobre
   --------------------------------------------------------- */
.sobre-grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 104px); align-items: center; }
.sobre-fotos { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: start; }
.sobre-video { border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--nevoa-2); }
.sobre-fotos .sobre-foto { margin-top: 72px; }
.sobre-video { position: relative; }

/* Botão de som do vídeo: começa mudo, um toque liga */
.som {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px 10px 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(15, 44, 51, .82); color: var(--claro); font-weight: 600; font-size: .9rem;
  box-shadow: inset 0 0 0 1px rgba(201, 163, 91, .55);
  transition: background .25s var(--ease);
}
.som:hover { background: var(--petroleo); }
.som .ico { width: 20px; height: 20px; color: var(--ouro); }
.som .ico-som { display: none; }
.som[aria-pressed="true"] .ico-som { display: block; }
.som[aria-pressed="true"] .ico-mudo { display: none; }
.sobre-video video { width: 100%; height: 100%; object-fit: cover; }
.sobre-foto { width: 100%; height: auto; aspect-ratio: 3 / 4.4; object-fit: cover; object-position: 50% 25%; border-radius: 999px 999px 22px 22px; }
.sobre-lead { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.3; margin: 22px 0 22px; }
.sobre-texto > p:not(.sobre-lead) { max-width: 34em; color: var(--texto-suave); }
.link-insta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--guia); border-bottom: 1.5px solid currentColor; }
.link-insta:hover { color: var(--petroleo); }

/* ---------------------------------------------------------
   Trabalhos: seletor de momento + lista
   --------------------------------------------------------- */
.trabalhos-cabeca { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; align-items: end; }
.trabalhos-cabeca p { margin: 0; max-width: 28em; color: var(--texto-suave); }

.momentos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vw, 44px); }
.momento {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: var(--branco); border: 1px solid var(--linha); font-weight: 500; font-size: .95rem;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.momento:hover { border-color: var(--petroleo); }
.momento[aria-pressed="true"] { background: var(--petroleo); color: var(--claro); border-color: var(--petroleo); }
.momento-dica { margin: 16px 0 0; min-height: 1.65em; font-size: .95rem; color: var(--ouro-escuro); font-weight: 500; }

.lista-trabalhos { margin-top: 18px; border-top: 1px solid var(--petroleo); }
.trabalho {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 8px 24px; align-items: center;
  padding: 24px 16px; border-bottom: 1px solid var(--linha); border-radius: 0;
  transition: opacity .35s var(--ease), background .35s var(--ease), border-radius .35s;
}
.trabalho-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--nevoa-2); color: var(--petroleo);
}
.trabalho-ico .ico { width: 24px; height: 24px; }
.trabalho-amor .trabalho-ico { background: rgba(168, 35, 58, .1); color: var(--petala); }
.trabalho h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
.trabalho-corpo p { margin: 6px 0 0; max-width: 40em; color: var(--texto-suave); }
.trabalho-corpo .trabalho-meta { font-size: .9rem; color: var(--ouro-escuro); font-weight: 500; }
.trabalho.apagado { opacity: .32; }
.trabalho.indicado { background: var(--branco); border-radius: 18px; border-bottom-color: transparent; }
.trabalho.indicado .trabalho-ico { background: var(--petroleo); color: var(--ouro); }
.trabalho.indicado.trabalho-amor .trabalho-ico { background: var(--petala); color: var(--claro); }
.trabalhos-nota { margin: 22px 0 0; font-size: .95rem; color: var(--texto-suave); }

/* ---------------------------------------------------------
   Tire uma carta (painel escuro)
   --------------------------------------------------------- */
.painel-carta {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(40px, 6vw, 80px);
  background:
    radial-gradient(circle at 75% 55%, rgba(46, 127, 135, .35), transparent 55%),
    var(--petroleo);
}
.carta-instrucao { color: var(--claro-suave); font-size: 1.08rem; margin: 18px 0 0; }
.carta-resultado { margin-top: 22px; }
.carta-resultado h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--ouro); }
.carta-resultado p { margin: 12px 0 24px; max-width: 30em; color: var(--claro); font-size: 1.06rem; }
.carta-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.carta-aviso { margin: 26px 0 0; font-size: .88rem; color: rgba(238, 242, 240, .7); max-width: 32em; }
.carta-sem-js { color: var(--claro-suave); }

/* Mesa com o leque de cartas */
.mesa { position: relative; height: clamp(300px, 34vw, 400px); }
.carta-item {
  --w: clamp(92px, 9.4vw, 124px);
  position: absolute; left: 50%; bottom: 8%;
  width: var(--w); aspect-ratio: 360 / 622; margin-left: calc(var(--w) / -2);
  padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 900px;
  /* Leque: cada carta desloca e gira a partir do próprio centro (--d de -3 a 3) */
  transform-origin: 50% 50%;
  transform: translate(calc(var(--d) * var(--w) * .46), calc(var(--d) * var(--d) * 5px)) rotate(calc(var(--d) * 8deg));
  transition: transform .7s var(--ease), opacity .45s var(--ease);
  border-radius: 10px;
}
.carta-item:hover:not(.escolhida):not(:disabled) { transform: translate(calc(var(--d) * var(--w) * .46), calc(var(--d) * var(--d) * 5px - 14px)) rotate(calc(var(--d) * 8deg)); }
.carta-gira {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .8s var(--ease);
}
.carta-verso, .carta-frente {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
}
/* Verso desenhado: petróleo, treliça de ouro e um sol no centro */
.carta-verso {
  background:
    radial-gradient(circle at 50% 50%, var(--ouro) 0 5%, transparent 5.5%),
    radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(201, 163, 91, .9) 15.5% 16.5%, transparent 17%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(201, 163, 91, .55) 0 2deg, transparent 2deg 22.5deg),
    repeating-linear-gradient(45deg, rgba(201, 163, 91, .08) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(201, 163, 91, .08) 0 1px, transparent 1px 12px),
    var(--petroleo-2);
  -webkit-mask: none;
}
.carta-verso::after {
  content: ""; position: absolute; inset: 6px; border-radius: 7px; border: 1px solid rgba(201, 163, 91, .8);
}
.carta-frente { transform: rotateY(180deg); background: #f3ead6; padding: 5px; }
.carta-frente img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

.carta-item.escolhida {
  transform: translate(0, -18%) rotate(0deg) scale(1.55);
  z-index: 5; cursor: default;
}
.carta-item.escolhida .carta-gira { transform: rotateY(180deg); }
.carta-item.fora { opacity: .14; pointer-events: none; }
.carta-item:focus-visible { outline-color: var(--ouro); outline-offset: 4px; }

/* ---------------------------------------------------------
   Como funciona + compromissos
   --------------------------------------------------------- */
.passos-lista {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(36px, 5vw, 60px); position: relative;
}
.passos-lista::before { /* linha que liga os três passos */
  content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: var(--linha);
}
.passos-lista li { position: relative; }
.passo-n {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--petroleo); color: var(--ouro); font-weight: 600; font-size: 1.02rem;
  box-shadow: 0 0 0 8px var(--nevoa);
}
.passos-lista h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); margin: 20px 0 10px; }
.passos-lista p { margin: 0; max-width: 24em; color: var(--texto-suave); }

.compromissos {
  margin-top: clamp(44px, 6vw, 72px);
  background: var(--nevoa-2); border-radius: var(--raio-painel);
  padding: clamp(28px, 4vw, 44px);
}
.compromissos-titulo { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.compromissos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 36px; margin-top: 22px; }
.compromissos li { display: flex; gap: 14px; align-items: flex-start; }
.compromissos li .ico { width: 26px; height: 26px; color: var(--ouro-escuro); margin-top: 2px; }
.compromissos li p { margin: 0; color: var(--texto-suave); }
.compromissos strong { color: var(--texto); font-weight: 600; }

/* ---------------------------------------------------------
   Altar: galeria com palco, legenda e miniaturas
   --------------------------------------------------------- */
.altar-cabeca { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.altar-cabeca p { margin: 0; max-width: 30em; color: var(--texto-suave); }

.galeria { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }

/* Palco: foto grande em arco, com o mesmo filete de ouro do hero */
.palco {
  position: relative; width: 100%; max-width: 500px; justify-self: center;
  aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; overflow: hidden;
  background: var(--petroleo);
  box-shadow: 0 40px 70px -40px rgba(15, 44, 51, .55);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.palco::after {
  content: ""; position: absolute; inset: 10px; border-radius: 999px 999px 18px 18px;
  border: 1px solid rgba(201, 163, 91, .65); pointer-events: none; z-index: 3;
}
.palco:focus-visible { outline: 2px solid var(--guia); outline-offset: 4px; }
.palco-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  opacity: 0; transition: opacity .55s var(--ease);
  -webkit-user-drag: none;
}
.palco-img.ativa { opacity: 1; }

.palco-seta {
  position: absolute; top: 50%; z-index: 4; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(238, 242, 240, .92); color: var(--petroleo); border: 0; cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
  transition: background .25s var(--ease);
}
.palco-seta:hover { background: var(--branco); }
.palco-ant { left: 16px; }
.palco-prox { right: 16px; }

.galeria-lado { min-width: 0; }
.galeria-contador { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ouro-escuro); font-variant-numeric: lining-nums tabular-nums; }
.galeria-leg { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: 8px; }
.galeria-texto { margin: 12px 0 0; min-height: 3.3em; max-width: 28em; color: var(--texto-suave); }

.miniaturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 24px 0 26px; max-width: 420px; }
.mini {
  display: block; width: 100%; padding: 0; border: 0; background: var(--nevoa-2); cursor: pointer;
  border-radius: 999px 999px 10px 10px; overflow: hidden; aspect-ratio: 3 / 4.4;
  opacity: .55; outline-offset: 3px;
  box-shadow: 0 0 0 0 var(--petroleo);
  transition: opacity .25s var(--ease), box-shadow .25s var(--ease);
}
.mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mini:hover { opacity: .85; }
.mini[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--nevoa), 0 0 0 3.5px var(--petroleo); }

/* ---------------------------------------------------------
   Dúvidas + Portugal (nada fixo na rolagem)
   --------------------------------------------------------- */
.duvidas-grade { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.painel-portugal { margin-top: 32px; padding: 30px 30px 32px; }
.painel-portugal h3 { font-size: 1.6rem; color: var(--claro); }
.painel-portugal > p { margin: 10px 0 0; color: var(--claro-suave); font-size: .97rem; }
.relogios { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; border-top: 1px solid rgba(238, 242, 240, .2); }
.relogio { padding: 16px 0 4px; display: flex; flex-direction: column; }
.relogio + .relogio { border-left: 1px solid rgba(238, 242, 240, .2); padding-left: 20px; }
.relogio-hora { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--ouro); font-variant-numeric: lining-nums tabular-nums; }
.relogio-lugar { margin-top: 8px; font-size: .9rem; color: var(--claro-suave); }
.relogio-dif { margin: 14px 0 22px !important; font-size: .92rem; color: var(--claro-suave); }

.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-child { border-top: 1px solid var(--petroleo); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 500; font-size: clamp(1.18rem, 1.9vw, 1.4rem); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%; flex: none;
  border: 1px solid var(--linha); transition: transform .35s var(--ease), background .25s, color .25s;
}
.faq summary:hover .ico { background: var(--branco); }
.faq details[open] summary .ico { transform: rotate(45deg); background: var(--petroleo); color: var(--claro); border-color: var(--petroleo); }
.faq details p { margin: 0 0 24px; max-width: 36em; color: var(--texto-suave); }

/* ---------------------------------------------------------
   Final
   --------------------------------------------------------- */
.final { padding: 0 0 var(--secao); }
.painel-final {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end;
  padding: clamp(44px, 7vw, 96px);
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 163, 91, .16), transparent 45%),
    var(--petroleo);
}
.final-frase blockquote p {
  margin: 0; font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.1; text-wrap: balance;
}
.final-frase figcaption { margin-top: 18px; color: var(--ouro); font-weight: 500; }
.final-acao p { color: var(--claro-suave); margin-bottom: 24px; max-width: 26em; }

/* ---------------------------------------------------------
   Rodapé (no mesmo fundo claro)
   --------------------------------------------------------- */
.rodape { padding: 0 0 36px; }
.rodape-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 80px; padding-top: 48px; border-top: 1px solid var(--linha); }
.rodape-nome { font-family: var(--display); font-size: 1.8rem; font-weight: 500; line-height: 1.1; margin-bottom: 10px; }
.rodape-marca p { color: var(--texto-suave); max-width: 26em; }
.rodape-insta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--guia); }
.rodape-aviso, .rodape-copy, .rodape-credito { color: var(--texto-suave); font-size: .9rem; }
.rodape-copy { margin-top: 20px; }
.rodape-credito a { display: inline-block; padding: 12px 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------
   WhatsApp flutuante
   --------------------------------------------------------- */
.whats-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--petroleo); color: var(--ouro);
  box-shadow: inset 0 0 0 1px rgba(201, 163, 91, .6), 0 12px 30px -8px rgba(15, 44, 51, .55);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.whats-flutuante.visivel { opacity: 1; visibility: visible; }
.whats-flutuante .ico { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */
@media (max-width: 899px) {
  .hero-grade { grid-template-columns: 1fr; gap: 0; }
  .hero-texto { display: contents; }
  .hero-titulo { order: 1; }
  .hero-foto { order: 2; justify-self: stretch; max-width: none; margin: 24px 0 0; }
  .moldura { aspect-ratio: 4 / 3.3; }
  .moldura img { object-position: 50% 22%; }
  .hero-leg { left: 12px; bottom: 12px; padding: 10px 14px; }
  .hero-lead { order: 3; }
  .hero-acoes { order: 4; }
  .selos { order: 5; }
  .selos { grid-template-columns: 1fr; }
  .selos li { padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .selos li + li { padding-left: 0; border-left: 0; }

  .sobre-grade { grid-template-columns: 1fr; }
  .trabalhos-cabeca { grid-template-columns: 1fr; }
  .painel-carta { grid-template-columns: 1fr; }
  .mesa { order: -1; height: 300px; }
  .passos-lista { grid-template-columns: 1fr; gap: 32px; }
  .passos-lista::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .passos-lista li { padding-left: 68px; }
  .passo-n { position: absolute; left: 0; top: 0; }
  .passos-lista h3 { margin-top: 8px; }
  .compromissos ul { grid-template-columns: 1fr; }
  .duvidas-grade { grid-template-columns: 1fr; }
  .altar-cabeca { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr; gap: 22px; }
  .palco { max-width: 460px; }
  .galeria-lado { max-width: 460px; width: 100%; justify-self: center; }
  .galeria-texto { min-height: 0; }
  .miniaturas {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 18px calc(var(--gutter) * -1) 22px; padding: 4px var(--gutter) 8px;
    scrollbar-width: none;
  }
  .miniaturas::-webkit-scrollbar { display: none; }
  .miniaturas li { flex: 0 0 64px; scroll-snap-align: start; }
  .painel-final { grid-template-columns: 1fr; align-items: start; }
  .rodape-grade { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .moldura { aspect-ratio: 4 / 2.9; }
  .hero { padding-top: 20px; }
  .hero-foto { margin-top: 18px; }
  .hero-lead { margin-top: 16px; }
  .carta-item { --w: 64px !important; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-titulo { font-size: clamp(2.7rem, 13.4vw, 3.6rem); }
  .hero-acoes .botao { flex: 1 1 100%; }
  .trabalho { grid-template-columns: 44px 1fr; padding: 22px 6px; gap: 6px 16px; }
  .trabalho-ico { width: 44px; height: 44px; }
  .trabalho .botao-pequeno { grid-column: 2; justify-self: start; margin-top: 10px; }
  .trabalho.indicado { padding-inline: 14px; }
  .momento { font-size: .9rem; padding: 9px 14px; }
  .painel-carta { padding: 36px 22px 32px; }
  .painel::before { inset: 7px; }
  .mesa { height: 270px; }
  .carta-item { --w: 74px; }
  .carta-item.escolhida { transform: translate(0, -16%) rotate(0deg) scale(1.7); }
  .carta-acoes .botao { flex: 1 1 100%; }
  .palco-seta { width: 44px; height: 44px; }
  .palco-ant { left: 10px; }
  .palco-prox { right: 10px; }
  .painel-portugal { padding: 26px 22px 28px; }
  .relogio + .relogio { padding-left: 14px; }
  .botao-grande { width: 100%; }
}