/* ══════════════════════════════════════════════════════════════
   Convite · Emilly & Gabriel — v2 (revisão da noiva)
   Papel branco-gelo, verde-sálvia claro, capa de duas folhas
   Mobile-first 375px · desktop ≥1024px
   ══════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────── */
:root {
  /* superfícies */
  --pergaminho: #FFF;
  --papel: #FAFCFA;
  --papel-dir: #F7FAF8;
  --capa-fundo: #EFF1EE;
  --fundo-cena: #F8F8E6;
  /* mesa clara — fundo desktop */
  --rodape: #2C2318;
  /* tintas */
  --sepia: #3E3226;
  --texto: #4a3d2c;
  --util: #5a4a33;
  --rotulo: #7a6543;
  --suave: #75634a;
  /* spec #8a7657, escurecido p/ WCAG AA */
  --legenda: #6b5a44;
  /* ouro */
  --ouro-claro: #C9A96A;
  --ouro: #B08D5E;
  --ouro-escuro: #8F6B3F;
  --ouro-luz: #EAD9A8;
  --filete: rgba(143, 107, 63, .55);
  --filete-fraco: rgba(143, 107, 63, .4);
  /* acento — verde-sálvia claro (alt bordô: #6B2F35 / #7D3A41 / texto #6B2F35) */
  --accent: #5E7A66;
  --accent-hi: #6E8A74;
  --accent-text: #41564A;
  /* fundos de cartão */
  --cartao-65: rgba(255, 255, 240, .65);
  --cartao-60: rgba(255, 255, 240, .6);
  /* tipografia */
  --f-cinzel: 'Cinzel', 'Times New Roman', serif;
  --f-corm: 'Cormorant Garamond', Garamond, Georgia, serif;
  --f-vibes: 'Great Vibes', 'Brush Script MT', cursive;
  --f-jost: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  /* textura de pergaminho — SVG noise */
  --tex: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22220%22%20height=%22220%22%3E%3Cfilter%20id=%22p%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.8%22%20numOctaves=%222%22%20seed=%224%22/%3E%3CfeColorMatrix%20values=%220%200%200%200%200.42%200%200%200%200%200.33%200%200%200%200%200.18%200%200%200%200.055%200%22/%3E%3C/filter%3E%3Crect%20width=%22220%22%20height=%22220%22%20filter=%22url(%23p)%22/%3E%3C/svg%3E');
  /* textura 3D de papel (relevo por luz difusa) — capa */
  --tex3d: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%3E%3Cfilter%20id=%22r%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.85%22%20numOctaves=%222%22%20result=%22n%22/%3E%3CfeDiffuseLighting%20in=%22n%22%20lighting-color=%22white%22%20surfaceScale=%221.4%22%20diffuseConstant=%221.08%22%3E%3CfeDistantLight%20azimuth=%22235%22%20elevation=%2260%22/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20filter=%22url(%23r)%22/%3E%3C/svg%3E');
  /* mesa (fundo desktop) */
  --cena-bg: radial-gradient(rgba(143, 107, 63, .1) 1px, transparent 1.3px),
    radial-gradient(130% 90% at 50% 0%, rgba(255, 250, 232, .6) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(140% 100% at 50% 110%, rgba(120, 94, 58, .4) 0%, rgba(0, 0, 0, 0) 60%);
  --cena-size: 24px 24px, auto, auto;
  /* animação */
  --t-selo: .2s;
  --t-abrir: .7s;
  --t-reveal: .3s;
}

/* ─── Reset mínimo ────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  font: 500 16.5px/1.62 var(--f-corm);
  background-color: var(--pergaminho);
  background-image: var(--tex);
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
  height: 100vh;
}

body.modal-open {
  overflow: hidden;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

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

.convite:focus {
  outline: none;
}

.cordao {
  display: block;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   TELA 1 · CAPA — duas folhas de papel branco-gelo + selo
   ══════════════════════════════════════════════════════════════ */
.capa {
  position: fixed;
  inset: 0;
  z-index: 50;
  transition: opacity var(--t-reveal) ease;
}

.capa__tex {
  display: none;
}

.capa__btn {
  position: absolute;
  inset: 0;
  display: block;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

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

.folha {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.05%;
  background-color: var(--papel);
  background-image: var(--tex3d), var(--tex), repeating-linear-gradient(0deg, rgba(88, 96, 92, .04) 0 1px, transparent 1px 4px);
  background-blend-mode: multiply, normal, normal;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform var(--t-abrir) cubic-bezier(.55, .06, .35, 1) .15s;
}

.folha--t {
  top: 0;
  transform-origin: center top;
  box-shadow: inset 0 -14px 18px -12px rgba(96, 104, 100, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.folha--b {
  bottom: 0;
  transform-origin: center bottom;
  background-color: var(--papel-dir);
  box-shadow: inset 0 14px 18px -12px rgba(96, 104, 100, .32), inset 0 -1px 0 rgba(255, 255, 255, .7);
}

.capa__junta {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(112, 120, 116, .18), rgba(112, 120, 116, .42) 50%, rgba(112, 120, 116, .18));
  transition: opacity var(--t-selo) ease;
}

.capa__selo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 216px;
  height: 216px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-selo) ease, opacity var(--t-selo) ease;
}

.capa__arco {
  position: absolute;
  inset: 0;
}

.capa__arco-texto {
  font: 500 8px var(--f-jost);
  letter-spacing: .32em;
  fill: rgb(145, 145, 145);
}

.capa__selo img {
  display: block;
  width: 118px;
  height: auto;
  filter: drop-shadow(0 7px 12px rgba(64, 48, 20, .32));
}

.capa__mono {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font: 400 25px/1 var(--f-vibes);
  color: #6A4718;
  text-shadow: 0 1px 0 rgba(255, 240, 205, .55), 0 -1px 1px rgba(52, 31, 4, .45);
}

.capa__mono em {
  font: italic 500 13px var(--f-corm);
  color: #7A5722;
}

/* abertura: selo solta, folhas giram como portas */
.capa.is-opening .capa__selo {
  transform: translate(-50%, -50%) scale(.85);
  opacity: 0;
}

.capa.is-opening .capa__junta {
  opacity: 0;
}

.capa.is-opening .folha--t {
  transform: translateY(-103%);
}

.capa.is-opening .folha--b {
  transform: translateY(103%);
}

.capa.is-revealing {
  opacity: 0;
  pointer-events: none;
}

.capa[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   TELA 2 · CONVITE
   ══════════════════════════════════════════════════════════════ */
.convite {
  position: relative;
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background-color: var(--pergaminho);
  background-image:
    var(--tex),
    radial-gradient(120% 26% at 50% 0%, rgba(120, 94, 58, .1), rgba(120, 94, 58, 0) 70%),
    radial-gradient(90% 14% at 50% 100%, rgba(120, 94, 58, .12), rgba(120, 94, 58, 0) 75%);
}

.sheet__content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 0;
}

/* ── 1 · Música (discreto, fixo ao rolar) ── */
.music-wrap {
  /* position: sticky;  */
  top: 10px;
  z-index: 7;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.music {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 6px;
  border: none;
  background: none;
  opacity: .75;
  transition: opacity .2s ease;
}

.music:hover,
.music.is-playing {
  opacity: 1;
}

.music__icon {
  color: var(--ouro-escuro);
}

.music__label {
  font: italic 400 12px var(--f-corm);
  color: var(--suave);
}

/* ── Hero ── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* monograma E&G */
.eg {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
}

.eg span {
  font: 400 56px/1 var(--f-vibes);
  color: var(--sepia);
}

.eg em {
  font: italic 500 23px var(--f-corm);
  color: var(--ouro-escuro);
  font-style: italic;
}

/* foto das alianças — quadrada, bordas dissolvidas */
.fotoal {
  margin-top: 36px;
}

.fotoal__win {
  width: 264px;
  height: 264px;
  margin: 0 auto;
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 55%, rgba(0, 0, 0, .85) 72%, rgba(0, 0, 0, .35) 88%, transparent 99%);
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 55%, rgba(0, 0, 0, .85) 72%, rgba(0, 0, 0, .35) 88%, transparent 99%);
}

.fotoal__win img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.fotoal__caption {
  text-align: center;
  margin-top: 10px;
  font: italic 500 13.5px var(--f-corm);
  color: var(--suave);
}

.hero__kicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 34px;
}

.eyebrow {
  font: 500 10px var(--f-jost);
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--rotulo);
  text-align: center;
}

.hero__title {
  margin-top: 6px;
  text-align: center;
  font: 600 22.5px var(--f-cinzel);
  letter-spacing: .18em;
  color: var(--sepia);
  text-wrap: balance;
}

.hero__cord {
  margin-top: 16px;
}

.verse-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verse {
  margin: 18px auto 0;
  max-width: 290px;
  text-align: center;
  font: italic 500 17.5px/1.5 var(--f-corm);
  color: var(--accent-text);
}

.verse__ref {
  margin-top: 8px;
  text-align: center;
  font: 500 9.5px var(--f-jost);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--rotulo);
}

.names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 22px;
}

.names__name {
  font: 400 50px/1.12 var(--f-vibes);
  color: var(--sepia);
}

.names__amp {
  font: italic 500 22px/1.1 var(--f-corm);
  color: var(--ouro);
  margin: 2px 0;
}

.invite-text {
  margin: 22px auto 0;
  max-width: 300px;
  text-align: center;
  font: 400 11px/2.05 var(--f-jost);
  letter-spacing: .2em;
  color: var(--util);
}

/* countdown — aberto, sem cartão */
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 42px;
}

.countdown__when {
  text-align: center;
  font: 500 9.5px var(--f-jost);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--rotulo);
}

.countdown__day {
  text-align: center;
  margin-top: 6px;
  font: 700 24px var(--f-cinzel);
  letter-spacing: .1em;
  color: var(--accent-text);
}

.countdown__year {
  display: block;
  margin-top: 2px;
  font: 600 13px var(--f-cinzel);
  letter-spacing: .32em;
  text-indent: .32em;
  color: var(--rotulo);
}

.countdown__grid {
  display: flex;
  gap: 28px;
  margin-top: 20px;
}

.cd-cell {
  text-align: center;
}

.cd-cell__num {
  display: block;
  font: 600 26px var(--f-cinzel);
  color: var(--sepia);
  font-variant-numeric: tabular-nums;
}

.cd-cell__label {
  display: block;
  margin-top: 5px;
  font: 500 8.5px var(--f-jost);
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--rotulo);
}

/* ── Seções ── */
.section {
  display: flex;
  flex-direction: column;
}

.mini-title {
  text-align: center;
  margin-top: 44px;
  font: 600 11.5px var(--f-cinzel);
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--ouro-escuro);
}

/* A Aliança */
.alianca {
  display: flex;
  flex-direction: column;
}

.alianca__verse {
  margin: 16px auto 0;
  max-width: 296px;
  text-align: center;
  font: italic 500 16px/1.6 var(--f-corm);
  color: var(--texto);
}

.alianca__ref {
  display: block;
  text-align: center;
  margin-top: 9px;
  font: 500 8.5px var(--f-jost);
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--rotulo);
  font-style: normal;
}

/* O Lugar — aquarela com bordas derramadas */
.aquarela {
  margin: 6px auto 0;
  position: relative;
  width: 320px;
  max-width: 100%;
  height: 410px;
}

.aquarela img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  mix-blend-mode: multiply;
  mask-image:
    radial-gradient(58% 54% at 50% 47%, #000 44%, rgba(0, 0, 0, .9) 66%, rgba(0, 0, 0, .42) 84%, rgba(0, 0, 0, .1) 94%, transparent 100%),
    radial-gradient(30% 30% at 22% 26%, #000 30%, rgba(0, 0, 0, .35) 72%, transparent 100%),
    radial-gradient(28% 30% at 79% 28%, #000 28%, rgba(0, 0, 0, .32) 70%, transparent 100%),
    radial-gradient(32% 28% at 27% 78%, #000 30%, rgba(0, 0, 0, .34) 72%, transparent 100%),
    radial-gradient(30% 26% at 76% 80%, #000 28%, rgba(0, 0, 0, .3) 70%, transparent 100%),
    radial-gradient(22% 22% at 50% 92%, #000 22%, transparent 96%),
    radial-gradient(20% 20% at 50% 8%, #000 20%, transparent 96%);
  -webkit-mask-image:
    radial-gradient(58% 54% at 50% 47%, #000 44%, rgba(0, 0, 0, .9) 66%, rgba(0, 0, 0, .42) 84%, rgba(0, 0, 0, .1) 94%, transparent 100%),
    radial-gradient(30% 30% at 22% 26%, #000 30%, rgba(0, 0, 0, .35) 72%, transparent 100%),
    radial-gradient(28% 30% at 79% 28%, #000 28%, rgba(0, 0, 0, .32) 70%, transparent 100%),
    radial-gradient(32% 28% at 27% 78%, #000 30%, rgba(0, 0, 0, .34) 72%, transparent 100%),
    radial-gradient(30% 26% at 76% 80%, #000 28%, rgba(0, 0, 0, .3) 70%, transparent 100%),
    radial-gradient(22% 22% at 50% 92%, #000 22%, transparent 96%),
    radial-gradient(20% 20% at 50% 8%, #000 20%, transparent 96%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}

.place__name {
  text-align: center;
  margin-top: 14px;
  font: 600 18px var(--f-cinzel);
  letter-spacing: .1em;
  color: var(--sepia);
}

.place__address {
  text-align: center;
  margin-top: 6px;
  font: 400 12px/1.75 var(--f-jost);
  letter-spacing: .08em;
  color: var(--util);
}

/* Traje & orientações */
.dress__label {
  text-align: center;
  margin-top: 16px;
  font: 500 9px var(--f-jost);
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--rotulo);
}

.dress__name {
  text-align: center;
  margin-top: 5px;
  font: italic 500 21px var(--f-corm);
  color: var(--sepia);
}

.dress__note {
  margin: 5px auto 0;
  max-width: 280px;
  text-align: center;
  font: 400 12.5px/1.6 var(--f-corm);
  color: var(--suave);
}

.bullets {
  margin: 22px auto 0;
  max-width: 296px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.bullets li {
  text-align: center;
  font: 500 14.5px/1.5 var(--f-corm);
  color: var(--texto);
}

/* ── Ações (lista) ── */
.actions {
  display: flex;
  flex-direction: column;
  margin-top: 44px;
  border-top: 1px solid rgba(143, 107, 63, .3);
}

.action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 2px;
  text-align: left;
  border-bottom: 1px solid rgba(143, 107, 63, .3);
  text-decoration: none;
  color: inherit;
  transition: background .2s ease;
}

.action:hover {
  background: rgba(255, 255, 240, .55);
}

.action__icon {
  flex: none;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro-escuro);
}

.action__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action__title {
  font: 600 13px var(--f-cinzel);
  letter-spacing: .1em;
  color: var(--sepia);
}

.action__sub {
  font: 300 10.5px var(--f-jost);
  letter-spacing: .12em;
  color: var(--rotulo);
}

.action__chev {
  font: 400 20px var(--f-corm);
  color: var(--ouro-escuro);
}

/* ── Rodapé ── */
.footer {
  margin: 34px -24px 0;
}

.footer__photo {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--rodape);
}

.footer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.footer__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 90px;
  background: linear-gradient(180deg, rgba(44, 35, 24, 0), #2C2318);
  pointer-events: none;
}

.footer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--rodape);
  background-image: var(--tex);
  padding: 8px 28px 30px;
}

.footer__names {
  margin-top: 26px;
  font: 400 30px var(--f-vibes);
  color: var(--ouro-luz);
  letter-spacing: 5px;
}

.footer__meta {
  margin-top: 8px;
  font: 300 9.5px var(--f-jost);
  letter-spacing: .32em;
  text-indent: .32em;
  color: rgba(244, 237, 217, .65);
  text-align: center;
}

.footer .cordao {
  margin-top: 16px;
}

.footer__prayer {
  margin: 16px 0 0;
  max-width: 290px;
  text-align: center;
  font: italic 500 15px/1.6 var(--f-corm);
  color: rgba(244, 237, 217, .85);
}

.footer__made {
  margin-top: 22px;
  font: 300 4px var(--f-jost);
  letter-spacing: .22em;
  text-indent: .22em;
  color: rgba(244, 237, 217, .38);
  text-align: center;
}

.footer__made a {
  color: rgba(201, 169, 106, .6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   MODAL · bottom-sheet (PIX)
   ══════════════════════════════════════════════════════════════ */
.capitular {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--ouro-claro);
  font: 600 20px var(--f-cinzel);
  color: var(--ouro-luz);
  box-shadow: 0 2px 5px rgba(62, 50, 38, .3);
}

.capitular__inner {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(234, 217, 168, .55);
  pointer-events: none;
}

.modal {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: none;
  max-height: 92vh;
  max-height: 92dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

.modal::backdrop {
  background: linear-gradient(180deg, rgba(28, 20, 10, .42), rgba(28, 20, 10, .68));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .35s ease;
}

.modal.is-open::backdrop {
  opacity: 1;
}

.modal__sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  background-color: var(--pergaminho);
  background-image: var(--tex);
  border-top: 1px solid var(--ouro-claro);
  box-shadow: 0 -18px 50px rgba(16, 10, 4, .55);
  padding: 0 22px calc(30px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .35s ease-out;
  touch-action: none;
}

.modal__sheet.is-scrollable {
  touch-action: pan-y;
}

.modal.is-open .modal__sheet {
  transform: translateY(0);
}

.modal.is-dragging .modal__sheet {
  transition: none;
}

.modal__grab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  touch-action: none;
  cursor: grab;
}

.modal__handle {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 99px;
  background: rgba(143, 107, 63, .5);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(143, 107, 63, .5);
  background: var(--cartao-60);
  color: var(--rotulo);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__cord {
  margin-top: 8px;
}

.modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.modal__title {
  font: 600 14px var(--f-cinzel);
  letter-spacing: .12em;
  color: var(--sepia);
}

.modal__sub {
  margin-top: 2px;
  font: 500 9px var(--f-jost);
  letter-spacing: .24em;
  color: var(--rotulo);
}

.pix__lead {
  margin-top: 16px;
  font: italic 500 15px/1.55 var(--f-corm);
  color: var(--legenda);
}

.pix__card {
  position: relative;
  margin-top: 14px;
  border: 1px solid var(--filete);
  background: var(--cartao-65);
  padding: 18px;
  text-align: center;
}

.pix__dash {
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(143, 107, 63, .35);
  pointer-events: none;
}

.pix__label {
  font: 500 9px var(--f-jost);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--rotulo);
}

.pix__key {
  margin-top: 8px;
  font: 600 22px var(--f-cinzel);
  letter-spacing: .05em;
  color: var(--sepia);
  user-select: all;
}

.pix__owner {
  margin-top: 6px;
  font: italic 500 14.5px var(--f-corm);
  color: var(--legenda);
}

.pix__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.pix__note {
  margin-top: 14px;
  text-align: center;
  font: italic 400 13px var(--f-corm);
  color: var(--suave);
}

.btn-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin-top: 14px;
  background: linear-gradient(180deg, #C9A96A, #B08D5E);
  border: 1px solid var(--ouro-escuro);
  box-shadow: 0 3px 8px rgba(62, 50, 38, .3);
  color: #3E2F1A;
  font: 600 12.5px var(--f-cinzel);
  letter-spacing: .18em;
  text-indent: .18em;
  transition: filter .2s ease, transform .1s ease;
}

.btn-gold:hover {
  filter: brightness(1.04);
}

.btn-gold:active {
  transform: translateY(1px);
}

.btn-gold.is-copied {
  background: linear-gradient(180deg, #D9BE86, #C9A96A);
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP ≥ 1024px — folha única 640px sobre a mesa
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body {
    background-color: var(--fundo-cena);
    background-image: none;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--fundo-cena);
    background-image: var(--cena-bg);
    background-size: var(--cena-size);
    pointer-events: none;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--tex);
    opacity: .5;
    pointer-events: none;
  }

  .convite {
    padding: 48px 24px;
  }

  .sheet {
    max-width: 640px;
    box-shadow: 0 40px 90px rgba(6, 9, 7, .6);
  }

  .sheet__content {
    padding: 52px 64px 0;
  }

  /* capa desktop transparente: a mesa vem do body; abrir revela o convite */
  /* capa: coluna com a largura do conteudo, altura total, sobre a mesa */
  .capa__btn {
    inset: auto;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 640px;
    transform: translateX(-50%);
  }

  .capa__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 40px 90px rgba(6, 9, 7, .6);
    transition: opacity .4s ease;
  }

  .capa.is-opening .capa__btn::before {
    opacity: 0;
  }

  .footer {
    margin: 34px -64px 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   Movimento reduzido
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .capa,
  .folha,
  .capa__selo,
  .capa__junta,
  .modal__sheet,
  .modal::backdrop,
  .btn-gold,
  .action,
  .music {
    transition: none !important;
  }
}