/* Invitation formats. Every rule stays inside the post-envelope shell. */
@font-face {
  font-family: 'Invitation Prata';
  src: url('../Prata-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

#design-comparator[hidden] { display: none !important; }
#design-comparator {
  position: sticky;
  top: 5rem;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding: .7rem 1rem;
  color: #302e2b;
  background: rgba(255, 251, 246, .97);
  border-bottom: 1px solid #c8b8a6;
  box-shadow: 0 8px 24px rgba(39, 30, 23, .12);
  font-family: 'Jost', sans-serif;
}
.design-comparator__label {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.design-comparator__options { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.design-comparator__options button {
  min-height: 2.35rem;
  padding: .4rem .8rem;
  border: 1px solid #b8a997;
  border-radius: 999px;
  background: transparent;
  color: #302e2b;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.design-comparator__options button[aria-pressed='true'] { color: #fffaf5; background: #302e2b; border-color: #302e2b; }
.design-comparator__options button:hover { border-color: #302e2b; }
.design-comparator__options button:focus-visible { outline: 3px solid #946f4c; outline-offset: 3px; }

#invitation-shell[data-design]:not([data-design='actual']) {
  min-height: 100vh;
  background: var(--color-cream);
  color: var(--color-ink);
}
#invitation-shell[data-design]:not([data-design='actual']) header { background: var(--color-ivory); border-color: var(--color-stone); }
#invitation-shell[data-design]:not([data-design='actual']) #mobile-nav { background: var(--color-ivory); border-color: var(--color-stone); }
#invitation-shell[data-design]:not([data-design='actual']) main section { scroll-margin-top: 10rem; }
#invitation-shell[data-design]:not([data-design='actual']) #rsvp-form :is(input, select, textarea) { background: #fffefa; }
#invitation-shell[data-design]:not([data-design='actual']) #rsvp-form input[type='radio'] { accent-color: var(--color-ink); }
#invitation-shell[data-design]:not([data-design='actual']) #galeria .gallery-item img { object-position: center; }

/* Waves: warm, photograph-led panels and sweeping dividers. */
#invitation-shell[data-design='waves'] {
  --color-ivory: #fbf4ec;
  --color-cream: #efe2d4;
  --color-sand: #d9b99a;
  --color-ink: #48382e;
  --color-ink-soft: #66584c;
  --color-stone: #c9ae93;
  --color-control-border: #9a806c;
  --color-ink-hover: #30241e;
}
#invitation-shell[data-design='waves'] main { max-width: 1100px; margin: 0 auto; background: var(--color-ivory); overflow: hidden; }
#invitation-shell[data-design='waves'] #inicio {
  min-height: min(900px, 100svh);
  align-items: flex-end;
  padding-bottom: 7rem;
  isolation: isolate;
}
/* A soft backdrop fills the edges when the main photograph is zoomed out. */
#invitation-shell[data-design='waves'] .hero-background::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: url('../images/preboda-41.webp') center / cover no-repeat;
  filter: brightness(.82) blur(1px);
}
#invitation-shell[data-design='waves'] #inicio > .absolute img {
  --hero-scale: .50625;
  position: absolute;
  top: 0;
  left: 50%;
  /* Keep the scaled image full width while revealing more of the landscape. */
  width: calc((100% + 4px) / var(--hero-scale));
  /* Override Tailwind's image cap; it would leave side strips after scaling. */
  max-width: none;
  height: 100%;
  transform: translateX(-50%) scale(var(--hero-scale));
  filter: brightness(.82) blur(.6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
#invitation-shell[data-design='waves'] #inicio > .absolute > div {
  background: linear-gradient(180deg, rgba(35, 27, 21, .3), rgba(35, 27, 21, .12) 35%, rgba(35, 27, 21, .82));
}
#invitation-shell[data-design='waves'] #inicio::after {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: -5%;
  width: 110%;
  height: 5.5rem;
  background: var(--color-ivory);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
#invitation-shell[data-design='waves'] #inicio > .relative { margin-top: 0; }
#invitation-shell[data-design='waves'] #inicio :is(.main-title, .main-title span, .font-script, .wedding-date) { color: #fffaf2; text-shadow: 0 2px 18px rgba(21, 14, 9, .5); }
#invitation-shell[data-design='waves'] #inicio .main-title { font-family: 'Lovely', cursive; font-size: clamp(3.5rem, 8vw, 7rem); letter-spacing: 0; text-transform: none; }
#invitation-shell[data-design='waves'] #inicio .main-ampersand { font-size: .7em; }
#invitation-shell[data-design='waves'] #inicio .inline-block { background: rgba(255, 250, 242, .9); border-color: #fffaf2; }
#invitation-shell[data-design='waves'] #inicio .glass-card { background: rgba(255, 250, 242, .92); border-color: rgba(255, 250, 242, .75); box-shadow: none; }
#invitation-shell[data-design='waves'] #inicio .glass-card span { color: var(--color-ink); text-shadow: none; }
#invitation-shell[data-design='waves'] #inicio a[href='#rsvp'] { background: #fffaf2; color: #48382e; }
#invitation-shell[data-design='waves'] #evento { padding-top: 5rem; }
#invitation-shell[data-design='waves'] #evento .program-card,
#invitation-shell[data-design='waves'] #evento .glass-card { border-radius: 2rem; }
#invitation-shell[data-design='waves'] #evento img { object-fit: cover; }
#invitation-shell[data-design='waves'] #galeria { position: relative; padding-top: 7rem; background: var(--color-cream); }
#invitation-shell[data-design='waves'] #galeria::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -5%;
  width: 110%;
  height: 4rem;
  background: var(--color-ivory);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
#invitation-shell[data-design='waves'] #galeria .gallery-item { border-radius: 2rem 2rem 5rem 2rem; }
#invitation-shell[data-design='waves'] #rsvp > .glass-card { border-radius: 3rem; }

/* Classic Beige: a centered ivory stationery card with botanical trim. */
#invitation-shell[data-design='classic-beige'] {
  --color-ivory: #fffdf8;
  --color-cream: #ece5d9;
  --color-sand: #d9c3a2;
  --color-ink: #544b40;
  --color-ink-soft: #6d6458;
  --color-stone: #c4b297;
  --color-control-border: #97836d;
  --color-ink-hover: #3a322a;
}
#invitation-shell[data-design='classic-beige'] main {
  max-width: 780px;
  margin: 0 auto;
  background: var(--color-ivory);
  box-shadow: 0 12px 65px rgba(73, 55, 36, .14);
  overflow: hidden;
}
#invitation-shell[data-design='classic-beige'] #inicio {
  min-height: 0;
  flex-direction: column;
  gap: 2.75rem;
  padding: 7rem 2rem 5rem;
  background: var(--color-ivory);
}
#invitation-shell[data-design='classic-beige'] #inicio > .relative { order: 1; margin: 0; }
#invitation-shell[data-design='classic-beige'] #inicio > .absolute {
  position: relative;
  order: 2;
  inset: auto;
  width: min(100%, 590px);
  height: 390px;
  padding: .75rem;
  background: #f5f0e7;
  border: 1px solid var(--color-stone);
  box-shadow: 0 14px 28px rgba(75, 55, 34, .12);
}
#invitation-shell[data-design='classic-beige'] #inicio > .absolute img { transform: none; filter: none; object-fit: cover; }
#invitation-shell[data-design='classic-beige'] #inicio > .absolute > div { display: none; }
#invitation-shell[data-design='classic-beige'] #inicio .main-title {
  width: min(88vw, 320px);
  height: 320px;
  margin: .75rem auto 1.5rem;
  padding: 2rem;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  border: 2px solid #b99b70;
  border-radius: 50%;
  font-family: 'Lovely', cursive;
  font-size: clamp(2.4rem, 6vw, 3.3rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 0 0 7px var(--color-ivory), 0 0 0 8px rgba(185, 155, 112, .55);
}
#invitation-shell[data-design='classic-beige'] #inicio .main-title::before,
#invitation-shell[data-design='classic-beige'] #inicio .main-title::after { content: '❦'; display: block; color: #9d8769; font-family: Georgia, serif; font-size: 1.2rem; }
#invitation-shell[data-design='classic-beige'] #inicio .main-ampersand { padding: 0; font-size: .6em; }
#invitation-shell[data-design='classic-beige'] #inicio .inline-block { background: transparent; border: 0; letter-spacing: .2em; }
#invitation-shell[data-design='classic-beige'] #inicio .glass-card { border-radius: 0; box-shadow: none; background: transparent; border-color: var(--color-stone); }
#invitation-shell[data-design='classic-beige'] #inicio .wedding-date { letter-spacing: .16em; }
#invitation-shell[data-design='classic-beige'] main section:not(#inicio) { max-width: 100%; padding: 5rem 2.5rem; }
#invitation-shell[data-design='classic-beige'] main section h2 { font-family: 'Italiana', Georgia, serif; letter-spacing: .04em; }
#invitation-shell[data-design='classic-beige'] #evento .grid { grid-template-columns: 1fr; }
#invitation-shell[data-design='classic-beige'] #evento .program-card,
#invitation-shell[data-design='classic-beige'] #evento .glass-card,
#invitation-shell[data-design='classic-beige'] #rsvp > .glass-card,
#invitation-shell[data-design='classic-beige'] #regalos .glass-card { border-radius: .25rem; box-shadow: none; border: 1px solid var(--color-stone); }
#invitation-shell[data-design='classic-beige'] #galeria { background: #f5f0e8; }
#invitation-shell[data-design='classic-beige'] #galeria .gallery-item { border: .45rem solid #fffdf8; border-radius: 0; box-shadow: 0 5px 16px rgba(73, 55, 36, .16); }
#invitation-shell[data-design='classic-beige'] #rsvp-form :is(input, select, textarea) { border-radius: .25rem; }

/* Vintage Beige: handmade paper, restrained collage and tape details. */
#invitation-shell[data-design='vintage-beige'] {
  --color-ivory: #f7f0e2;
  --color-cream: #e8dcc7;
  --color-sand: #c5a57c;
  --color-ink: #4e4235;
  --color-ink-soft: #6d5d4e;
  --color-stone: #b9a68e;
  --color-control-border: #907e68;
  --color-ink-hover: #362b22;
  background-color: var(--color-cream);
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(111, 88, 62, .022) 4px 5px);
}
#invitation-shell[data-design='vintage-beige'] main {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-ivory);
  background-image: radial-gradient(circle at 12% 18%, rgba(173, 132, 79, .1), transparent 24%), radial-gradient(circle at 85% 68%, rgba(128, 101, 67, .08), transparent 27%);
  box-shadow: 0 9px 55px rgba(58, 41, 25, .2);
  overflow: hidden;
}
#invitation-shell[data-design='vintage-beige'] #inicio {
  min-height: 0;
  flex-direction: column;
  gap: 2.5rem;
  padding: 8rem 2rem 5rem;
}
#invitation-shell[data-design='vintage-beige'] #inicio > .absolute {
  position: relative;
  order: 1;
  inset: auto;
  width: min(100%, 550px);
  height: 440px;
  padding: .6rem;
  background: #fdf9ee;
  filter: drop-shadow(0 12px 15px rgba(58, 41, 25, .22));
  clip-path: polygon(0 1%, 5% 0, 10% 1%, 17% 0, 23% 1%, 31% 0, 39% 1%, 47% 0, 55% 1%, 64% 0, 72% 1%, 80% 0, 89% 1%, 96% 0, 100% 2%, 99% 14%, 100% 25%, 99% 39%, 100% 51%, 99% 67%, 100% 79%, 99% 91%, 100% 99%, 92% 100%, 83% 99%, 74% 100%, 65% 99%, 56% 100%, 47% 99%, 38% 100%, 28% 99%, 18% 100%, 9% 99%, 0 100%, 1% 84%, 0 69%, 1% 52%, 0 37%, 1% 19%);
  transform: rotate(-1.5deg);
}
#invitation-shell[data-design='vintage-beige'] #inicio > .absolute::after {
  content: '';
  position: absolute;
  top: -.25rem;
  right: 1.25rem;
  width: 5.5rem;
  height: 1.5rem;
  background: rgba(192, 162, 109, .63);
  transform: rotate(15deg);
  box-shadow: 0 1px 3px rgba(58, 41, 25, .13);
}
#invitation-shell[data-design='vintage-beige'] #inicio > .absolute img { transform: none; filter: sepia(.17) saturate(.8); object-fit: cover; }
#invitation-shell[data-design='vintage-beige'] #inicio > .absolute > div { display: none; }
#invitation-shell[data-design='vintage-beige'] #inicio > .relative { order: 2; margin: 0; }
#invitation-shell[data-design='vintage-beige'] #inicio .main-title { font-family: 'Lovely', cursive; font-size: clamp(3.2rem, 7vw, 5.5rem); letter-spacing: 0; text-transform: none; }
#invitation-shell[data-design='vintage-beige'] #inicio .inline-block { border: 0; background: transparent; letter-spacing: .25em; }
#invitation-shell[data-design='vintage-beige'] #inicio .glass-card { background: #f9f2e4; border: 1px dashed var(--color-stone); box-shadow: none; border-radius: .2rem; }
#invitation-shell[data-design='vintage-beige'] #inicio .wedding-date { font-family: 'Invitation Prata', Georgia, serif; letter-spacing: .08em; }
#invitation-shell[data-design='vintage-beige'] main section:not(#inicio) { max-width: 100%; padding: 5rem 2.5rem; }
#invitation-shell[data-design='vintage-beige'] main section h2,
#invitation-shell[data-design='vintage-beige'] main section h3 { font-family: 'Invitation Prata', Georgia, serif; }
#invitation-shell[data-design='vintage-beige'] #evento .grid { grid-template-columns: 1fr; }
#invitation-shell[data-design='vintage-beige'] #evento .program-card,
#invitation-shell[data-design='vintage-beige'] #evento .glass-card,
#invitation-shell[data-design='vintage-beige'] #rsvp > .glass-card,
#invitation-shell[data-design='vintage-beige'] #regalos .glass-card { border-radius: .2rem; background: rgba(255, 251, 242, .83); border: 1px solid var(--color-stone); box-shadow: 3px 5px 0 rgba(125, 100, 72, .09); }
#invitation-shell[data-design='vintage-beige'] #galeria { background: transparent; }
#invitation-shell[data-design='vintage-beige'] #galeria .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
#invitation-shell[data-design='vintage-beige'] #galeria .gallery-item { border: .55rem solid #fffaf0; border-bottom-width: 1.6rem; border-radius: 0; box-shadow: 0 9px 18px rgba(58, 41, 25, .18); }
#invitation-shell[data-design='vintage-beige'] #galeria .gallery-item:nth-child(odd) { transform: rotate(-2deg); }
#invitation-shell[data-design='vintage-beige'] #galeria .gallery-item:nth-child(even) { transform: rotate(2deg); margin-top: 2rem; }
#invitation-shell[data-design='vintage-beige'] #galeria .gallery-item:last-child { grid-column: 1 / -1; width: 65%; margin: 1rem auto 0; }
#invitation-shell[data-design='vintage-beige'] #rsvp > .glass-card { position: relative; }
#invitation-shell[data-design='vintage-beige'] #rsvp > .glass-card::before,
#invitation-shell[data-design='vintage-beige'] #rsvp > .glass-card::after { content: ''; position: absolute; top: -.45rem; width: 4.2rem; height: 1.3rem; background: rgba(192, 162, 109, .47); }
#invitation-shell[data-design='vintage-beige'] #rsvp > .glass-card::before { left: 1rem; transform: rotate(-16deg); }
#invitation-shell[data-design='vintage-beige'] #rsvp > .glass-card::after { right: 1rem; transform: rotate(16deg); }
#invitation-shell[data-design='vintage-beige'] #rsvp-form :is(input, select, textarea) { border-radius: .1rem; }

@media (max-width: 767px) {
  #design-comparator { top: 5rem; flex-direction: column; gap: .4rem; padding: .55rem .4rem; }
  .design-comparator__label { font-size: .65rem; }
  .design-comparator__options { flex-wrap: nowrap; width: 100%; overflow-x: auto; justify-content: flex-start; padding: .15rem .45rem .35rem; }
  .design-comparator__options button { font-size: .72rem; padding: .35rem .65rem; }
  #invitation-shell[data-design='waves'] #inicio { min-height: 760px; padding-bottom: 6rem; }
  #invitation-shell[data-design='waves'] #inicio > .absolute img {
    --hero-scale: .495;
  }
  #invitation-shell[data-design='waves'] #inicio .main-title { font-size: clamp(3.1rem, 13vw, 5rem); }
  #invitation-shell[data-design='classic-beige'] #inicio,
  #invitation-shell[data-design='vintage-beige'] #inicio { padding-inline: 1.15rem; }
  #invitation-shell[data-design='classic-beige'] #inicio > .absolute { height: 290px; }
  #invitation-shell[data-design='vintage-beige'] #inicio > .absolute { height: 350px; }
  #invitation-shell[data-design='classic-beige'] main section:not(#inicio),
  #invitation-shell[data-design='vintage-beige'] main section:not(#inicio) { padding: 4.5rem 1.25rem; }
  #invitation-shell[data-design='classic-beige'] #inicio .main-title { width: 270px; height: 270px; font-size: 2.8rem; }
  #invitation-shell[data-design='vintage-beige'] #galeria .grid { grid-template-columns: 1fr; }
  #invitation-shell[data-design='vintage-beige'] #galeria .gallery-item,
  #invitation-shell[data-design='vintage-beige'] #galeria .gallery-item:last-child { grid-column: auto; width: 90%; margin: 0 auto 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  #invitation-shell[data-design] .gallery-item { transition: none; }
}