/* Paper invitation theme, loaded after the static Tailwind and envelope styles. */
@font-face { font-family: 'Italiana'; src: url('../fonts/Italiana-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/Jost-Variable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Lovely'; src: url('../fonts/Lovely.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  --color-ivory: #f8f0eb;
  --color-cream: #f8ebdb;
  --color-sand: #ecd3bd;
  --color-ink: #302e2b;
  --color-ink-soft: #68615b;
  --color-stone: #ccc3ba;
  --color-moka: #917567;
  --color-control-border: #81766c;
  --color-ink-hover: #211f1d;
  --ink-rgb: 48 46 43;
  --ivory-rgb: 248 240 235;
  --envelope-base: var(--color-cream);
  --envelope-light: var(--color-ivory);
  --envelope-mid: #efdfcf;
  --envelope-shadow: #e3cfba;
  --font-serif: 'Italiana', Georgia, serif;
  --font-script: 'Lovely', cursive;
  --font-sans: 'Jost', 'Segoe UI', sans-serif;
  /* Keep the compiled stylesheet's semantic tokens in sync. */
  --color-primary: var(--color-ink);
  --color-primary-dark: var(--color-ink-hover);
  --color-accent: var(--color-sand);
  --color-accent-light: var(--color-cream);
  --color-bg-light: var(--color-ivory);
  --color-bg-card: var(--color-ivory);
  --color-text-main: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
}
html, body { background: var(--color-ivory); color: var(--color-ink); font-family: var(--font-sans); font-size: 16px; }
.font-sans, input, select, textarea, button { font-family: var(--font-sans); }
.font-bold, .font-semibold { font-weight: 600; }
.font-serif, h1, h2, h3, h4 { font-family: var(--font-serif); font-style: normal; font-weight: 400; font-synthesis: none; letter-spacing: 0.01em; line-height: 1.2; overflow-wrap: normal; }
.font-script, .section-kicker { font-family: var(--font-script); font-size: clamp(1.75rem, 3vw, 2.25rem); font-style: normal; font-weight: 400; font-synthesis: none; letter-spacing: 0; line-height: 1.65; }
.section-kicker { display: inline-block; }
.main-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.12em 0.25em; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: 0.08em; text-transform: uppercase; filter: none; }
.main-name { white-space: nowrap; }
.ampersand, .main-ampersand { display: inline-block; font-family: 'Lovely', cursive; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.main-ampersand { padding-inline: 0.25em; font-size: 0.85em; color: var(--color-ink); }
.wedding-date { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.75rem); letter-spacing: 0.04em; }
main p:not(.font-script):not(.wedding-date), #rsvp-error-banner,
#rsvp-form :is(input, select, textarea), #rsvp-form label:has(input[type='radio']) span { font-size: 1rem; line-height: 1.65; }
#rsvp-form label, #rsvp-form legend { font-weight: 600; }
#rsvp h2 { font-size: clamp(1.875rem, 5vw, 3rem); }
#inicio > .relative { min-width: 0; }
#inicio .font-script { max-width: 48rem; padding-inline: 0.5rem; }

/* Existing utilities remapped without rebuilding Tailwind. */
.bg-\[\#FAF8F5\] { background-color: var(--color-ivory); }
.bg-\[\#FAF8F5\]\/90 { background-color: rgb(var(--ivory-rgb) / 0.96); }
.bg-\[\#F4EBE1\]\/40 { background-color: var(--color-cream); }
.bg-\[\#1A2E26\], .bg-\[\#2C4A3E\] { background-color: var(--color-ink); }
.bg-\[\#C5A059\], .bg-\[\#C5A059\]\/40 { background-color: var(--color-sand); }
.bg-white\/60, .bg-white\/80, .bg-white\/90, .focus\:bg-white:focus, .hover\:bg-white:hover { background-color: var(--color-ivory); }
.text-\[\#1A2E26\], .text-\[\#2C4A3E\], .text-\[\#2D3732\], .text-\[\#C5A059\] { color: var(--color-ink); }
.text-\[\#6B7C73\] { color: var(--color-ink-soft); }
.text-white, .text-white\/80, .text-gray-200, .text-gray-400, .text-\[\#E6C594\] { color: var(--color-ivory); }
.border-\[\#C5A059\]\/20, .border-\[\#C5A059\]\/30, .border-\[\#C5A059\]\/40 { border-color: var(--color-stone); }
.before\:bg-\[\#C5A059\]\/30::before { background-color: var(--color-stone); }
.focus\:ring-\[\#C5A059\]:focus { --tw-ring-color: var(--color-ink); }
.from-\[\#FAF8F5\] { --tw-gradient-from: var(--color-ivory) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--ivory-rgb) / 0) var(--tw-gradient-to-position); }
.via-\[\#FAF8F5\]\/60 { --tw-gradient-to: rgb(var(--ivory-rgb) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--ivory-rgb) / 0.94) var(--tw-gradient-via-position), var(--tw-gradient-to); }
/* Light veil keeps fine, dark lettering readable over the existing photograph. */
#inicio .to-black\/30 { --tw-gradient-to: rgb(var(--ivory-rgb) / 0.94) var(--tw-gradient-to-position); }
.hover\:text-\[\#C5A059\]:hover, .hover\:text-\[\#2C4A3E\]:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.hover\:bg-\[\#1A2E26\]:hover { background-color: var(--color-ink-hover); }
.glass-card { background: var(--color-ivory); border-color: var(--color-stone); box-shadow: 0 14px 36px -16px rgb(var(--ink-rgb) / 0.15); }
header { border-color: var(--color-stone); }
header :is(nav, #mobile-nav) a:hover { text-decoration: none; }
header .header-monogram, header .header-monogram:hover { text-decoration: none; }
input, select, textarea { color: var(--color-ink); background-color: var(--color-ivory); }
input::placeholder, textarea::placeholder { color: var(--color-ink-soft); opacity: 1; }
input[type='radio'] { accent-color: var(--color-ink); }
.bg-red-900\/10 { background-color: var(--color-cream); }
.border-red-500\/30, #rsvp-error-banner { border-color: var(--color-control-border); }
.text-red-800 { color: var(--color-ink); }
.status-icon { width: 1.5rem; height: 1.5rem; margin: 0 auto 0.5rem; }
.bg-black\/40 { background-color: rgb(var(--ink-rgb) / 0.68); }
.bg-black\/70, .hover\:bg-black\/70:hover { background-color: rgb(var(--ink-rgb) / 0.84); }
.bg-black\/90 { background-color: rgb(var(--ink-rgb) / 0.96); }
.from-black\/70 { --tw-gradient-from: rgb(var(--ink-rgb) / 0.90) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--ink-rgb) / 0) var(--tw-gradient-to-position); }
.via-black\/20 { --tw-gradient-to: rgb(var(--ink-rgb) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--ink-rgb) / 0.60) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-black\/30 { --tw-gradient-to: rgb(var(--ink-rgb) / 0.34) var(--tw-gradient-to-position); }

/* Cream paper and gold-beige wax. Geometry and animation remain in envelope.css. */
#envelope-overlay { background: radial-gradient(ellipse at 50% 40%, var(--color-ivory), var(--color-cream)); }
#envelope-tagline > :first-child { color: var(--color-ink); font-family: var(--font-script); font-size: clamp(1.75rem, 4vw, 2.25rem); font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.65; text-shadow: none; filter: none; }
#envelope-tagline > :last-child { color: var(--color-ink-soft); text-shadow: none; }
#envelope-skip-btn, #envelope-skip-btn:hover, #envelope-skip-btn:focus-visible { color: var(--color-ink); border-color: var(--color-control-border); background: var(--color-ivory); }
#envelope-scene > .envelope-body { border-color: var(--color-stone); box-shadow: 0 24px 48px -12px rgb(var(--ink-rgb) / 0.22), 0 8px 16px -6px rgb(var(--ink-rgb) / 0.12); }
#envelope-letter, #envelope-letter > div { background: var(--color-ivory); border-color: var(--color-stone); }
#envelope-letter h2 { font-size: clamp(1.625rem, 5vw, 2.65rem); text-transform: uppercase; letter-spacing: 0.08em; }
#envelope-letter p { font-family: var(--font-sans); }
#envelope-scene > .envelope-body, #envelope-scene > .envelope-body > div { background: linear-gradient(180deg, var(--envelope-light), var(--envelope-base)); }
#envelope-scene .clip-path-bottom-flap { background: linear-gradient(155deg, var(--envelope-light), var(--envelope-base)); border-color: var(--color-stone); filter: drop-shadow(0 -3px 4px rgb(var(--ink-rgb) / 0.08)); }
#envelope-scene .clip-path-left-flap { background: linear-gradient(100deg, var(--envelope-light), var(--envelope-mid)); filter: drop-shadow(3px 0 3px rgb(var(--ink-rgb) / 0.06)); }
#envelope-scene .clip-path-right-flap { background: linear-gradient(260deg, var(--envelope-shadow), var(--envelope-base)); filter: drop-shadow(-3px 0 3px rgb(var(--ink-rgb) / 0.06)); }
#envelope-top-flap > div { background: linear-gradient(165deg, var(--envelope-light), var(--envelope-base)); border-color: var(--color-stone); filter: drop-shadow(0 6px 5px rgb(var(--ink-rgb) / 0.10)); }
#wax-seal-btn .wax-seal {
  width: clamp(6.5rem, 18vw, 8.25rem);
  height: clamp(6.5rem, 18vw, 8.25rem);
  padding: clamp(0.42rem, 1.3vw, 0.7rem);
  overflow: visible;
  border: 1px solid #9d7a43;
  border-radius: 48% 52% 51% 49% / 50% 47% 53% 50%;
  background: radial-gradient(circle at 32% 25%, #ead9a9 0%, #ddc48a 28%, #c7a86e 68%, #aa874d 100%);
  box-shadow: 0 12px 19px rgb(84 62 30 / 0.28), inset 2px 3px 3px rgb(255 244 207 / 0.72), inset -4px -6px 7px rgb(112 81 34 / 0.32), 0 0 0 2px rgb(143 107 52 / 0.20);
}
#wax-seal-btn .wax-seal::before {
  inset: 0.2rem;
  border: 2px solid rgb(244 222 163 / 0.82);
  border-radius: 52% 48% 49% 51% / 48% 53% 47% 52%;
  box-shadow: 1px 2px 3px rgb(119 85 34 / 0.38), inset 1px 2px 3px rgb(122 88 37 / 0.32), -1px -1px 2px rgb(255 244 207 / 0.78);
}
#wax-seal-btn .wax-seal::after { inset: 0.1rem; border-radius: inherit; background: radial-gradient(circle at 13% 58%, rgb(255 244 207 / 0.38) 0 1%, transparent 3%), radial-gradient(circle at 79% 19%, rgb(109 77 27 / 0.14) 0 1%, transparent 4%); }
#wax-seal-btn .wax-seal-inner {
  border: 1px solid rgb(139 101 43 / 0.65);
  border-radius: 51% 49% 48% 52% / 50% 52% 48% 50%;
  background: radial-gradient(circle at 35% 25%, #e0c58b, #c9a968 72%, #b18b4e);
  box-shadow: inset 1px 2px 5px rgb(113 80 29 / 0.35), inset -1px -1px 2px rgb(255 237 185 / 0.66), 0 1px 1px rgb(255 244 207 / 0.82);
}
#wax-seal-btn .seal-monogram {
  display: grid;
  width: 82%;
  height: 84%;
  grid-template-columns: 0.94fr 0.42fr 0.94fr;
  align-items: center;
  color: #76552b;
  font-family: var(--font-serif);
  font-weight: 400;
  filter: none;
}
#wax-seal-btn .seal-letter {
  position: relative;
  font-size: clamp(2rem, 5.2vw, 3.15rem);
  line-height: 1;
  text-shadow: -1px -1px 1px rgb(255 235 184 / 0.86), 1px 1px 1px rgb(103 73 29 / 0.62);
}
#wax-seal-btn .seal-sprig {
  width: 100%;
  height: 85%;
  overflow: visible;
  stroke: #76552b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(-0.8px -0.8px 0.7px rgb(255 235 184 / 0.86)) drop-shadow(0.8px 0.8px 0.7px rgb(103 73 29 / 0.52));
}

.itinerary-mobile { display: none; }
@media (max-width: 767px) {
  #evento .program-card { display: none; }
  #evento .itinerary-mobile {
    display: block;
    margin-inline: -1rem;
    padding: 2.2rem 1rem 2.6rem;
    color: var(--color-ivory);
    text-align: center;
    background: linear-gradient(rgb(35 33 31 / 0.79), rgb(35 33 31 / 0.83)), url('../images/preboda-41.webp') center / cover;
  }
  .itinerary-mobile h3 {
    margin-bottom: 1.4rem;
    color: var(--color-cream);
    font-family: 'Lovely', cursive;
    font-size: clamp(2.75rem, 12vw, 4rem);
    font-weight: 400;
    line-height: 1.2;
  }
  .itinerary-mobile-list { display: flex; flex-direction: column; align-items: center; }
  .itinerary-mobile-stop { display: flex; width: 100%; flex-direction: column; align-items: center; }
  .itinerary-mobile-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 0.55rem; color: var(--color-ivory); }
  .itinerary-mobile time { color: #efd8b2; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.06em; }
  .itinerary-mobile h4 { margin-top: 0.2rem; color: var(--color-ivory); font-family: var(--font-serif); font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.25; }
  .itinerary-mobile-connector { width: 4.5rem; height: 4.5rem; margin: 0.3rem 0 0.8rem; stroke: #d9c8b4; stroke-width: 2; stroke-linecap: round; }
  .itinerary-mobile-connector-reverse { transform: scaleX(-1); }
}

#galeria, #regalos { background-color: var(--color-cream); }
.gift-account { display: inline-block; margin-top: 0.5rem; max-width: 100%; color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }
footer[class] { background-color: var(--color-moka); border-color: rgb(255 250 242 / 0.25); }
footer[class], footer .text-white, footer .text-gray-400 { color: #100b08; }
footer .text-\[\#E6C594\] { color: #fffaf2; }
footer .border-white\/10 { border-color: rgb(16 11 8 / 0.25); }
footer a:hover { color: #100b08; }
footer a:focus-visible { outline-color: #100b08; }
footer h3 { text-transform: uppercase; letter-spacing: 0.08em; }
#inicio a[href='#rsvp'], #rsvp-submit-btn { background-color: var(--color-ink); color: var(--color-ivory); }
#inicio a[href='#rsvp']:hover, #rsvp-submit-btn:hover:not(:disabled), #inicio a[href='#rsvp']:active, #rsvp-submit-btn:active:not(:disabled) { background-color: var(--color-ink-hover); color: var(--color-ivory); }
#rsvp-submit-btn:disabled { background-color: var(--color-ink-soft); color: var(--color-ivory); cursor: wait; }
#rsvp-submit-btn :is(span, svg) { color: inherit; }
#evento .w-7.h-7.rounded-full, #rsvp-success-banner { background-color: var(--color-sand); color: var(--color-ink); }
#rsvp-success-banner * { color: var(--color-ink); }
#rsvp-form input:not([type='radio']), #rsvp-form select, #rsvp-form textarea, #rsvp-form label:has(input[type='radio']) { border-color: var(--color-control-border); }
#rsvp-form label:has(input[type='radio']:checked) { border-color: var(--color-ink); background-color: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-ink); }
#rsvp-form :is(input, select, textarea):focus { --tw-ring-color: var(--color-ink); }
body :is(a, button, input, select, textarea, [role='button']):focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }
#lightbox-modal button:focus-visible { outline-color: var(--color-ivory); }
#envelope-overlay button:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }
#add-to-calendar-btn { border-color: var(--color-control-border); }
#evento a[href*='maps.google'] { text-decoration: underline; text-underline-offset: 0.25em; }
header a[href='#rsvp'] { display: inline-flex; padding: 0.65rem 1rem; border: 1px solid var(--color-control-border); border-radius: 999px; background-color: var(--color-sand); color: var(--color-ink); font-weight: 600; }
#lightbox-close, #lightbox-close:hover { color: var(--color-ivory); }
.gallery-item:focus-visible > .absolute { opacity: 1; }
@media (hover: none), (pointer: coarse), (max-width: 640px) { .gallery-item > .absolute { display: none; } }
.rsvp-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::-webkit-scrollbar-track { background: var(--color-ivory); }
::-webkit-scrollbar-thumb { background: var(--color-control-border); }
::selection { color: var(--color-ink); background: var(--color-sand); }
@media (max-width: 639px) { .main-title { flex-direction: column; gap: 0; } .main-ampersand { line-height: 1.1; } #rsvp > .glass-card { padding-inline: 1.5rem; } }