/* Estilos del renderizador de invitaciones. Todo el color/tipografía proviene de variables CSS del diseño. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);color:var(--text);font-family:var(--fb);line-height:1.6;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fh);font-weight:600;line-height:1.15;margin:0}
p{margin:0 0 1rem}
.inv{max-width:760px;margin:0 auto;background:transparent}
.mode-preview .inv,.mode-editor .inv,.mode-demo .inv,.mode-public .inv{box-shadow:0 0 60px rgba(0,0,0,.08)}

/* Banner de vista previa */
.preview-banner{position:sticky;top:0;z-index:60;background:#1f2937;color:#fff;text-align:center;font:600 13px/1.3 system-ui,sans-serif;padding:9px 12px;letter-spacing:.02em}

/* Secciones */
.sec{position:relative;background-color:var(--sbg,transparent);color:var(--sfg,var(--text));font-family:var(--sfb,var(--fb));font-size:calc(1rem * var(--sscale,1));font-weight:var(--sweight,400);padding:var(--spy,64px) var(--spx,22px);isolation:isolate;overflow:hidden}
.sec h1,.sec h2,.sec h3{font-family:var(--sfh,var(--fh))}
.sec__bg{position:absolute;inset:0;background-size:cover;z-index:-2}
.sec__ov{position:absolute;inset:0;z-index:-1}
.sec__inner{position:relative;max-width:560px;margin:0 auto}
.sec__title{font-size:calc(2rem * var(--sscale,1));margin-bottom:.4rem;color:var(--primary)}
.sec[style*="--sfg"] .sec__title{color:inherit}
.orn{width:200px;height:20px;margin:6px auto 22px;opacity:.95}
.sec[style*="text-align:left"] .orn{margin-left:0}
.sec[style*="text-align:right"] .orn{margin-right:0;margin-left:auto}
.hs-caps .sec__title{text-transform:uppercase;letter-spacing:.18em;font-size:calc(1.5rem * var(--sscale,1))}
.hs-underline .sec__title{display:inline-block;border-bottom:3px solid var(--accent);padding-bottom:6px}
.hs-ribbon .sec__title{display:inline-block;background:var(--primary);color:#fff;padding:.35em 1.2em;border-radius:calc(var(--radius) * .6);font-size:calc(1.4rem * var(--sscale,1))}
.cs-card .sec__inner{background:rgba(255,255,255,.72);border-radius:var(--radius);padding:30px 22px;box-shadow:0 10px 30px rgba(0,0,0,.07)}
.cs-bordered .sec__inner{border:1.5px solid var(--accent);border-radius:var(--radius);padding:30px 22px;outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:6px}
.cs-glass .sec__inner{background:rgba(255,255,255,.35);backdrop-filter:blur(6px);border-radius:var(--radius);padding:30px 22px;border:1px solid color-mix(in srgb,var(--bg) 70%,transparent)}
.lead{font-size:1.18em;font-style:italic}
.muted{opacity:.7;font-size:.92em}
.author,.signature{font-family:var(--sfh,var(--fh));font-size:1.4em;color:var(--primary)}
.big-date{font-family:var(--sfh,var(--fh));font-size:1.7em;margin-bottom:.1em}
.big-time{font-size:1.2em;font-weight:600;letter-spacing:.03em}
.place{font-size:1.5em;margin:.4rem 0}

/* Botones */
.btn-inv,.btn-alt{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:46px;padding:.7em 1.6em;font:600 .95rem var(--sfb,var(--fb));letter-spacing:.04em;text-decoration:none;border:2px solid var(--btn-bg,var(--primary));background:var(--btn-bg,var(--primary));color:var(--btn-fg,#fff);border-radius:calc(var(--radius) * .6);cursor:pointer;transition:transform .2s,box-shadow .2s;margin:.3rem .2rem}
.btn-inv:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-pill .btn-inv,.btn-pill .btn-alt{border-radius:999px}
.btn-outline .btn-inv,.btn-alt{background:transparent;color:var(--btn-bg,var(--primary))}
.btn-soft .btn-inv{background:color-mix(in srgb,var(--btn-bg,var(--primary)) 16%,transparent);color:var(--btn-bg,var(--primary));border-color:transparent}
.btn-inv:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Portada */
.sec--cover{padding:0;min-height:100svh;display:flex;color:#fff;--sfg:#fff}
.sec--cover .sec__inner{max-width:none;width:100%;display:flex;flex-direction:column;position:static}
.cover__media{position:absolute;inset:0;z-index:-2}
.cover__img,.cover__video{width:100%;height:100%;object-fit:cover}
.sec--cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));z-index:-1}
.cover__text{margin:auto;padding:80px 26px;text-align:center;max-width:560px;position:relative}
.cover__eyebrow{letter-spacing:.35em;text-transform:uppercase;font-size:.8rem;opacity:.95}
.cover__names{font-size:clamp(2.6rem,11vw,4.6rem);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.cover__sub{margin-top:.8rem;font-size:1.1rem;opacity:.95}
.cover__date{margin-top:1.1rem;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;border-top:1px solid color-mix(in srgb,var(--bg) 72%,transparent);padding-top:.9rem;display:inline-block}
.cover__guest{margin-top:.8rem;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:.5em 1em;border-radius:99px;display:inline-block;font-size:.9rem}
.scroll-hint{display:block;font-size:2rem;animation:bob 1.8s infinite}
@keyframes bob{50%{transform:translateY(8px)}}
.cover--split{display:block;color:var(--text);min-height:0}
.cover--split::after{display:none}
.cover--split .sec__inner{display:block}
.cover--split .cover__media{position:relative;height:62svh;inset:auto}
.cover--split .cover__media{border-bottom-left-radius:50% 40px;border-bottom-right-radius:50% 40px;overflow:hidden}
.cover--split .cover__text{padding:30px 24px 60px}
.cover--split .cover__names{color:var(--primary);text-shadow:none}
.cover--split .cover__date{border-color:var(--accent)}
.cover--split{--sfg:var(--text)}
.cover--arch{display:block;min-height:100svh;color:var(--text);--sfg:var(--text)}
.cover--arch::after{display:none}
.cover--arch .sec__inner{display:block}
.cover--arch .cover__media{position:relative;inset:auto;width:min(78%,360px);aspect-ratio:3/4;margin:56px auto 0;border-radius:999px 999px 18px 18px;overflow:hidden;border:6px solid #fff;box-shadow:0 18px 40px rgba(0,0,0,.18);z-index:0}
.cover--arch .cover__names{color:var(--primary);text-shadow:none}
.cover--arch .cover__text{padding:28px 24px 64px}
.cover--frame{display:block;min-height:100svh;color:var(--text);--sfg:var(--text);padding:22px}
.cover--frame::after{display:none}
.cover--frame .sec__inner{border:2px solid var(--accent);outline:1px solid var(--accent);outline-offset:-10px;min-height:calc(100svh - 44px);display:flex;padding:20px}
.cover--frame .cover__media{position:relative;inset:auto;width:min(70%,280px);aspect-ratio:1/1;margin:34px auto 0;border-radius:50%;overflow:hidden;border:5px solid var(--bg);box-shadow:0 0 0 2px var(--accent);z-index:0}
.cover--frame .sec__inner{flex-direction:column}
.cover--frame .cover__names{color:var(--primary);text-shadow:none}
.cover--side::after{background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.05) 65%)}
.cover--side .cover__text{margin:auto 0 0;text-align:left;padding:0 26px 70px}
.cover--side .cover__names{font-size:clamp(2.4rem,10vw,4rem)}

/* Contenidos */
.cd{display:flex;gap:10px;justify-content:center;margin:18px 0}
.cd__box{min-width:68px;padding:12px 6px;border-radius:calc(var(--radius) * .7);background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);backdrop-filter:blur(3px)}
.cd__box b{display:block;font:700 1.9rem var(--sfh,var(--fh));color:var(--primary)}
.cd__box span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.cd__done{font:600 1.5rem var(--sfh,var(--fh));color:var(--primary)}
.fam-grid{display:grid;gap:18px;margin-top:14px}
.fam h3{font-size:1.15rem;color:var(--primary);margin-bottom:.3rem}
.story{display:grid;gap:20px;align-items:center}
.story__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.story--left,.story--right{grid-template-columns:1fr 1fr;text-align:left}
.story--right .story__fig{order:2}
@media(max-width:480px){.story--left,.story--right{grid-template-columns:1fr}.story--right .story__fig{order:0}}
.venue__img,.dress__img,.closing__img{width:100%;object-fit:cover;border-radius:var(--radius);margin-bottom:1rem}
.dress__img{max-width:240px;margin-inline:auto}
.map{margin-top:18px;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.map iframe{width:100%;height:100%;border:0}
.prog{list-style:none;padding:0;margin:20px 0 0;text-align:left}
.prog li{display:flex;gap:14px;padding:12px 0;align-items:flex-start}
.prog time{font:700 1.05rem var(--sfh,var(--fh));color:var(--primary);min-width:62px}
.prog b{display:block}.prog span{display:block;font-size:.9em;opacity:.8}
.prog--timeline li{border-left:2px solid var(--accent);padding-left:16px;margin-left:8px;position:relative}
.prog--timeline li::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.prog--cards li{background:color-mix(in srgb,var(--bg) 72%,transparent);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.prog--list li{border-bottom:1px dashed color-mix(in srgb,var(--text) 30%,transparent)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
.g-item{margin:0;position:relative;overflow:hidden;border-radius:calc(var(--radius) * .6);cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.g-item:hover img{transform:scale(1.05)}
.g-item figcaption{position:absolute;inset:auto 0 0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);color:#fff;font-size:.8rem;padding:18px 8px 6px}
.gallery--mosaic{grid-auto-rows:120px;grid-auto-flow:dense;grid-template-columns:repeat(3,1fr)}
.gallery--mosaic .g-wide{grid-column:span 2;grid-row:span 2}.gallery--mosaic .g-tall{grid-row:span 2}.gallery--mosaic .g-one{grid-row:span 1}
.gallery--carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery--carousel .g-item{flex:0 0 82%;scroll-snap-align:center}
.car-nav{display:flex;justify-content:center;gap:12px;margin-top:10px}
.car-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--accent);background:transparent;font-size:1.4rem;color:var(--primary);cursor:pointer}
.vid{width:100%;aspect-ratio:16/9;border-radius:var(--radius);background:#111 center/cover;margin-top:14px;position:relative;overflow:hidden;border:0}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--primary);font-size:1.6rem;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.swatches{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:14px}
.sw{text-align:center;font-size:.8rem}.sw i{display:block;width:54px;height:54px;border-radius:50%;margin:0 auto 6px;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.gifts{display:grid;gap:10px;margin-top:14px}
.gift{background:color-mix(in srgb,var(--bg) 72%,transparent);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:2px;text-align:left}
.gift .copy{cursor:copy;word-break:break-all;color:var(--primary)}.gift a{color:var(--primary)}
.faq details{background:color-mix(in srgb,var(--bg) 72%,transparent);border-radius:calc(var(--radius) * .7);margin-bottom:8px;padding:12px 16px;text-align:left}
.faq summary{font-weight:600;cursor:pointer}.faq p{margin:.6rem 0 0}
.btns{margin-top:10px}
.credit{font-size:.75rem;opacity:.65}
.sec--footer{padding-block:32px;font-size:.9rem}

/* RSVP */
.rsvp{text-align:left;display:grid;gap:12px;margin-top:14px}
.rsvp .f{display:grid;gap:5px;font-size:.9rem;font-weight:600}
.rsvp input:not([type=radio]):not([type=checkbox]),.rsvp select,.rsvp textarea{width:100%;padding:12px 14px;border:1.5px solid color-mix(in srgb,var(--text) 25%,transparent);border-radius:calc(var(--radius) * .6);background:#fff;font:400 1rem var(--fb);color:#222}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice label{cursor:pointer}.choice input{position:absolute;opacity:0}
.choice span{display:block;text-align:center;padding:13px 8px;border:2px solid var(--primary);border-radius:calc(var(--radius) * .6);font-weight:600;color:var(--primary);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.choice input:checked+span{background:var(--primary);color:#fff}
.choice input:focus-visible+span{outline:3px solid var(--accent)}
.chk{font-size:.85rem;display:flex;gap:8px;align-items:flex-start}
.hp{position:absolute!important;left:-9999px;opacity:0}
.rsvp__msg{padding:12px 14px;border-radius:12px;font-weight:600;margin:0}
.rsvp__msg.ok{background:#e7f6ec;color:#1b6b3a}.rsvp__msg.err{background:#fde8e8;color:#9b1c1c}
.rsvp__for{margin:0}
.notice{background:color-mix(in srgb,var(--bg) 80%,transparent);border:1px dashed var(--accent);border-radius:var(--radius);padding:16px;font-size:.95rem}
.rsvp[hidden],[hidden]{display:none!important}

/* Entrada y música */
.gate{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--primary) 78%,#000),color-mix(in srgb,var(--primary) 40%,#000));color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;transition:opacity .7s,visibility .7s}
.gate.gone{opacity:0;visibility:hidden}
.gate__names{font-size:clamp(2.2rem,9vw,3.6rem);color:#fff;margin:.4rem 0 1.2rem}
.gate__for{letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;opacity:.9}
.gate .btn-inv{--btn-bg:#fff;--btn-fg:var(--primary)}
body.locked{overflow:hidden}
.bgm-btn{position:fixed;right:14px;bottom:14px;z-index:70;width:48px;height:48px;border-radius:50%;border:0;background:var(--primary);color:#fff;font-size:1.3rem;box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer}
.bgm-btn .off{display:none}.bgm-btn.muted .on{display:none}.bgm-btn.muted .off{display:inline}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.lightbox img{max-height:92vh;max-width:96vw;object-fit:contain;border-radius:8px}

/* Animaciones de entrada */
.anim-rise .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.anim-fade .reveal{opacity:0;transition:opacity 1s ease}
.anim-zoom .reveal{opacity:0;transform:scale(.94);transition:opacity .8s ease,transform .8s ease}
.reveal.in,.mode-editor .reveal{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}.scroll-hint{animation:none}html{scroll-behavior:auto}}
.mode-editor .sec{cursor:pointer}
.mode-editor .sec.is-selected{outline:3px solid #2563eb;outline-offset:-3px}
.mode-editor .gate{display:none}
.swatches--reserved .sw i{position:relative}.swatches--reserved .sw i::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(45deg,transparent 46%,#c0392b 46%,#c0392b 54%,transparent 54%)}