:root {
  --bg: #ddd8d2;
  --bg-2: #e9e4df;
  --ink: #23201f;
  --paper: #f8f4ee;
  --paper-2: #fffdfa;
  --line: rgba(35, 32, 31, 0.12);
  --shadow: 0 26px 60px rgba(45, 41, 36, 0.16);
  --shadow-soft: 0 16px 28px rgba(45, 41, 36, 0.10);
  --gold: #cfa75e;
  --gold-dark: #9f742f;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: 'Manrope', Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.40), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.18), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  min-height: 100svh;
  min-height: 100vh;
  overflow-x: hidden;
}

.layout {
  min-height: 100dvh;
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}

.scene-glow {
  position: absolute;
  left: 50%;
  top: calc(50% + (var(--env-height) * 0.40));
  width: min(calc(var(--env-width) * 0.88), 760px);
  height: clamp(38px, 8vw, 88px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 72%);
  filter: blur(16px);
  opacity: 0.68;
  pointer-events: none;
}

.paper-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--env-width);
  height: var(--env-height);
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rsvp-card,
.details-card {
  position: absolute;
  opacity: 0;
  transition:
    opacity 0.35s ease 0.95s,
    transform 0.7s cubic-bezier(0.2, 0.82, 0.2, 1) 0.95s;
}

.scene.open .rsvp-card,
.scene.open .details-card {
  opacity: 1;
}

@media (max-width: 479px) {
  .layout {
    padding-inline: 10px;
    padding-block: 14px;
  }

  .rsvp-card {
    left: -2px;
    top: 58%;
    width: 92px;
    min-height: 150px;
  }

  .details-card {
    bottom: 1%;
    width: min(200px, 62vw);
  }
}

.paper-stack .details-card:hover,
.paper-stack .rsvp-card__link:hover {
  opacity: 0.92;
}


.paper-stack .details-card:hover,
.paper-stack .rsvp-card__link:hover {
  opacity: 0.92;
}

.paper-stack .rsvp-card,
.paper-stack .details-card {
    pointer-events: auto; /* permite clicks en estos elementos */
}

.paper-stack a {
    pointer-events: auto;
}

.scene-glow {
    pointer-events: none; /* no bloquea clicks */
}