/* ============================================================
   Vizu Memórias · memorias.css
   Álbum digital de restauração fotográfica — pranchas 16:9.
   Paleta café/sépia/areia · Fraunces + Inter Tight + IBM Plex Mono.
   ============================================================ */

:root {
  --carvao: #0B0A08;
  --cafe: #14100D;
  --marrom: #241A14;
  --sepia: #8A6848;
  --areia: #D8C3A5;
  --papel: #EFE3CF;
  --dourado: #B89A62;
  --cinza-foto: #7A746C;
  --guia: #9C948A;            /* itens inativos do guia (7.39:1 no escuro) */
  --moldura: #EFE3CF;         /* papel das molduras — não muda com o tema */
  --moldura-borda: transparent;
  --moldura-sombra: 0 30px 80px rgba(0, 0, 0, .55);

  --font-title: 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --margem: clamp(28px, 6vw, 120px);
}

/* ---------- modo claro (persistido em localStorage 'vm-theme') ----------
   contrastes medidos sobre #F5EFE3: texto 16.5:1 · muted 6.6:1 ·
   sépia 5.9:1 · areia 6.3:1 · dourado 5.5:1 (todos >= 4.5 AA) */
html[data-theme="light"] {
  --carvao: #F5EFE3;          /* fundo */
  --cafe: #EFE3CF;
  --marrom: #E7D9C0;
  --sepia: #735636;
  --areia: #6E5230;           /* itálicos/destaques */
  --papel: #14100D;           /* texto principal */
  --dourado: #7A5A28;
  --cinza-foto: #5D5347;      /* muted */
  --guia: #5D5347;
  --moldura-borda: #d8c3a5;   /* a moldura papel some no fundo claro */
  --moldura-sombra: 0 18px 44px rgba(76, 56, 34, .22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--carvao);
  color: var(--papel);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(184, 154, 98, .35); color: var(--papel); }
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; border-radius: 4px; }

/* textura de papel + grão + vinheta — quase imperceptíveis */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='11'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: overlay;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(ellipse 95% 88% at 50% 46%, transparent 60%, rgba(4, 3, 2, .5) 100%);
}
/* claro: grão e vinheta bem mais discretos */
html[data-theme="light"] body::before { opacity: .022; }
html[data-theme="light"] body::after {
  background: radial-gradient(ellipse 95% 88% at 50% 46%, transparent 68%, rgba(90, 66, 40, .14) 100%);
}

/* ---------- topo discreto ---------- */
.mem-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(.8rem, 2vw, 2rem);
  padding: 22px var(--margem);
  background: linear-gradient(180deg, rgba(11, 10, 8, .85), transparent);
}
html[data-theme="light"] .mem-top { background: linear-gradient(180deg, rgba(245, 239, 227, .92), transparent); }

/* guia de seções nomeada (centro do topo; vira fila rolável quando aperta) */
.mem-guia {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  gap: clamp(.35rem, 1.2vw, 1.15rem);
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.mem-guia::-webkit-scrollbar { display: none; }
/* centragem segura: centraliza com folga e mantém todo item alcançável no overflow */
.mem-guia a:first-child { margin-left: auto; }
.mem-guia a:last-child { margin-right: auto; }
.mem-guia a {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--guia);
  padding: 10px 4px; min-height: 36px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.mem-guia a:hover { color: var(--papel); }
.mem-guia a.is-active { color: var(--dourado); border-bottom-color: var(--dourado); }
.mem-guia .guia-album {
  color: var(--dourado);
  border: 1px solid color-mix(in srgb, var(--dourado) 45%, transparent);
  border-radius: 2px; padding: 6px 12px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.mem-guia .guia-album:hover {
  color: var(--papel); border-color: var(--dourado);
  background: color-mix(in srgb, var(--dourado) 12%, transparent);
}

.mem-top-acoes { display: inline-flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.1rem); }

/* alternador claro/escuro */
.mem-theme {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--areia); cursor: pointer;
  transition: color .3s var(--ease);
}
.mem-theme:hover { color: var(--papel); }
.mem-theme .mt-moon { display: none; }
html[data-theme="light"] .mem-theme .mt-sun { display: none; }
html[data-theme="light"] .mem-theme .mt-moon { display: block; }
.mem-lockup { display: inline-flex; align-items: baseline; gap: 14px; }
.mem-lockup svg { height: 17px; width: auto; color: var(--papel); fill: currentColor; }
/* <640px o lockup vira só o ícone polaroid (padrão brand-icon-mobile do index) */
.mem-lockup-icone { display: none; width: 30px; height: 30px; align-self: center; }
.mem-lockup .mem-word {
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  letter-spacing: .42em; text-transform: uppercase; color: var(--dourado);
}
.mem-top-cta {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--areia); border-bottom: 1px solid rgba(216, 195, 165, .4);
  padding-bottom: 3px; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.mem-top-cta:hover { color: var(--papel); border-color: var(--papel); }
html[data-theme="light"] .mem-top-cta { border-bottom-color: rgba(110, 82, 48, .4); }

/* ---------- prancha base ---------- */
.prancha {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* trava a coluna na caixa de conteúdo: sem isso o track 'auto' cresce até min-content e estoura no 320 */
  align-content: center;
  padding: clamp(80px, 10vh, 120px) var(--margem);
  scroll-snap-align: start;
  border-bottom: 1px solid rgba(216, 195, 165, .07);
}
html[data-theme="light"] .prancha { border-bottom-color: rgba(110, 82, 48, .14); }
@media (min-width: 1024px) { html { scroll-snap-type: y proximity; } }

.sec-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .34em; color: var(--sepia);
}
.sec-num::after { content: ''; display: inline-block; width: 56px; height: 1px; background: var(--sepia); margin-left: 16px; vertical-align: middle; opacity: .6; }
h1, h2 { font-family: var(--font-title); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 3.1rem); }
h1 em, h2 em { font-style: italic; color: var(--areia); }
.lede { color: var(--areia); font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 400; max-width: 52ch; }
.paragrafo { color: var(--cinza-foto); font-size: clamp(.95rem, 1.05vw, 1.05rem); max-width: 48ch; }
.micro {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sepia);
}

/* labels de foto (cores fixas: vivem sobre a foto, não sobre o fundo do tema) */
.ph-label {
  position: absolute; bottom: 10px; left: 12px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: #EFE3CF; background: rgba(11, 10, 8, .68);
  padding: 5px 10px;
}
.ph-label.alt { color: #0B0A08; background: rgba(239, 227, 207, .85); }

/* moldura fina off-white */
.pframe {
  position: relative; background: var(--moldura); padding: 7px;
  border: 1px solid var(--moldura-borda);
  box-shadow: var(--moldura-sombra);
}
.pframe img { width: 100%; height: 100%; object-fit: cover; }

/* botões */
.btn-mem {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: .98rem;
  padding: 15px 30px; min-height: 44px;
  background: var(--areia); color: var(--carvao);
  border: 1px solid var(--areia); border-radius: 2px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.btn-mem:hover { background: var(--papel); transform: translateY(-2px); }
.btn-mem.ghost { background: transparent; color: var(--areia); border-color: rgba(216, 195, 165, .45); }
.btn-mem.ghost:hover { background: rgba(216, 195, 165, .08); transform: translateY(-2px); }
html[data-theme="light"] .btn-mem { background: var(--sepia); border-color: var(--sepia); color: #F5EFE3; }
html[data-theme="light"] .btn-mem:hover { background: #14100D; border-color: #14100D; }
html[data-theme="light"] .btn-mem.ghost { background: transparent; color: var(--sepia); border-color: rgba(110, 82, 48, .5); }
html[data-theme="light"] .btn-mem.ghost:hover { background: rgba(110, 82, 48, .08); }
.cta-micro { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--cinza-foto); }

/* reveal discreto */
.fade { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .fade { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   01 · capa
   ============================================================ */
#capa { grid-template-columns: minmax(0, 30fr) minmax(0, 34fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
#capa .capa-texto { display: grid; gap: 1.6rem; justify-items: start; }
#capa .capa-ctas { display: grid; gap: .8rem; justify-items: start; margin-top: .4rem; }
.hero-foto { position: relative; justify-self: end; width: min(100%, 560px); }
.hero-foto .principal { aspect-ratio: 3 / 4; }

/* polaroid do "antes" sobreposta ao canto inferior esquerdo do hero */
.hero-foto .original {
  position: absolute; left: -16%; bottom: -7%; width: 38%;
  transform: rotate(-4.5deg); pointer-events: none;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .65);
}
html[data-theme="light"] .hero-foto .original { box-shadow: 0 16px 38px rgba(76, 56, 34, .28); }
.hero-foto .original img { aspect-ratio: 3 / 4; }

/* rodízio do hero (memorias-hero.js): fade-through dos filhos — a cena some
   por inteiro e a próxima entra; nunca duas cenas sobrepostas (sem fantasma) */
.hero-foto .principal, .hero-foto .original { transition: opacity .56s var(--ease); }
.hero-foto.is-swap .principal, .hero-foto.is-swap .original { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-foto .principal, .hero-foto .original { transition: none; }
}

/* ============================================================
   02 · antes e depois principal
   ============================================================ */
#prova { justify-items: center; text-align: center; gap: 1.4rem; }
#prova header { display: grid; gap: .9rem; justify-items: center; max-width: 880px; }
.diptico { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 1.6vw, 1.6rem); align-items: stretch; }
.diptico.grande { width: min(820px, 92%); }
.diptico .lado { position: relative; }
.diptico.grande .lado img { aspect-ratio: 564 / 1254; max-height: 56vh; width: auto; max-width: 100%; margin-inline: auto; }
#prova .micro { margin-top: .4rem; }

/* ============================================================
   03 · rostos e família
   ============================================================ */
#rostos header { display: grid; gap: .8rem; max-width: 760px; margin-bottom: clamp(1.2rem, 2.4vh, 2rem); }
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem clamp(1rem, 2vw, 2rem); }
.caso { display: grid; gap: .5rem; align-content: start; }
.caso .par { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.caso .par .lado { position: relative; }
.caso .par img { aspect-ratio: 1 / 1; object-position: var(--foco, 50% 18%); } /* crop quadrado; --foco por caso no HTML (mesmo padrão do .grau-foto) prioriza os rostos */
.caso figcaption { display: flex; align-items: baseline; gap: 12px; }
.caso .caso-nome { font-family: var(--font-title); font-style: italic; font-size: 1.15rem; color: var(--papel); }
.caso .caso-tipo { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sepia); }

/* ============================================================
   04 · lugares
   ============================================================ */
#lugares header { display: grid; gap: 1rem; max-width: 820px; margin-bottom: clamp(1.6rem, 3vh, 2.6rem); }
.lugares-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.8rem); }
.lugar { display: grid; gap: .55rem; }
.lugar .par { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lugar .par .lado { position: relative; }
.lugar .par img { aspect-ratio: 4 / 3; }
.lugar .par .ph-label { bottom: 6px; left: 8px; padding: 3px 7px; font-size: 9px; }
.lugar figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cinza-foto); }
#lugares .micro { margin-top: clamp(1.2rem, 2.4vh, 2rem); }
#lugares .album-cta { margin-top: clamp(.9rem, 1.8vh, 1.4rem); }

/* ============================================================
   05 · álbum rasurado com apontamentos
   fotos danificadas "sobre a mesa" + notas numeradas (ponto + fio)
   ============================================================ */
#recupera header { display: grid; gap: 1rem; max-width: 820px; margin-bottom: clamp(1rem, 2.2vh, 1.8rem); }
.rasuras {
  position: relative; width: min(1500px, 100%); aspect-ratio: 8 / 3; margin-inline: auto;
  container-type: size; /* fios/offsets medem em cqw/cqh — estáveis também no modo apresentação (prancha fixa 1920px) */
}
.ras-foto { position: absolute; margin: 0; }
.ras-foto .pframe { padding: 6px; display: block; }
.ras-foto img { width: 100%; height: auto; display: block; }
.ras-foto-a { left: 18%;  top: 4%;  width: 12%;   transform: rotate(-2.5deg); }
.ras-foto-b { left: 32%;  top: 14%; width: 16%;   transform: rotate(1.8deg); }
.ras-foto-c { left: 50%;  top: 8%;  width: 15%;   transform: rotate(-1.6deg); }
.ras-foto-d { left: 66.5%; top: 40%; width: 11%;  transform: rotate(3.2deg); }
.ras-foto-a img { aspect-ratio: 564 / 1254; object-fit: cover; }
.ras-foto-b img { aspect-ratio: 1086 / 1448; object-fit: cover; }
.ras-foto-c img { aspect-ratio: 1060 / 1484; object-fit: cover; }
.ras-foto-d img { aspect-ratio: 1086 / 1448; object-fit: cover; }

/* nota: ancorada no ponto (defeito); fio liga ponto → mini-card */
.ras-note { position: absolute; width: 0; height: 0; }
.ras-note::before {
  content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--dourado);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dourado) 28%, transparent);
  z-index: 2;
}
.ras-fio { position: absolute; background: var(--dourado); opacity: .65; z-index: 1; }
.ras-card {
  position: absolute; z-index: 3;
  display: flex; gap: .6rem; align-items: flex-start;
  width: clamp(180px, 14cqw, 230px);
  padding: .7rem .8rem;
  background: color-mix(in srgb, var(--carvao) 88%, var(--areia) 12%);
  border: 1px solid color-mix(in srgb, var(--dourado) 38%, transparent);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
}
html[data-theme="light"] .ras-card {
  background: #FDFAF3;
  box-shadow: 0 12px 30px rgba(76, 56, 34, .18);
}
.ras-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; color: var(--dourado); padding-top: .15rem; }
.ras-card h3 { font-family: var(--font-body); font-weight: 500; font-size: .92rem; color: var(--papel); letter-spacing: .01em; }
.ras-card p { font-size: .78rem; color: var(--cinza-foto); line-height: 1.4; margin-top: .15rem; }

/* fio horizontal (cards nas margens esquerda/direita) e vertical (cards na base) */
.ras-n1 { left: 21%;   top: 24%; }
.ras-n1 .ras-fio  { right: 0; top: -0.5px; width: 4cqw; height: 1px; }
.ras-n1 .ras-card { right: calc(4cqw + 8px); top: 0; transform: translateY(-50%); }
.ras-n2 { left: 20.5%; top: 52%; }
.ras-n2 .ras-fio  { right: 0; top: -0.5px; width: 3.5cqw; height: 1px; }
.ras-n2 .ras-card { right: calc(3.5cqw + 8px); top: 0; transform: translateY(-50%); }
.ras-n3 { left: 37%;   top: 66%; }
.ras-n3 .ras-fio  { left: -0.5px; top: 0; width: 1px; height: 14cqh; }
.ras-n3 .ras-card { left: 0; top: calc(14cqh + 8px); transform: translateX(-50%); }
.ras-n4 { left: 55%;   top: 58%; }
.ras-n4 .ras-fio  { left: -0.5px; top: 0; width: 1px; height: 22cqh; }
.ras-n4 .ras-card { left: 0; top: calc(22cqh + 8px); transform: translateX(-50%); }
.ras-n5 { left: 62%;   top: 26%; }
.ras-n5 .ras-fio  { left: 0; top: -0.5px; width: 17cqw; height: 1px; }
.ras-n5 .ras-card { left: calc(17cqw + 8px); top: 0; transform: translateY(-50%); }
.ras-n6 { left: 71%;   top: 56%; }
.ras-n6 .ras-fio  { left: 0; top: -0.5px; width: 8cqw; height: 1px; }
.ras-n6 .ras-card { left: calc(8cqw + 8px); top: 0; transform: translateY(-50%); }

.frase-destaque {
  margin-top: clamp(.9rem, 1.7vh, 1.5rem);
  font-family: var(--font-title); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  color: var(--areia); max-width: 56ch;
}

/* ============================================================
   06 · os serviços — quatro cuidados em cards-polaroid
   (mesma família do .grau-card: tinta fixa, papel claro nos 2 temas)
   ============================================================ */
#servicos header { display: grid; gap: .9rem; max-width: 780px; margin-bottom: clamp(1.4rem, 2.6vh, 2.2rem); }
#servicos .micro { margin-top: clamp(1.1rem, 2.2vh, 1.8rem); }
.servicos-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.6rem); align-items: start;
}
.svc-card {
  display: grid; gap: .4rem; align-content: start;
  background: var(--moldura); border: 1px solid var(--moldura-borda);
  box-shadow: var(--moldura-sombra);
  padding: 9px 9px 14px;
  transform: rotate(-.9deg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc-card:nth-child(2) { transform: rotate(.8deg) translateY(10px); }
.svc-card:nth-child(3) { transform: rotate(-.5deg) translateY(4px); }
.svc-card:nth-child(4) { transform: rotate(1deg) translateY(14px); }
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 36px 90px rgba(0, 0, 0, .6); }
  html[data-theme="light"] .svc-card:hover { box-shadow: 0 22px 50px rgba(76, 56, 34, .3); }
}
/* mini-par antes/depois: o depois pulsa por cima em loop (reusa o grau-morph) */
.svc-foto { position: relative; display: block; margin-bottom: .3rem; overflow: hidden; }
.svc-foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: var(--foco, 50% 20%);
  filter: sepia(.16) contrast(.97);
}
.svc-foto .svc-depois {
  position: absolute; inset: 0; height: 100%;
  filter: none; opacity: 0;
  animation: grau-morph 7s ease-in-out infinite;
}
.svc-card:nth-child(2) .svc-depois { animation-delay: 1.1s; }
.svc-card:nth-child(3) .svc-depois { animation-delay: 2.2s; }
.svc-card:nth-child(4) .svc-depois { animation-delay: 3.3s; }
@media (prefers-reduced-motion: reduce) {
  .svc-foto .svc-depois { animation: none; opacity: 1; } /* sem movimento: fica o resultado */
}
body.presentation-mode .svc-foto .svc-depois { animation: none; opacity: 0; } /* prancha exportada: mostra o dano */
.svc-nome { font-family: var(--font-title); font-weight: 500; font-size: 1.18rem; color: #14100D; padding-inline: 4px; }
.svc-def { font-size: .8rem; line-height: 1.45; color: #5D5347; padding-inline: 4px; }
.svc-quando {
  margin: .2rem 4px 0; padding-top: .5rem;
  border-top: 1px dotted rgba(138, 104, 72, .45);
  display: grid; gap: .2rem;
  font-family: var(--font-title); font-style: italic; font-size: .92rem; line-height: 1.4; color: #7A5A28;
}
.svc-rotulo {
  font-family: var(--font-mono); font-style: normal; font-size: 9.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: #8A6848;
}

/* ============================================================
   07 · valores e pacotes — polaroids de grau sobre a mesa
   (tinta fixa nos cards: o papel da moldura é claro nos 2 temas)
   ============================================================ */
#valores header { display: grid; gap: .9rem; max-width: 780px; margin-bottom: clamp(1.4rem, 2.6vh, 2.2rem); }
.graus {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem); align-items: start;
}
.grau-card {
  display: grid; gap: .4rem;
  background: var(--moldura); border: 1px solid var(--moldura-borda);
  box-shadow: var(--moldura-sombra);
  padding: 9px 9px 14px;
  transform: rotate(-1.1deg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.grau-card:nth-child(2) { transform: rotate(.9deg) translateY(12px); }
.grau-card:nth-child(3) { transform: rotate(-.6deg) translateY(4px); }
@media (hover: hover) and (pointer: fine) {
  .grau-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 36px 90px rgba(0, 0, 0, .6); }
  html[data-theme="light"] .grau-card:hover { box-shadow: 0 22px 50px rgba(76, 56, 34, .3); }
}
.grau-foto { position: relative; display: block; margin-bottom: .3rem; overflow: hidden; }
.grau-foto img {
  /* height:auto anula o atributo height do HTML — sem ele o aspect-ratio é ignorado;
     --foco posiciona o rosto na janela do crop (definido por card no HTML) */
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  object-position: var(--foco, 50% 26%);
  filter: sepia(.16) contrast(.97);
}
/* "mini-gif": o depois pulsa por cima do antes em loop suave (CSS puro) */
.grau-foto .grau-depois {
  position: absolute; inset: 0; height: 100%;
  filter: none; opacity: 0;
  animation: grau-morph 7s ease-in-out infinite;
}
.grau-card:nth-child(2) .grau-depois { animation-delay: 1.1s; }
.grau-card:nth-child(3) .grau-depois { animation-delay: 2.2s; }
@keyframes grau-morph {
  0%, 34% { opacity: 0; }
  46%, 86% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .grau-foto .grau-depois { animation: none; opacity: 1; } /* sem movimento: fica o resultado */
}
body.presentation-mode .grau-foto .grau-depois { animation: none; opacity: 0; } /* prancha exportada: mostra o dano */
.grau-etq {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: #EFE3CF; background: rgba(11, 10, 8, .66); padding: 4px 8px;
}
.grau-nome { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: #14100D; padding-inline: 4px; }
.grau-desc { font-size: .8rem; line-height: 1.45; color: #5D5347; padding-inline: 4px; }
.grau-preco {
  display: flex; align-items: baseline; gap: 6px;
  margin: .2rem 4px 0; padding-top: .5rem;
  border-top: 1px dotted rgba(138, 104, 72, .45);
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(1.5rem, 1.9vw, 1.9rem); color: #7A5A28;
}
.grau-preco small { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .14em; color: #8A6848; }

/* colorização como etiqueta avulsa entre os cards e o rodapé */
.grau-extra {
  margin-top: clamp(1.3rem, 2.6vh, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  font-size: .9rem; color: var(--cinza-foto); max-width: 72ch;
}
.grau-extra strong { font-family: var(--font-title); font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--dourado); }
.extra-selo {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dourado); border: 1.5px dashed color-mix(in srgb, var(--dourado) 55%, transparent);
  padding: 7px 12px; transform: rotate(-1.5deg);
}

.tarifa-titulo {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--sepia);
}
/* fio pontilhado item → preço (leader dots) — usado no verso de impressão */
.t-fio {
  flex: 1; min-width: 24px; align-self: center;
  border-bottom: 1px dotted rgba(138, 104, 72, .5);
}

/* rodapé: pacotes (carimbos) · impressão (verso de fotografia) · CTA */
.valores-rodape {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: clamp(1.2rem, 2.6vw, 2.4rem); align-items: start;
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
}
.pacotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.pacotes-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
/* carimbos de desconto */
.pacote {
  display: grid; gap: .15rem; text-align: center; padding: .85rem .5rem;
  border: 1.5px dashed color-mix(in srgb, var(--dourado) 50%, transparent);
  transform: rotate(-1.2deg);
}
.pacote:nth-child(2) { transform: rotate(.9deg); }
.pacote:nth-child(3) { transform: rotate(-.6deg); }
.pc-qtd { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cinza-foto); }
.pc-desc { font-family: var(--font-title); font-style: italic; font-size: clamp(1.3rem, 1.6vw, 1.55rem); color: var(--areia); }
.pc-nota { font-size: .8rem; color: var(--cinza-foto); }

/* impressão como "verso de fotografia": papel claro com tinta sépia */
.impressao {
  display: grid; gap: .45rem;
  background: var(--moldura); border: 1px solid var(--moldura-borda);
  box-shadow: var(--moldura-sombra);
  padding: 1rem 1.2rem 1.1rem;
  transform: rotate(.5deg);
}
.impressao .tarifa-titulo { color: #8A6848; }
.imp-intro { font-size: .8rem; color: #5D5347; }
.imp-lista { list-style: none; display: grid; }
.imp-lista li {
  display: flex; align-items: baseline; gap: .7rem; padding-block: .45rem;
  border-bottom: 1px solid rgba(138, 104, 72, .22);
}
.imp-lista li:last-child { border-bottom: none; }
.imp-tam { font-size: .9rem; color: #14100D; }
.imp-preco { font-family: var(--font-title); font-style: italic; font-size: 1.12rem; color: #7A5A28; white-space: nowrap; }
.valores-cta { display: grid; gap: .6rem; justify-items: start; align-self: center; }

/* ============================================================
   08 · processo e contato
   ============================================================ */
#contato { text-align: center; justify-items: center; gap: 1.6rem; }
#contato header { display: grid; gap: 1rem; justify-items: center; max-width: 780px; }
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); width: min(1100px, 100%); margin-top: .6rem; }
.passo { display: grid; gap: .45rem; justify-items: center; text-align: center; padding-top: 1.1rem; border-top: 1px solid rgba(216, 195, 165, .25); }
html[data-theme="light"] .passo { border-top-color: rgba(110, 82, 48, .3); }
.passo .p-num { font-family: var(--font-mono); font-size: 16px; letter-spacing: .3em; color: var(--dourado); }
.passo .p-tit { font-weight: 500; font-size: 1.25rem; color: var(--papel); }
.passo .p-txt { font-size: 1rem; color: var(--cinza-foto); max-width: 26ch; }
.contato-ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.mosaico-final { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: min(1100px, 100%); margin-top: .8rem; }
.mosaico-final .pframe { padding: 4px; }
.mosaico-final img { aspect-ratio: 1; }
.heranca {
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.9rem); color: var(--areia); margin-top: .6rem;
}
.mem-rodape {
  display: grid; gap: .7rem; justify-items: center;
  width: min(560px, 100%); margin-top: clamp(1.6rem, 3vh, 2.4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(216, 195, 165, .14);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cinza-foto);
}
html[data-theme="light"] .mem-rodape { border-top-color: rgba(110, 82, 48, .22); }
.mem-rodape-icone { height: 40px; width: 40px; display: block; opacity: .95; }
.rodape-marca { display: inline-flex; align-items: baseline; gap: 12px; }
.rodape-marca svg { height: 15px; width: auto; color: var(--papel); fill: currentColor; }
.rodape-word { color: var(--dourado); letter-spacing: .4em; font-size: 11.5px; }
.rodape-tag { letter-spacing: .16em; }
.rodape-insta { color: var(--sepia); transition: color .3s var(--ease); }
.rodape-insta:hover { color: var(--papel); }

/* ---------- presença da marca: selo de prancha + divisor ---------- */
.mem-selo {
  position: absolute; right: var(--margem); bottom: 1.1rem; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 9px;
  color: var(--sepia); opacity: .38; pointer-events: none;
}
.mem-selo svg { height: 11px; width: auto; fill: currentColor; }
.mem-selo span {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .34em; text-transform: uppercase;
}
/* polaroid VD centrado sobre a linha que separa as pranchas */
.prancha::after {
  content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 30px; height: 20px; z-index: 2;
  background: var(--carvao) url('assets/icon-vd-memorias.svg') center / 16px no-repeat;
}
.prancha:last-of-type::after { display: none; }
@media (max-width: 1023.98px) { .mem-selo { display: none; } }

/* ============================================================
   mobile app-style (padrão do index): bottom tab bar + FAB
   markup injetado por memorias.js; some em ≥1024px e no ?prancha
   ============================================================ */
.vm-tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 96;
  display: flex; gap: .15rem;
  width: min(440px, calc(100% - 24px));
  padding: .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--carvao) 76%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--areia) 24%, transparent);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}
html[data-theme="light"] .vm-tabbar {
  background: color-mix(in srgb, #F5EFE3 82%, transparent);
  border-color: color-mix(in srgb, var(--sepia) 30%, transparent);
  box-shadow: 0 10px 28px rgba(76, 56, 34, .22);
}
/* entrada anima só o slide (sem opacity): mesmo sem JS/rAF a barra fica visível */
.vm-tabbar.is-ready { animation: vm-tabbar-in .45s var(--ease); }
@keyframes vm-tabbar-in { from { transform: translate(-50%, 16px); } }
.vm-tab {
  flex: 1; min-height: 44px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--guia);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.vm-tab .vm-tab-ico { width: 20px; height: 20px; }
.vm-tab[aria-current="page"], .vm-tab.is-active {
  color: var(--dourado);
  background: color-mix(in srgb, var(--dourado) 14%, transparent);
}
/* FAB WhatsApp acima da tab bar; aparece depois da capa (body.vm-fundo) */
.vm-fab {
  position: fixed; right: max(1rem, env(safe-area-inset-right));
  bottom: calc(.75rem + 64px + env(safe-area-inset-bottom));
  z-index: 95; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--areia); color: #14100D;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.vm-fab svg { fill: currentColor; }
html[data-theme="light"] .vm-fab { background: var(--sepia); color: #F5EFE3; box-shadow: 0 12px 28px rgba(76, 56, 34, .3); }
body.vm-fundo .vm-fab { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .vm-tabbar, .vm-fab { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .vm-tabbar.is-ready { animation: none; }
  .vm-tab, .vm-fab { transition: none; }
}
body.presentation-mode .vm-tabbar, body.presentation-mode .vm-fab { display: none !important; }

/* ============================================================
   cursor personalizado (dot + anel) — só ponteiro fino;
   memorias-fx.js aplica html.vm-cursor apenas após init ok
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html.vm-cursor, html.vm-cursor * { cursor: none !important; }
  /* o lightbox vive no top layer, ACIMA do cursor custom: devolve o nativo lá */
  html.vm-cursor:has(dialog[open]), html.vm-cursor:has(dialog[open]) * { cursor: auto !important; }
  html.vm-cursor:has(dialog[open]) .cmp-range { cursor: ew-resize !important; }
  html.vm-cursor:has(dialog[open]) .vm-dot,
  html.vm-cursor:has(dialog[open]) .vm-ring { opacity: 0 !important; }
  .vm-dot, .vm-ring {
    position: fixed; left: 0; top: 0; z-index: 9999;
    pointer-events: none; will-change: transform;
  }
  .vm-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--dourado);
    transition: opacity .25s var(--ease);
  }
  .vm-ring {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 999px;
    border: 1.5px solid var(--areia); opacity: .45;
    transition: width .28s var(--ease), height .28s var(--ease),
                opacity .25s var(--ease), background-color .25s var(--ease),
                border-color .25s var(--ease), padding .22s var(--ease);
  }
  .vm-rotulo {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    color: var(--carvao); opacity: 0; transform: scale(.6);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
  }
  .vm-ring.is-hover {
    width: 46px; height: 46px; opacity: .9;
    background: color-mix(in srgb, var(--dourado) 12%, transparent);
  }
  .vm-ring.has-rotulo {
    width: auto; height: auto; padding: .5rem .85rem;
    opacity: 1; background: var(--areia); border-color: var(--areia);
  }
  .vm-ring.has-rotulo .vm-rotulo { opacity: 1; transform: scale(1); }
  .vm-dot.is-oculto, .vm-dot.is-fora, .vm-ring.is-fora { opacity: 0; }
}

/* ============================================================
   modo apresentação / exportação (pranchas fechadas 1920×1080)
   ative com body.presentation-mode (ou ?prancha na URL)
   ============================================================ */
body.presentation-mode { overflow-x: auto; }
body.presentation-mode .mem-top { display: none; }
body.presentation-mode::before, body.presentation-mode::after { position: absolute; }
body.presentation-mode .prancha {
  width: 1920px; height: 1080px; min-height: 1080px;
  margin: 0 auto; padding: 96px 120px;
  overflow: hidden; scroll-snap-align: none;
  border-bottom: 2px solid #000;
}
body.presentation-mode .fade { opacity: 1; transform: none; transition: none; }
/* #valores compactada para caber na prancha fechada de 1080px */
body.presentation-mode #valores { padding-top: 56px; padding-bottom: 56px; }
body.presentation-mode #valores header { margin-bottom: .9rem; }
body.presentation-mode #valores h2 { font-size: 2.1rem; }
body.presentation-mode .grau-foto img { aspect-ratio: 21 / 9; }
body.presentation-mode .grau-card,
body.presentation-mode .grau-card:nth-child(2),
body.presentation-mode .grau-card:nth-child(3) { transform: none; }
body.presentation-mode .grau-extra { margin-top: 1rem; }
body.presentation-mode .valores-rodape { margin-top: 1.2rem; }
/* #servicos compactada para caber na prancha fechada de 1080px */
body.presentation-mode #servicos { padding-top: 56px; padding-bottom: 56px; }
body.presentation-mode #servicos header { margin-bottom: .9rem; }
body.presentation-mode #servicos h2 { font-size: 2.1rem; }
body.presentation-mode .svc-foto img { aspect-ratio: 3 / 2; }
body.presentation-mode .svc-card,
body.presentation-mode .svc-card:nth-child(2),
body.presentation-mode .svc-card:nth-child(3),
body.presentation-mode .svc-card:nth-child(4) { transform: none; }

/* ============================================================
   responsivo
   ============================================================ */
@media (max-width: 1023.98px) {
  /* tab bar = nav primária no mobile (padrão do index): guia do topo sai,
     conteúdo folga a barra */
  .mem-guia { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .prancha { min-height: 0; padding-top: 64px; padding-bottom: 44px; } /* solta a altura no mobile (sem forçar tela cheia) */
  #capa { grid-template-columns: 1fr; }
  .hero-foto { justify-self: center; margin-top: 1.2rem; }
  .hero-foto .original { left: -4%; }
  .album-grid { grid-template-columns: repeat(2, 1fr); }
  .lugares-grid { grid-template-columns: repeat(2, 1fr); }
  .servicos-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card:nth-child(2), .svc-card:nth-child(4) { transform: rotate(.6deg) translateY(0); }
  .svc-card:nth-child(3) { transform: rotate(-.5deg) translateY(0); }
  .graus { grid-template-columns: 1fr; }
  .grau-card:nth-child(2), .grau-card:nth-child(3) { transform: rotate(.6deg) translateY(0); }
  .valores-rodape { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .mosaico-final { grid-template-columns: repeat(3, 1fr); }

  /* álbum rasurado vira pilha: 2 fotos + lista numerada simples (sem fios) */
  .rasuras { width: 100%; aspect-ratio: auto; container-type: normal; display: grid; gap: 1.1rem; }
  .ras-foto { position: static; width: min(440px, 88%); margin-inline: auto; }
  .ras-foto-a { transform: rotate(-1.6deg); }
  .ras-foto-b { transform: rotate(1.4deg); }
  .ras-foto-c, .ras-foto-d { display: none; }
  .ras-foto-a img, .ras-foto-b img { aspect-ratio: 4 / 5; }
  .ras-note { position: static; width: auto; height: auto; }
  .ras-note::before { display: none; }
  .rasuras .ras-note .ras-fio { display: none; }
  /* especificidade acima das regras por nota (.ras-nX .ras-card) do desktop */
  .rasuras .ras-note .ras-card { position: static; transform: none; width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 899.98px) {
  /* abre espaço para a guia nomeada: some o "Memórias" do lockup e o CTA do topo */
  .mem-lockup .mem-word { display: none; }
  .mem-top-cta { display: none; }
}
@media (max-width: 639.98px) {
  /* títulos menores no mobile — aqui o piso domina (o vw fica abaixo dele),
     então baixo o piso; fonte serif, redução moderada p/ não perder hierarquia. */
  h1 { font-size: clamp(1.85rem, 1.2rem + 3vw, 4.6rem); }
  h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 3.1rem); }
  .album-grid, .lugares-grid { grid-template-columns: 1fr; }
  .servicos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .diptico.grande .lado img { max-height: 38vh; }
  .mem-top { padding: 14px 18px; }
  /* lockup vira o ícone polaroid (padrão do index) */
  .mem-lockup svg, .mem-lockup .mem-word { display: none; }
  .mem-lockup-icone { display: block; }
}