/* Negro, borgoña y champagne. Una historia, una escena a la vez. */
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/cormorant.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/cormorant-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('assets/fonts/cinzel.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('assets/fonts/great-vibes.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root {
  --background: #020202; --background-soft: #080405;
  --burgundy-dark: #250610; --burgundy: #4a0d20; --burgundy-light: #741b35;
  --gold-dark: #aa7c27; --gold: #d9ad42; --gold-light: #f5dc8a;
  --cream: #fff8e7; --white-soft: #f8f4ed; --muted: #b5a9a4;
  --line: #654737; --line-soft: rgba(217,173,66,.18);
  --serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --number: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --signature: 'Great Vibes', 'Brush Script MT', cursive;
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: dark; font-family: var(--sans); background: var(--background); color: var(--white-soft);
}
*,*::before,*::after { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: var(--background); font-size: 16px; line-height: 1.65; }
button,input { font: inherit; }
button { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .25s; }
button:active { transform: scale(.97); }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 5px; }
h1:focus,h2:focus { outline: none; }
::selection { background: var(--burgundy); color: var(--cream); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1,h2,h3,p,figure { margin: 0; }
h2 { font-family: var(--serif); font-size: clamp(2.6rem,5.6vw,5.8rem); font-weight: 400; line-height: 1.06; text-wrap: balance; }
.eyebrow { color: var(--gold-light); font-size: .75rem; line-height: 1.6; letter-spacing: .25em; text-transform: uppercase; }
#particles,.ambient,.grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#particles { z-index: 1; opacity: .7; }
.ambient { z-index: 0; background: radial-gradient(ellipse at 50% 53%,rgba(74,13,32,.24),transparent 58%),radial-gradient(ellipse at 50% 100%,rgba(74,13,32,.11),transparent 60%); }
.grain { z-index: 3; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.65' filter='url(%23n)'/%3E%3C/svg%3E"); }
#stage { position: relative; z-index: 2; overflow: clip; }
.story-started { overflow: hidden; }
.story-started #stage { height: calc(100dvh - 80px - env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #634738 #080405; }
.story-started .scene { min-height: calc(100svh - 80px - env(safe-area-inset-bottom)); padding-bottom: 48px; }
.scene { min-height: 100svh; padding: max(48px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-left)) calc(96px + env(safe-area-inset-bottom)); position: relative; }
.center-scene,.lock-scene { display: grid; place-items: center; text-align: center; }
.lock-scene { padding-top: max(32px,env(safe-area-inset-top)); padding-bottom: max(28px,env(safe-area-inset-bottom)); }
.lock-wrap { width: min(100%,384px); }
.dedication { display: flex; align-items: center; justify-content: center; gap: 15px; font-size: .625rem; letter-spacing: .24em; color: var(--muted); margin-bottom: 26px; }
.dedication span { width: 28px; height: 1px; background: var(--line-soft); }
.lock-card { position: relative; padding: 28px 36px 16px; border: 1px solid rgba(160,109,77,.26); border-radius: 4px; background: linear-gradient(155deg,rgba(32,12,18,.78),rgba(12,6,9,.84) 70%); box-shadow: 0 24px 100px #0008,0 0 70px #4a0d200b; }
.lock-card::before,.lock-card::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; border-color: #a37f47; opacity: .7; }
.lock-card::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.lock-card::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.lock-icon { width: 31px; height: 37px; color: var(--gold); stroke-width: 1.25; margin-bottom: 19px; overflow: visible; }
.lock-shackle { transform-origin: 29px 20px; transition: transform .8s var(--ease); }
.unlocked .lock-shackle { transform: rotate(-24deg) translate(2px,-3px); }
.unlocked { border-color: #d9ad4260; box-shadow: 0 0 80px #d9ad420c; }
.lock-date { margin-top: 9px; font: 400 clamp(1.3rem,5.1vw,1.75rem)/1.5 var(--number); color: var(--cream); letter-spacing: .055em; white-space: nowrap; }
.lock-date span { color: var(--gold-dark); padding: 0 4px; }
.fine-line { width: 32px; height: 1px; background: var(--gold); margin: 22px auto; opacity: .55; }
.lock-quote { font: italic 400 1.55rem/1.35 var(--serif); color: #e2d6c8; text-wrap: balance; }
.pin-label { display: block; font-size: .75rem; color: var(--muted); margin-top: 26px; letter-spacing: .025em; }
.pin-field { position: relative; margin: 5px auto 11px; width: 198px; height: 44px; }
.pin-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; cursor: text; }
.pin-field:focus-within { outline: 1px solid var(--gold); outline-offset: 5px; border-radius: 4px; }
.pin-dots { display: flex; align-items: center; justify-content: center; gap: 18px; height: 100%; }
.pin-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #9e806b; transition: background .2s,box-shadow .2s; }
.pin-dots i.filled { background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 0 10px #d9ad4228; }
.keypad { width: min(100%,228px); margin-inline: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.keypad button { min-height: 48px; padding: 8px 0; border: 1px solid #8f6b5a; background: #160c1080; border-radius: 3px; font-family: var(--number); font-size: 1.1rem; line-height: 1.2; }
.keypad button:hover { border-color: var(--gold-dark); background: #32141e; box-shadow: 0 0 18px #d9ad420a; }
.keypad .key-action { color: #ccb699; font-family: var(--sans); font-size: .85rem; }
.pin-status { min-height: 24px; margin-top: 10px; font-size: .75rem; color: #eeacb6; }
.lock-note { color: var(--muted); font: italic .85rem/1.6 var(--serif); margin-top: 22px; }
.unlock-message { font: italic 2rem/1.25 var(--serif); margin: 4px 0 28px; color: var(--gold-light); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 48px; padding: 13px 4px; border: 0; border-bottom: 1px solid #8f7150; color: var(--gold-light); background: transparent; font-size: .75rem; font-weight: 500; letter-spacing: .12em; line-height: 1.6; max-width: 100%; }
.button svg { width: 21px; height: 21px; }
.scene:not(.narrative-ready) :is([data-next], #little-continue, #restart-story) { visibility: hidden; opacity: 0; pointer-events: none; }
.button:hover { color: var(--cream); border-color: var(--gold-light); }
.button.primary { width: 100%; padding: 14px 16px; border: 1px solid #967744; background: #d9ad4208; border-radius: 2px; }
.intro-content { max-width: 960px; position: relative; }
.intro-content h2 { margin: 38px 0; }
.intro-lines { display: grid; gap: 8px; font: 400 clamp(1.5rem,3vw,2rem)/1.35 var(--serif); color: var(--muted); }
.intro-last { font: italic clamp(1.3rem,2.4vw,1.9rem)/1.4 var(--serif); margin: 32px 0 40px; color: var(--cream); }
.gaming-note { display: block; margin-top: 28px; font: italic .75rem var(--serif); color: #a39180; }
.noscript { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 30px; background: var(--background); }
.pin-error { border-color: #874054; box-shadow: 0 0 40px #741b3518; }
.intro-content h2 { max-width: 850px; }
[data-reveal] { transition: opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease); }
.reveal-pending { opacity: 0; transform: translateY(12px); filter: blur(3px); pointer-events: none; }
[data-scroll-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease),transform .9s var(--ease); transition-delay: var(--reveal-delay,0ms); }
[data-scroll-reveal].in-view { opacity: 1; transform: none; }
.quiet-title { font-size: clamp(2rem,4.5vw,4rem); margin-top: 24px; }
.counter-content { width: min(100%,1000px); }
.counter-calendar { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px,3vw,44px); margin: 42px 0 28px; }
.counter-calendar > div { display: flex; flex-direction: column; min-width: 64px; }
.counter-calendar div > span:first-child { font: 400 clamp(4rem,13vw,11.5rem)/1.1 var(--number); color: var(--gold-light); font-variant-numeric: tabular-nums; }
.counter-calendar .unit { margin-top: 12px; font-size: .75rem; color: var(--muted); letter-spacing: .1em; }
.counter-dot { font: 400 clamp(2rem,6vw,5rem)/1.8 var(--serif); color: #74513a; }
.counter-clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(8px,2vw,20px); font-size: .75rem; color: var(--muted); }
.counter-clock b { font-weight: 400; color: var(--white-soft); font-variant-numeric: tabular-nums; }
.counter-clock i { font-style: normal; color: var(--gold-dark); }
.counter-content .fine-line { margin: 36px auto 24px; }
.counter-after { font: italic clamp(1.5rem,3vw,2.2rem)/1.3 var(--serif); margin-bottom: 40px; }
.split-scene { display: grid; align-items: center; }
.split-layout { width: min(100%,1140px); margin: auto; display: grid; grid-template-columns: minmax(0,1.07fr) minmax(0,.93fr); gap: clamp(40px,7vw,112px); align-items: center; }
.scene-copy { min-width: 0; }
.scene-copy h2 { margin: 18px 0 28px; }
.scene-copy p:not(.eyebrow) { margin-top: 20px; color: var(--muted); }
.scene-copy .lead,.lead { font: 400 clamp(1.7rem,2.7vw,2.6rem)/1.25 var(--serif); color: var(--cream); text-wrap: balance; }
.scene-copy .lead { color: var(--cream) !important; }
.scene-copy .button { margin-top: 30px; }
.scene-copy .year-title { font: 400 clamp(5rem,10vw,9rem)/1 var(--number); color: var(--gold-light); margin: 20px 0 30px; }
.editorial-photo { min-width: 0; }
.photo-frame { position: relative; isolation: isolate; overflow: hidden; background: #10080b; border: 1px solid var(--line-soft); box-shadow: 0 22px 60px #0005; min-width: 0; }
.photo-frame.portrait { aspect-ratio: 4/5; max-height: 660px; }
.photo-frame.wide { aspect-ratio: 16/9; }
.photo-image { width: 100%; height: 100%; display: block; position: relative; z-index: 1; object-fit: contain; opacity: 0; transition: opacity 1.2s var(--ease); }
.image-loaded .photo-image { opacity: 1; }
.photo-backdrop { position: absolute; inset: -16px; background-position: center; background-size: cover; filter: blur(20px) brightness(.38) saturate(.6); z-index: 0; }
.photo-open { position: absolute; inset: 0; z-index: 3; background: none; border: 0; border-radius: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding: 14px; }
.photo-open svg { background: #020202b8; border: 1px solid #d9ad4235; border-radius: 50%; padding: 9px; width: 38px; height: 38px; color: var(--cream); opacity: .8; transition: opacity .3s; }
.photo-open:hover svg { opacity: 1; }
.photo-open:focus-visible { outline-offset: -6px; }
.photo-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 25px; background: radial-gradient(ellipse at 45% 42%,#30131d88,transparent 65%),#0c0609; }
.fallback-mark { font: italic clamp(2.8rem,6vw,5rem)/1.2 var(--serif); color: #a28168; padding-bottom: 24px; }
.fallback-title { font: 400 clamp(1.1rem,2.2vw,1.8rem)/1.3 var(--serif); color: #ccb6a2; max-width: 280px; }
.fallback-note { font-size: .75rem; color: var(--muted); margin-top: 14px; max-width: 210px; }
figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--muted); font-size: .75rem; letter-spacing: .02em; }
.chapter-heading { text-align: center; width: min(100%,950px); margin: 0 auto 56px; }
.chapter-heading h2 { margin-top: 20px; }
.scene-end { text-align: center; margin-top: 34px; }
.timeline-scene { padding-top: 88px; }
.timeline { list-style: none; padding: 0; margin: auto; max-width: 970px; position: relative; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent,#9b77376b 5%,#9b77376b 95%,transparent); }
.timeline-entry { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 100px; align-items: center; position: relative; margin-bottom: 65px; }
.timeline-entry::before { content: ''; width: 7px; height: 7px; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); border: 1px solid var(--gold); background: var(--background); border-radius: 50%; }
.timeline-photo { aspect-ratio: 4/3; }
.timeline-photo .photo-image { object-fit: cover; }
.timeline-copy h3 { font: 400 clamp(1.6rem,3vw,2.4rem)/1.15 var(--serif); margin-top: 16px; text-wrap: balance; }
.timeline-entry:nth-child(even) .timeline-photo { grid-column: 2; grid-row: 1; }
.timeline-entry:nth-child(even) .timeline-copy { grid-column: 1; grid-row: 1; text-align: right; }
.timeline-photo .fallback-mark { font-size: 2.5rem; padding-bottom: 12px; }
.timeline-photo .fallback-note { display: none; }
.gallery-scene { padding-top: 65px; }
.gallery-scene .chapter-heading { margin-bottom: 36px; }
.carousel { --drag: 0px; width: min(100%,1300px); margin: auto; height: clamp(320px,49vw,520px); position: relative; perspective: 1300px; touch-action: pan-y; user-select: none; }
.carousel-track { width: 100%; height: 100%; transform: translateX(var(--drag)); transition: transform .35s var(--ease); transform-style: preserve-3d; }
.dragging .carousel-track { transition: none; }
.carousel-card { position: absolute; inset: 0; margin: auto; width: min(62%,650px); height: 100%; transform-origin: center; transition: transform .75s var(--ease),opacity .65s,filter .65s; }
.carousel-card.is-current { z-index: 3; transform: translateX(0) scale(1); opacity: 1; }
.carousel-card.is-previous { z-index: 2; transform: translateX(-69%) rotateY(15deg) scale(.83); opacity: .46; filter: brightness(.7); }
.carousel-card.is-next { z-index: 2; transform: translateX(69%) rotateY(-15deg) scale(.83); opacity: .46; filter: brightness(.7); }
.carousel-card.is-offscreen { visibility: hidden; pointer-events: none; opacity: 0; transform: scale(.75); }
.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 32px; margin: 30px auto 0; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 10px; border: 1px solid #997f5d; border-radius: 50%; background: #0d0709; color: var(--gold-light); }
.icon-button:hover { background: #28101a; border-color: var(--gold-light); box-shadow: 0 0 20px #d9ad4210; }
.reverse { transform: rotate(180deg); }
.gallery-caption { text-align: center; min-width: 170px; }
#gallery-title { font: 400 1.5rem/1.2 var(--serif); }
#gallery-count { font-size: .6875rem; color: var(--muted); letter-spacing: .1em; }
.gallery-hint { text-align: center; font-size: .75rem; color: var(--muted); margin: 20px 0 0; }
.salta-layout { max-width: 1140px; margin: auto; }
.salta-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.salta-top h2 { font-size: clamp(4rem,9vw,8rem); }
.salta-photo { max-height: 580px; }
.salta-caption { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; margin-top: 30px; }
.salta-caption > p:last-child { color: var(--muted); max-width: 430px; }
.wedding-scene { background: radial-gradient(ellipse at 50% 30%,#25061030,transparent 65%); }
.wedding-time { font: 400 1.3rem/1.3 var(--number); color: var(--muted); margin-top: 15px; }
.wedding-scene .chapter-heading { margin-bottom: 32px; max-width: 800px; }
.wedding-scene h2 { font-size: clamp(2.6rem,4.9vw,4.5rem); }
.wedding-album { width: min(100%,920px); margin: auto; }
.album-stage { position: relative; aspect-ratio: 16/10; touch-action: pan-y; user-select: none; transform: translateX(var(--drag,0px)); transition: transform .35s var(--ease); }
.album-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none; }
.album-active { opacity: 1; z-index: 1; pointer-events: auto; }
.album-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.album-controls > .icon-button { background: none; border-color: transparent; }
.album-dots { display: flex; gap: 0; }
.album-dot { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; }
.album-dot i { display: block; width: 6px; height: 6px; border: 1px solid #b2a08a; border-radius: 50%; }
.album-dot[aria-pressed="true"] i { background: var(--gold-light); border-color: var(--gold-light); }
.wedding-caption { font: italic clamp(1.6rem,3vw,2.5rem)/1.2 var(--serif); text-align: center; margin: 18px 0 10px; color: var(--gold-light); min-height: 1.3em; }
.ezio-album .album-stage { aspect-ratio: 4/5; }
.scene-copy .ezio-preface { margin: 0 0 28px; }
.name-title { font-size: clamp(5rem,11vw,9rem); color: var(--gold-light); }
.scene-copy .family-caption { color: var(--gold-light); font: italic 1.7rem/1.2 var(--serif); }
.future-layout { width: min(100%,1100px); margin: auto; display: grid; grid-template-columns: 1fr .75fr; align-items: center; gap: 56px 80px; }
.future-copy h2 { font-size: clamp(2.5rem,4.6vw,4.2rem); margin: 30px 0; }
.future-copy .lead { color: var(--muted); font-size: clamp(1.5rem,2.3vw,2rem); }
.future-photo figcaption { align-items: center; flex-wrap: wrap; color: var(--gold-light); }
.future-photo figcaption svg { width: 16px; height: 16px; }
.future-layout .scene-end { grid-column: 1/-1; margin: 0; }
.little-content { width: min(100%,960px); }
.little-line { display: grid; place-items: center; min-height: 290px; }
#little-phrase { font: 400 clamp(2.5rem,6vw,5.5rem)/1.12 var(--serif); text-wrap: balance; transition: opacity .35s,transform .6s var(--ease); }
#little-phrase.phrase-out { opacity: 0; transform: translateY(-8px); }
.little-progress { display: flex; justify-content: center; gap: 10px; margin: 10px auto 30px; }
.little-progress i { width: 4px; height: 4px; border-radius: 50%; background: #6d5f54; }
.little-progress i.read { background: var(--gold-light); }
.text-button { background: none; border: 0; font-size: .75rem; color: var(--muted); min-height: 44px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.text-button:hover { color: var(--gold-light); }
#little-replay { display: flex; margin: 20px auto 0; }
.letter-scene { padding-top: 85px; }
.letter-scene > h2 { text-align: center; font-family: var(--sans); font-size: .75rem; line-height: 1.7; margin-bottom: 40px; }
.letter { position: relative; width: min(100%,740px); margin: auto; padding: clamp(30px,6vw,72px); border: 1px solid #a17b473d; background: linear-gradient(135deg,#210c14d9,#0c0609eb); border-radius: 3px; box-shadow: 0 28px 90px #0007; }
.letter-mark { font: italic 3rem/1 var(--serif); color: var(--gold-dark); margin-bottom: 35px; }
.letter-paragraph { font: 400 clamp(1.15rem,1.9vw,1.4rem)/1.7 var(--serif); margin-bottom: 22px; color: #e6dcd3; white-space: pre-line; }
.letter-paragraph:first-child { font-size: 2rem; color: var(--gold-light); }
.letter-paragraph:nth-last-child(2) { font-style: italic; font-size: clamp(1.6rem,3vw,2rem); color: var(--gold-light); margin-top: 36px; }
.signature { font: 400 clamp(2.3rem,4.4vw,3.4rem)/1.5 var(--signature); color: var(--gold-light); margin-top: 32px; }
.final-scene { display: grid; align-items: center; }
.final-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(40px,6vw,96px); width: min(100%,1250px); margin: auto; }
.final-photo .photo-frame { height: min(70svh,730px); min-height: 350px; }
.final-copy { text-align: center; padding-top: 20px; }
.final-preface { font: 400 clamp(1.5rem,2.3vw,2rem)/1.3 var(--serif); }
.final-second { color: var(--muted); font-size: .875rem; margin: 16px auto 54px; max-width: 360px; }
.final-copy h2 { font-size: clamp(2.1rem,3.2vw,3rem); line-height: 1.2; }
.final-copy h2 > span { display: block; }
.final-name { font-size: clamp(5rem,8vw,8.5rem); color: var(--gold-light); }
.final-name::after { content: '.'; }
.forever-date { font: 400 .85rem/1.5 var(--number); color: #dcc7a2; margin-top: 30px; letter-spacing: .04em; }
.final-last { font: italic 1.125rem/1.5 var(--serif); color: var(--muted); margin: 25px auto; max-width: 320px; }
.restart { letter-spacing: .12em; font-size: .625rem; }
.restart svg { width: 14px; height: 14px; }
.secret-wrap { position: relative; min-height: 90px; margin-top: 8px; }
.secret-heart { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: auto; border: 0; background: none; color: #a78a76; }
.secret-heart svg { width: 15px; height: 15px; }
.secret-heart:hover { color: var(--gold-light); }
#secret-message { font: italic 1.1rem/1.4 var(--serif); color: var(--gold-light); display: flex; flex-direction: column; }
.experience-controls { position: fixed; z-index: 5; left: max(24px,env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 30px; }
.experience-controls::before { content: ''; position: fixed; pointer-events: none; inset: auto 0 0; height: calc(80px + env(safe-area-inset-bottom)); background: var(--background); z-index: -1; }
.back-button { display: flex; gap: 8px; align-items: center; min-width: 44px; min-height: 44px; background: #020202b0; border: 0; color: var(--muted); font-size: .75rem; }
.back-button svg { width: 18px; height: 18px; }
.back-button:hover { color: var(--cream); }
.chapter-progress { display: flex; gap: 12px; align-items: center; color: #b5a18c; font-size: .625rem; font-variant-numeric: tabular-nums; }
.progress-rule { display: block; width: 70px; height: 1px; background: #4e3a2d; }
.progress-rule i { display: block; height: 100%; background: var(--gold-light); transform-origin: left; transform: scaleX(.071); transition: transform .8s; }
.on-final .chapter-progress { display: none; }
.music-player { position: fixed; z-index: 8; right: max(24px,env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
.music-mini { display: flex; align-items: center; justify-content: center; background: #0c070aed; border: 1px solid #796044; border-radius: 30px; padding: 2px 4px; }
.music-mini .icon-button { border: 0; background: transparent; min-width: 44px; min-height: 44px; }
.music-mini svg { width: 17px; height: 17px; }
.music-note { font-family: Georgia,serif; font-size: 20px; color: var(--muted); }
.is-playing .music-note { color: var(--gold-light); }
.music-divider { width: 1px; height: 15px; background: var(--line); }
.music-details { position: absolute; right: 0; bottom: 60px; width: min(260px,calc(100vw - 48px)); padding: 22px; background: #140a10; border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 12px 60px #000c; }
#music-title { font: 400 1.35rem/1.2 var(--serif); }
#music-artist { font-size: .75rem; color: var(--muted); margin: 6px 0 18px; }
.music-details label { font-size: .75rem; color: var(--muted); }
#music-volume { display: block; width: 100%; min-height: 44px; accent-color: var(--gold); cursor: pointer; }
#audio-status { font-size: .75rem; line-height: 1.6; color: #d3bfa7; }
.modal-open { overflow: hidden; }
.lightbox { width: min(1200px,calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 40px); padding: 52px 25px 24px; border: 1px solid #8d704448; border-radius: 4px; background: #090507; color: var(--cream); overflow-y: auto; }
.lightbox::backdrop { background: #020202ed; backdrop-filter: blur(8px); }
.lightbox-close { position: absolute; right: 12px; top: 8px; background: transparent; border-color: transparent; z-index: 2; }
.lightbox-image .photo-frame { height: min(68dvh,800px); border: 0; background: #050304; box-shadow: none; }
.lightbox-image .photo-backdrop { display: none; }
.lightbox-image .photo-image { object-fit: contain; }
.lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.lightbox-footer > div { text-align: center; flex: 1; }
#lightbox-title { font: 400 clamp(1.4rem,3vw,2rem)/1.2 var(--serif); }
#lightbox-caption { font-size: .8rem; color: var(--muted); margin-top: 8px; }
@media (min-width: 1500px) { .scene:not(.lock-scene) { padding-top: 80px; padding-bottom: 110px; } .split-layout { max-width: 1300px; } }
@media (max-width: 767px) {
  .scene:not(.lock-scene) { padding-top: 54px; }
  .split-layout,.future-layout,.final-layout { grid-template-columns: minmax(0,1fr); gap: 36px; max-width: 520px; }
  .split-layout .photo-frame.portrait { aspect-ratio: 4/4.5; max-height: 560px; }
  .scene-copy .year-title { font-size: 5rem; margin: 18px 0 24px; }
  .scene-copy p:not(.eyebrow) { font-size: 1rem; }
  .scene-copy .lead { font-size: 1.8rem !important; }
  .scene-copy h2 { font-size: 2.8rem; }
  .scene-copy .name-title { font-size: 6rem; }
  .chapter-heading { margin-bottom: 38px; }
  .chapter-heading h2 { font-size: 2.6rem; }
  .timeline { max-width: 480px; padding-left: 24px; }
  .timeline::before { left: 1px; }
  .timeline-entry { grid-template-columns: minmax(0,1fr); gap: 20px; margin-bottom: 48px; }
  .timeline-entry::before { left: -26px; top: 16px; }
  .timeline-entry .timeline-copy,.timeline-entry:nth-child(even) .timeline-copy { grid-column: 1; grid-row: 1; text-align: left; }
  .timeline-entry .timeline-photo,.timeline-entry:nth-child(even) .timeline-photo { grid-column: 1; grid-row: 2; }
  .timeline-copy h3 { margin-top: 9px; font-size: 1.9rem; }
  .carousel { height: clamp(300px,93vw,510px); }
  .carousel-card { width: 82%; }
  .carousel-card.is-previous { transform: translateX(-63%) rotateY(12deg) scale(.84); }
  .carousel-card.is-next { transform: translateX(63%) rotateY(-12deg) scale(.84); }
  .gallery-controls { gap: 15px; }
  .gallery-caption { min-width: 150px; }
  #gallery-title { font-size: 1.3rem; }
  .gallery-hint { max-width: 260px; margin-inline: auto; line-height: 1.7; }
  .salta-top { display: block; }
  .salta-top h2 { font-size: 5rem; margin-top: 10px; }
  .salta-photo { aspect-ratio: 4/5 !important; }
  .salta-caption { grid-template-columns: 1fr; gap: 16px; }
  .wedding-album .album-stage { aspect-ratio: 4/5; }
  .wedding-scene .chapter-heading { margin-bottom: 30px; }
  .wedding-caption { font-size: 1.9rem; }
  .ezio-album { order: 2; }
  .ezio-scene .scene-copy { display: contents; }
  .ezio-scene .scene-copy > * { margin: 0; }
  .ezio-scene .ezio-preface { order: 0; }
  .ezio-scene #ezio-date { order: 0; margin-top: -10px; }
  .ezio-scene #ezio-title { order: 0; margin-top: -20px; }
  .ezio-scene .scene-copy > [data-reveal],.ezio-scene .scene-copy > .button { order: 3; }
  .ezio-scene .split-layout { gap: 24px; }
  .ezio-scene .scene-copy > .button { justify-self: start; }
  .future-copy h2 { font-size: 2.8rem; }
  .future-photo { width: 85%; margin-inline: auto; }
  .future-layout .scene-end { grid-column: 1; }
  .little-line { min-height: 300px; }
  .letter { padding: 30px 26px; }
  .letter-paragraph { font-size: 1.22rem; line-height: 1.65; }
  .final-photo .photo-frame { height: 52svh; min-height: 300px; max-height: 520px; }
  .final-copy { padding-top: 0; }
  .final-second { margin-bottom: 38px; }
  .final-name { font-size: 6rem; }
  .final-copy h2 { font-size: 2.2rem; }
  .experience-controls { left: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); gap: 12px; }
  .chapter-progress { gap: 8px; }
  .progress-rule { width: 36px; }
  .music-player { right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .back-button span { display: none; }
  .music-mini { padding: 0 2px; }
  .music-mini .icon-button { min-width: 44px; }
  .lightbox { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 56px 12px 20px; }
  .lightbox-image .photo-frame { height: 62dvh; }
  .lightbox-footer { gap: 10px; }
}
@media (max-width: 359px) { .lock-card { padding-inline: 22px; } .scene { padding-inline: 18px; } .lock-quote { font-size: 1.4rem; } .gallery-controls { gap: 8px; } .gallery-caption { min-width: 140px; } .counter-clock { font-size: .6875rem; } .letter { padding-inline: 22px; } }
.dedication,.chapter-progress,.restart,#gallery-count { font-size: .75rem; }
@media (max-height: 730px) and (min-width: 768px) { .lock-card { padding-top: 20px; } .lock-icon { margin-bottom: 12px; } .lock-note { margin-top: 12px; } .dedication { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-scroll-reveal],[data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* Una noche de rosas: luz, papel y movimiento delicado. */
:root {
  --background: #1b0a14; --background-soft: #24101c;
  --gold: #e5b8a1; --gold-light: #f8d5bc; --gold-dark: #be8c78;
  --cream: #fff1e6; --white-soft: #fae9e3; --muted: #d3b5be;
  --line: #8b596a; --line-soft: rgba(235,169,181,.25);
}
.ambient { overflow: hidden; background: radial-gradient(ellipse at 48% 50%,#55203688,transparent 70%),linear-gradient(135deg,#200d1b,#170c15 60%,#321221); }
.ambient-bloom { position: absolute; width: 85vmax; height: 85vmax; border-radius: 50%; will-change: transform; }
.bloom-one { top: -65%; left: -35%; background: radial-gradient(ellipse,#a943665c,transparent 64%); animation: rose-drift 19s ease-in-out infinite alternate; }
.bloom-two { bottom: -70%; right: -30%; background: radial-gradient(ellipse,#ca6c6552,transparent 62%); animation: rose-drift 24s ease-in-out -12s infinite alternate-reverse; }
.bloom-three { top: 5%; right: -45%; background: radial-gradient(ellipse,#8634594d,transparent 60%); animation: rose-drift 16s ease-in-out -7s infinite alternate; }
#particles { opacity: .95; }
.motion-toggle { position: fixed; top: max(16px,env(safe-area-inset-top)); right: max(18px,env(safe-area-inset-right)); z-index: 6; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 13px; border: 1px solid #e8b8bd30; border-radius: 24px; background: #28131dcc; color: var(--muted); font-size: .7rem; backdrop-filter: blur(12px); }
.motion-toggle > span:first-child { font-size: 1.3rem; color: var(--gold-light); }
.motion-toggle:hover { background: #542637; color: var(--cream); }
.lock-scene { padding-top: 74px; padding-bottom: 30px; }
.lock-wrap { width: min(100%,420px); }
.dedication { font-size: .64rem; letter-spacing: .22em; margin-bottom: 20px; }
.dedication span { background: #e8b8bd70; width: 36px; }
.lock-script { position: relative; z-index: 1; font: 400 clamp(3.1rem,7vw,4.2rem)/1.2 var(--signature); color: var(--gold-light); margin-bottom: 20px; text-shadow: 0 0 38px #efa9bd50; animation: ink-arrive 1.4s var(--ease) both; }
.lock-card { padding: 28px 38px 18px; border: 1px solid #d998a74f; border-radius: 100px 100px 12px 12px / 55px 55px 12px 12px; background: linear-gradient(155deg,#75394a48,#321521c9 48%,#25101bc9); box-shadow: inset 0 1px 0 #ffe3dc24,0 28px 90px #13050c80,0 0 100px #c6537420; backdrop-filter: blur(14px); }
.lock-card::before { inset: 10px; width: auto; height: auto; border: 1px solid #edb1bb20; border-radius: 92px 92px 7px 7px / 48px 48px 7px 7px; }
.lock-card::after { display: none; }
.lock-icon { color: #f0c2b7; filter: drop-shadow(0 0 10px #e994b275); animation: keepsake-glow 4s ease-in-out infinite; }
.lock-quote { font-size: 1.8rem; color: #f3d8d8; }
.lock-note { font-size: 1.1rem; margin-top: 20px; color: #dfb9c5; }
.keypad { gap: 9px; }
.keypad button { border: 1px solid #c88a9b55; border-radius: 13px; background: #e9a1b008; min-height: 49px; }
.keypad button:hover { background: #b8627e30; border-color: #eeb7c5; box-shadow: 0 4px 22px #cb6f8c20; transform: translateY(-2px); }
.keypad button:active { transform: scale(.94); }
.pin-dots i.filled { background: #f2bbc9; border-color: #f2bbc9; box-shadow: 0 0 15px #ed97b999; }
.unlocked { box-shadow: 0 0 100px #d77d9a38; border-color: #f4bdcd; }
.button { position: relative; padding: 14px 20px; border: 1px solid #c18a9266; border-radius: 30px; background: linear-gradient(120deg,#b76b8030,#edb8a90a); overflow: hidden; }
.button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 25%,#ffdfd422 50%,transparent 75%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
.button:hover::before { transform: translateX(120%); }
.button:hover { background-color: #a2567028; box-shadow: 0 8px 30px #c4748d20; transform: translateY(-3px); }
.button svg { transition: transform .35s var(--ease); }
.button:hover svg { transform: translateX(4px); }
.button:active { transform: translateY(0) scale(.98); }
.button.primary { border-radius: 30px; border-color: #dfa4b077; background: linear-gradient(120deg,#a3547055,#9b64502b); }
h2 { text-shadow: 0 4px 35px #df72991a; }
.intro-last,.counter-after,.salta-caption .lead,.family-caption { color: #f1c5cc; }
.fine-line { width: 74px; background: linear-gradient(90deg,transparent,#efb7c8,transparent); opacity: .8; }
.counter-calendar div > span:first-child { color: #f5c9c4; text-shadow: 0 0 55px #d8759a40; }
.counter-content::before { content: '♡'; display: block; font: 400 3.5rem/1 var(--serif); color: #edabc0; margin-bottom: 28px; animation: keepsake-glow 3.8s ease-in-out infinite; }
.photo-frame { border-color: #e9b8b63b; border-radius: 5px; box-shadow: 0 22px 65px #11050d66,0 0 40px #cc698214; }
.editorial-photo { padding: 12px 12px 0; background: #f3d9cd; box-shadow: 0 22px 55px #10040955; transform: rotate(-2deg); transition: transform .6s var(--ease); }
.reverse-layout .editorial-photo { transform: rotate(2deg); }
.editorial-photo figcaption { color: #6d3548; font: italic 1.15rem/1.5 var(--serif); padding: 14px 5px; }
.editorial-photo .photo-frame { border: 0; box-shadow: none; }
@media (hover:hover) { .editorial-photo:hover { transform: rotate(0) translateY(-5px); } }
.photo-fallback { background: radial-gradient(ellipse at 30% 15%,#b8687950,transparent 60%),linear-gradient(145deg,#492336,#281322); }
.photo-fallback::before { content: '♡'; font: 400 4rem/1 var(--serif); color: #e5afba70; margin-bottom: 20px; }
.timeline-entry::before { width: 9px; height: 9px; box-shadow: 0 0 18px #f1a5ba70; background: #d394a9; }
.gallery-caption p,.wedding-caption { font-family: var(--serif); font-style: italic; font-size: 1.5rem; }
.wedding-scene .chapter-heading h2 { color: #ffe2dc; }
.letter { background: linear-gradient(115deg,#f8e9d9,#efdbc9 65%,#f5e4d3); color: #502c37; border: 1px solid #f8dccc; border-radius: 3px 15px 4px 3px; box-shadow: 0 30px 80px #10060e70,inset 0 0 65px #ad80581c; }
.letter::before { content: ''; position: absolute; inset: 13px; border: 1px solid #9f66732b; pointer-events: none; }
.letter-mark { display: grid; place-items: center; width: 62px; height: 62px; border: 3px double #d39b9f70; border-radius: 50%; font-family: var(--signature); background: #873950; color: #ffddd5; box-shadow: 0 5px 12px #5a243333; transform: rotate(-10deg); }
.letter-paragraph { color: #583440; font-size: clamp(1.25rem,2vw,1.55rem); }
.letter-paragraph:first-child,.letter-paragraph:nth-last-child(2),.signature { color: #8a3651; }
.final-name { font-family: var(--signature); font-size: clamp(5.5rem,10vw,9.5rem); line-height: 1.5; text-shadow: 0 0 50px #df73995c; }
.secret-heart { color: #f4adc4; }
.secret-heart svg { width: 24px; height: 24px; fill: #c5618130; animation: keepsake-glow 3s ease-in-out infinite; }
.experience-controls::before { background: linear-gradient(0deg,#1b0a14 65%,#1b0a14ed); border-top: 1px solid #ecc0c51a; }
.back-button { background: transparent; }
.music-mini { background: #351923ed; border-color: #ba829266; box-shadow: 0 5px 30px #b3667a15; }
.music-details { background: #321724; border-color: #ba829255; border-radius: 16px; }
@keyframes rose-drift { 0% { transform: translate3d(-7%,2%,0) scale(.9); } 50% { transform: translate3d(12%,12%,0) scale(1.12); } 100% { transform: translate3d(22%,-9%,0) scale(1.03); } }
@keyframes keepsake-glow { 0%,100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes ink-arrive { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
.effects-paused *, .effects-paused *::before, .effects-paused *::after { animation-play-state: paused !important; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
@media (max-width:767px) {
  .lock-scene { padding-top: 74px; }
  .lock-script { margin-bottom: 18px; }
  .lock-card { padding: 25px 28px 16px; }
  .lock-quote { font-size: 1.65rem; }
  .motion-toggle { top: 12px; right: 14px; font-size: .65rem; min-height: 44px; }
  .story-started .scene { padding-top: 78px; }
  .editorial-photo { margin-inline: 7px; padding: 8px 8px 0; }
  .editorial-photo figcaption { font-size: 1.05rem; }
  .counter-content::before { margin-bottom: 18px; font-size: 2.6rem; }
  .ambient-bloom { width: 120vmax; height: 120vmax; }
}
@media (max-width:359px) { .lock-card { padding-inline: 22px; } .lock-script { font-size: 2.9rem; } }
@media (prefers-reduced-motion:reduce) { .ambient-bloom,.lock-script,.lock-icon,.counter-content::before,.secret-heart svg { animation: none; } .motion-toggle { display: none; } }

/* Chaque capítulo ocupa una única ventana; los textos largos se leen por páginas. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#stage, .story-started #stage { height: 100dvh; overflow: clip; }
.story-started #stage { height: calc(100dvh - 80px - env(safe-area-inset-bottom)); }
#stage .scene { height: 100%; min-height: 0; padding: 0; overflow: clip; }
.scene-sheet { position: absolute; left: 50%; top: calc(50% + 22px); width: calc(100% - 64px); max-width: 1200px; transform: translate(-50%, -50%) scale(var(--scene-scale,1)); transform-origin: center; }
.lock-scene .scene-sheet { max-width: 420px; }
.lock-wrap { margin: auto; }
.lock-script { font-size: clamp(2.7rem,5vw,3.5rem); margin-bottom: 12px; }
.dedication { margin-bottom: 12px; }
.lock-card { padding-top: 22px; padding-bottom: 8px; }
.lock-icon { margin-bottom: 10px; }
.lock-quote { font-size: 1.5rem; }
.lock-note { margin-top: 10px; }
.pin-label { margin-top: 16px; }
.lock-card .fine-line { margin-block: 14px; }
.keypad button { min-height: 44px; }
.keypad { gap: 6px; }
.pin-status { margin-top: 5px; }
.scene-sheet > .intro-content, .scene-sheet > .counter-content, .little-content { margin: auto; }
.chapter-heading, .gallery-scene .chapter-heading, .wedding-scene .chapter-heading { margin-bottom: 20px; }
.chapter-heading h2 { margin-top: 10px; }
h2 { font-size: clamp(2.2rem,4vw,4rem); }
.scene-end { margin-top: 16px; }
.split-layout, .future-layout, .final-layout { gap: 32px; }
.split-layout .photo-frame.portrait, .future-photo .photo-frame, .final-photo .photo-frame { height: min(47dvh,470px); min-height: 0; aspect-ratio: auto; }
.scene-copy h2 { margin: 12px 0 18px; }
.scene-copy p:not(.eyebrow) { margin-top: 14px; }
.scene-copy .button { margin-top: 20px; }
.scene-copy .year-title { font-size: clamp(4rem,8vw,7rem); }
.scene-copy .lead,.lead { font-size: clamp(1.4rem,2.4vw,2rem); }
.timeline { width: min(100%,800px); padding: 0; }
.timeline::before,.timeline-entry::before { display: none; }
.timeline-entry { margin: 0; gap: 30px; }
.timeline-entry .timeline-photo,.timeline-entry:nth-child(even) .timeline-photo { grid-column: 1; grid-row: 1; height: min(32dvh,320px); aspect-ratio: auto; }
.timeline-entry .timeline-copy,.timeline-entry:nth-child(even) .timeline-copy { grid-column: 2; grid-row: 1; text-align: left; }
.page-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; min-height: 44px; }
.page-count { font: 400 .8rem var(--number); color: var(--gold-light); }
.page-controls button:disabled { opacity: .3; }
.carousel { height: min(38dvh,400px); }
.gallery-controls { margin-top: 14px; }
.gallery-hint { margin-top: 8px; }
.salta-layout { width: min(100%,900px); }
.salta-top { margin-bottom: 12px; }
.salta-top h2 { font-size: clamp(3rem,6vw,5rem); }
.salta-photo { height: min(35dvh,360px); aspect-ratio: auto !important; }
.salta-caption { margin-top: 16px; }
.wedding-scene h2 { font-size: clamp(2rem,3.4vw,3rem); }
.wedding-time { margin-top: 6px; }
.wedding-album { max-width: 700px; }
.album-stage, .wedding-album .album-stage, .ezio-album .album-stage { height: min(32dvh,340px); aspect-ratio: auto; }
.album-controls { margin-top: 8px; }
.wedding-caption { margin-block: 8px; }
.future-copy h2 { font-size: clamp(2rem,3.5vw,3.3rem); margin-block: 14px; }
.future-layout { gap: 20px 40px; }
.letter-scene .eyebrow { text-align: center; margin-bottom: 16px; }
.letter { width: min(100%,740px); padding: 28px 40px; }
.letter-mark { width: 44px; height: 44px; font-size: 2rem; margin-bottom: 20px; }
.letter-paragraph,.letter-paragraph:first-child,.letter-paragraph:nth-last-child(2) { font-size: clamp(1.3rem,2.1vw,1.7rem); line-height: 1.55; margin: 0; }
.signature { margin-top: 14px; font-size: 2.4rem; }
.letter-page .letter-paragraph:not(:last-child) { margin-bottom: 14px; }
.final-second { margin-bottom: 24px; }
.final-name { font-size: clamp(4rem,7vw,7rem); line-height: 1.2; }
.forever-date { margin-top: 16px; }
.final-last { margin-block: 16px; }
.secret-wrap { min-height: 65px; }
.lightbox { overflow: clip; max-height: calc(100dvh - 20px); padding-top: 48px; }
.lightbox-image .photo-frame { height: min(55dvh,650px); }
@media (max-width:767px) {
 .scene-sheet { width: calc(100% - 36px); }
 .split-layout,.future-layout,.final-layout { gap: 16px; }
 .split-layout .photo-frame.portrait,.future-photo .photo-frame,.final-photo .photo-frame { height: 23dvh; max-height: 210px; }
 .editorial-photo { width: 75%; margin: auto; }
 .editorial-photo figcaption { padding-block: 7px; }
 .scene-copy h2 { margin-block: 8px; }
 .scene-copy p:not(.eyebrow) { margin-top: 8px; }
 .scene-copy .button { margin-top: 14px; }
 .scene-copy .year-title { font-size: 3.5rem; margin-block: 8px; }
 .scene-copy .lead { font-size: 1.5rem; }
 .scene-copy { font-size: .9rem; text-align: center; }
 .timeline-entry { grid-template-columns: 1fr; gap: 16px; }
 .timeline-entry .timeline-copy,.timeline-entry:nth-child(even) .timeline-copy { grid-column: 1; grid-row: 2; text-align: center; }
 .timeline-entry .timeline-photo,.timeline-entry:nth-child(even) .timeline-photo { height: 26dvh; }
 .salta-top { display: flex; }
 .salta-top h2 { margin: 0; }
 .salta-caption { gap: 8px; text-align: center; }
 .salta-photo { height: 28dvh; }
 .letter { padding: 24px; }
 .letter-paragraph,.letter-paragraph:first-child,.letter-paragraph:nth-last-child(2) { font-size: 1.3rem; }
 .letter-mark { margin-bottom: 14px; }
 .ezio-album { order: 0; }
 .ezio-album .album-stage { height: 23dvh; }
 .future-photo { width: 72%; }
 .future-copy { text-align: center; }
 .future-copy h2 { font-size: 2rem; margin-block: 10px; }
 .final-copy { padding-top: 0; }
 .final-second { margin: 8px auto 14px; }
 .final-name { font-size: 4rem; }
 .final-preface { font-size: 1.25rem; }
 .final-last { margin-block: 8px; }
 .forever-date { margin-top: 8px; }
 .intro-content h2 { margin-block: 22px; }
 .intro-last { margin: 22px 0; }
 .counter-calendar { margin-block: 24px; }
 .counter-content::before { margin-bottom: 12px; }
}
@media (max-height:500px) and (min-width:600px) {
 .split-layout,.future-layout,.final-layout { grid-template-columns: 1fr 1fr; }
 .scene-sheet { width: calc(100% - 80px); }
 .lock-wrap { width: 650px; max-width: 100%; }
 .lock-scene .scene-sheet { max-width: 650px; }
 .lock-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 20px; padding: 15px 30px; border-radius: 28px; }
 .lock-card > :not(#pin-panel) { grid-column: 1; }
 #pin-panel { grid-column: 2; grid-row: 1 / 7; }
 .lock-card .pin-label { margin-top: 0; }
 .lock-card .lock-icon { margin: auto; }
 .lock-card #unlock-actions { grid-column: 1 / -1; }
 .lock-script { font-size: 2.5rem; }
 .lock-note,.dedication { display: none; }
 .letter-mark { display: none; }
 .letter { padding-block: 16px; }
 .letter-paragraph { font-size: 1.1rem; }
}
/* Las fotos ampliadas también se ajustan a la ventana. */
.lightbox[open] { display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - 32px); }
.lightbox-image { flex: 1; min-height: 0; }
.lightbox-image .photo-frame { height: 100%; }
.lightbox-footer { flex-shrink: 0; margin-top: 0; }
.scene-sheet .photo-fallback { padding: 12px; }
.scene-sheet .photo-fallback::before { font-size: 1.8rem; margin-bottom: 6px; }
.scene-sheet .fallback-mark { font-size: 2rem; padding-bottom: 6px; }
.scene-sheet .fallback-title { font-size: 1.05rem; }
.scene-sheet .fallback-note { font-size: .7rem; margin-top: 6px; }
@media (max-height:500px) { .scene-sheet .photo-fallback::before, .scene-sheet .fallback-mark { display: none; } }
/* La sorpresa espera su fecha; la vista previa conserva el diseño sin scroll. */
.time-locked #stage,.time-locked #experience-controls,.time-locked #music-player { visibility: hidden; pointer-events: none; }
.release-gate { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 65px 22px 22px; }
.release-card { width: min(100%,650px); text-align: center; }
.release-script { font: 400 clamp(2.5rem,6vw,4.5rem)/1.25 var(--signature); color: var(--gold-light); margin: 24px 0; }
.release-card h1 { font: 400 clamp(1.8rem,4vw,3rem)/1.2 var(--serif); }
.release-description { margin: 22px auto 8px; max-width: 460px; color: var(--muted); }
.release-description strong { color: var(--cream); font-weight: 500; }
.release-timezone { color: var(--muted); font-size: .75rem; }
.release-countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 32px auto; }
.release-countdown > div { padding: 20px 8px; background: #e9a1b00c; border: 1px solid var(--line-soft); border-radius: 20px; }
.release-countdown b { display: block; font: 400 clamp(2rem,5vw,4rem)/1.2 var(--number); color: var(--gold-light); font-variant-numeric: tabular-nums; }
.release-countdown span { font-size: .75rem; color: var(--muted); }
.release-note { font: italic 1.3rem var(--serif); color: var(--muted); }
.preview-access { margin-top: 26px; color: var(--muted); font-size: .75rem; }
.preview-access summary { cursor: pointer; padding: 12px; min-height: 44px; }
#preview-form { width: min(100%,330px); margin: 8px auto 0; display: grid; gap: 10px; }
#preview-password { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--cream); background: #29131f; text-align: center; }
#preview-error { color: #ffc1cf; min-height: 20px; }
.exit-preview { position: fixed; left: 14px; top: 14px; z-index: 6; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 24px; color: var(--muted); background: #28131ddd; font-size: .7rem; }
@media (max-height:750px) { .release-script { margin: 10px 0; font-size: 2.6rem; } .release-countdown { margin-block: 16px; } .release-countdown > div { padding-block: 10px; } .release-description { margin-top: 12px; } .preview-access { margin-top: 8px; } .release-note { font-size: 1.1rem; } }
@media (max-height:540px) { .release-gate { padding-top: 54px; } .release-card { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-items: center; } .release-card > .eyebrow,.release-script,.release-card h1,.release-description,.release-timezone,.release-note { grid-column: 1; margin: 0; } .release-script { font-size: 2rem; } .release-card h1 { font-size: 1.6rem; } .release-description { font-size: .8rem; } .release-countdown { grid-column: 2; grid-row: 1 / 4; gap: 5px; margin: 0; } .preview-access { grid-column: 2; grid-row: 4 / 8; margin: 0; } .release-countdown b { font-size: 1.7rem; } .release-countdown span { font-size: .65rem; } }
.release-card { position: absolute; left: 50%; top: calc(50% + 20px); width: calc(100% - 44px); max-width: 650px; transform: translate(-50%,-50%) scale(var(--gate-scale,1)); }
@media (max-height:540px) { .release-card { max-width: 760px; } }