/* Invitación pública. Todo se pinta con las variables de la skin (ver render.php) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.inv{margin:0;background:var(--bg);color:var(--text);font-family:var(--fb);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.inv-wrap{max-width:480px;margin:0 auto;background:var(--bg);position:relative;overflow:hidden;min-height:100vh}
@media(min-width:700px){body.inv{background:color-mix(in srgb,var(--bg) 86%,#000)}.inv-wrap{box-shadow:0 0 60px rgba(0,0,0,.14)}}
img{max-width:100%}
a{color:inherit}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* Portada */
.cover{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--bg);container-type:inline-size;color:var(--text)}
.cover-txt{position:relative;z-index:1;padding:80px 28px;width:100%}
.tagline{font-family:var(--fb);text-transform:uppercase;letter-spacing:.3em;font-size:12px;margin:0 0 14px;opacity:.85}
.names{font-family:var(--fh);font-weight:400;font-size:clamp(52px,24cqw,118px);line-height:1.02;margin:.1em 0 .2em}
.names .n1,.names .n2{display:block}
.names .amp{display:block;font-size:.5em;opacity:.8;line-height:1}
.date{font-family:var(--fb);letter-spacing:.22em;text-transform:uppercase;font-size:13px;margin:16px 0}
.guest-greet{font-size:14px;margin:12px 0}
.scroll-hint{display:inline-block;margin-top:18px;text-decoration:none;font-size:22px;opacity:.7;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.cover-photo{margin:0 auto 18px;width:58%;max-width:240px}
.cover-photo img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.cover-photo-arch img{border-radius:999px 999px 14px 14px}
.cover-center .cover-photo img{border-radius:50%;aspect-ratio:1}
.cover-photo-bg{color:#fff}
.cover-photo-bg{background-size:cover;background-position:center}
.cover-photo-top{flex-direction:column;justify-content:flex-start}
.cover-photo-top .cover-photo{width:100%;max-width:none;margin:0}
.cover-photo-top .cover-photo img{aspect-ratio:4/5;border-radius:0 0 40% 40%/0 0 12% 12%}
.cover-photo-top .cover-txt{padding-top:28px}
.cover-art{text-shadow:none}
.cover-art .names{font-size:clamp(56px,26cqw,128px)}

/* Bloques */
.blk{position:relative;padding:60px 26px;text-align:center}
.blk-notice,.blk-cover,.blk-music{padding:0}
.blk-title{font-family:var(--fh);font-weight:400;font-size:clamp(32px,9vw,44px);line-height:1.15;margin:0 0 14px}
.blk-intro{margin:0 auto 22px;max-width:36ch;color:var(--muted)}
.sep{display:block;width:150px;height:22px;margin:16px auto;color:var(--accent2)}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.scroll-hint,.music-btn.playing{animation:none}}
.small-note{font-size:13px;color:var(--muted)}
.notice-bar{background:var(--accent);color:var(--on-accent);padding:12px 18px;text-align:center;font-weight:500;font-size:14px}

/* Botones y formularios */
.btn{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.7em 1.5em;font:500 14px/1.2 var(--fb);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:transform .2s,opacity .2s}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn:focus-visible,.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible,.copy:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.btn-ghost{background:transparent;color:var(--text)}
.btn-solid{padding:.85em 1.8em}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.form{text-align:left;max-width:380px;margin:0 auto;display:grid;gap:14px}
.form label{display:grid;gap:5px;font-size:13px;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;padding:.7em .9em;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:400 16px var(--fb)}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.form legend{font-size:13px;color:var(--muted);margin-bottom:4px}
.form .choice label{display:flex;gap:10px;align-items:center;color:var(--text);font-size:15px}
.form .choice input{width:auto}
.form .btn{justify-self:center}
.form-msg{margin:0;min-height:1.4em;text-align:center;font-size:14px}
.form-msg.err{color:#B3423A}.form-msg.ok{color:inherit;font-weight:500}
.rsvp-form.done .yes-only,.rsvp-form.no .yes-only{display:none}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin:16px auto;max-width:380px;text-align:left}
.card h3{font-family:var(--fh);font-weight:400;font-size:24px;margin:0 0 6px}

/* Lugar, cuenta regresiva, itinerario */
.place-photo{width:100%;border-radius:16px;margin-bottom:18px;aspect-ratio:16/9;object-fit:cover}
.place-name{font-family:var(--fh);font-weight:400;font-size:28px;margin:6px 0}
.place-addr{margin:0;color:var(--muted)}
.place-when{margin:12px 0 0}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:340px;margin:0 auto}
.countdown div{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 4px}
.countdown b{display:block;font:400 34px/1 var(--fh)}
.countdown span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.countdown.done{display:block;font:400 28px var(--fh)}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:340px;text-align:left;border-left:1px solid var(--accent2)}
.timeline li{display:flex;gap:16px;padding:10px 0 10px 18px;position:relative}
.timeline li::before{content:"";position:absolute;left:-5px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.timeline b{font-family:var(--fh);font-weight:500;font-size:20px;min-width:52px}
.timeline small{display:block;color:var(--muted)}

/* Galería y video */
.gallery{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
.g-item{display:block;border-radius:12px;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1}
.g-masonry{display:block;column-count:2;column-gap:8px}.g-masonry .g-item{margin-bottom:8px;break-inside:avoid}.g-masonry img{aspect-ratio:auto}
.g-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -26px;padding:0 26px;scrollbar-width:none}.g-carousel .g-item{flex:0 0 78%;scroll-snap-align:center}.g-carousel img{aspect-ratio:4/5}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:200;display:grid;place-items:center;padding:16px}.lightbox img{max-height:92vh;border-radius:8px}
.video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.video img,.video iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.video button{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:22px;cursor:pointer}
.video-file{width:100%;border-radius:16px}

/* Dress code, regalos, info, libro */
.swatch-label{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:18px 0 8px}
.swatches{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.swatch{display:grid;gap:4px;justify-items:center;font-size:11px;color:var(--muted)}
.swatch i{width:44px;height:44px;border-radius:50%;border:1px solid var(--border)}
.swatch.avoid i{position:relative}.swatch.avoid i::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 47%,#B3423A 47% 53%,transparent 53%)}
.bank-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-bottom:1px dashed var(--border)}.bank-row:last-child{border:0}
.bank-row span{font-size:12px;color:var(--muted);min-width:76px}.bank-row b{font-weight:500;word-break:break-all;flex:1}
.copy{border:1px solid var(--accent);background:transparent;color:var(--text);border-radius:999px;padding:.3em .9em;font:500 12px var(--fb);cursor:pointer}
.copy.ok{background:var(--accent);color:var(--on-accent)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.chip{border:1px solid var(--border);border-radius:999px;padding:.25em .9em;font-size:14px}
.wishlist{list-style:none;padding:0;margin:18px auto;max-width:380px;text-align:left}
.wishlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.wishlist em{font-size:13px;color:var(--muted)}
.wishlist .btn{padding:.4em 1em;font-size:13px}
.info-list{display:grid;gap:12px}
.gb-list{margin:26px auto 0;max-width:380px;display:grid;gap:14px;text-align:left}
.gb-list blockquote{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px}.gb-list p{margin:0 0 6px}.gb-list cite{font-size:13px;color:var(--muted)}
.table-res{text-align:center;font-size:15px}.table-res b{font:400 24px var(--fh)}
.inv-foot{padding:30px 20px 50px;text-align:center;font-size:12px;color:var(--muted)}.inv-foot a{text-decoration:none}
.sub-page{min-height:70vh;padding-top:50px}.back{margin-top:40px}
@media print{.opener,.music-btn,.back,.no-print,.demo-bar{display:none!important}body.inv{background:#fff}.inv-wrap{box-shadow:none;max-width:none}}

/* Música */
.music-btn{position:fixed;right:16px;bottom:16px;z-index:60;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:20px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.music-btn.playing{animation:spin 6s linear infinite}.music-btn.muted{opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}

/* Apertura */
body.has-opener:not(.opened){overflow:hidden}
.opener{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;text-align:center;transition:opacity .9s ease,visibility .9s}
.opener.gone{opacity:0;visibility:hidden}
.opener-btn{position:relative;z-index:2;background:none;border:0;color:var(--text);cursor:pointer;font-family:var(--fb);padding:30px;display:grid;gap:14px;justify-items:center}
.opener-names{font-family:var(--fh);font-size:clamp(40px,13vw,64px);line-height:1.05}.opener-names i{font-style:normal;opacity:.7}
.opener-guest{font-size:15px}
.opener-label{font-size:12px;letter-spacing:.28em;text-transform:uppercase;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.env{position:relative;width:240px;height:156px;display:block;margin-bottom:8px;perspective:600px}
.env-body{position:absolute;inset:0;background:var(--env);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.16)}
.env-body::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49%,rgba(0,0,0,.05) 50%),linear-gradient(to top left,transparent 49%,rgba(0,0,0,.05) 50%);border-radius:6px}
.env-flap{position:absolute;left:0;top:0;width:0;height:0;border-left:120px solid transparent;border-right:120px solid transparent;border-top:92px solid color-mix(in srgb,var(--env) 86%,#000);transform-origin:50% 0;transition:transform .8s ease;z-index:2}
.env-seal{position:absolute;left:50%;top:88px;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:15px;z-index:3;transition:opacity .4s}
.opener.opening .env-flap{transform:rotateX(180deg)}.opener.opening .env-seal{opacity:0}
.opener-curtain,.opener-fade{background:var(--bg)}
.opener-curtain{background:transparent}
.curt{position:absolute;top:0;bottom:0;width:50.5%;background:var(--accent);transition:transform 1.1s cubic-bezier(.7,0,.2,1);z-index:1}
.curt-l{left:0}.curt-r{right:0}
.opener-curtain .opener-btn{color:var(--on-accent)}
.opener-curtain.opening .curt-l{transform:translateX(-101%)}.opener-curtain.opening .curt-r{transform:translateX(101%)}
.opener-curtain.opening .opener-btn{opacity:0;transition:opacity .4s}
.demo-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:rgba(255,255,255,.96);color:#3A3631;font:14px Inter,sans-serif;box-shadow:0 -4px 20px rgba(0,0,0,.1)}
.demo-bar a{background:#8A9A86;color:#fff;border-radius:999px;padding:.55em 1.2em;text-decoration:none;font-weight:500}

/* ===== Layouts ===== */
.ly-clasica .blk-title{font-style:normal}
.ly-moderna .blk-title{font-family:var(--fb);text-transform:uppercase;letter-spacing:.18em;font-size:15px;font-weight:600;margin-bottom:22px}
.ly-moderna .btn{border-radius:4px;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.ly-moderna .card,.ly-moderna .countdown div,.ly-moderna .g-item,.ly-moderna .place-photo,.ly-moderna .video{border-radius:4px}
.ly-moderna .place-name{font-family:var(--fb);font-weight:500;font-size:22px;letter-spacing:.04em}
.ly-moderna .countdown b{font-family:var(--fb);font-weight:300;font-size:32px}
.ly-infantil .blk{margin:14px 12px;border-radius:28px;background:var(--surface);padding:44px 20px;box-shadow:0 6px 0 var(--border)}
.ly-infantil .blk-cover,.ly-infantil .blk-notice,.ly-infantil .blk-music{background:none;box-shadow:none;margin:0;border-radius:0;padding:0}
.ly-infantil .blk-title{font-size:clamp(30px,8.5vw,40px);color:var(--accent)}
.ly-infantil .btn{box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000);font-weight:600}
.ly-infantil .btn-ghost{box-shadow:none;border-width:2px}
.ly-infantil .countdown div{border-radius:20px;border:2px solid var(--accent2)}
.ly-infantil .card,.ly-infantil .form input,.ly-infantil .form select,.ly-infantil .form textarea{border-radius:18px}
.ly-infantil .inv-wrap,.ly-infantil{background:var(--bg)}