/* Nuestra historia — Romantic Modern Editorial. Layered over the original component CSS. */
:root {
  --color-canvas:#F6F6FA; --color-surface:#FFFFFF; --color-ink:#252834;
  --color-secondary:#626B79; --color-action:#7869C9; --color-coral:#E89B87;
  --color-lavender:#E9E6F7; --color-border:#E3E5EB; --color-night:#20232F;
  --bg-gradient:var(--color-canvas); --bg-card:var(--color-surface);
  --bg-card-subtle:var(--color-lavender);
  --primary-rose:var(--color-action); --primary-rose-light:#9A85D8;
  --primary-rose-dark:#5849A5; --primary-crimson:var(--color-action);
  --accent-gold:var(--color-coral);
  --text-primary:var(--color-ink); --text-secondary:var(--color-secondary);
  --text-muted:#667080; --border-delicate:var(--color-border);
  --border-strong:#B8AFDF;
  --shadow-sm:0 2px 10px rgba(37,40,52,.05);
  --shadow-md:0 8px 24px rgba(37,40,52,.065);
  --shadow-lg:0 14px 34px rgba(37,40,52,.09);
  --radius-sm:12px; --radius-md:18px; --radius-lg:22px;
}
body { background:var(--color-canvas); background-attachment:scroll; }
.app-container { max-width:760px; background:var(--color-canvas); }
.top-bar { background:rgba(246,246,250,.96); border-bottom:1px solid var(--color-border); padding:18px clamp(20px,4vw,38px); }
.brand-title { color:var(--color-ink); letter-spacing:-.045em; font-weight:600; }
.brand-dot { background:var(--color-coral); }
.unlock-screen { min-height:min(760px,calc(100svh - 74px)); padding:32px clamp(20px,5vw,48px); }
.unlock-card { background:var(--color-surface); max-width:510px; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(28px,5vw,50px); box-shadow:var(--shadow-md); backdrop-filter:none; }
.unlock-card::before { content:""; display:block; width:38px; height:3px; margin:0 auto 24px; background:var(--color-coral); border-radius:4px; }
.unlock-tag { color:var(--color-action); letter-spacing:.18em; }
.unlock-recipient { color:var(--color-ink); font-size:clamp(2.7rem,8vw,4.1rem); font-weight:600; letter-spacing:-.05em; }
.unlock-quote-box { background:var(--color-canvas); border-left:2px solid var(--color-coral); }
.unlock-quote-text { color:var(--color-ink); font-size:1.28rem; }
.heart-svg { filter:drop-shadow(0 9px 14px rgba(120,105,201,.17)); }
.heart-bg-outline { fill:var(--color-lavender); stroke:var(--color-action); }
.heart-tap-ripple { background:rgba(120,105,201,.2); }
.heart-subtext { color:var(--color-secondary); }
.gift-content { gap:clamp(24px,5vw,44px); padding:22px clamp(18px,4vw,38px) 90px; }
.opened-header { text-align:left; padding:8px 2px 0; }
.opened-title { color:var(--color-ink); font-weight:600; }
.opened-date { color:var(--color-secondary); }
.hero-card { height:clamp(420px,66vw,580px); border:0; border-radius:var(--radius-md); background:var(--color-night); box-shadow:var(--shadow-md); }
.hero-img { object-fit:contain; object-position:center center; }
.hero-gradient-overlay { background:linear-gradient(180deg,transparent 55%,rgba(23,25,36,.76) 100%); }
.hero-name { font-size:clamp(3.2rem,10vw,5.6rem); line-height:.95; letter-spacing:-.055em; }
.hero-tag,.hero-date-line { letter-spacing:.16em; }
.card-section { border:0; box-shadow:none; padding:0; background:transparent; }
.section-label { color:var(--color-action); letter-spacing:.18em; }
.section-title { color:var(--color-ink); letter-spacing:-.035em; }
.gallery-carousel { background:var(--color-night); border:1px solid var(--color-border); box-shadow:none; height:clamp(320px,66vw,520px); }
.gallery-slide img { object-fit:contain; }
.gallery-counter-badge { background:rgba(32,35,47,.75); }
.gallery-caption { background:linear-gradient(180deg,transparent,rgba(32,35,47,.78)); }
.gallery-nav-btn { width:44px; height:44px; color:var(--color-action); box-shadow:var(--shadow-sm); }
.gallery-dot { background:#C8C2E6; }
.gallery-dot.active { background:var(--color-action); }
.letter-card { border:1px solid var(--color-border); background:var(--color-surface); border-radius:var(--radius-md); box-shadow:none; padding:clamp(26px,6vw,54px); color:var(--color-ink); }
.letter-card::before { color:var(--color-lavender); font-size:6rem; }
.letter-greeting { color:var(--color-ink); font-weight:600; }
.letter-signature { color:var(--color-action); }
.counter-box { background:var(--color-lavender); border:1px solid #DCD7F0; box-shadow:none; }
.counter-days-number { color:var(--color-action); }
.counter-city-badge { color:var(--color-ink); }
.timeline-list::before { background:var(--color-border); }
.timeline-content-card { background:transparent; box-shadow:none; border:0; border-bottom:1px solid var(--color-border); border-radius:0; }
.timeline-date { color:var(--color-action); }
.timeline-item-title { color:var(--color-ink); }
.voice-card { background:var(--color-surface); border:1px solid var(--color-border); box-shadow:none; }
.map-container-box { border:1px solid var(--color-border); box-shadow:none; }
.place-card { border:1px solid var(--color-border); box-shadow:none; background:var(--color-surface); }
.place-card:hover,.place-card.highlighted { box-shadow:var(--shadow-sm); border-color:var(--color-action); transform:translateY(-2px); }
.place-num-badge { background:var(--color-action); }
.couple-banner-card { box-shadow:none; border-radius:var(--radius-md); background:var(--color-night); }
.couple-banner-img { object-fit:contain; }
.couple-banner-overlay { background:linear-gradient(180deg,transparent 50%,rgba(32,35,47,.8)); }
.surprise-teaser-card { box-shadow:none; background:var(--color-lavender); border:1px solid #DCD7F0; }
.surprise-heart-icon { color:var(--color-coral); }
.quiz-modal-card { background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-md); }
.quiz-opt-btn { background:var(--color-canvas); border:1px solid var(--color-border); color:var(--color-ink); }
.quiz-opt-btn:hover { background:var(--color-lavender); border-color:var(--color-action); }
.quiz-opt-btn.correct { background:#E9F4EC; border-color:#347452; color:#215638; }
.quiz-opt-btn.wrong { background:#FCEDEA; border-color:#A24944; color:#913C39; }
.quiz-dot.active { background:var(--color-action); }
.modal-close-btn:hover { background:var(--color-lavender); color:var(--color-action); }
.polaroid-preview-card { background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); }
.editor-footer { background:var(--color-surface); border-color:var(--color-border); }
.btn-editor-primary { background:var(--color-action); border-color:var(--color-action); box-shadow:none; }
.btn-editor-primary:hover { background:#5849A5; }
.btn-editor-secondary { border-color:var(--color-border); color:var(--color-ink); background:var(--color-canvas); }
.btn-primary-romantic,.floating-btn.primary { background:var(--color-action); color:#fff; box-shadow:none; border:1px solid transparent; }
.btn-primary-romantic:hover,.floating-btn.primary:hover { background:#5849A5; box-shadow:var(--shadow-sm); }
.btn-primary-romantic:active,.floating-btn.primary:active { transform:translateY(1px); }
.floating-actions-bar { box-shadow:0 -8px 30px rgba(37,40,52,.07); border-color:var(--color-border); background:rgba(246,246,250,.98); }
.editor-drawer { background:var(--color-surface); box-shadow:-12px 0 42px rgba(37,40,52,.13); }
.editor-header { background:var(--color-canvas); border-color:var(--color-border); }
.editor-header-title h3 { color:var(--color-ink); }
.editor-tabs-nav { background:var(--color-canvas); }
.editor-tab-btn.active { color:var(--color-action); border-bottom-color:var(--color-action); }
.editor-close-btn:hover { background:var(--color-lavender); color:var(--color-action); }
.form-control:focus { border-color:var(--color-action); box-shadow:0 0 0 3px rgba(120,105,201,.14); }
.image-preview-box { background:var(--color-canvas); border-color:var(--color-border); }
:where(button,a,input,textarea,select,[tabindex]):focus-visible { outline:3px solid var(--color-action); outline-offset:3px; }
[hidden] { display:none!important; }
.gallery-slide img { cursor:zoom-in; }
.timeline-thumb { width:62px; height:62px; object-fit:contain; background:#20232f; border:2px solid white; box-shadow:none; cursor:zoom-in; }
.gallery-photo-dialog { border:0; border-radius:16px; padding:16px; width:min(96vw,1050px); max-height:96vh; background:var(--color-night); color:#fff; }
.gallery-photo-dialog::backdrop { background:rgba(17,19,30,.9); }
.gallery-photo-dialog figure { margin:0; text-align:center; }
.gallery-photo-dialog img { max-width:100%; max-height:83vh; object-fit:contain; display:block; margin:auto; }
.gallery-photo-dialog figcaption { margin-top:8px; font-size:.9rem; }
.gallery-photo-close { position:absolute; top:12px; right:14px; z-index:2; border:0; border-radius:50%; background:var(--color-action); color:#fff; width:42px; height:42px; font-size:1.5rem; cursor:pointer; }
.coordinate-map { position:relative; overflow:hidden; min-height:320px; background-color:#e9e6f7; background-image:linear-gradient(rgba(120,105,201,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,105,201,.12) 1px,transparent 1px); background-size:12.5% 25%; }
.coordinate-map-label { position:absolute; top:14px; left:16px; color:#252834; font-weight:700; font-size:.83rem; }
.coordinate-map-note { position:absolute; bottom:10px; left:16px; right:16px; color:#252834; font-size:.75rem; background:rgba(255,255,255,.88); padding:5px 8px; border-radius:6px; }
.coordinate-map-pin { position:absolute; transform:translate(-50%,-50%); width:34px; height:34px; border:2px solid white; border-radius:50%; background:#7869c9; color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(37,40,52,.22); cursor:pointer; }
.coordinate-map-pin.active,.coordinate-map-pin:hover { background:#20232f; transform:translate(-50%,-50%) scale(1.16); }
/* The original vinyl and photograph remain the only visual centerpiece. */
.music-editorial { text-align:center; padding:20px 0 30px; background:transparent; }
.music-editorial .music-vinyl-container { margin:0 0 22px; }
.music-editorial .vinyl-disc-wrapper { width:clamp(210px,56vw,250px); height:clamp(210px,56vw,250px); }
.music-editorial .vinyl-art { width:45%; height:45%; }
.music-editorial .vinyl-disc { transition:none; }
.music-editorial .vinyl-disc.spinning.music-paused { animation-play-state:paused; }
.music-editorial-action { min-width:190px; min-height:48px; padding:11px 22px; border:0; border-radius:var(--radius-sm); background:var(--color-action); color:white; font:inherit; font-weight:650; cursor:pointer; }
.music-editorial-action:hover { background:#5849A5; }
.music-floating-control { position:fixed; right:max(15px,env(safe-area-inset-right)); bottom:calc(92px + env(safe-area-inset-bottom)); z-index:45; padding:10px 13px; border:1px solid var(--color-border); border-radius:100px; background:var(--color-surface); color:var(--color-ink); box-shadow:var(--shadow-sm); font:inherit; font-size:.79rem; cursor:pointer; }
.music-floating-control:hover { color:var(--color-action); border-color:var(--color-action); }
/* The quiz hands off to an envelope, a short note, and the personal invitation. */
.quiz-success-view .final-stage { width:100%; display:flex; flex-direction:column; align-items:center; animation:final-arrive .35s ease-out both; }
@keyframes final-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.final-envelope-stage { padding:22px 4px 10px; }
.final-envelope { position:relative; display:block; width:210px; height:140px; border:0; background:transparent; cursor:pointer; perspective:480px; }
.final-envelope::before { content:""; position:absolute; inset:18px 0 0; background:#CBC4EE; border-radius:4px 4px 9px 9px; box-shadow:0 12px 26px rgba(37,40,52,.1); }
.final-envelope-paper { position:absolute; z-index:1; top:42px; left:18px; width:174px; height:94px; background:var(--color-surface); border-radius:3px; transition:transform .45s ease; }
.final-envelope-flap { position:absolute; z-index:2; left:0; top:18px; width:210px; height:78px; background:#E2DCF8; clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:center top; transition:transform .45s ease; }
.final-envelope-seal { position:absolute; z-index:3; top:82px; left:89px; width:32px; height:32px; border-radius:50%; background:var(--color-coral); color:#532A30; display:grid; place-items:center; transition:opacity .2s ease; }
.final-envelope.opened .final-envelope-flap { transform:rotateX(178deg); }
.final-envelope.opened .final-envelope-paper { transform:translateY(-38px); }
.final-envelope.opened .final-envelope-seal { opacity:0; }
.final-envelope-caption { max-width:310px; margin:20px 0 0; color:var(--color-ink); font-family:var(--font-serif); font-size:clamp(1.35rem,5vw,1.65rem); line-height:1.3; }
.final-letter { width:100%; text-align:left; padding:12px 4px 20px 18px; border-left:2px solid var(--color-coral); }
.final-letter-greeting { margin:0 0 13px; color:var(--color-action); font-family:var(--font-serif); font-size:1.6rem; }
.final-letter-text { white-space:pre-line; color:var(--color-ink); font-size:.98rem; line-height:1.75; }
.final-letter-signature { margin:17px 0 0; color:var(--color-action); font-family:var(--font-serif); font-size:1.4rem; }
.final-next-btn { width:100%; margin-top:16px; padding:14px 16px; border:0; border-radius:var(--radius-sm); background:var(--color-action); color:white; font:inherit; font-weight:650; cursor:pointer; }
.final-next-btn:hover { background:#5849A5; }
.final-invitation { width:100%; padding:14px 4px 20px; text-align:left; }
.final-flower { margin-bottom:14px; color:var(--color-coral); font-size:2rem; line-height:1; }
.final-invitation h3 { margin:0 0 19px; color:var(--color-ink); font-family:var(--font-serif); font-size:clamp(1.85rem,6vw,2.4rem); line-height:1.12; letter-spacing:-.025em; }
.final-dinner-message { white-space:pre-line; color:var(--color-ink); font-size:.95rem; line-height:1.65; }
.final-dinner-datetime { margin:22px 0 0; padding-top:14px; border-top:1px solid var(--color-border); color:var(--color-secondary); font-size:.86rem; }
.final-hearts { margin-top:21px; color:var(--color-coral); font-size:.85rem; letter-spacing:.16em; }
.final-return-btn { margin-top:18px; padding:10px 12px; border:0; background:transparent; color:var(--color-action); text-decoration:underline; text-underline-offset:3px; font:inherit; cursor:pointer; }
@media (max-width:540px) {
  .music-editorial { padding:22px 12px 27px; }
  .music-floating-control { right:12px; bottom:calc(85px + env(safe-area-inset-bottom)); }
  .unlock-screen { min-height:calc(100svh - 66px); }
  .unlock-card { padding:26px 20px; }
  .gift-content { gap:30px; }
  .hero-card { height:440px; }
  .gallery-carousel { height:390px; }
  .gallery-nav-btn { width:44px; height:44px; }
  .floating-actions-bar { width:calc(100% - 20px); max-width:440px; justify-content:space-between; gap:2px; padding:6px; }
  .floating-btn { flex:1; justify-content:center; min-width:0; padding:10px 4px; gap:3px; font-size:.7rem; white-space:nowrap; }
  .floating-btn span:first-child { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .music-editorial .vinyl-disc.spinning { animation:none!important; }
  .final-envelope-paper,.final-envelope-flap,.final-envelope-seal { transition:none!important; }
}