/* Memora | o site é um convite.
   Layout: uma história presa na tela (envelope → cartão → cartão pop-up), depois peças de papel sobre o veludo verde. */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-opsz.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-opsz-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("../fonts/pinyon.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  /* cor */
  --verde: #17302A;          /* veludo: o chão do site */
  --verde-luz: #24463C;      /* veludo iluminado */
  --verde-fundo: #0E211C;    /* sombra do veludo, rodapé */
  --marfim: #F3EDE2;         /* papel de algodão */
  --marfim-sombra: #E4DAC8;  /* dobra do papel */
  --kraft: #E8DBC2;          /* etiqueta */
  --ouro: #C9A86A;           /* folha de ouro */
  --ouro-claro: #E3CA95;     /* brilho da folha */
  --salvia: #A9BBB1;         /* texto secundário sobre o verde */
  --tinta: #1F3A33;          /* tinta de impressão sobre o papel */
  --tinta-suave: #56685F;    /* tinta secundária */
  --erro: #9E3B2E;

  /* tipo */
  --f-texto: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-marca: "Marcellus", "Optima", "Candara", sans-serif;
  --f-nome: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;

  --t-mini: 0.8125rem;
  --t-ui: 0.9375rem;
  --t-corpo: 1.125rem;
  --t-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --t-h3: 1.5rem;
  --t-h2: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem);
  --t-display: clamp(2.6rem, 1.5rem + 5.2vw, 5.5rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --topo-h: 4rem;
  --papel-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --veludo-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --sombra-papel: 0 1px 1px rgba(5, 15, 12, .25), 0 3px 6px -2px rgba(5, 15, 12, .3), 0 22px 40px -18px rgba(5, 15, 12, .7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--verde);
  color: var(--marfim);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ouro); color: var(--verde-fundo); }

[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: fixed; left: 1rem; top: -4rem; z-index: 50; background: var(--marfim); color: var(--tinta); padding: .6rem 1rem; font-family: var(--f-marca); text-decoration: none; }
.pular:focus { top: calc(env(safe-area-inset-top, 0px) + .75rem); }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: calc(var(--topo-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  transition: background-color .5s ease, box-shadow .5s ease;
}
.topo.com-fundo { background: rgba(14, 33, 28, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(201, 168, 106, .14); }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--marfim); }
.marca-m { width: 2rem; height: 1.6rem; color: var(--marfim); }
.marca-nome { font-family: var(--f-marca); font-size: 1.25rem; letter-spacing: .08em; }
.topo-acoes { display: flex; align-items: center; gap: .5rem; }
.som, .topo-responder {
  font-family: var(--f-marca); font-size: var(--t-ui); letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.5rem; padding: .35rem .9rem;
  border: 1px solid rgba(227, 202, 149, .35); border-radius: 999px;
  background: rgba(14, 33, 28, .35); color: var(--marfim); text-decoration: none;
  transition: border-color .3s, background-color .3s;
}
.som:hover, .topo-responder:hover { border-color: var(--ouro-claro); background: rgba(14, 33, 28, .6); }
.topo-responder { background: var(--marfim); color: var(--tinta); border-color: var(--marfim); }
.topo-responder:hover { background: var(--ouro-claro); border-color: var(--ouro-claro); color: var(--tinta); }
.som-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.som-barras i { display: block; width: 2px; height: 4px; background: var(--ouro-claro); border-radius: 1px; transition: height .3s; }
.som[aria-pressed="true"] .som-barras i { animation: barra 1.1s ease-in-out infinite; }
.som[aria-pressed="true"] .som-barras i:nth-child(2) { animation-delay: -.3s; }
.som[aria-pressed="true"] .som-barras i:nth-child(3) { animation-delay: -.65s; }
.som[aria-pressed="true"] .som-barras i:nth-child(4) { animation-delay: -.15s; }
@keyframes barra { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (max-width: 480px) {
  .marca-nome { font-size: 1.1rem; }
  .som { padding-inline: .7rem; }
  .som-txt { font-size: .875rem; }
  .topo-responder { display: none; }
}

/* ---------- a história ---------- */
.historia { position: relative; height: 470vh; height: 470svh; }
.palco {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background:
    var(--veludo-grao),
    radial-gradient(ellipse 75% 65% at 50% 46%, var(--verde-luz) 0%, var(--verde) 58%, var(--verde-fundo) 100%);
}
.cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.fase { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; }
.fase.ativa { visibility: visible; }
.fase-envelope { opacity: 1; visibility: visible; }
.fase .area { pointer-events: none; }
.fase button, .fase input, .fase a, .fase label { pointer-events: auto; }

/* fase 1: envelope */
.fase-envelope {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--topo-h) + env(safe-area-inset-top, 0px) + 2vh) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 4vh);
}
.ancora { position: absolute; top: 0; }
.destinatario { text-align: center; line-height: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.destinatario-para { font-style: italic; font-size: var(--t-lead); color: var(--salvia); }
.destinatario-nome { font-family: var(--f-nome); font-size: clamp(3.2rem, 2rem + 6vw, 5.6rem); color: var(--ouro-claro); line-height: 1.05; padding-inline: .2em; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.fase-envelope .area { flex: 1; width: 100%; min-height: 0; }
.envelope-rodape { display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.indicacao { font-style: italic; color: var(--salvia); font-size: var(--t-ui); }
.indicacao span { color: var(--marfim); font-style: normal; }
.abrir {
  font-family: var(--f-marca); font-size: var(--t-ui); letter-spacing: .03em;
  background: none; border: 0; color: var(--marfim); padding: .6rem 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.abrir::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 0 rgba(227, 202, 149, .6); animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(227, 202, 149, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(227, 202, 149, 0); } }
.envelope-estatico { display: none; }

/* fase 2: cartão */
.fase-cartao { display: flex; flex-direction: column; padding: calc(var(--topo-h) + env(safe-area-inset-top, 0px) + 3vh) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 4vh); }
.fase-cartao .area { flex: 1; min-height: 0; }
.cartao-texto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rolar { text-align: center; font-family: var(--f-marca); font-size: var(--t-ui); color: var(--salvia); letter-spacing: .03em; }
.rolar span { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; }
.rolar span::after { content: ""; width: 1px; height: 2.25rem; background: linear-gradient(var(--ouro), transparent); animation: descer 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes descer { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* fase 3: mundos */
.fase-mundos {
  display: grid; grid-template-columns: minmax(0, 29rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3.5rem);
  padding: calc(var(--topo-h) + env(safe-area-inset-top, 0px) + 2vh) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 3vh);
  align-items: center;
}
.fase-mundos .area { grid-column: 2; grid-row: 1; align-self: stretch; }
.mundos-painel { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 2rem; min-width: 0; padding-left: clamp(0rem, 2vw, 2rem); }
.nome-campo { display: flex; flex-direction: column; gap: .35rem; }
.nome-campo label { font-family: var(--f-marca); font-size: var(--t-mini); color: var(--salvia); letter-spacing: .04em; }
.nome-campo input {
  font-family: var(--f-nome); font-size: 2.6rem; line-height: 1.2; color: var(--ouro-claro);
  background: transparent; border: 0; border-bottom: 1px solid rgba(227, 202, 149, .4);
  padding: .1rem 0 .2rem; width: min(100%, 17rem);
}
.nome-campo input::placeholder { color: rgba(227, 202, 149, .45); }
.nome-campo input:focus { outline: none; border-bottom-color: var(--ouro-claro); }
.nome-campo input:focus-visible { box-shadow: 0 2px 0 0 var(--ouro-claro); }
.mundos-textos { display: grid; }
.mundo-texto { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .6s ease, transform .6s ease, visibility 0s .6s; }
.mundo-texto.ativo { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease .15s, transform .7s ease .15s, visibility 0s; }
.mundo-texto h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.08; margin-bottom: 1rem; letter-spacing: -.005em; }
.mundo-texto p { color: var(--marfim); opacity: .86; max-width: 34ch; }
.botao-linha {
  margin-top: 1.1rem; font-family: var(--f-marca); font-size: var(--t-ui); letter-spacing: .02em;
  background: none; color: var(--ouro-claro); border: 1px solid rgba(227, 202, 149, .5); border-radius: 999px;
  padding: .55rem 1.1rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  transition: background-color .3s, color .3s, border-color .3s;
}
.botao-linha:hover { background: var(--ouro-claro); color: var(--tinta); border-color: var(--ouro-claro); }
.mundos-abas { display: flex; flex-wrap: wrap; gap: .4rem; }
.mundos-abas button {
  font-family: var(--f-marca); font-size: var(--t-mini); letter-spacing: .02em;
  background: transparent; color: var(--salvia); border: 1px solid rgba(169, 187, 177, .28); border-radius: 999px;
  padding: .4rem .75rem; min-height: 2.25rem;
  transition: color .3s, border-color .3s, background-color .3s;
}
.mundos-abas button:hover { color: var(--marfim); border-color: rgba(243, 237, 226, .6); }
.mundos-abas button[aria-current="true"] { color: var(--tinta); background: var(--marfim); border-color: var(--marfim); }
.aba-curta { display: none; }

@media (max-width: 860px) {
  .fase-mundos {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: .5rem; align-content: center;
    padding-top: calc(var(--topo-h) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }
  .fase-mundos .area { grid-column: 1; grid-row: 1; width: 100%; height: min(calc((100vw - 2 * var(--gutter)) / 1.08), calc(100svh - var(--topo-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--painel-h, 19rem) - 2.25rem)); min-height: 9rem; }
  .mundos-painel { grid-column: 1; grid-row: 2; gap: .9rem; padding-left: 0; }
  .nome-campo { flex-direction: row; align-items: baseline; gap: .75rem; }
  .nome-campo label { flex: none; }
  .nome-campo input { font-size: 2rem; width: 100%; }
  .mundo-texto h2 { font-size: 1.55rem; margin-bottom: .45rem; }
  .mundo-texto p { font-size: 1rem; line-height: 1.5; max-width: none; }
  .botao-linha { margin-top: .6rem; min-height: 2.5rem; padding: .4rem 1rem; }
  .mundos-abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .mundos-abas button { width: 100%; padding-inline: .25rem; }
  .aba-longa { display: none; }
  .aba-curta { display: inline; }
}
@media (max-width: 860px) and (max-height: 760px) {
  .mundos-painel { gap: .7rem; }
  .nome-campo input { font-size: 1.75rem; }
  .mundo-texto h2 { font-size: 1.32rem; margin-bottom: .35rem; }
  .mundo-texto p { font-size: .9375rem; line-height: 1.45; }
  .botao-linha { margin-top: .5rem; min-height: 2.25rem; }
  .mundos-abas button { min-height: 2rem; padding-block: .3rem; }
}
@media (max-width: 860px) and (max-height: 620px) {
  .mundo-texto h2 { font-size: 1.18rem; }
  .mundo-texto p { font-size: .875rem; line-height: 1.4; }
  .nome-campo input { font-size: 1.5rem; }
  .nome-campo label { font-size: .75rem; }
}

/* celular em pé: áreas com altura explícita (sem aspect-ratio, que o Safari resolve de outro jeito) */
@media (max-aspect-ratio: 4/5) {
  .palco .fase-envelope { justify-content: center; gap: 1.1rem; }
  .palco .fase-envelope .area { flex: 0 0 auto; width: 100%; height: min(calc((100vw - 2 * var(--gutter)) / 1.3), calc(100svh - 21rem)); min-height: 8rem; }
  .palco .envelope-rodape { gap: .5rem; }
  .palco .fase-cartao { justify-content: center; gap: 1.25rem; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 13vh); }
  .palco .fase-cartao .area { flex: 0 0 auto; width: 100%; height: min(calc((100vw - 2 * var(--gutter)) / 1.25), calc(100svh - 12rem)); min-height: 8rem; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 620px) {
  .destinatario-nome { font-size: 2.8rem; }
  .destinatario-para { font-size: 1rem; }
  .palco .fase-envelope { padding-top: calc(var(--topo-h) + env(safe-area-inset-top, 0px)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem); gap: .6rem; }
}

/* sem WebGL: a história vira uma sequência simples */
.sem-3d .historia { height: auto; }
.sem-3d .palco { position: relative; height: auto; overflow: visible; }
.sem-3d .cena, .sem-3d .area, .sem-3d .rolar { display: none; }
.sem-3d .fase { position: relative; opacity: 1; visibility: visible; min-height: 0; }
.sem-3d .fase-envelope { min-height: 92svh; justify-content: center; gap: 2rem; }
.sem-3d .envelope-estatico { display: block; width: min(60vw, 18rem); color: var(--marfim); order: 1; }
.sem-3d .destinatario { order: 0; }
.sem-3d .envelope-rodape { order: 2; }
.sem-3d .abrir { display: none; }
.sem-3d .cartao-texto { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; max-width: 36rem; margin: 0 auto; text-align: center; font-size: var(--t-lead); padding: 2.5rem; background: var(--marfim) var(--papel-grao); color: var(--tinta); box-shadow: var(--sombra-papel); }
.sem-3d .cartao-nome { font-family: var(--f-nome); font-size: 1.8em; color: var(--tinta); }
.sem-3d .fase-mundos { display: block; }
.sem-3d .mundos-textos { gap: 3rem; }
.sem-3d .mundo-texto { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.sem-3d .mundos-abas { display: none; }

/* ---------- peças de papel ---------- */
.dentro, .programa, .vitrine, .rsvp { position: relative; padding: clamp(5rem, 4rem + 6vw, 10rem) var(--gutter); }
.dentro { background: var(--veludo-grao), var(--verde); overflow-x: clip; }
.dentro-cabeca { max-width: 72rem; margin: 0 auto clamp(3rem, 6vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.dentro-cabeca h2, .colecao-texto h2, .programa h2, .vitrine h2, .rsvp h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.01em; }
.dentro-cabeca p { color: var(--salvia); font-size: var(--t-lead); max-width: 38ch; }
@media (max-width: 760px) { .dentro-cabeca { grid-template-columns: 1fr; } }

.mesa {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.peca {
  position: relative; color: var(--tinta);
  background-color: var(--marfim); background-image: var(--papel-grao);
  box-shadow: var(--sombra-papel);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
}
.peca h3 { font-size: var(--t-h3); line-height: 1.15; }
.peca-sub { color: var(--tinta-suave); font-size: 1rem; margin-top: .35rem; }
.peca-nota { font-size: .9375rem; color: var(--tinta-suave); margin-top: 1.1rem; font-style: italic; }
.peca-presenca { grid-column: 1 / span 5; transform: rotate(-1.1deg); margin-top: 2rem; outline: 1px solid rgba(201, 168, 106, .75); outline-offset: -12px; }
.peca-presentes {
  grid-column: 6 / span 7; transform: rotate(.7deg);
  background-color: var(--kraft);
  clip-path: polygon(2.2rem 0, calc(100% - 2.2rem) 0, 100% 2.2rem, 100% 100%, 0 100%, 0 2.2rem);
  padding-top: 3.2rem; filter: drop-shadow(0 18px 22px rgba(5, 15, 12, .45)); box-shadow: none;
}
.peca-presentes::before { content: ""; position: absolute; top: 1.1rem; left: 50%; width: .85rem; height: .85rem; margin-left: -.425rem; border-radius: 50%; background: var(--verde); box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 3px var(--ouro); }
.peca-mural { grid-column: 2 / span 8; transform: rotate(-.4deg); }
@media (max-width: 900px) {
  .peca-presenca, .peca-presentes, .peca-mural { grid-column: 1 / -1; margin-top: 0; }
  .peca-presenca { max-width: 30rem; }
  .peca-presentes { justify-self: end; max-width: 34rem; width: 100%; }
}
.contadores { display: flex; gap: 1.5rem 2rem; flex-wrap: wrap; margin: 1.6rem 0 1.5rem; }
.contador { display: flex; flex-direction: column; gap: .35rem; }
.contador-rotulo { font-family: var(--f-marca); font-size: var(--t-mini); color: var(--tinta-suave); letter-spacing: .03em; }
.contador-ctrl { display: inline-flex; align-items: center; border: 1px solid rgba(31, 58, 51, .25); border-radius: 999px; }
.contador-ctrl button { width: 2.6rem; height: 2.6rem; border: 0; background: none; font-size: 1.25rem; line-height: 1; color: var(--tinta); border-radius: 50%; }
.contador-ctrl button:hover { background: rgba(31, 58, 51, .07); }
.contador-ctrl output { min-width: 2ch; text-align: center; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.botao {
  font-family: var(--f-marca); font-size: var(--t-ui); letter-spacing: .03em;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 2.9rem; padding: .7rem 1.4rem;
  background: var(--tinta); color: var(--marfim); border: 0; border-radius: 2px;
  text-decoration: none; transition: background-color .3s, transform .2s;
}
.botao:hover { background: #2B4D44; }
.botao:active { transform: translateY(1px); }
.botao-pequeno { min-height: 2.6rem; padding: .5rem 1rem; }
.carimbo {
  position: absolute; right: 1.4rem; bottom: 1.4rem; width: 7.4rem; height: 7.4rem; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: .2rem; text-align: center;
  color: var(--ouro); border: 2px solid currentColor; box-shadow: inset 0 0 0 4px var(--marfim), inset 0 0 0 5px currentColor;
  font-family: var(--f-marca); font-size: .72rem; letter-spacing: .04em; line-height: 1.15; padding: 1rem;
  opacity: 0; transform: scale(1.6) rotate(-14deg); pointer-events: none; mix-blend-mode: multiply;
}
.carimbo svg { width: 2rem; height: 1.6rem; color: var(--ouro); }
.carimbo.batido { animation: carimbar .45s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes carimbar { 0% { opacity: 0; transform: scale(1.6) rotate(-14deg); } 60% { opacity: 1; transform: scale(.94) rotate(-9deg); } 100% { opacity: .92; transform: scale(1) rotate(-10deg); } }

.presentes { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; }
.presentes li + li { border-top: 1px dashed rgba(31, 58, 51, .22); }
.presentes button {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: left;
  background: none; border: 0; padding: .85rem .25rem; color: var(--tinta); font-size: 1.0625rem;
}
.presentes button:hover .presente-nome { text-decoration: underline; text-decoration-color: var(--ouro); text-underline-offset: .2em; }
.presente-estado { font-family: var(--f-marca); font-size: var(--t-mini); color: var(--tinta-suave); white-space: nowrap; letter-spacing: .02em; }
.presentes button[data-ocupado] { cursor: default; }
.presentes button[data-ocupado] .presente-nome { text-decoration: line-through; text-decoration-color: rgba(31, 58, 51, .45); color: var(--tinta-suave); }
.presentes button[data-ocupado]:hover .presente-nome { text-decoration: line-through; }
.presentes button[aria-pressed="true"] .presente-estado { color: var(--tinta); }
.presentes button[aria-pressed="true"] .presente-nome { font-style: italic; }
.presentes button[aria-pressed="true"] .presente-estado::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ouro); margin-right: .45rem; vertical-align: .05em; }

.recados { list-style: none; margin: 1.3rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.recado {
  flex: 1 1 13rem; max-width: 19rem; padding: 1rem 1.1rem 1.1rem; background: #FBF8F2; color: var(--tinta);
  box-shadow: 0 1px 1px rgba(31, 58, 51, .12), 0 8px 14px -8px rgba(31, 58, 51, .35);
  transform: rotate(var(--g, -1deg)); position: relative;
}
.recado:nth-child(2n) { --g: 1.2deg; }
.recado:nth-child(3n) { --g: -.4deg; }
.recado::before { content: ""; position: absolute; top: -.45rem; left: 50%; width: 2.6rem; height: .9rem; margin-left: -1.3rem; background: rgba(201, 168, 106, .45); transform: rotate(-3deg); }
.recado p { font-style: italic; font-size: 1.0625rem; line-height: 1.45; }
.recado span { display: block; margin-top: .5rem; font-family: var(--f-nome); font-size: 1.6rem; line-height: 1; color: var(--tinta-suave); }
.recado.novo { animation: colar .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes colar { from { opacity: 0; transform: translateY(-14px) rotate(-6deg) scale(1.05); } }
.recado-form { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid rgba(31, 58, 51, .15); padding-top: 1.2rem; }
.recado-form > label { font-family: var(--f-marca); font-size: var(--t-mini); color: var(--tinta-suave); letter-spacing: .03em; }
.recado-form textarea, .recado-form input {
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(31, 58, 51, .22); border-radius: 2px;
  padding: .65rem .8rem; color: var(--tinta); font-size: 1.0625rem; resize: vertical;
}
.recado-form textarea:focus, .recado-form input:focus { outline: none; border-color: var(--tinta); }
.recado-form textarea:focus-visible, .recado-form input:focus-visible { box-shadow: 0 0 0 2px var(--ouro); }
.recado-linha { display: flex; gap: .6rem; flex-wrap: wrap; }
.recado-linha input { flex: 1 1 10rem; min-width: 0; }
.peca-erro { color: var(--erro); font-size: .9375rem; min-height: 1.4em; }
.peca-nota-exemplo { margin-top: .2rem; }

/* coleção */
.colecao { max-width: 72rem; margin: clamp(6rem, 10vw, 10rem) auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.colecao-texto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.colecao-texto p { color: var(--salvia); font-size: var(--t-lead); max-width: 38ch; }
@media (max-width: 760px) { .colecao-texto { grid-template-columns: 1fr; } }
.estante {
  list-style: none; margin: 0; padding: 1.5rem .5rem 2rem; display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(201,168,106,.4) transparent;
  border-bottom: 1px solid rgba(201, 168, 106, .3);
}
.envelope-ano { flex: 0 0 clamp(8.5rem, 16vw, 10.5rem); scroll-snap-align: start; display: flex; flex-direction: column; gap: .2rem; }
.envelope-ano::before {
  content: ""; display: block; aspect-ratio: 1.3; margin-bottom: .9rem; max-width: 100%;
  background-color: var(--marfim); background-image:
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(31, 58, 51, .22) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom left, transparent calc(50% - .6px), rgba(31, 58, 51, .22) 50%, transparent calc(50% + .6px)),
    var(--papel-grao);
  background-size: 50% 62%, 50% 62%, auto; background-position: left top, right top, 0 0; background-repeat: no-repeat, no-repeat, repeat;
  box-shadow: var(--sombra-papel);
}
.envelope-ano { position: relative; }
.envelope-selo { position: absolute; top: calc((clamp(8.5rem, 16vw, 10.5rem) / 1.3) * .62 - .7rem); left: 50%; width: 1.4rem; height: 1.4rem; margin-left: -.7rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%, #9C7F47); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.envelope-ano .ano { font-size: 1.25rem; }
.envelope-ano .tema { font-family: var(--f-marca); font-size: var(--t-mini); color: var(--salvia); letter-spacing: .02em; }
.envelope-futuro::before { background: transparent; border: 1px dashed rgba(169, 187, 177, .45); box-shadow: none; }
.envelope-futuro .ano { color: var(--salvia); }

/* ---------- programa ---------- */
.programa { background: var(--verde-fundo); text-align: center; }
.programa::before { content: ""; position: absolute; inset: 0; background: var(--veludo-grao); pointer-events: none; }
.programa h2 { position: relative; margin-bottom: clamp(3rem, 6vw, 5rem); }
.programa-lista { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 3.75rem); }
.programa-lista li { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.programa-num { font-style: italic; color: var(--ouro); font-size: 1.125rem; letter-spacing: .06em; }
.programa-lista h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.15; }
.programa-lista p { color: var(--salvia); max-width: 36ch; }
.programa-lista li + li::before { content: ""; display: block; width: .4rem; height: .4rem; background: var(--ouro); transform: rotate(45deg); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); opacity: .7; }

/* ---------- vitrine ---------- */
.vitrine { background: var(--veludo-grao), var(--verde); overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 2.5rem); max-width: none; }
.vitrine > * { position: relative; }
.vitrine-selo {
  position: absolute; right: -12vw; top: 54%; width: min(74vw, 56rem); transform: translateY(-50%); color: var(--verde);
  filter: drop-shadow(-2px -2px 1px rgba(255, 255, 255, .07)) drop-shadow(3px 3px 2px rgba(0, 0, 0, .35));
  pointer-events: none;
}
.vitrine-selo svg { display: block; width: 100%; height: auto; }
.vitrine-selo { --m-selo: var(--verde); }
.vitrine h2 { grid-column: 2 / span 8; font-size: var(--t-display); line-height: 1; letter-spacing: -.02em; max-width: 14ch; }
.vitrine-texto { grid-column: 6 / span 6; margin-top: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; gap: 1.1rem; font-size: var(--t-lead); color: var(--marfim); }
.vitrine-texto p + p { color: var(--salvia); }
@media (max-width: 900px) {
  .vitrine h2 { grid-column: 1 / -1; }
  .vitrine-texto { grid-column: 1 / -1; max-width: 38ch; }
}

/* ---------- R.S.V.P. ---------- */
.rsvp { background: var(--verde-fundo); }
.rsvp::before { content: ""; position: absolute; inset: 0; background: var(--veludo-grao); pointer-events: none; }
.rsvp-cabeca { position: relative; text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.rsvp-cabeca p { color: var(--salvia); font-size: var(--t-lead); max-width: 36ch; }
.resposta {
  position: relative; max-width: 44rem; margin: 0 auto; color: var(--tinta);
  background-color: var(--marfim); background-image: var(--papel-grao); box-shadow: var(--sombra-papel);
  padding: clamp(2rem, 1.2rem + 4vw, 4rem) clamp(1.25rem, .6rem + 4vw, 4rem) clamp(2rem, 1.5rem + 3vw, 3.5rem);
  outline: 1px solid rgba(201, 168, 106, .8); outline-offset: -14px;
}
.resposta-rsvp { text-align: center; font-style: italic; font-size: 1.75rem; letter-spacing: .12em; color: var(--ouro); margin-bottom: 1.6rem; }
.resposta-frase { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 2.35; text-align: center; text-wrap: pretty; }
.resposta-frase > span { white-space: normal; }
.lacuna { display: inline-block; vertical-align: baseline; margin: 0 .25em; max-width: 100%; }
.lacuna input {
  font-family: var(--f-texto); font-style: italic; font-size: 1em; color: var(--tinta);
  background: transparent; border: 0; border-bottom: 1px solid rgba(31, 58, 51, .45);
  padding: 0 .15em .05em; text-align: center; max-width: 100%;
  transition: border-color .25s;
}
.lacuna input::placeholder { color: rgba(86, 104, 95, .55); font-style: italic; }
.lacuna input:focus { outline: none; border-bottom: 1.5px solid var(--ouro); }
.lacuna input:focus-visible { background: rgba(201, 168, 106, .12); }
.lacuna input[aria-invalid="true"] { border-bottom-color: var(--erro); }
.lacuna-s input { width: 2.6em; }
.lacuna-m input { width: 8.5em; }
.lacuna-l input { width: 10.5em; }
.resposta-indicacao { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: 2rem; }
.resposta-indicacao label { font-family: var(--f-marca); font-size: var(--t-mini); color: var(--tinta-suave); letter-spacing: .03em; }
.resposta-indicacao input { font-style: italic; text-align: center; background: transparent; border: 0; border-bottom: 1px solid rgba(31, 58, 51, .3); padding: .2rem .4rem; width: min(100%, 20rem); color: var(--tinta); }
.resposta-indicacao input:focus { outline: none; border-bottom-color: var(--ouro); }
.resposta-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resposta-erro { color: var(--erro); text-align: center; min-height: 1.6em; margin-top: 1.2rem; font-size: 1rem; }
.resposta-acoes { display: flex; justify-content: center; margin-top: .6rem; }
.botao-selo { background: var(--tinta); padding: .5rem 1.6rem .5rem .5rem; border-radius: 999px; min-height: 3.5rem; gap: .9rem; }
.botao-selo-disco {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, var(--ouro-claro), var(--ouro) 52%, #8F7240 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.35);
}
.botao-selo-disco svg { width: 1.45rem; height: 1.15rem; color: #6E5530; }
.botao-selo-disco { --m-selo: #6E5530; }
.botao-selo[disabled] { opacity: .7; cursor: progress; }
.resposta-ok { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding-top: .5rem; }
.resposta-ok:focus { outline: none; }
.resposta-ok[hidden] { display: none; }
.resposta-ok-selo {
  width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: .4rem;
  background: radial-gradient(circle at 34% 30%, var(--ouro-claro), var(--ouro) 52%, #8F7240 100%);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), inset 0 3px 3px rgba(255,255,255,.35), 0 6px 14px -6px rgba(31, 58, 51, .6);
  animation: selar .6s cubic-bezier(.3, 1.5, .5, 1);
}
.resposta-ok-selo svg { width: 3.2rem; height: 2.6rem; color: #6E5530; }
.resposta-ok-selo { --m-selo: #6E5530; }
@keyframes selar { from { transform: scale(1.7); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } }
.resposta-ok-titulo { font-size: 1.9rem; }
.resposta-ok p:not(.resposta-ok-titulo) { color: var(--tinta-suave); max-width: 32ch; }
.resposta-ok .botao-linha { color: var(--tinta); border-color: rgba(31, 58, 51, .4); }
.resposta-ok .botao-linha:hover { background: var(--tinta); color: var(--marfim); border-color: var(--tinta); }
.resposta.enviada .resposta-frase, .resposta.enviada .resposta-indicacao, .resposta.enviada .resposta-acoes, .resposta.enviada .resposta-erro { display: none; }

/* ---------- rodapé ---------- */
.rodape { background: var(--verde-fundo); text-align: center; padding: 4rem var(--gutter) calc(3.5rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: .7rem; border-top: 1px solid rgba(201, 168, 106, .14); }
.rodape-m { width: 2.6rem; height: 2.1rem; color: var(--marfim); }
.rodape-assinatura { font-style: italic; color: var(--salvia); font-size: 1rem; }
.rodape-assinatura span { font-family: var(--f-marca); font-style: normal; letter-spacing: .14em; color: var(--marfim); margin-left: .2em; }
.rodape-info { font-family: var(--f-marca); font-size: var(--t-mini); color: rgba(169, 187, 177, .75); letter-spacing: .03em; }

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