:root { --paper:#fff; --paper-2:#fff; --ink:#181818; --ink-soft:#5d5d5d; --ink-faint:#777; --line:#d1d1d1; --gold:#555; --serif:"Cormorant Garamond",Georgia,serif; --script:"Pinyon Script",cursive; --sans:"Jost",Arial,sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:70px; }
body { margin:0; padding:80px 0; background:#303030; color:var(--ink); font:19px/1.5 var(--serif); -webkit-font-smoothing:antialiased; }
body.modal-open { overflow:hidden; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-weight:400; line-height:1; letter-spacing:-.035em; }
h2 { font-size:clamp(40px,4.4vw,60px); }
h3 { font-size:32px; }
a,button { color:inherit; }
button { font:inherit; cursor:pointer; }
img { display:block; width:100%; max-width:100%; filter:grayscale(1); }
em { font-weight:300; }
.sr-only { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
.skip-link { position:fixed; top:-100px; z-index:20; background:white; padding:10px; }
.skip-link:focus { top:10px; }
.page-backdrop { position:fixed; inset:0; z-index:-1; background:linear-gradient(#0002,#0003),url("assets/fondo-flor-original.jpg") center / cover no-repeat; }
.page-shell { position:relative; width:calc(100% - 220px); max-width:1020px; margin:auto; background:#fff; box-shadow:0 25px 90px #0007; border:1px solid #ffffff50; }
.eyebrow,.chapter,.text-link,.button,.hero-invitation,figcaption>span,.header-date,footer p { font-family:var(--sans); font-weight:400; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow { margin-bottom:22px; }
.section { padding:70px 6%; }
.site-header { position:sticky; top:0; z-index:10; height:62px; padding:0 3%; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
.monogram { font-family:var(--script); font-size:30px; line-height:1; text-decoration:none; }
.monogram span { font-size:20px; margin:0 4px; }
#main-nav { display:flex; gap:24px; }
#main-nav a,.header-date { text-decoration:none; font:9px var(--sans); letter-spacing:.12em; text-transform:uppercase; }
#main-nav a { padding:8px 0; border-bottom:1px solid transparent; }
#main-nav a:hover,#main-nav a.active { border-color:currentColor; }
.menu-button { display:none; border:0; background:none; width:44px; height:44px; }
.menu-button>span:not(.sr-only) { display:block; height:1px; width:25px; margin:7px 0; background:#111; }
.hero { padding:24px; background:#d2d2d2; }
.hero-frame { position:relative; height:460px; overflow:hidden; }
.hero-flower { height:100%; object-fit:cover; object-position:center 46%; }
.hero-frame:after { content:""; position:absolute; inset:0; background:#0004; }
.hero-heading { position:absolute; inset:0; z-index:1; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero-heading .eyebrow { font-size:8px; margin-bottom:18px; }
h1 { font-size:clamp(50px,5.7vw,78px); line-height:.94; }
h1 em { font-style:italic; }
.hero-invitation { text-decoration:none; border-bottom:1px solid #ffffff80; padding-bottom:5px; margin-top:26px; font-size:8px; }
.invitation { padding:35px 6% 90px; position:relative; overflow:hidden; }
.invitation-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:65px; align-items:center; }
.invitation-copy { text-align:center; }
.invitation-copy h2 { font-size:clamp(33px,3.4vw,46px); }
.invitation-copy p:not(.eyebrow) { max-width:290px; margin:22px auto 0; font-size:16px; color:var(--ink-soft); }
.invitation-photo { justify-self:end; width:100%; max-width:290px; }
.invitation-photo img { aspect-ratio:.78; object-fit:cover; object-position:49% 50%; }
.invitation-photo figcaption { font-size:13px; font-style:italic; margin-top:8px; }

.floral-interlude { position:relative; height:470px; overflow:hidden; }
.floral-interlude>img { height:100%; object-fit:cover; object-position:center; }
.floral-interlude:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#0005); }
.floral-note { position:absolute; top:50%; right:6%; width:33%; transform:translateY(-50%); z-index:1; color:white; }
.floral-note p:not(.eyebrow) { font-size:17px; line-height:1.45; margin-bottom:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); padding:14px 20px; text-decoration:none; transition:background .2s,color .2s; }
.button:hover { background:transparent; color:var(--ink); }
.floral-button { background:transparent; color:white; border-color:#ffffffb0; font-size:8px; }
.floral-button:hover { background:white; color:#111; }
.button.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.button:disabled { opacity:.5; cursor:wait; }
.event-band { background:#e7e7e7; }
.section-head { text-align:center; margin-bottom:45px; }
.section-head h2 { font-size:clamp(48px,5.5vw,75px); }
.event-layout { display:grid; grid-template-columns:.8fr 1fr 1.1fr; gap:35px; align-items:center; }
.event-index p:not(.eyebrow) { font-size:13px; line-height:1.9; color:var(--ink-soft); }
.event-portrait img { aspect-ratio:.72; object-fit:cover; object-position:50% 64%; }
.chapter { display:block; font-size:8px; margin-bottom:10px; }
.event-details article+article { margin-top:28px; padding-top:25px; border-top:1px solid #bbb; }
.event-details h3 { margin-bottom:12px; }
.event-details p { font-size:15px; }
.text-link { display:inline-block; text-decoration:none; border-bottom:1px solid; padding-bottom:4px; margin-top:12px; font-size:8px; }
.countdown { text-align:center; margin-top:50px; border-top:1px solid #c8c8c8; padding-top:30px; }
.script-label { font-family:var(--script); font-size:32px; margin-bottom:20px; }
.countdown-values { display:flex; justify-content:center; gap:18px; }
.countdown-values div { display:grid; min-width:48px; }
.countdown-values strong { font-weight:300; font-size:34px; line-height:1.2; font-variant-numeric:tabular-nums; }
.countdown-values span { font:8px var(--sans); letter-spacing:.15em; text-transform:uppercase; margin-top:8px; }
.countdown-values b { font-weight:300; font-size:25px; }
.gallery-heading { text-align:center; padding:45px 20px; }
.gallery-heading .eyebrow { margin-bottom:12px; }
.gallery-heading h2 { font-size:35px; }
.memory-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.memory-grid figure { padding:12px; border-right:1px solid var(--line); }
.memory-grid figure:last-child { border-right:0; }
.memory-grid img { aspect-ratio:1; object-fit:cover; }
.memory-grid figure:nth-child(3) img { object-position:50% 64%; }
.memory-grid figcaption>span { display:block; padding:12px 0; border-bottom:1px solid var(--line); font-size:8px; }
.memory-grid figcaption p { font-size:27px; line-height:1.1; padding:42px 0 10px; min-height:130px; }
.rsvp-band { background:#f2f2f2; }
.rsvp { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:55px; }
.rsvp-copy p:not(.eyebrow) { color:var(--ink-soft); margin:24px 0; font-size:17px; }
.rsvp-image { position:relative; aspect-ratio:1.2; }
.rsvp-image>img, .rsvp-flower-frame { height:100%; object-fit:cover; }
.envelope { position:absolute; top:30%; left:15%; width:70%; aspect-ratio:1.5; background:white; transform:rotate(-7deg); box-shadow:0 10px 30px #0004; }
.envelope-fold { position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 64%); background:#e8e8e8; }
.envelope>span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; width:48px; height:48px; border:1px solid #aaa; border-radius:50%; display:grid; place-items:center; font:22px var(--script); }
.wedding-list { text-align:center; }
.wedding-list p:not(.eyebrow) { max-width:470px; margin:25px auto; color:var(--ink-soft); font-size:17px; }
.list-coming { font:9px var(--sans); text-transform:uppercase; letter-spacing:.16em; border-bottom:1px solid var(--line); padding-bottom:8px; }
footer { margin:0 5%; padding:30px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:15px; }
.footer-names { font:30px var(--script); text-decoration:none; }
footer .text-link { margin:0; }
.reveal { opacity:1; transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.js-motion .reveal { opacity:0; transform:translateY(28px); }
.js-motion .reveal.visible { opacity:1; transform:none; }
.memory-grid figure.reveal:nth-child(2) { transition-delay:90ms; }
.memory-grid figure.reveal:nth-child(3) { transition-delay:180ms; }
.memory-grid figure.reveal:nth-child(4) { transition-delay:270ms; }
.memory-grid figure.reveal:nth-child(5) { transition-delay:360ms; }
.form-modal {
  width: min(680px, calc(100% - 32px)); max-height: calc(100svh - 32px);
  padding: 0; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
}
.form-modal::backdrop { background: rgba(21, 20, 20, 0.55); backdrop-filter: blur(4px); }
.form-modal[open] { animation: rise 0.5s ease; }
.form-modal-inner { position: relative; padding: clamp(28px, 5vw, 52px); }
.form-modal h2 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 1.6rem; }
.form-close { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; background: none; border: 0; font-size: 1.8rem; color: var(--ink-soft); }

.form-progress { display: flex; gap: 8px; margin-bottom: 1.8rem; }
.form-progress span {
  flex: 1; padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-weight: 300; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
  transition: border-color 0.3s, color 0.3s;
}
.form-progress span.active { border-color: var(--gold); color: var(--ink); }

.form-step { display: none; }
.form-step.active { display: grid; gap: 20px; animation: fade-in 0.4s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.name-fields[hidden], .conditional[hidden], [hidden] { display: none !important; }
.form-field { display: grid; gap: 6px; }
.form-field span, legend { font-family: var(--sans); font-weight: 300; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
input[type="text"], textarea {
  width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 0; font: inherit; font-size: 1.1rem; border-radius: 0; resize: vertical;
}
input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--gold); }
textarea::placeholder { color: var(--ink-faint); font-style: italic; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
legend { width: 100%; margin-bottom: 8px; padding: 0; }
fieldset label { display: inline-flex; align-items: center; gap: 8px; font-size: 1.1rem; cursor: pointer; }
input[type="radio"] {
  appearance: none; width: 16px; height: 16px; border: 1px solid var(--ink-soft); border-radius: 50%;
  margin: 0; display: grid; place-items: center; cursor: pointer;
}
input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform 0.2s; }
input[type="radio"]:checked::after { transform: scale(1); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.conditional { display: grid; gap: 20px; }



.step-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.form-error { color: #333; margin: 0; }
.form-success { text-align: center; padding: 24px 0; }
.form-success h3 { font-size: 2.6rem; }
.form-success p { color: var(--ink-soft); }



@media(max-width:1000px) { body{padding:50px 0;} .page-shell{width:calc(100% - 100px);} .header-date{display:none;} .invitation-layout{gap:35px;} .event-layout{gap:24px;} }
@media(max-width:700px) {
body { padding:24px 0; font-size:18px; }
.page-shell { width:calc(100% - 32px); }
.site-header { height:60px; padding:0 6%; }
.menu-button { display:block; }
#main-nav { display:none; position:fixed; inset:60px 16px auto; height:calc(100svh - 84px); flex-direction:column; align-items:center; justify-content:center; gap:28px; background:white; box-shadow:0 20px 30px #0004; }
#main-nav.open { display:flex; }
#main-nav a { font-size:12px; }
.hero { padding:12px; }
.hero-frame { height:420px; }
h1 { font-size:62px; }
.hero-heading .eyebrow { font-size:7px; letter-spacing:.1em; }
.invitation { padding:35px 7% 85px; }
.invitation-layout { grid-template-columns:1fr; gap:28px; }
.invitation-copy h2 { font-size:36px; }
.invitation-photo { width:68%; justify-self:center; }
.invitation-photo img { aspect-ratio:.95; }

.floral-interlude { height:440px; }
.floral-interlude>img { object-position:35% center; }
.floral-interlude:after { background:linear-gradient(transparent,#0009); }
.floral-note { width:auto; left:8%; right:8%; top:auto; bottom:30px; transform:none; }
.floral-note p:not(.eyebrow) { font-size:17px; }
.section { padding:50px 7%; }
.section-head { margin-bottom:30px; }
.section-head h2 { font-size:45px; }
.event-layout { grid-template-columns:1fr 1fr; gap:22px; }
.event-index { grid-column:1/-1; text-align:center; }
.event-index .eyebrow { margin-bottom:10px; }
.event-index p:not(.eyebrow) { font-size:11px; }
.event-details h3 { font-size:26px; }
.event-details p { font-size:13px; }
.event-portrait img { aspect-ratio:.55; }
.event-details article+article { margin-top:20px; padding-top:18px; }
.countdown-values { gap:10px; }
.countdown-values div { min-width:40px; }
.countdown-values strong { font-size:30px; }
.gallery-heading h2 { font-size:32px; }
.memory-grid { grid-template-columns:1fr 1fr; }
.memory-grid figure { padding:10px; }
.memory-grid figure:nth-child(2) { border-right:0; }
.memory-grid figure:nth-child(-n+2) { border-bottom:1px solid var(--line); }
.memory-grid figcaption p { font-size:24px; min-height:110px; padding-top:25px; }
.rsvp { grid-template-columns:1fr; gap:30px; }
.rsvp-copy { text-align:center; }
.rsvp-copy h2 { font-size:40px; }
.name-fields { grid-template-columns:1fr; }
.step-actions { flex-wrap:wrap; }
footer { flex-direction:column; text-align:center; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *,*:before,*:after{animation:none!important;transition:none!important;} .js-motion .reveal{opacity:1;} }

/* Una sola imagen conserva la continuidad exacta de dibujo y fotografía. */
.invitation { padding-bottom:15px; }
.floral-interlude { height:auto; background:#fff; }
.floral-interlude>img { height:auto; object-fit:contain; }
.floral-interlude:after { top:35.3%; background:linear-gradient(90deg,transparent 48%,#0007); }
.floral-note { top:64%; width:30%; }
@media(max-width:700px) {
.invitation { padding-bottom:20px; }
.floral-interlude:after { display:none; }
.floral-note { position:relative; top:auto; bottom:auto; left:auto; right:auto; width:auto; transform:none; padding:28px 8%; background:#393939; }
}

/* Proporciones y composición de la referencia editorial. */
body { padding:80px 0; }
.page-shell { width:64%; max-width:900px; }
.page-backdrop { filter:grayscale(1); background-position:center; }
.site-header { height:46px; }
.monogram { font-size:25px; }
#main-nav { gap:20px; }
#main-nav a,.header-date { font-size:8px; }
.hero { padding:20px; }
.hero-frame { height:370px; }
h1 { font-size:64px; line-height:.93; }
.hero-heading .eyebrow { font-size:7px; margin-bottom:15px; }
.hero-invitation { font-size:7px; margin-top:18px; }
.invitation { padding:28px 6% 0; }
.invitation-layout { gap:50px; grid-template-columns:1.4fr 1fr; }
.invitation-copy h2 { font-size:36px; }
.invitation-copy p:not(.eyebrow) { font-size:14px; max-width:260px; margin-top:18px; }
.invitation-photo { max-width:230px; }
.invitation-photo img { aspect-ratio:.8; }
.floral-interlude:after { top:25%; }
.floral-note { top:62%; right:6%; width:29%; }
.floral-note p:not(.eyebrow) { font-size:14px; }
.floral-note .eyebrow { font-size:7px; margin-bottom:14px; }
.floral-button { font-size:7px; padding:11px 16px; }
.event.section { padding-top:45px; padding-bottom:45px; }
.section-head h2 { font-size:58px; }
.event-layout { grid-template-columns:.8fr 1fr 1.05fr; gap:30px; }
.event-portrait img { aspect-ratio:.73; }
.event-details h3 { font-size:29px; }
.event-details p { font-size:13px; }
.countdown { margin-top:30px; padding-top:20px; }
.script-label { font-size:27px; margin-bottom:12px; }
.countdown-values strong { font-size:26px; }
.gallery-heading { padding:35px 20px; }
.gallery-heading h2 { font-size:30px; }
.memory-grid figure { padding:8px; }
.memory-grid figcaption p { writing-mode:vertical-rl; transform:rotate(180deg); font-size:28px; padding:15px 0; min-height:180px; }
.memory-grid figcaption>span { font-size:7px; }
.rsvp.section { padding:50px 6%; }
.rsvp-copy h2 { font-size:43px; }
.rsvp-copy p:not(.eyebrow) { font-size:15px; }
@media(max-width:1000px) {
.page-shell { width:74%; }
.invitation-layout { gap:28px; }
.invitation-copy h2 { font-size:32px; }
.event-layout { gap:22px; }
}
@media(max-width:700px) {
body { padding:24px 0; }
.page-shell { width:calc(100% - 32px); }
.site-header { height:54px; }
#main-nav { inset:54px 16px auto; height:calc(100svh - 78px); }
#main-nav a { font-size:12px; }
.hero { padding:12px; }
.hero-frame { height:380px; }
h1 { font-size:60px; }
.invitation { padding:30px 7% 10px; }
.invitation-layout { grid-template-columns:1fr; gap:28px; }
.invitation-copy h2 { font-size:36px; }
.invitation-copy p:not(.eyebrow) { font-size:16px; }
.invitation-photo { width:70%; max-width:260px; }
.floral-note { top:auto; right:auto; width:auto; }
.floral-note p:not(.eyebrow) { font-size:17px; }
.floral-note .eyebrow { font-size:8px; }
.section-head h2 { font-size:42px; }
.event-layout { grid-template-columns:1fr 1fr; gap:22px; }
.event-details h3 { font-size:25px; }
.memory-grid figcaption p { font-size:25px; min-height:150px; }
.rsvp-copy h2 { font-size:40px; }
}

.floral-interlude:after { top:32.1%; }

/* Tipografía de la referencia: recta fina y cursiva editorial en la portada. */
:root { --display:"Italiana",Georgia,serif; --light-sans:"Raleway",Arial,sans-serif; }
h1 { font-family:var(--light-sans); font-size:52px; font-weight:200; line-height:1; letter-spacing:-.055em; }
h1>span,h1>em { display:block; }
h1>em { font-family:var(--serif); font-size:1.12em; font-weight:400; line-height:.95; letter-spacing:-.035em; }
.hero-heading { padding:20px; }
.invitation-copy h2 { font-family:var(--display); font-weight:400; font-size:33px; line-height:.98; letter-spacing:-.045em; }
.invitation-copy p:not(.eyebrow) { font-size:13px; line-height:1.45; }
.section-head h2 { font-family:var(--light-sans); font-weight:200; font-size:60px; line-height:1.15; letter-spacing:-.05em; }
.event-details h3,.rsvp-copy h2,.wedding-list h2,.memory-grid figcaption p { font-family:var(--display); font-weight:400; letter-spacing:-.045em; }
.event-details h3 { font-size:31px; line-height:1.05; }
.gallery-heading h2 { font-family:var(--display); font-size:28px; font-weight:400; text-transform:uppercase; letter-spacing:-.035em; }
.floral-note p:not(.eyebrow) { font-family:var(--serif); font-size:16px; font-weight:500; line-height:1.45; text-align:justify; }
.floral-button { letter-spacing:.2em; }
.memory-grid figcaption p { font-size:28px; line-height:1.05; }
@media(max-width:1000px) {
.invitation-copy h2 { font-size:29px; }
.section-head h2 { font-size:48px; }
}
@media(max-width:700px) {
h1 { font-size:48px; }
.invitation-copy h2 { font-size:31px; line-height:1.03; }
.invitation-copy p:not(.eyebrow) { font-size:16px; }
.section-head h2 { font-size:39px; }
.event-details h3 { font-size:25px; }
.floral-note p:not(.eyebrow) { font-size:17px; text-align:left; }
.gallery-heading h2 { font-size:25px; }
.memory-grid figcaption p { font-size:25px; }
}

/* Invitación y recorrido sobre papel, siguiendo la referencia de los lugares. */
.places { background:#fafafa; }
.places-introduction { text-align:center; padding:85px 7% 100px; }
.places-introduction h2 { font:clamp(48px,5vw,68px)/1.1 var(--script); letter-spacing:0; margin-bottom:42px; }
.places-invitation { font:italic 25px/1.4 var(--serif); }
.places-ceremony { margin-top:25px; font:italic 22px/1.4 var(--serif); }
.places-pending { display:block; font:14px/1.5 var(--serif); color:#666; margin-top:12px; }
.places-divider { display:flex; align-items:center; justify-content:center; gap:40px; max-width:340px; margin:34px auto; }
.places-divider span { font-size:27px; }
.places-divider i { height:1px; background:#777; flex:1; }
.places-celebration { font:27px/1.3 var(--serif); }
.invitation-map-link { position:relative; display:inline-block; margin-top:26px; background:#252525; color:#fff; padding:9px 24px; font:italic 17px/1.3 var(--serif); text-decoration:none; border:1px solid #252525; }
.invitation-map-link:after { content:""; position:absolute; inset:4px; border:1px solid #ffffffb0; pointer-events:none; }
.invitation-map-link:hover { background:#454545; }
.places-garden { position:relative; padding:0 0 70px; isolation:isolate; overflow:hidden; }
.places-garden:before { content:""; position:absolute; inset:-10px; z-index:-1; background:url("assets/recorrido-fondo-piscina.jpeg") center / cover no-repeat; filter:grayscale(1) contrast(.78) brightness(1.12) blur(2.5px); }
.journey-paper { position:relative; width:82%; aspect-ratio:8/9; margin:auto; background:#fff; box-shadow:0 4px 14px #0004; transform:translateY(-30px); }
.journey-paper:before { content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.1' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.3; pointer-events:none; }
.journey-thread { position:absolute; inset:0; width:100%; height:100%; }
.journey-stop { position:absolute; text-align:center; }
.journey-number { display:block; font:9px var(--sans); color:#999; letter-spacing:.15em; margin-bottom:3px; }
.journey-stop img { width:100%; aspect-ratio:1.5; object-fit:contain; mix-blend-mode:multiply; }
.journey-stop figcaption { font:24px/1.05 var(--script); }
.journey-stop figcaption>span { display:block; font:11px/1.5 var(--serif); margin-top:7px; letter-spacing:.02em; text-transform:none; border:0; padding:0; }
.journey-hotel { top:5%; left:8%; width:36%; }
.journey-chapel { top:34%; right:6%; width:32%; }
.chapel-reserved { aspect-ratio:1.5; display:grid; place-items:center; }
.chapel-reserved>span { width:72%; aspect-ratio:1.1; border:1px solid #dedede; border-radius:50% 50% 0 0; display:grid; place-items:center; color:#aaa; font:24px var(--script); }
.journey-celebration { bottom:5%; left:12%; width:51%; }
.journey-celebration figcaption { font-size:27px; }
@media(max-width:700px) {
.places-introduction { padding:55px 7% 65px; }
.places-introduction h2 { font-size:46px; margin-bottom:26px; }
.places-invitation { font-size:20px; }
.places-ceremony { font-size:19px; }
.places-celebration { font-size:22px; }
.places-divider { gap:24px; margin:25px auto; }
.places-garden { padding-bottom:25px; }
.journey-paper { width:90%; aspect-ratio:8/11; }
.journey-stop figcaption { font-size:20px; }
.journey-stop figcaption>span { font-size:10px; line-height:1.25; margin-top:5px; }
.journey-celebration { width:57%; left:8%; }
.journey-celebration figcaption { font-size:22px; }
.chapel-reserved>span { font-size:18px; }
}

/* Relieve blanco sobre papel: sombras suaves y cordón de algodón. */
.invitation,.journey-paper { background:#eeeee7 url("assets/papel-invitacion.svg") repeat; }
.journey-paper { box-shadow:0 2px 8px #0003,inset 0 0 20px #5555550a; border:1px solid #d6d6ce; }
.journey-paper:before { background:none; box-shadow:inset 1px 1px 2px #ffffff90; }
.journey-number { color:#aaa; }
.journey-stop img { filter:grayscale(1); }
.chapel-reserved>span { border-color:#efefef; box-shadow:1px 2px 3px #00000009,inset 1px 1px 2px #fff; color:#a0a0a0; }

.places-garden { padding-top:55px; }
.places-garden:before { top:-6px; }
.journey-paper { transform:none; }
@media(max-width:700px) { .places-garden { padding-top:30px; } }

.journey-stop img {
  mix-blend-mode:multiply;
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-composite:intersect;
}

.places-garden { padding-top:0; padding-bottom:25px; }
@media(max-width:700px) { .places-garden { padding-top:0; } }

/* Composición de la invitación de referencia: tarjeta apaisada y cordón en relieve. */
.invitation { background:#fff; }
.places-garden { padding:0 0 22px; overflow:visible; background:#eeeeeC; }
.places-garden:before { inset:30px 0 0; filter:grayscale(1) contrast(.82) brightness(1.1) blur(1.6px); }
.journey-paper { width:66%; aspect-ratio:800 / 710; background-color:#eeeee7; border:1px solid #d2d2c9; box-shadow:0 0 7px #0003,0 3px 9px #0002; }
.journey-number { display:none; }
.journey-stop img { filter:grayscale(1) contrast(1.45) brightness(1.18); }
.journey-stop figcaption { color:#91918e; font-size:22px; text-shadow:0 1px 0 #fff9; }
.journey-stop figcaption>span { font-size:10px; color:#858582; }
.journey-hotel { top:6%; left:auto; right:10%; width:25%; }
.journey-chapel { top:39%; left:7%; right:auto; width:29%; }
.journey-celebration { bottom:7%; left:auto; right:9%; width:34%; }
.journey-celebration figcaption { font-size:22px; }
@media(max-width:700px) {
  .places-garden:before { top:20px; }
  .journey-paper { width:86%; aspect-ratio:800 / 710; }
  .journey-stop figcaption,.journey-celebration figcaption { font-size:17px; }
  .journey-stop figcaption>span { font-size:8px; margin-top:3px; }
}

/* Tono del papel muestreado de la invitación original: #e7e6e1. */
.journey-paper {
  background:#e7e6e1;
  border-color:#d4d4d2;
}
.journey-paper:before {
  background:url("assets/papel-invitacion-referencia.webp") center / 100% 100% no-repeat;
  filter:grayscale(1) brightness(.53);
  mix-blend-mode:soft-light;
  opacity:.18;
  box-shadow:none;
}

/* Ilustraciones simplificadas con contornos discretos sobre el mismo papel. */
.journey-stop img {
  mix-blend-mode:multiply;
  mask-image:none;
  mask-composite:add;
  filter:grayscale(1) brightness(.94);
}

/* Galería de cinco fotografías a todo el ancho de la sección. */
.memory-gallery {
  padding:0;
  background:#f8f8f3;
}
.memory-card { background:#f8f8f3; border-radius:0; overflow:hidden; box-shadow:none; }
.gallery-heading { padding:40px 20px 65px; }
.gallery-heading .eyebrow { font-size:6px; letter-spacing:.12em; margin-bottom:2px; }
.gallery-heading h2 { font:400 clamp(28px,3.3vw,44px)/1.2 var(--script); letter-spacing:0; text-transform:none; }
.gallery-subtitle { margin-top:5px; font:6px/1.5 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.memory-viewport { overflow:hidden; }
.memory-track { display:flex; width:max-content; animation:memory-marquee 38s linear infinite; }
.memory-track:hover { animation-play-state:paused; }
@keyframes memory-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce) { .memory-track { animation:none; } }
.memory-slide { flex:0 0 auto; margin:0; padding:0; border:0; }
.memory-slide img { width:100%; aspect-ratio:.69; object-fit:cover; filter:grayscale(1) contrast(.9); display:block; }
.memory-slide:nth-child(6n+1) img { object-position:49% center; }
.gallery-signature { text-align:center; padding:27px 12px 35px; }
.gallery-signature p { font:8px var(--sans); letter-spacing:.4em; margin-bottom:9px; }
.gallery-signature span { display:block; font:7px/1.5 var(--sans); text-transform:uppercase; }
.gallery-footnote { border-top:1px solid #bdbdb4; padding:12px 7%; display:flex; justify-content:space-between; gap:16px; font:6px/1.5 var(--sans); text-transform:uppercase; letter-spacing:.06em; }
@media(max-width:700px) {
  .memory-gallery { padding:0; }
  .memory-card { border-radius:0; }
  .gallery-heading { padding:32px 12px 40px; }
  .gallery-heading h2 { font-size:29px; }
  .gallery-signature { padding:24px 12px 28px; }
  .gallery-footnote { font-size:5px; padding:12px 6%; }
}

/* Hilo visible y conexiones fuera de las imágenes y sus leyendas. */
.journey-thread { z-index:1; pointer-events:none; }
.journey-stop { z-index:2; }

/* Foto de la invitación con más anchura en la columna derecha. */
.invitation-layout { grid-template-columns:1.15fr 1fr; gap:35px; }
.invitation-photo { max-width:310px; }
.invitation-photo img { aspect-ratio:.86; }
@media(max-width:700px) {
  .invitation-layout { grid-template-columns:1fr; gap:28px; }
  .invitation-photo { width:82%; max-width:310px; }
}

/* Recuerdos: del mar a la montaña y al compromiso. */
.memory-grid figure:first-child img { object-position:50% 78%; }
.memory-grid figure:nth-child(3) img { object-position:53% 65%; }
.memory-grid figure:nth-child(5) img { object-position:57% center; }
.gallery-journey-caption {
  padding:24px 16px 0;
  text-align:center;
  font:400 clamp(24px,3vw,40px)/1.35 var(--script);
}
@media(max-width:700px) {
  .memory-grid { grid-template-columns:repeat(5, minmax(150px, 42%)); overflow-x:auto; }
  .gallery-journey-caption { padding-top:20px; font-size:clamp(22px,5vw,30px); }
}

/* Invitación de sobres sobre fondo negro. */
.envelope-section { background:#000; padding:0; }
.envelope-section img { display:block; width:100%; height:auto; }

/* Flores distintas y pétalos que se extienden por encima de cada composición. */
.hero { padding:65px 20px 20px; background:#393939; }
.hero-frame { overflow:visible; }
.hero-flower {
  position:absolute; top:-55px; left:0; width:100%; height:calc(100% + 55px);
  object-fit:cover; object-position:center; pointer-events:none;
}
.hero-frame:after { background:#0002; pointer-events:none; }
.rsvp-band { position:relative; overflow:visible; }
.rsvp.section { padding-top:70px; }
.rsvp-image { height:390px; aspect-ratio:auto; overflow:hidden; z-index:1; }
.rsvp-image>img, .rsvp-flower-frame {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:contain; object-position:center top; pointer-events:none;
}
@media(max-width:700px) {
  .hero { padding:50px 12px 12px; }
  .hero-flower { top:-40px; height:calc(100% + 40px); }
  .rsvp.section { padding-top:50px; }
  .rsvp-image { height:340px; }
}

/* Fotografías florales desenfocadas según la referencia de COSMOS. */
.hero-flower { filter:grayscale(1); }
.rsvp-image>img, .rsvp-flower-frame {
  object-fit:cover; object-position:center;
  filter:grayscale(1);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 90%,transparent);
}
.memory-grid figure:nth-child(2) img { object-position:35% center; }
.memory-grid figure:nth-child(4) img { object-position:75% center; }

/* La invitación abierta se superpone a la sección negra de los sobres. */
.places { position:relative; z-index:2; }
.places-garden { background:#000; }
.journey-paper { transform:translateY(-70px); margin-bottom:-70px; }
.journey-directions {
  position:absolute; left:8%; bottom:6%; z-index:3;
  font:9px/1.5 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid currentColor; padding:5px 0;
  color:#66645e;
}
@media(max-width:700px) {
  .journey-paper { transform:translateY(-30px); margin-bottom:-30px; }
  .journey-directions { font-size:7px; left:7%; bottom:5%; letter-spacing:.06em; }
}

/* El dibujo continúa en blanco y se une al negro de los sobres. */
.floral-interlude { background:#000; }
.floral-interlude:after { display:none; }
@media(max-width:700px) {
  .floral-note { background:#000; }
}

/* Cuenta atrás inspirada en la referencia burdeos. */
.wedding-countdown { background:#301713; color:#f4eee7; text-align:center; padding:55px 6% 60px; }
.wedding-countdown h2 { font:400 clamp(29px,3.4vw,43px)/1.2 var(--script); letter-spacing:0; margin-bottom:16px; }
.wedding-countdown .countdown-values { gap:12px; align-items:flex-start; }
.wedding-countdown .countdown-values strong { font:300 clamp(24px,3vw,34px)/1.2 var(--sans); font-variant-numeric:tabular-nums; }
.wedding-countdown .countdown-values span { font:12px/1.3 var(--serif); letter-spacing:.02em; text-transform:none; margin-top:8px; }
.wedding-countdown .countdown-values b { font:300 28px/1.2 var(--sans); }
.countdown-photo { width:58%; max-width:540px; margin:42px auto 0; }
.countdown-photo img { display:block; width:100%; aspect-ratio:2.35; object-fit:cover; object-position:center 65%; filter:grayscale(1); }
@media(max-width:700px) {
  .wedding-countdown { padding:42px 5% 45px; }
  .wedding-countdown .countdown-values { gap:7px; }
  .wedding-countdown .countdown-values div { min-width:36px; }
  .wedding-countdown .countdown-values b { font-size:24px; }
  .countdown-photo { width:86%; margin-top:30px; }
  .countdown-photo img { aspect-ratio:1.8; }
}

/* La foto se conserva; solo la flor cortada continúa dibujada por debajo. */
.floral-interlude>img { display:block; width:100%; height:auto; }
.floral-note {
  top:51%; padding:22px 26px; background:#00000066; backdrop-filter:blur(6px);
  border-radius:2px;
}
@media(max-width:700px) {
  .floral-note { top:auto; backdrop-filter:none; }
}

/* Flores desenfocadas como fondo de la cuenta atrás. */
.wedding-countdown {
  background-color:#30302e;
  background-image:linear-gradient(#0003,#0003),url("assets/flores-desenfoque-galeria.webp");
  background-position:center,right center;
  background-size:100% 100%,contain;
  background-repeat:no-repeat;
  color:#fff;
}
.wedding-countdown .countdown-values { text-shadow:0 1px 5px #0008; }

/* Portada caligráfica y movimiento lento de la fotografía. */
.hero { padding:20px; }
.hero-frame { overflow:hidden; }
.hero-flower {
  top:0; height:100%; transform:scale(1.04);
  animation:hero-flower-drift 22s ease-in-out infinite alternate;
}
.hero-frame:after { background:linear-gradient(90deg,#0002,#0004); }
.hero-heading { gap:22px; padding:25px 16px; text-shadow:0 2px 14px #0004; }
.hero-heading h1 {
  font:400 clamp(46px,6.2vw,82px)/1.2 var(--script);
  letter-spacing:0; white-space:nowrap;
}
.hero-heading h1>.hero-ampersand { display:inline; font:inherit; font-size:.72em; margin:0 .06em; }
.hero-announcement { font:300 11px/1.5 var(--sans); letter-spacing:.3em; text-transform:uppercase; }
@keyframes hero-flower-drift {
  from { transform:scale(1.04) translate(-.6%, .4%); }
  to { transform:scale(1.12) translate(.6%, -.6%); }
}
@media(max-width:700px) {
  .hero { padding:12px; }
  .hero-heading { gap:18px; }
  .hero-heading h1 { font-size:clamp(35px,10vw,58px); }
  .hero-announcement { font-size:10px; letter-spacing:.25em; }
}

/* Espaciado centrado y tarjeta apoyada sobre el cambio de fondo. */
.floral-note { text-align:center; }
.floral-note p:not(.eyebrow) { text-align:center; line-height:1.6; }
.floral-note .floral-button { display:inline-block; }
.envelope-section { padding-bottom:24px; border:0; }
.places { background:transparent; border:0; }
.places-garden { display:flow-root; padding:0 0 32px; background:transparent; }
.places-garden:before { inset:0; }
.journey-paper {
  width:66%; margin:-28px auto 0; transform:none;
  border:1px solid #d2d0c9;
  box-shadow:0 -2px 8px #0002,0 8px 22px #0004,2px 2px 4px #0002;
}
@media(max-width:700px) {
  .floral-note {
    position:relative; top:auto; bottom:auto; left:auto; right:auto;
    width:100%; max-width:480px; margin:0 auto; padding:28px 8% 32px;
    transform:none; background:#000;
  }
  .floral-note .eyebrow { margin-bottom:16px; }
  .floral-note p:not(.eyebrow) { font-size:16px; margin-bottom:24px; }
  .envelope-section { padding-bottom:20px; }
  .places-garden { padding:0 0 24px; }
  .places-garden:before { inset:0; }
  .journey-paper { width:74%; margin-top:-18px; margin-bottom:0; transform:none; }
}

/* Versión móvil: fotografía amplia, papel legible y ritmo entre secciones. */
@media(max-width:700px) {
  html { scroll-padding-top:74px; }
  body { padding:20px 0; font-size:18px; background:#303030; }
  body.menu-open { overflow:hidden; }
  .page-backdrop { display:block; }
  .page-shell { width:calc(100% - 44px); max-width:none; border:1px solid #ffffff50; box-shadow:0 12px 40px #0005; }
  .site-header { height:58px; padding:0 20px; background:#fafaf7f5; }
  .monogram { font-size:29px; }
  .header-date { display:block; margin-left:auto; margin-right:14px; font-size:9px; letter-spacing:.08em; }
  .menu-button { order:3; width:44px; height:44px; }
  #main-nav { inset:58px 0 0; height:auto; gap:22px; padding:24px; box-shadow:none; background:#fafaf7; overflow-y:auto; }
  #main-nav a { display:block; font:400 28px/1.3 var(--serif); text-transform:none; letter-spacing:0; padding:10px 20px; }
  .hero { padding:0; }
  .hero-frame { height:clamp(470px,72svh,690px); }
  .hero-flower { object-position:43% center; }
  .hero-heading { justify-content:flex-end; padding:0 18px 72px; gap:18px; }
  .hero-heading h1 { font-size:clamp(39px,12vw,72px); }
  .hero-announcement { font-size:11px; letter-spacing:.28em; }
  .hero-frame:after { background:linear-gradient(transparent 30%,#0006); }
  .invitation { padding:56px 24px 18px; }
  .invitation-layout { gap:36px; }
  .invitation-copy .eyebrow { font-size:10px; margin-bottom:20px; }
  .invitation-copy h2 { font-size:clamp(32px,8.5vw,43px); line-height:1.08; }
  .invitation-copy p:not(.eyebrow) { font-size:18px; line-height:1.55; max-width:320px; }
  .invitation-photo { width:84%; max-width:340px; justify-self:center; }
  .invitation-photo img { aspect-ratio:.88; }
  .floral-interlude { height:auto; }
  .floral-note { max-width:480px; padding:30px 28px 34px; }
  .floral-note .eyebrow { font-size:10px; }
  .floral-note p:not(.eyebrow) { font-size:18px; line-height:1.55; }
  .button { min-height:48px; padding:14px 20px; font-size:10px; }
  .envelope-section { padding:0 0 32px; }
  .places-garden { padding-bottom:30px; }
  .journey-paper { width:88%; margin-top:-20px; }
  .journey-stop figcaption,.journey-celebration figcaption { font-size:20px; line-height:1.08; }
  .journey-stop figcaption>span { font-size:11px; line-height:1.3; margin-top:5px; }
  .journey-hotel { width:28%; right:9%; }
  .journey-chapel { width:32%; left:6%; }
  .journey-celebration { width:38%; right:6%; bottom:6%; }
  .journey-directions { font-size:9px; min-height:44px; display:flex; align-items:center; bottom:4%; }
  .wedding-countdown { padding:50px 20px 48px; }
  .wedding-countdown .countdown-values { gap:10px; }
  .wedding-countdown .countdown-values strong { font-size:30px; }
  .wedding-countdown .countdown-values span { font-size:13px; }
  .countdown-photo { width:100%; max-width:460px; margin-top:36px; }
  .countdown-photo img { aspect-ratio:1.45; object-position:50% 65%; }
  .gallery-heading { padding:48px 24px 30px; }
  .gallery-heading .eyebrow { font-size:9px; letter-spacing:.12em; margin-bottom:12px; }
  .gallery-heading h2 { font-size:clamp(34px,9.5vw,47px); }
  .gallery-subtitle { font-size:9px; margin-top:12px; }
  .memory-grid {
    width:100%; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:76%;
    gap:12px; padding:0 24px 14px; overflow-x:auto;
    scroll-snap-type:x mandatory; scroll-padding-inline:24px; scrollbar-width:thin;
    scrollbar-color:#b8b8af transparent; overscroll-behavior-x:contain;
  }
  .memory-grid figure { scroll-snap-align:center; }
  .memory-grid img { aspect-ratio:.75; }
  .memory-grid figure:nth-child(5) img { aspect-ratio:.75; object-position:54% center; }
  .gallery-journey-caption { padding:26px 22px 0; font-size:clamp(25px,7vw,33px); line-height:1.4; }
  .gallery-signature { padding:24px 20px 45px; }
  .gallery-signature p { font-size:12px; margin-bottom:12px; }
  .gallery-signature span { font-size:11px; }
  .gallery-footnote { justify-content:center; font-size:9px; padding:14px 20px; }
  .rsvp.section { padding:46px 24px 50px; gap:12px; }
  .rsvp-image { width:88%; max-width:370px; height:310px; justify-self:center; }
  .rsvp-image>img, .rsvp-flower-frame { top:-90px; height:calc(100% + 90px); }
  .rsvp-copy .eyebrow { font-size:10px; margin-bottom:18px; }
  .rsvp-copy h2 { font-size:clamp(37px,10vw,48px); }
  .rsvp-copy p:not(.eyebrow) { font-size:18px; line-height:1.5; margin:22px auto; max-width:340px; }
  .rsvp-copy .button { width:100%; max-width:330px; }
  .wedding-list.section { padding:52px 24px; }
  .wedding-list h2 { font-size:clamp(37px,10vw,47px); line-height:1.08; }
  .wedding-list .eyebrow { font-size:10px; }
  .wedding-list p:not(.eyebrow) { font-size:18px; line-height:1.55; }
  footer { padding:30px 20px 36px; margin:0 24px; gap:18px; }
  footer p { font-size:10px; }
  footer .text-link { min-height:44px; display:flex; align-items:center; }
  .form-modal { width:calc(100% - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; }
  .form-modal-inner { padding:32px 22px 24px; }
  .form-modal h2 { font-size:36px; }
  .form-close { min-width:44px; min-height:44px; }
  .name-fields { grid-template-columns:1fr; }
  .form-field span,legend { font-size:10px; letter-spacing:.1em; }
  input[type="text"],textarea { font-size:18px; min-height:44px; }
  fieldset label { min-height:44px; }
  input[type="radio"] { width:20px; height:20px; }
  .step-actions .button { flex:1; }
}
@media(max-width:360px) {
  .header-date { font-size:8px; margin-right:5px; }
  .hero-heading h1 { font-size:39px; }
  .journey-stop figcaption,.journey-celebration figcaption { font-size:17px; }
  .journey-stop figcaption>span { font-size:9px; }
  .wedding-countdown .countdown-values { gap:7px; }
  .wedding-countdown .countdown-values strong { font-size:27px; }
}

/* Mobile itinerary uses natural document flow so captions never collide. */
@media (max-width:700px) {
  .link-arrow { display:none; }
  .journey-paper {
    width:92%; aspect-ratio:auto; padding:30px 18px 22px;
    display:grid; gap:0; justify-items:center;
  }
  .journey-thread { display:none; }
  .journey-stop {
    position:relative; inset:auto; width:100%; max-width:260px;
    margin:0 0 64px; display:grid; justify-items:center;
  }
  .journey-stop:last-of-type { margin-bottom:0; }
  .journey-stop:not(:last-of-type):after {
    content:""; position:absolute; left:50%; bottom:-62px; transform:translateX(-50%);
    width:34px; height:56px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 56'%3E%3Cpath d='M17 0 C28 10 6 18 17 28 C28 38 6 46 17 56' fill='none' stroke='%23b9b7ae' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .journey-stop img { width:190px; height:125px; aspect-ratio:auto; }
  .journey-celebration img { width:240px; height:140px; }
  .journey-stop figcaption,.journey-celebration figcaption {
    font-size:27px; line-height:1.15; margin-top:7px;
  }
  .journey-stop figcaption>span { font-size:13px; line-height:1.4; margin-top:7px; }
  .journey-directions {
    position:relative; inset:auto; justify-content:center;
    font-size:10px; margin:0; padding:10px 16px; min-height:44px;
  }
}

/* La foto que antes ocupaba la portada conserva su encuadre completo. */
.invitation-photo img { aspect-ratio:1145/900; object-fit:contain; }

/* La figura completa se mezcla con el papel: su z-index aísla la imagen interior. */
.journey-stop { mix-blend-mode:multiply; }
/* Neutraliza el fondo del archivo antes de mezclarlo con el papel beige. */
.journey-hotel img,.journey-chapel img,.journey-celebration img {
  mix-blend-mode:normal;
  filter:grayscale(1) brightness(1.16);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite:intersect;
}

/* El título de la portada se desvanece y encoge un poco al bajar. */
.hero-heading {
  opacity:calc(1 - var(--hero-fade,0)); transform:scale(calc(1 - var(--hero-fade,0) * .12));
}

/* La flor del siguiente capítulo aparece enfocándose, como si llegara desde el desenfoque. Se repite cada vez que se pasa por encima. */
.floral-interlude img.reveal-repeat {
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);
}
.js-motion .floral-interlude img.reveal-repeat { opacity:0; filter:blur(16px); transform:scale(1.08); }
.js-motion .floral-interlude img.reveal-repeat.visible { opacity:1; filter:blur(0); transform:scale(1); }

/* Los sobres emergen y la flor central se asienta en su sitio. */
.envelope-section img.reveal {
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.16,1,.3,1);
}
.js-motion .envelope-section img.reveal { opacity:0; transform:scale(.86); clip-path:inset(28% round 10px); }
.js-motion .envelope-section img.reveal.visible { opacity:1; transform:scale(1); clip-path:inset(0% round 0px); }

/* Los títulos del recorrido (Del hotel de Lombok, etc.) con el mismo tono oscuro que el resto de los textos. */
.journey-stop figcaption { color:var(--ink); }

/* Aparición suave, sin recortes ni cambios bruscos de enfoque. */
.js-motion .photo-reveal { overflow:hidden; }
.js-motion .photo-reveal img {
  opacity:0; transform:translateY(8px); filter:grayscale(1);
  transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.2,.6,.35,1);
}
.js-motion .photo-reveal.photo-visible img { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce) {
  .js-motion .photo-reveal img { opacity:1; transform:none; }
}

/* En móvil, una foto grande cada vez (como el carrusel táctil de antes) y algo más rápido. */
@media(max-width:700px) {
  .memory-slide img { aspect-ratio:.75; }
  .memory-track { animation-duration:22s; }
}

.rsvp-flower-frame { display:block; border:0; }

/* Pequeñas leyendas sobre los sobres, como si fueran la dirección escrita a mano. */
.envelope-frame { position:relative; }
.envelope-label {
  position:absolute; bottom:38%; font:italic 11px/1.4 var(--serif); color:#2a2a28;
  text-align:center; width:18%; transform:translateX(-50%);
}
.envelope-label-left { left:23%; }
.envelope-label-right { left:75%; }
@media(max-width:700px) {
  .envelope-label { font-size:9px; width:26%; }
}

/* Móvil: el hibisco vuelve a la cuenta atrás y las flores pasan al pie, con los nombres encima. */
@media (max-width:700px) {
  .wedding-countdown {
    background:linear-gradient(#0005,#0005),url("assets/fondo-cuenta-atras-hibisco.webp") 45% center / cover no-repeat;
  }
  footer {
    margin:0; padding:34px 24px 30px; gap:6px; border-top:0; color:#fff;
    background:linear-gradient(#0003,#0003),url("assets/flores-desenfoque-galeria.webp") center / cover no-repeat;
  }
  footer .footer-names { text-shadow:0 1px 5px #0008; }
  footer .text-link { min-height:36px; text-shadow:0 1px 5px #0008; }
}

/* Móvil: "From Lombok" en dos líneas, a la izquierda del sello. */
@media (max-width:700px) {
  .envelope-label-left { width:10%; left:16.5%; bottom:20%; font-size:8px; line-height:1.3; }
}

/* Enlace discreto a la zona privada de los novios. */
.footer-admin { opacity:.55; }