/* ==========================================================================
   Invitación Pilar & Juan — estilos
   Paleta (palette.jpg): Sage Green #98A086 · Dusty Rose #A76D5E · Golden Tan #C4A071 · Warm Beige #DFCCB1
   Orden: colores y tipografía · portada (hero) · bienvenida · el día ·
          historia · galería · vestimenta · regalos · confirmación · pie · sobre de entrada
   ========================================================================== */

/* Layout: one mobile-first column (max 40rem), full-bleed colour bands per section, photos break wider on desktop.
   Single deliberate light theme built on palette.jpg: Sage Green #98A086, Dusty Rose #A76D5E,
   Golden Tan #C4A071, Warm Beige #DFCCB1. The -deep variants are the same hues darkened for readable text. */
:root {
  --cream: #f6efe4;        /* Warm Beige, lightened for page background */
  --sand: #dfccb1;         /* Warm Beige */
  --sage: #98a086;         /* Sage Green */
  --sage-deep: #6c745d;
  --terracotta: #a76d5e;   /* Dusty Rose */
  --rose-deep: #8f5a4c;
  --rose-light: #eedcd5;   /* Dusty Rose, very light tint for soft backgrounds */
  --tan: #c4a071;          /* Golden Tan */
  --ink: #3d2c24;
  --ink-soft: #6b5649;
  --gold: #876839;         /* Golden Tan, deepened for text */
  --white: #ffffff;
  --photo-tone: sepia(.22) saturate(.82) hue-rotate(-4deg) contrast(.97) brightness(1.02); /* one warm edit shared by every photo, softer blue sky */
  /* Two widths on computers: text blocks, and wide blocks (event cards, 2026 photo, gallery) */
  --w-lectura: 600px;
  --w-imagen: 850px;
  --gutter: 1.25rem;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden parts stay hidden even if they have their own display */
html { scroll-behavior: smooth; background: var(--ink); } /* past the footer (under the phone's browser bar) stays espresso */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--w-lectura) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: calc(var(--w-imagen) + 2 * var(--gutter)); } /* event cards */
.band { padding-block: 4.5rem; }
@media (max-width: 47.99rem) { .band { padding-block: 3.5rem; } }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.stack.tight { gap: .4rem; }
.stack.snug { gap: .5rem; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-body); font-size: .875rem; /* 14px */ letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
h2 { font-size: clamp(2rem, 6vw, 2.6rem); color: var(--ink); }
.script { font-family: var(--font-script); font-weight: 400; }

/* Hero */
/* Photo fills the hero as a background, framed high so the blue sky stays in view;
   names, date and countdown sit over its lower part in a compact block. */
.hero {
  position: relative; min-height: min(80svh, 52rem); display: grid; align-items: end;
  color: var(--white); overflow: hidden; background: var(--ink);
}
.hero-photo { position: absolute; inset: 0; overflow: hidden; --hero-pos: 50% 36%; }
/* Blurred 30x40 copy of foto_1 shown at once, so a slow first visit sees the photo softly
   instead of a dark band; the real photo covers it when it arrives. Regenerate if foto_1 changes. */
.hero-photo::before {
  content: ""; position: absolute; inset: 0; transform: scale(1.1);
  background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAHqADAAQAAAABAAAAKAAAAAD/wAARCAAoAB4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwAEBAQEBAQGBAQGCQYGBgkMCQkJCQwPDAwMDAwPEg8PDw8PDxISEhISEhISFRUVFRUVGRkZGRkcHBwcHBwcHBwc/9sAQwEEBQUHBwcMBwcMHRQQFB0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0d/90ABAAC/9oADAMBAAIRAxEAPwC4AAKlVq9o+JfgiO13+ItIjCxE/wCkxKOFJ/jUdgf4h261h+D/AAnp91bjUdZHmK/+riyVUL/eYjB+g/OvpvrUPZ+0Pn/q0+fkPNrrUG0vSrzUYwDJBHuQN0z0GfzrG8O/FnSLqA2/iMRwyxDKmQPsPqVKEMpPUr909eDmtP4o654BuNEvIfBl8k8qfJcRoXKriRACpYcg8jIJFfH+ragsDKuAxz0r5vE1Oau6kHb/AIY9unHkpKEtf+HP/9D7skEM0MkVwokidGVlPQgjkGvlL4Y+M9T8X6nfaNc2kVqoaT7KsO7EUKZULITnJ4HzdM17toPi+z13wrD4htZEcy2/mFVPRsY6dcZ6V8K6N4617wV4qvtT0KCJrnUxLaSjAURtK+5ZFQY5UjpjHrUKd3ZGyhZOTR3mpfC6Cax1bRhcrFq5YpbADKOUfdsdv4S+MDrg9a+HtXkk+3SRyAqYiUIPUEdQfxr9HtNd7y6hmVS7Bgc5HzHr+p718h+H9N0uG/1HWPEUCTXN7PI6wsvmLGrOW+mSfyH1roxFKNNJROecpTd2f//R8lgi1S2uI9Lt7ua1uJcIkJcRMdxwAEZ0OCfavRn0RdDu9U8X+JLRZFiGYxGwGWz8zHOSBg1w/iH/AJKvpX/XeD/0YK9j+JX/ACJOp/8AXJ/5U6EE1z9UU6jSce54HF+0D4kfVrcabaWtjaJJgIymZiD0yzED8gBXP/aYXJZbuBskk4kX+pFeOWv/AB9R/wC8v863Lbq/1P8AOoqSbSuzKMmz/9k=") var(--hero-pos) / cover no-repeat;
  filter: blur(14px) var(--photo-tone);
}
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos);
  filter: var(--photo-tone);
  animation: heroZoom 18s ease-out both;
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
body.locked .hero-photo img { animation-play-state: paused; } /* zoom starts when the envelope opens */
@media (prefers-reduced-motion: reduce) { .hero-photo img { animation: none; } }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(40,26,18,0) 45%, rgba(40,26,18,.55) 70%, rgba(40,26,18,.82) 92%);
}
.hero-text { position: relative; z-index: 1; padding-block: 2rem 2.25rem; text-align: center; display: flex; flex-direction: column; gap: .7rem; }
.hero .countdown { margin-top: .4rem; }
.hero .countdown div { min-width: 3.9rem; padding: .4rem .35rem; }
.hero .countdown b { font-size: 1.45rem; }
.hero .eyebrow { color: var(--sand); }
/* "NOS CASAMOS" on the cover: spaced cream letters with a soft shadow, like printed stationery */
.hero .hero-eyebrow { color: var(--cream); font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35); }
/* "&" between the names: Cormorant italic instead of the script font's ampersand */
.amp { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: .6em; vertical-align: .14em; margin-inline: .06em; }
.hero h1 { font-family: var(--font-script); font-weight: 400; font-size: clamp(3.6rem, 15vw, 6rem); line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-date { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: .04em; }
.hero-place { font-size: .95rem; color: var(--sand); }
.hero-message { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; font-style: italic; margin-top: .3rem; }
/* Hero height: 80% of the screen on phones (shows more of the photo), 88% on computers
   (there a shorter hero would crop more of the top and bottom) */
@media (min-width: 48rem) {
  .hero { min-height: min(88svh, 52rem); }
}
/* Wide screens crop the photo top and bottom: frame a little lower and keep the title smaller
   so her face clears the names while the sky stays in view */
@media (min-width: 64rem) {
  .hero-photo { --hero-pos: 50% 44%; }
  .hero h1 { font-size: 4.6rem; }
  .hero-text { gap: .5rem; padding-block: 1.5rem 1.75rem; }
}
/* Wide landscape screens (laptops and monitors): the portrait photo gets cropped a lot, so frame it
   lower so both faces sit above the text, and use a more compact text block over the shoulders */
@media (min-width: 64rem) and (min-aspect-ratio: 6/5) {
  .hero-photo { --hero-pos: 50% 58%; }
  .hero h1 { font-size: 3.4rem; }
  .hero-text { gap: .3rem; padding-block: 1rem 1.25rem; }
  .hero .eyebrow { font-size: .75rem; }
  .hero .countdown div { min-width: 3.4rem; padding: .25rem .3rem; }
  .hero .countdown b { font-size: 1.15rem; }
}
/* Portrait phones and tablets: the photo is barely cropped, so the faces sit mid-screen.
   The cover fills the screen and the text block sits over the lower part (her hand, shoulders, steps),
   with both faces clear above the names. Fallback first for browsers without svh. */
@media (max-aspect-ratio: 4/5) {
  .hero { min-height: max(100vh, 37.5rem); min-height: max(100svh, 37.5rem); }
  .hero-photo { --hero-pos: 55% 30%; }
  .hero-photo::after { background: linear-gradient(to bottom, rgba(40,26,18,0) 50%, rgba(40,26,18,.6) 66%, rgba(40,26,18,.85) 88%); }
}
/* Portrait phones: compact text block, so it fits under the faces */
@media (max-aspect-ratio: 4/5) and (max-width: 47.99rem) {
  .hero-text { gap: .4rem; padding-block: 1rem 1.5rem; }
  .hero .hero-eyebrow { font-size: .72rem; line-height: 1.5; }
  .hero h1 { font-size: clamp(3rem, 13vw, 3.6rem); }
  .hero-date { font-size: 1.2rem; line-height: 1.4; }
  .hero-place { font-size: .9rem; line-height: 1.5; }
  .hero .countdown { margin-top: .2rem; }
  .hero .countdown div { min-width: 3.5rem; padding: .3rem; }
  .hero .countdown b { font-size: 1.25rem; }
}
/* Phones held sideways: photo on the right half framed on the faces, text on espresso on the left */
@media (orientation: landscape) and (max-height: 30rem) {
  .hero { min-height: 100vh; min-height: 100svh; grid-template-columns: 1fr 1fr; align-items: center; }
  .hero-photo { inset: 0 0 0 50%; }
  .hero-photo { --hero-pos: 50% 52%; }
  .hero-photo::after { background: linear-gradient(to right, rgba(40,26,18,.45), rgba(40,26,18,0) 25%); }
  .hero-text { grid-column: 1; gap: .35rem; padding-block: 1rem; }
  .hero .hero-eyebrow { font-size: .7rem; line-height: 1.5; }
  .hero h1 { font-size: 3rem; }
  .hero-date { font-size: 1.15rem; line-height: 1.4; }
  .hero-place { font-size: .85rem; line-height: 1.5; }
  .hero .countdown { margin-top: .2rem; }
  .hero .countdown div { min-width: 3.3rem; padding: .25rem; }
  .hero .countdown b { font-size: 1.15rem; }
}
/* Sideways iPhones: keep text and photos clear of the notch (the page uses the full screen) */
@media (orientation: landscape) {
  .wrap, .gallery { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}

.countdown { display: flex; justify-content: center; }
.countdown div { min-width: 4.2rem; padding: .2rem .4rem; }
.countdown div + div { border-left: 1px solid rgba(246,239,228,.45); } /* thin divider between days, hours and minutes */
.countdown b { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--sand); }

/* Welcome */
.welcome { background: var(--rose-light); }
.welcome .lead { font-family: var(--font-display); font-size: clamp(1.45rem, 4.5vw, 1.8rem); font-weight: 500; line-height: 1.35; color: var(--ink); }
.verse { margin: 0; font-style: italic; color: var(--ink-soft); }
.verse cite { display: block; font-style: normal; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4rem; }
.flourish { width: 9rem; height: auto; margin-inline: auto; color: var(--terracotta); }

/* Events */
.events { display: grid; gap: 1.25rem; }
/* Side by side, the two cards share rows (icon, title, time, address, button) so their lines stay level */
@media (min-width: 40rem) {
  .events { grid-template-columns: 1fr 1fr; }
  .event { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: .9rem; justify-items: center; }
}
.event {
  background: var(--white); border: 1px solid var(--sand); border-radius: 10px; padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .9rem; text-align: center; min-width: 0;
}
.event > svg { width: 3.2rem; height: 3.2rem; margin-inline: auto; color: var(--sage-deep); } /* card icon only, not the button's pin */
.event h3 { font-size: 1.6rem; color: var(--rose-deep); }
.time { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; color: var(--ink); }
.event address { font-style: normal; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.event .btn { margin-top: auto; align-self: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.4rem; border-radius: 999px; border: 0;
  background: var(--rose-deep); color: var(--white); text-decoration: none;
  font-family: var(--font-body); font-size: .95rem; font-weight: 500; letter-spacing: .02em; cursor: pointer;
}
.btn:hover { background: #7a4b3f; }
.btn.ghost { background: transparent; color: var(--rose-deep); border: 1.5px solid var(--rose-deep); }
.btn.ghost:hover { background: var(--rose-deep); color: var(--white); }
.btn svg { width: 1.1rem; height: 1.1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.calendario { display: grid; gap: .6rem; justify-items: center; }
.cal-label { font-size: .9rem; color: var(--ink-soft); }
.calendario .btn { min-width: 8.5rem; }

/* Story */
.story { background: var(--sage); color: var(--ink); }
.story h2 { color: var(--ink); }
.story .eyebrow { color: var(--ink); } /* espresso brown: readable on sage */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; position: relative; }
/* Computer: year on the left, then the line with a dot for each year, then the text */
.timeline::before { content: ""; position: absolute; left: 5.3rem; top: .6rem; bottom: .6rem; width: 1px; background: rgba(61,44,36,.3); }
.timeline li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 2.2rem; align-items: start; position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(5.3rem - .325rem + .5px); top: .55rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ink); }
.year {
  position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--ink); text-align: right; padding-block: .1rem;
}
.timeline p { min-width: 0; }
.timeline p + p { margin-top: .75rem; } /* space between paragraphs of the same year */
.timeline h3 { font-size: 1.4rem; color: var(--ink); margin-bottom: .3rem; }
/* First sentence of each year: italic highlight, so skimming the three gives the whole story */
.timeline .t-lead { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--ink); }
/* Phones: year above the title (with a dot on the line) so the text gets the full width */
@media (max-width: 47.99rem) {
  .timeline::before { left: .3rem; }
  .timeline li { grid-template-columns: 1fr; gap: .2rem; padding-left: 1.4rem; position: relative; }
  .timeline li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ink); }
  .year { background: none; text-align: left; font-size: 1rem; letter-spacing: .12em; padding: 0; }
}

/* Gallery: two photos side by side, same size, keeping the photos' 3:4 shape */
.gallery-band { padding-block: 3rem; }
@media (max-width: 47.99rem) { .gallery-band { padding-block: 2.5rem; } }
.gallery { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; max-width: calc(var(--w-imagen) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; aspect-ratio: 3 / 4; max-width: 100%; min-height: 0; 
  filter: var(--photo-tone); }
@media (min-width: 48rem) { .gallery { gap: .6rem; } }

/* Dress code */
/* Deep Dusty Rose background; white text a bit larger. No bold here: labels are Lora italic */
.dress { background: var(--rose-deep); color: var(--white); } /* deep Dusty Rose: white text 5.6:1, comfortable for the long paragraph */
.dress h2 { color: var(--white); }
.dress .eyebrow { color: var(--white); }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; text-align: left; }
/* Lora is loaded only in 400/500 (+ italic 400): highlights use italic, never bold (bold would be browser-faked) */
strong { font-weight: 400; font-style: italic; }
.tips li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; font-size: 1.1rem; font-weight: 400; }
.tips svg { width: 1.3rem; height: 1.3rem; margin-top: .3rem; color: var(--cream); }

.evitar { display: grid; gap: .7rem; justify-items: center; margin-top: .5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.35); }
.evitar p { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; }
.swatches { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; justify-content: center; }
.swatches li { display: grid; gap: .35rem; justify-items: center; font-size: .9rem; }
/* Each colour crossed out */
.swatches span {
  position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--white);
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.swatches span::after { content: ""; position: absolute; left: 50%; top: -10%; width: 1.5px; height: 120%; background: #6e3d31; transform: rotate(45deg); }

/* Gifts */
.gift-icon { width: 3.2rem; height: 3.2rem; margin-inline: auto; color: var(--sage-deep); }

/* RSVP */
/* Blush band, like the welcome: the page opens and closes on the same color, and the RSVP reads as its own step */
.rsvp { background: var(--rose-light); }
.rsvp .eyebrow { color: #74582f; } /* gold deepened for the blush (5:1) */
.rsvp-grid { display: grid; gap: 2rem; }
.deadline { font-size: .95rem; color: var(--ink-soft); }
.deadline strong { color: var(--ink); font-weight: 400; font-style: italic; }
.cupos { font-size: 1rem; color: #7d4b3f; font-weight: 500; } /* rose deepened for the blush (5.4:1) */
.rsvp-card {
  display: grid; gap: .9rem; justify-items: center; text-align: center;
  background: var(--white); border: 1px solid var(--sand); border-radius: 10px; padding: 1.75rem 1.5rem;
}
.rsvp-card .btn { width: 100%; max-width: 20rem; }
/* In-page form */
#rsvpForm { display: grid; gap: 1.1rem; width: 100%; text-align: left; }
#rsvpForm .btn { justify-self: center; }
.rsvp-quien { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-align: center; color: var(--rose-deep); }
label, legend { font-size: .9rem; font-weight: 500; color: var(--ink); }
.field { display: grid; gap: .35rem; }
input[type="text"], select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
  border: 1px solid #cbb798; border-radius: 6px; padding: .7rem .8rem; width: 100%;
}
select:disabled { opacity: 1; background: var(--cream); }
textarea { min-height: 5rem; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.choice { display: flex; gap: .5rem; flex-wrap: wrap; }
.choice label {
  flex: 1 1 9rem; display: flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid #cbb798; border-radius: 6px; padding: .65rem .8rem; background: var(--white); font-weight: 400;
}
.choice input { accent-color: var(--rose-deep); }
/* Chosen answer: blush fill + deep rose border (regular weight), so it's unmistakable at a glance */
.choice label:has(input:checked) { background: var(--rose-light); border-color: var(--rose-deep); box-shadow: inset 0 0 0 1px var(--rose-deep); }
.form-error { font-size: .9rem; color: #8a2f22; }
.rsvp-gracias { text-align: center; display: grid; gap: .4rem; }
.rsvp-gracias .script { font-size: 2.6rem; color: var(--rose-deep); line-height: 1.1; }
.rsvp-cambiar {
  font: inherit; font-size: .85rem; color: var(--ink-soft); background: none; border: 0; padding: .4rem; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(61,44,36,.35); text-underline-offset: 3px; justify-self: center;
}
.rsvp-cambiar:hover { color: var(--ink); }
/* Optional questions folded away so the form is short on phones */
.rsvp-extra { border-top: 1px solid var(--sand); padding-top: .9rem; }
.rsvp-extra summary {
  cursor: pointer; list-style: none; font-size: .9rem; color: var(--rose-deep); text-align: center;
  text-decoration: underline; text-decoration-color: rgba(143,90,76,.4); text-underline-offset: 3px;
}
.rsvp-extra summary::-webkit-details-marker { display: none; }
.rsvp-extra summary::after { content: " +"; }
.rsvp-extra[open] summary::after { content: " –"; }
.rsvp-extra[open] summary { margin-bottom: 1rem; }
.rsvp-extra .field + .field { margin-top: 1.1rem; }
.form-note { font-size: .82rem; color: var(--ink-soft); }

footer { background: var(--ink); color: var(--sand); padding-block: 3rem; text-align: center; }
footer .pie-sello { width: 3.2rem; height: 3.2rem; margin-inline: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
footer .script { font-size: 2.6rem; color: var(--cream); line-height: 1.1; }
footer p { font-size: .85rem; }

.svg-defs { position: absolute; } /* hidden SVG that holds the seal drawing */

/* Envelope intro: sage background, beige envelope, monogram seal.
   Tap the seal (or the envelope): the seal lifts away, the flap opens and the card slides out. */
body.locked { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overflow-x: hidden;
  background: radial-gradient(120% 85% at 50% 35%, #aab199 0%, var(--sage) 55%, #868e74 100%);
  display: none; place-items: center; padding: 2rem 1.25rem;
  transition: opacity 1s ease, visibility 1s;
}
.js .intro { display: grid; } /* the envelope needs JavaScript to open */
.intro.gone { opacity: 0; visibility: hidden; }
.intro-inner {
  width: 100%; max-width: min(28rem, 62svh); display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; padding-top: 5rem;
}
.intro-inner > .eyebrow { color: var(--ink); transition: opacity .3s ease; }
.intro.opening .intro-inner > .eyebrow { opacity: 0; }

.envelope {
  container-type: inline-size; /* the name on the envelope scales with it */
  position: relative; width: 100%; aspect-ratio: 10 / 7; perspective: 1100px; cursor: pointer;
  border: 0; padding: 0; background: none; font: inherit; color: inherit; display: block;
}
.env-back, .env-front { position: absolute; inset: 0; border-radius: 8px; }
.envelope { --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07 .9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0 0 0 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.24 0.45 0 0 0 -0.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.28 0.35 0 0 0 -0.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }
.env-back { /* inside of the envelope */
  z-index: 1; background: var(--paper), linear-gradient(#cdb895, #d9c6a8 35%);
  box-shadow: 0 24px 46px -20px rgba(45,52,36,.65), 0 3px 6px -2px rgba(45,52,36,.3);
}
.env-back::after { /* shadow inside the opening */
  content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 14px 18px -12px rgba(61,44,36,.35);
}
.letter {
  position: absolute; left: 6%; right: 6%; top: 5%; height: 90%; z-index: 2;
  /* Cardstock: same fibres/grain/mottling as the envelope over a lighter cream, a thin darker edge
     for the card's thickness, and a soft shadow */
  background: var(--paper), linear-gradient(160deg, #fffdf8, #fbf5ea 55%, #f6eee0);
  border-radius: 3px;
  box-shadow: 0 0 0 .5px rgba(61,44,36,.18), 0 1.5px 0 #e3d7c3, 0 2px 0 rgba(61,44,36,.12),
              inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px -4px rgba(61,44,36,.28);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center;
}
.letter::before { /* gold-foil frame */
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1.2px solid; border-image: linear-gradient(135deg, #a98146, #e9d4a1 30%, #b38c52 50%, #eedbae 70%, #9f7a42) 1;
}
.letter .eyebrow { font-size: .6rem; color: var(--gold); }
/* Letterpress: names look pressed into the card (soft shadow above, light edge below) */
.letter .script {
  font-size: clamp(2rem, 9vw, 2.9rem); color: var(--rose-deep); line-height: 1.1;
  text-shadow: 0 -1px 0 rgba(61,44,36,.22), 0 1px 0 rgba(255,255,255,.85);
}
.letter svg { width: 5.5rem; height: auto; }
.letter small { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.env-front { z-index: 3; }
/* Each flap sits in a wrapper whose drop-shadow follows the clipped shape, so the overlaps cast real shadows */
.env-front > span, .env-front i { position: absolute; inset: 0; display: block; }
.env-sides { filter: drop-shadow(0 0 2px rgba(61,44,36,.22)); }
.env-sides i {
  border-radius: 8px; clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  background: var(--paper), linear-gradient(to right, #e9ddc8, #f0e6d6 22%, #f2e9da 50%, #f0e6d6 78%, #e7dbc6);
}
.env-bottom { filter: drop-shadow(0 -1.5px 2px rgba(61,44,36,.2)); }
.env-bottom i {
  border-radius: 0 0 8px 8px; clip-path: polygon(0 100%, 50% 48%, 100% 100%);
  background: var(--paper), linear-gradient(to top, #e4d6bf, #ece1cf 70%, #efe5d5);
}
.env-front::after { /* thin golden edge */
  content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(196,160,113,.75);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  position: absolute; inset: 0; z-index: 4; transform-origin: 50% 0;
  filter: drop-shadow(0 2px 2.5px rgba(61,44,36,.25));
  transition: transform .9s cubic-bezier(.5,0,.3,1), z-index 0s .55s;
}
.flap-shape {
  position: absolute; inset: 0; border-radius: 8px 8px 0 0;
  background: var(--paper), linear-gradient(to bottom, #f7f0e5, #f1e7d7 60%, #ebdfcc);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
}
.flap-shape::after { /* fold line along the top edge */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(rgba(61,44,36,.12), transparent);
}
.seal {
  position: absolute; left: 50%; top: 58%; z-index: 5; width: 4.9rem; aspect-ratio: 1;
  transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(61,44,36,.3));
  transition: transform .5s ease, opacity .5s ease;
}
.seal svg { width: 100%; height: 100%; display: block; animation: sealBreath 2.6s ease-in-out infinite; }
@keyframes sealBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.envelope:hover .seal svg, .envelope:focus-visible .seal svg { animation-play-state: paused; transform: scale(1.08); }
/* Guest's name on the upper part of the envelope (on the flap, above the seal), in Cormorant italic */
.env-nombre {
  position: absolute; left: 10%; right: 10%; top: 14%; z-index: 5; text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: .02em;
  font-size: 1.5rem; font-size: 7cqi; line-height: 1.15; color: #5a3a2e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: .1em;
  transition: opacity .4s ease;
}
/* Long names: smaller and on up to two balanced lines instead of being cut */
.env-nombre.largo { top: 10%; font-size: 1.2rem; font-size: 5.4cqi; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
.intro.opening .env-nombre { opacity: 0; }
/* On opening the seal lifts off and fades, then the flap opens */
.intro.opening .seal { transform: translate(-50%, -80%) scale(1.15); opacity: 0; }
.intro.opening .seal svg { animation: none; }
.intro.opening .env-flap { transform: rotateX(180deg); z-index: 0; transition-delay: .4s, .85s; }
/* The card slides all the way out, then comes down in front of the envelope, a bit larger, to be read */
.intro.opening .letter { animation: cardOut 2.4s cubic-bezier(.45,.05,.25,1) 1.1s both; }
@keyframes cardOut {
  0%   { transform: translateY(0); z-index: 2; }
  45%  { transform: translateY(-104%); z-index: 2; }
  55%  { transform: translateY(-104%); z-index: 6; }
  100% { transform: translateY(-6%) scale(1.12); z-index: 6; box-shadow: 0 0 0 .5px rgba(61,44,36,.18), 0 18px 40px -10px rgba(45,52,36,.55); }
}
.intro.opening .envelope { cursor: default; }
.intro-hint { font-size: .85rem; color: var(--ink); text-align: center; letter-spacing: .04em; transition: opacity .3s ease; }
.intro.opening .intro-hint { opacity: 0; }
.intro-skip {
  font: inherit; font-size: .8rem; letter-spacing: .04em; color: var(--ink-soft); cursor: pointer;
  background: none; border: 0; padding: .5rem .75rem; margin-top: -.75rem;
  text-decoration: underline; text-decoration-color: rgba(61,44,36,.35); text-underline-offset: 3px;
  transition: opacity .3s ease, color .2s ease;
}
.intro-skip:hover { color: var(--ink); text-decoration-color: currentColor; }
.intro.opening .intro-skip { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .env-flap, .seal, .intro { transition-duration: .01s !important; transition-delay: 0s !important; }
  .intro.opening .letter { animation: none; transform: translateY(-6%) scale(1.12); z-index: 6; }
  .seal svg { animation: none; }
}
/* Phones held sideways: the envelope sits low on the left, so the card has room to slide out above it,
   and the texts go beside it */
@media (orientation: landscape) and (max-height: 30rem) {
  .intro { align-items: end; padding-block: 1rem; }
  .intro-inner {
    max-width: 44rem; padding-top: 0; display: grid; align-items: center; column-gap: 2.5rem; row-gap: .6rem;
    grid-template-columns: auto 1fr; grid-template-areas: "env ." "env eyebrow" "env hint" "env skip" "env .";
  }
  .envelope { grid-area: env; width: min(68svh, 20rem); }
  .intro-inner > .eyebrow { grid-area: eyebrow; text-align: center; }
  .intro-hint { grid-area: hint; }
  .intro-skip { grid-area: skip; justify-self: center; margin-top: 0; }
  .seal { width: 3.6rem; }
  .letter { gap: .15rem; }
  .letter .eyebrow { font-size: .5rem; }
  .letter .script { font-size: 1.7rem; }
  .letter svg { width: 4rem; }
  .letter small { font-size: .55rem; }
}