:root {
  --bg: hsl(4, 76%, 30%);
  --paper: #991d1d;
  --olive: #9b2a1b;
  --olive-dark: #740606;
  --olive-soft: #f52500d5;
  --gold-1: #810707;
  --gold-2: #800f0f;
  --gold-3: #ffffff;
  --text: #ffffff;
  --muted: #f3cdc7;
  --gold-grad: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 30%, var(--gold-3) 50%, var(--gold-2) 70%, var(--gold-1) 100%);
  --script: "Great Vibes", cursive;
  --serif: "Cinzel", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --col: 560px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 300 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100vh; height: 100dvh; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.gold-text {
  background: var(--gold-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: -200% 0; } }

/* ================= CAPA ================= */
.cover {
--cover-panel-top: #5c0808;    /* painel: topo */
--cover-panel-mid: #8e1a12;    /* painel: meio */
--cover-panel-bottom: #5c0808; /* painel: base */
--cover-text: #ffffff;         /* nome e curso */
--cover-text-shade: #f2b8b0;   /* brilho do nome */
--seal-light: #ff8a7a;         /* selo: reflexo */
--seal-main: #ffffff;          /* selo: cor principal */
--seal-dark: #ffffff;          /* selo: sombra */
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #fcfcfc;
  overflow: hidden;
  transition: opacity .8s ease .3s;
}
.cover .cover__photo { position: absolute; inset: 0 0 0 30%; }
/* Textura vinho atrás da foto da capa (aparece inteira quando não há foto) */
.cover .cover__photo,
.cover .cover__photo.is-missing {
  background-color: #5a0f1c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .55  0 0 0 0 .6  0 0 0 .35 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% 40%, #7a1426 0%, #5a0f1c 55%, #2e050c 100%);
  background-size: 240px 240px, 600px 600px, auto, auto, cover;
}
.cover .cover__photo.is-missing::after { content: none; }
.cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.cover__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  background:
    radial-gradient(120% 60% at 20% 10%, rgb(167, 0, 0), transparent 60%),
    radial-gradient(100% 80% at 90% 100%, rgb(167, 0, 0), transparent 60%),
    linear-gradient(180deg, #ff0101, var(--olive) 50%, #ff0000);
  box-shadow: 8px 0 30px rgba(40, 0, 6, .45);
}
.cover__title {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 82vh;
  width: 82dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.cover__name {
  font: 400 clamp(2.6rem, 7.4vh, 4.6rem)/1.15 var(--script);
  white-space: nowrap;
  padding: 0 .2em;
}
.cover__course {
  display: flex;
  align-items: center;
  gap: .8em;
  margin-top: .4em;
  font: 500 clamp(.7rem, 1.8vh, 1rem) var(--serif);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-3);
}
.cover__course::after {
  content: "";
  width: 9em;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-2), transparent);
}

.seal {
  position: absolute;
  left: 44%;
  bottom: 13%;
  width: clamp(124px, 38vw, 190px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)) drop-shadow(0 14px 18px rgba(0,0,0,.35));
  animation: pulse 2.4s ease-in-out infinite;
}
.seal:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 6px; border-radius: 50%; }
.seal__wax, .seal__img, .seal__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__img img { object-fit: contain; }
.seal.has-image .seal__wax { display: none; }
.seal__hint {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  overflow: visible;
  pointer-events: none;
}
.seal__hint text {
  font: 600 12px var(--serif);
  letter-spacing: .28em;
  fill: #f3d77e;
}
@keyframes pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.is-opening .seal { animation: press .7s ease forwards; }
.is-opening .cover { opacity: 0; }
.is-opening .flash { opacity: 1; transition-delay: .55s; }
.is-open .flash { opacity: 0; transition: opacity .9s ease; }
@keyframes press {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(.86); }
  100% { transform: translateX(-50%) scale(1.25); opacity: 0; }
}

/* ================= CONVITE ================= */
.invite { visibility: hidden; }
.is-open .invite { visibility: visible; }

.paper {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(60, 50, 60, .12);
}

.music {
  position: fixed;
  top: 12px;
  right: max(12px, calc(50% - var(--col) / 2 + 12px));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em 1em;
  border: 0;
  border-radius: 999px;
  background: rgba(92, 98, 32, .88);
  color: #fff;
  font: 400 .72rem var(--sans);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
}
.music__icon {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: #e9f0c6;
}
.music.is-playing .music__icon { animation: beat 1s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.6); opacity: .6; } }

/* Fotos */
.photo { position: relative; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.is-missing {
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(135deg, #d8d4c9, #b9bf93);
}
.photo.is-missing::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 .8rem var(--serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(60, 66, 20, .55);
}
.fade-bottom img, .fade-bottom.is-missing {
  -webkit-mask-image: linear-gradient(#000 55%, transparent 98%);
  mask-image: linear-gradient(#000 55%, transparent 98%);
}
.fade-top img, .fade-top.is-missing {
  -webkit-mask-image: linear-gradient(transparent 0%, #000 22%);
  mask-image: linear-gradient(transparent 0%, #000 22%);
}
.fade-both img, .fade-both.is-missing {
  -webkit-mask-image: linear-gradient(transparent 0%, #000 18%, #000 75%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, #000 18%, #000 75%, transparent 100%);
}

/* Aquarelas verdes */
.splash {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .55;
  background:
    radial-gradient(40% 40% at 35% 40%, rgba(156, 176, 84, .75), transparent 70%),
    radial-gradient(35% 30% at 65% 60%, rgba(196, 210, 130, .7), transparent 70%),
    radial-gradient(25% 25% at 50% 30%, rgba(122, 146, 56, .5), transparent 70%);
}
.splash--top { top: -60px; left: -40px; width: 340px; height: 260px; z-index: 2; mix-blend-mode: multiply; }
.splash--side { right: -110px; top: 52%; width: 260px; height: 300px; }
.splash--closing { right: -70px; top: -30px; width: 240px; height: 220px; }

.hero { position: relative; text-align: center; }
.hero__photo { aspect-ratio: 4 / 5; }
.hero__name {
  position: relative;
  z-index: 3;
  margin: -1.4em 0 0;
  padding: 0 .3em;
  font: 400 clamp(2.5rem, 11vw, 3.6rem)/1.2 var(--script);
}
.course {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  margin: .2em 0 1.2em;
  font: 500 .82rem var(--serif);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--muted);
}
.course::before, .course::after {
  content: "";
  width: 3.5em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2));
}
.course::after { transform: scaleX(-1); }

.lead, .note, .event, .thanks { position: relative; z-index: 1; }
.lead { margin: 0 auto; padding: 0 28px; max-width: 30em; }

.block { position: relative; padding: 2.2rem 24px 1rem; text-align: center; }

.heading {
  position: relative;
  isolation: isolate;
  margin: .4rem 0 1.4rem;
  font: 500 1.8rem/1.2 var(--serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heading::before {
  content: attr(data-ghost);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -62%);
  font: 400 2.6rem var(--script);
  text-transform: none;
  letter-spacing: 0;
  color: rgba(156, 115, 34, .13);
  -webkit-text-fill-color: rgba(156, 115, 34, .13);
  white-space: nowrap;
  z-index: -1;
}
.heading--big { font-size: 2rem; }

.event { margin-bottom: 1.5rem; }
.event__title {
  margin: 0 0 .25rem;
  font: 400 .95rem var(--serif);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
}
.event__line { margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-width: 15.5em;
  margin-top: .7rem;
  padding: .55em 1.4em;
  border: 1px solid rgba(255, 220, 214, .45);
  border-radius: 999px;
  background: linear-gradient(180deg, #a8281c, #5c0808);
  color: #fff3f1;
  font: 500 .8rem var(--serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(40, 0, 6, .35), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(40, 0, 6, .45); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.btn svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.note { margin: .5rem auto 0; max-width: 24em; }

.actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

.deadline {
  margin: 1.6rem 0 .4rem;
  font: 400 .72rem/1.6 var(--serif);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}

.countdown { padding-bottom: 1.6rem; }
.script { margin: 0; font: 400 3rem/1.2 var(--script); }
.countdown__grid {
  display: inline-flex;
  align-items: flex-start;
  gap: .25rem;
  padding: .3rem .8rem .9rem;
  border-bottom: 1px solid rgba(255, 220, 214, .4);
}
.countdown__grid div { display: flex; flex-direction: column; align-items: center; min-width: 3.1rem; }
.countdown__grid span, .countdown__grid b {
  font: 300 2.3rem/1.1 var(--sans);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.countdown__grid b { font-weight: 300; }
.countdown__grid small {
  margin-top: .3rem;
  font: 400 .55rem var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.feature { aspect-ratio: 4 / 5; }

.thanks { margin-bottom: 1.5rem; }
.thanks__title {
  margin: 0 0 .2rem;
  font: 400 .78rem var(--serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.thanks__text { margin: 0 auto; max-width: 30em; }

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 1rem 22px 0;
}
.gallery__item { aspect-ratio: 2 / 3; }
.gallery__item img { object-position: 50% 20%; }
/* Se sobrar uma foto sozinha na última linha, ela ocupa a largura toda */
.gallery__item:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 4 / 5; }

.closing { position: relative; padding-top: 3rem; text-align: center; }
.closing__small {
  position: relative;
  z-index: 1;
  margin: 0 0 -.9rem 7rem;
  font: 400 .72rem var(--serif);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}
.closing__script {
  position: relative;
  z-index: 1;
  margin: 0;
  font: 400 clamp(3.4rem, 15vw, 4.6rem)/1.3 var(--script);
}
.closing__photo { aspect-ratio: 2 / 3; margin-top: .5rem; }
.closing__photo img {
  -webkit-mask-image: linear-gradient(transparent 0%, #000 8%);
  mask-image: linear-gradient(transparent 0%, #000 8%);
}

/* Revelar ao rolar */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ================= MODAL ================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  overflow-y: auto;
  padding: 30px 24px;
  background: rgba(35, 34, 30, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .25s ease;
}
.modal.is-open { opacity: 1; }
.modal__card {
  position: relative;
  width: min(100%, 460px);
  margin: auto; /* centraliza e permite rolar se a tela for baixa */
  padding: 1.6rem 1.4rem 1.3rem;
  border: 10px solid #8e1a12;
  outline: 1px solid rgba(212, 166, 64, .8);
  outline-offset: -6px;
  background:
    radial-gradient(45% 30% at 0% 0%, rgba(232, 160, 160, .22), transparent 70%),
    radial-gradient(40% 25% at 100% 100%, rgba(232, 160, 160, .22), transparent 70%),
    radial-gradient(50% 30% at 100% 0%, rgba(240, 214, 150, .25), transparent 70%),
    #fdf8f4;
  color: #4a0a14;
  text-align: center;
  transform: scale(.94);
  transition: transform .25s ease;
}
.modal.is-open .modal__card { transform: none; }
.modal__close {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #8e1a12;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.modal__msg { margin: 0 0 .8rem; font-size: .9rem; }
.modal__icon { width: 26px; height: 26px; fill: #a8281c; }
.modal__label {
  margin: .4rem 0 0;
  font: 400 .75rem var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.modal__info { margin: 0 0 .9rem; font-size: .85rem; }

/* Sugestões de presente */
.gift__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gift__title {
  margin: 0 0 .3rem;
  font: 600 1.2rem/1.3 var(--serif);
  color: #8e1a12;
}
.gift__msg { margin: 0 auto .9rem; max-width: 22em; font-size: .9rem; line-height: 1.5; }
.gift__pill {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .3em 1.3em;
  border: 1px solid rgba(212, 166, 64, .6);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f8e8e4);
  box-shadow: 0 2px 6px rgba(142, 26, 18, .12);
  font: 600 .95rem var(--serif);
  color: #8e1a12;
}
.gift__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gift__items li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0 .3rem; }
.gift__items li + li::before {
  content: "♥";
  position: absolute;
  left: -.35em;
  top: 34px;
  font-size: .7rem;
  color: #d4a640;
}
.gift__art {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0%, #fbe9e4 55%, #f3d3cc 100%);
  box-shadow: inset 0 0 0 1px rgba(212, 166, 64, .45), 0 3px 8px rgba(142, 26, 18, .12);
}
.gift__art svg { width: 54px; height: 54px; }
.gift__label { font: 600 .74rem/1.3 var(--serif); color: #6e0b10; }
.gift__extra { margin: .8rem 0 .2rem; font-size: .85rem; }
.gift__wave { display: block; width: 130px; height: 14px; margin: .3rem auto; fill: none; stroke: #d4a640; stroke-width: 1.4; stroke-linecap: round; }
.gift__wave .gift__heart { fill: #a8281c; stroke: none; }
.gift__note { margin: .3rem auto .8rem; max-width: 22em; font-size: .85rem; }
.gift__obs {
  margin: 0 0 .9rem;
  padding: .7rem .9rem .8rem;
  border: 1px solid rgba(212, 166, 64, .45);
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  font-size: .82rem;
}
.gift__obs p:last-child { margin: 0; }
.gift__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: .8rem; }
.gift__size {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35em 1em;
  border: 1px solid rgba(212, 166, 64, .6);
  border-radius: 999px;
  background: #fff;
  font: 600 .8rem var(--serif);
  color: #8e1a12;
}
.gift__size svg { width: 20px; height: 20px; fill: none; stroke: #a8281c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gift__thanks { margin: 0; font-size: .85rem; }
.modal__divider {
  display: block;
  width: 60%;
  height: 1px;
  margin: 1.1rem auto .9rem;
  background: linear-gradient(90deg, transparent, rgba(142, 26, 18, .45), transparent);
}
.pix {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .4em 1em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #a8281c, #5c0808);
  color: #fff;
  font: 500 .95rem var(--sans);
  letter-spacing: .04em;
  cursor: pointer;
}
.pix svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.modal__hint {
  margin: .4rem 0 0;
  font: 400 .6rem var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a5a5f; /* fundo claro do modal */
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  padding: .5em 1.2em;
  border-radius: 999px;
  background: var(--olive);
  color: #fff;
  font-size: .8rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ================= TELAS MAIORES ================= */
@media (min-width: 700px) {
  body { font-size: 16px; }
  /* No computador a foto ocupa todo o espaço ao lado do painel vermelho */
  .cover .cover__photo { inset: 0 0 0 36%; }
  .cover__photo img { object-position: 50% 18%; }
  .cover__panel { width: 36%; }
  .seal { left: 36%; }
  .block { padding-left: 40px; padding-right: 40px; }
  .gallery { padding-left: 36px; padding-right: 36px; }
}

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