/* Portada de apertura: el sello es un botón nativo, accesible con teclado. */
body.cover-open { overflow: hidden; }
.invitation-cover {
  position: fixed; inset: 0; width: 100%; max-width: none;
  height: 100%; height: 100dvh; max-height: none;
  margin: 0; border: 0; padding: 32px 24px; overflow-y: auto;
  background: #f4f0e5; color: #343b29;
}
.invitation-cover::backdrop { background: #f4f0e5; }
.cover-content { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; }
.invitation-page .invitation-cover .eyebrow { color: #565d49; font-size: 20px; letter-spacing: .3em; margin-bottom: 22px; }
.invitation-page .cover-names { font-family: var(--title-font); font-size: clamp(68px, 10vw, 130px); line-height: 1.25; margin: 0 0 22px; }
.cover-names span { color: #896d48; padding: 0 .08em; }
.cover-subtitle { text-transform: uppercase; letter-spacing: .18em; font-size: 19px; color: #565d49; margin: 0 0 48px; }
.cover-guest { font-family: var(--title-font); font-size: 28px; margin: -20px 0 30px; }
.wax-seal {
  position: relative; flex-shrink: 0; width: 138px; height: 138px; border-radius: 50%;
  border: 1px solid #a35746; padding: 0; color: #f7e4ce;
  background: radial-gradient(circle at 35% 25%, #a9503d, #8f3d2e 65%, #733326);
  box-shadow: inset 0 2px 5px #d6997866, inset 0 -5px 9px #54231866, 0 14px 28px #60362b40;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wax-seal::before { content: ''; position: absolute; inset: 9px; border: 1px dashed #e1b29488; border-radius: 50%; pointer-events: none; }
.wax-seal span { font: 46px var(--title-font); }
.wax-seal:hover { color: #fff0dc; background: radial-gradient(circle at 35% 25%, #b65b47, #8f3d2e 65%, #733326); transform: translateY(-3px); box-shadow: inset 0 2px 5px #d6997866, 0 18px 30px #60362b50; }
.wax-seal:active { transform: translateY(1px); }
.cover-hint { color: #565d49; text-transform: uppercase; letter-spacing: .18em; font-size: 16px; margin: 27px 0 0; }

/* Mayor legibilidad en la invitación, sin alterar los paneles de gestión. */
.invitation-page { font-size: 20px; line-height: 1.8; }
.invitation-page .eyebrow { font-size: 17px; }
.invitation-page .full-names { font-size: 18px; }
.invitation-page .hero > p:not(.eyebrow) { font-size: 24px; }
.invitation-page .prose { max-width: 760px; }
.invitation-page .serif-note { font-size: 36px; }
.invitation-page .guest { font-size: 27px; }
.invitation-page .countdown small { font-size: 17px; }
.invitation-page .countdown b { font-size: 60px; }
.invitation-page footer span, .invitation-page footer p { font-size: 17px; }
.invitation-page .gifts details { max-width: 620px; }
@media (max-width: 650px) {
  .invitation-page { font-size: 18px; }
  .invitation-page .topbar { font-size: 16px; }
  .invitation-page .eyebrow { font-size: 16px; }
  .invitation-page .full-names { font-size: 17px; }
  .invitation-page .hero > p:not(.eyebrow) { font-size: 22px; }
  .invitation-page .serif-note { font-size: 32px; }
  .invitation-page .countdown b { font-size: 46px; }
  .invitation-page .countdown small { font-size: 16px; }
  .invitation-page .invitation-cover .eyebrow { font-size: 17px; }
  .invitation-page .cover-names { max-width: 100%; font-size: clamp(54px, 12vw, 78px); }
  .cover-subtitle { font-size: 16px; letter-spacing: .14em; max-width: 320px; margin-bottom: 35px; }
  .cover-hint { font-size: 14px; letter-spacing: .12em; }
  .wax-seal { width: 124px; height: 124px; }
}
@media (prefers-reduced-motion: reduce) { .wax-seal { transition: none; } }

/* Fotografías completas: sin recortes, con espacio reservado durante la carga. */
.story-photo { margin: 0; min-width: 0; }
.story-photo img { display: block; width: 100%; height: auto; background: #d8ceb8; border-radius: 3px; }
.first-date-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 65px); align-items: center; margin-top: 52px; text-align: left; }
.first-date-layout .story-photo { max-width: 500px; width: 100%; margin: auto; }
.first-date-layout .prose { min-width: 0; }
.memories-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 64px; }
.memories-gallery .story-photo:nth-child(2) { margin-top: 45px; }
.family article .story-photo { max-width: 500px; margin: 28px auto 32px; }
@media (max-width: 650px) {
  .first-date-layout { grid-template-columns: 1fr; margin-top: 34px; }
  .memories-gallery { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .memories-gallery .story-photo { max-width: 500px; width: 100%; margin: 0 auto; }
}