:root { color-scheme: light; --ink:#0c090e; --paper:#1d1320; --muted:#3f2738; --line:#4f304b45; --gold:#6b425e; --champagne:#bc96b0; --accent:#e2c5d6; --hero-paper:#ecdde7; --surface:#b692a7; --sans:"Cormorant Garamond",Georgia,serif; --serif:"Bodoni Moda",Georgia,serif; --condensed:"DM Sans",Arial,sans-serif; --script:"Cormorant Garamond",Georgia,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:4.5rem; }
body { margin:0; background:#0c090e; color:var(--paper); font:500 19px/1.65 var(--sans); }
body.intro-active { overflow:hidden; }
button,a,input,select { font:inherit; } a { color:inherit; } button { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; } [hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.skip-link { position:fixed; z-index:30; top:-5rem; left:1rem; padding:.8rem 1rem; background:#f8edf5; color:var(--paper); }
.skip-link:focus { top:1rem; }
.eyebrow { font:500 .65rem var(--condensed); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.section { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.display { text-transform:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:44px; padding:.8rem 1rem; border:1px solid var(--gold); border-radius:2px; text-decoration:none; font:500 .68rem var(--condensed); text-transform:uppercase; letter-spacing:.09em; cursor:pointer; transition:background .2s,color .2s; }
.button--outline { background:transparent; color:var(--paper); }
.button--solid { background:var(--gold); color:#fbf3f8; }
.button:hover { background:#452739; color:#fbf3f8; }
.text-link { display:inline-block; color:var(--gold); font:500 .7rem var(--condensed); letter-spacing:.08em; text-decoration:none; }
.paper-invitation { position:relative; z-index:1; width:min(100%,820px); margin:0 auto; overflow:hidden; isolation:isolate; background:var(--color-superficie,var(--surface)); }
.paper-invitation::before,.paper-invitation::after { content:""; position:absolute; inset:12px; z-index:5; pointer-events:none; border:1px solid var(--line); border-radius:16px; }
.paper-invitation::after { inset:20px; border-radius:8px; }
body.intro-active main,body.intro-active .float-menu { visibility:hidden; }
.hero { padding:80px 32px 70px; min-height:920px; color:var(--hero-paper); background:linear-gradient(180deg,var(--ink),#231626 39%,#99738d 72%,var(--color-superficie,var(--surface))); }
.hero__top { position:relative; z-index:2; width:100%; }
.hero__eyebrow { margin:0 0 32px; color:var(--hero-paper); font:500 .9rem var(--serif); letter-spacing:.25em; text-transform:uppercase; }
.xv-hero__art { display:block; width:min(80%,370px); height:auto; margin:0 auto 24px; }
.hero__pretitle { margin:0 0 .7rem; font:500 .59rem var(--condensed); letter-spacing:.3em; }
.hero__title { margin:0; color:var(--hero-paper); font:400 clamp(3.1rem,14vw,6.4rem)/1.1 var(--serif); letter-spacing:-.035em; overflow-wrap:anywhere; }
.hero__tagline { max-width:28ch; margin:1.4rem auto 0; font:500 1.08rem/1.55 var(--sans); }
.hero__bottom { position:relative; z-index:2; width:100%; margin-top:62px; color:var(--paper); }
.print-rule { display:flex; align-items:center; justify-content:center; gap:1rem; margin:0 auto 1.3rem; color:var(--paper); }
.print-rule::before,.print-rule::after { content:""; width:55px; height:1px; background:currentColor; opacity:.5; }
.hero__event-date { font:500 clamp(1.4rem,5vw,1.9rem)/1.3 var(--serif); }
.hero__event-date p { margin:0; }
.hero__event-date p+p { margin-top:.6rem; font:500 .75rem var(--condensed); letter-spacing:.1em; }
.hero__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; margin:1.6rem auto .8rem; }
.hero__actions .button { font-size:.62rem; }
.hero__scroll { display:inline-block; font:500 .65rem var(--condensed); letter-spacing:.06em; padding:.6rem 1rem; text-decoration:none; }
.hero__scroll span { margin-left:.5rem; }
.xv-blooms { position:absolute; width:280px; height:auto; pointer-events:none; user-select:none; }
.xv-blooms--top { top:-75px; right:-110px; transform:rotate(-25deg); opacity:.4; }
.intro { position:fixed; z-index:20; inset:0; display:grid; place-items:center; overflow:auto; background:radial-gradient(ellipse at 50% 45%,#3c2538,#0c090e 75%); transition:opacity .65s,visibility .65s; color:var(--hero-paper); }
.intro.is-gone { opacity:0; visibility:hidden; pointer-events:none; }
.intro__stage { display:flex; flex-direction:column; align-items:center; width:min(90%,560px); padding:2.5rem 0; text-align:center; }
.intro__stage>.eyebrow { color:var(--hero-paper); margin:0 0 1rem; }
.intro__stage h2 { margin:0 0 1.6rem; font:400 clamp(2.8rem,12vw,4rem)/1.2 var(--serif); color:var(--hero-paper); overflow-wrap:anywhere; }
.fold-invitation { position:relative; isolation:isolate; width:min(78vw,350px); aspect-ratio:4/5; padding:0; border:1px solid #a780994d; background:#b692a7; cursor:pointer; }
.fold-invitation__inside { position:absolute; inset:14px; display:grid; place-content:center; gap:1.2rem; border:1px solid #4f304b60; color:#2d1a2c; font:400 2rem var(--serif); }
.fold-invitation__inside span+span { font:500 .8rem var(--condensed); letter-spacing:.08em; }
.fold-leaf { position:absolute; z-index:2; top:0; bottom:0; width:50%; background:linear-gradient(145deg,#211320,#51344b); backface-visibility:hidden; transition:transform .85s cubic-bezier(.2,.7,.25,1) .18s; }
.fold-leaf::after { content:""; position:absolute; inset:12px; border:1px solid #bca0b34d; }
.fold-leaf--left { left:0; transform-origin:0 50%; transform:perspective(1100px) rotateY(0); border-right:1px solid #a7809955; }
.fold-leaf--right { right:0; transform-origin:100% 50%; transform:perspective(1100px) rotateY(0); }
.intro__art { position:absolute; z-index:3; top:12%; left:50%; transform:translateX(-50%); width:75%; height:auto; transition:opacity .18s; pointer-events:none; }
.fold-seal { position:absolute; z-index:4; left:50%; top:66%; transform:translate(-50%,-50%); display:grid; place-items:center; width:60px; height:60px; background:#b998ad; border:1px solid #e2c5d69c; border-radius:50%; color:#231220; transition:opacity .2s; }
.fold-seal svg { width:40px; height:40px; fill:#231220; stroke:#8b6e80; stroke-width:1; }
.intro__hint { margin:1.8rem 0 .7rem; font:500 .65rem var(--condensed); letter-spacing:.13em; }
.intro__skip { min-height:44px; border:1px solid #e2c5d640; background:transparent; color:var(--hero-paper); border-radius:2px; font:500 .65rem var(--condensed); padding:.6rem 1rem; cursor:pointer; }
.intro.is-opening .fold-leaf--left { transform:perspective(1100px) rotateY(-145deg); }
.intro.is-opening .fold-leaf--right { transform:perspective(1100px) rotateY(145deg); }
.intro.is-opening .intro__art,.intro.is-opening .fold-seal { opacity:0; }
/* Menú flotante y selección de apartados estándar. */
.float-menu { position: fixed; z-index: 15; left: max(.75rem, env(safe-area-inset-left)); top: 1rem; }
.float-menu__toggle { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fbf3f8f5; color: var(--paper); cursor: pointer; font: 600 .75rem var(--condensed); letter-spacing: .15em; text-transform: uppercase; }
.menu-icon { display: grid; gap: 5px; width: 16px; }
.menu-icon i { height: 1px; background: var(--accent); }
.menu-chevron { font-size: 1rem; line-height: 1; transition: transform .2s; }
.float-menu__toggle[aria-expanded=true] .menu-chevron { transform: rotate(180deg); }
.float-menu__panel { position: absolute; top: calc(100% + .6rem); left: 0; width: min(18.5rem, calc(100vw - 1.5rem)); max-height: min(80svh, 42rem); overflow: auto; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: #f8edf5fc; }
.float-menu__heading { display: flex; justify-content: space-between; margin: 0 0 .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); font: 600 .9rem var(--condensed); letter-spacing: .08em; color: var(--accent); }
.float-menu__hint { margin: 0 0 .65rem; font-size: .69rem; color: var(--muted); }
#menuLinks { display: grid; }
.float-menu__row { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; border-bottom: 1px solid var(--line); }
.float-menu__link { display: flex; align-items: center; gap: .6rem; padding: .72rem .35rem; border-radius: 5px; color: var(--champagne); text-decoration: none; font-size: .77rem; }
.float-menu__link.is-current { background: #6b425e16; }
.float-menu__link.is-cta { background: var(--gold); color: #fbf3f8; font-weight: 600; }
.float-menu__link.is-cta.is-current { outline: 1px solid var(--accent); outline-offset: -1px; }
.float-menu__link[aria-disabled=true] { color: var(--muted); text-decoration: line-through; }
.menu-section-icon { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.is-cta .menu-section-icon { stroke: #fbf3f8; }
.section-visibility { position: relative; display: grid; place-items: center; width: 44px; height: 36px; }
.section-visibility__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.section-visibility__track { position: relative; width: 36px; height: 21px; border: 1px solid var(--line); border-radius: 99px; background: #c5adbe; pointer-events: none; }
.section-visibility__track span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #a78ba0; transition: transform .2s; }
.section-visibility:has(input:checked) .section-visibility__track { background: var(--gold); border-color: var(--accent); }
.section-visibility:has(input:checked) .section-visibility__track span { transform: translateX(15px); background: #f8edf5; }
.section-visibility:has(input:disabled) { opacity: .5; }
.section-visibility input:focus-visible + .section-visibility__track { outline: 2px solid var(--accent); outline-offset: 4px; }
.menu-demo-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; padding: .8rem 0 .2rem; font-size: .69rem; color: var(--muted); }
.menu-demo-footer p { margin: 0; }
.menu-demo-footer > button { border: 0; border-bottom: 1px solid var(--gold); padding: .3rem 0; background: none; color: var(--accent); cursor: pointer; font-size: .7rem; }
.menu-demo-footer .button { flex-basis: 100%; font-size: .7rem; }
.float-menu__close { display: flex; justify-content: space-between; width: 100%; margin-top: .5rem; min-height: 40px; padding: .7rem 0; border: 0; background: none; color: var(--muted); font-size: .73rem; cursor: pointer; }
.float-menu__close span { font-size: 1.2rem; line-height: 1; }
.ambience-control { width: 100%; margin-top: .65rem; text-align: left; }
.float-music { position: fixed; top: 1rem; right: max(.75rem, env(safe-area-inset-right)); display: flex; gap: .4rem; align-items: center; min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #f8edf5fc; color: var(--accent); font-size: .72rem; cursor: pointer; }
.menu-tip { position: absolute; top: calc(100% + 12px); left: 0; width: min(17rem, calc(100vw - 1.5rem)); padding: .8rem; border: 0; border-radius: 8px; background: var(--accent); color: #fbf3f8; font-size: .72rem; cursor: pointer; }
.oc-hidden, .oc-demo-off { display: none !important; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem max(1.5rem, calc((100vw - 640px)/2)); border-top: 1px solid var(--line); color: var(--muted); font: 600 .75rem var(--condensed); letter-spacing: .08em; }
.footer a { text-decoration: none; font-size: 1.2rem; color: var(--gold); }

.float-menu__toggle,.float-menu__heading,.float-menu__link,.float-music { font-family:var(--condensed); }
.float-menu__toggle,.float-music { font-size:.7rem; }
.float-music,.float-menu__heading,.menu-demo-footer>button { color:var(--gold); }
.menu-icon i { background:var(--gold); }
.menu-tip { background:var(--gold); color:#fbf3f8; }
.section-visibility input:focus-visible + .section-visibility__track { outline-color:var(--gold); }
.float-menu__link { color:var(--paper); font-size:.73rem; }
.float-menu__link.is-cta { color:#fbf3f8; }
.float-menu__link.is-cta svg { stroke:#fbf3f8; }
.footer { position:relative; z-index:1; min-height:290px; flex-direction:column; justify-content:center; padding:4rem 3rem; text-align:center; border-color:var(--line); font:500 1rem/1.6 var(--sans); }
.footer p { position:relative; z-index:2; max-width:27ch; }
.xv-blooms--footer { z-index:0; width:250px; left:-120px; bottom:-50px; transform:rotate(20deg); opacity:.38; }
.ambience-control { min-height:40px; padding:.6rem .8rem; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--paper); font:500 .7rem var(--condensed); }
@media(min-width:880px) { .paper-invitation { margin:32px auto; } }
@media(max-width:360px) { .hero { padding:74px 27px 58px; min-height:840px; } .hero__title { font-size:3rem; } .hero__actions .button { padding:.7rem .6rem; font-size:.57rem; } }
@media(max-height:560px) and (orientation:landscape) { .intro__stage { flex-flow:row wrap; justify-content:center; gap:1rem; padding:1rem; } .intro__stage>.eyebrow { width:100%; margin:0; } .intro__stage h2 { font-size:2rem; margin:0; } .fold-invitation { width:160px; } .intro__hint { margin:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; animation:none!important; } }