/* Convite do Casal — convite v2. Cores vêm de --i-bg / --i-ink / --i-gold (tema ou paleta do casal); o resto deriva. */
.cv{
  --i-bg:#f7f3ea; --i-ink:#39412f; --i-gold:#ad8c50;
  --i-soft:color-mix(in srgb, var(--i-ink) 62%, var(--i-bg));
  --i-rule:color-mix(in srgb, var(--i-ink) 22%, var(--i-bg));
  --i-card:color-mix(in srgb, var(--i-bg) 82%, white);
  --i-serif:"Cormorant Garamond",Georgia,serif; --i-script:"Pinyon Script",cursive; --i-sans:"Figtree",system-ui,sans-serif;
  position:relative; overflow:hidden; min-height:100%; box-sizing:border-box;
  background:var(--i-bg); color:var(--i-ink); font-family:var(--i-serif); text-align:center;
}
.cv *{box-sizing:border-box}
.cv:not(.opened){height:100%; overflow:hidden}
.cv.t-noite{--i-serif:"Playfair Display",Georgia,serif; --i-card:color-mix(in srgb, var(--i-bg) 80%, white)}
.cv.t-noite::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--i-gold) 18%, transparent) 0%, transparent 60%); pointer-events:none}
.cv.t-classico{--i-serif:"Cormorant Garamond",Georgia,serif}
.cv.t-classico .names, .cv.t-classico .cover-names{font-family:"Cinzel",serif; letter-spacing:.06em; font-weight:500; font-size:clamp(1.5rem,7.5vw,2.1rem)}
.cv.t-praia{background:linear-gradient(180deg, var(--i-bg) 0%, color-mix(in srgb, var(--i-bg) 88%, #9fc4c0) 100%)}
.cv .fx{position:absolute; inset:0; pointer-events:none; z-index:0}
.cv>*{position:relative; z-index:1}
/* ---------- capa ---------- */
.cv .cover{position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:28px;
  background:linear-gradient(160deg, var(--i-bg), color-mix(in srgb, var(--i-bg) 70%, var(--i-gold)));
  background-size:cover; background-position:center; transition:opacity .9s ease, transform .9s ease, visibility 0s linear .9s}
.cv .cover.has-photo{color:#fff}
.cv .cover.has-photo::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.62))}
.cv .cover-in{position:relative; max-width:320px; animation:cv-fade 1.2s ease both}
.cv .ring{width:92px; height:92px; margin:0 auto 18px; border:1px solid currentColor; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--i-serif); font-size:1.6rem; letter-spacing:.06em; color:var(--i-gold); position:relative}
.cv .cover.has-photo .ring{color:#f3e6c4}
.cv .ring::after{content:""; position:absolute; inset:5px; border:1px solid currentColor; border-radius:50%; opacity:.45}
.cv .ring i{font-family:var(--i-script); font-style:normal; font-size:1.1rem; margin:0 3px; opacity:.9}
.cv .cover-eyebrow{font-family:var(--i-sans); font-size:.66rem; letter-spacing:.44em; text-transform:uppercase; opacity:.85; margin:0 0 10px; padding-left:.44em}
.cv .cover-names{font-weight:500; font-size:clamp(2rem,10vw,2.8rem); line-height:1.1; margin:0; text-wrap:balance; overflow-wrap:break-word}
.cv .cover-names em{display:block; font-family:var(--i-script); font-style:normal; font-size:1.05em; color:var(--i-gold); line-height:1.1; margin:2px 0}
.cv .cover.has-photo .cover-names em{color:#f3e6c4}
.cv .cover-date{font-family:var(--i-sans); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; margin:14px 0 0; opacity:.9}
.cv .open{font-family:var(--i-sans); margin:30px 0 0; padding:14px 26px; border:1px solid currentColor; background:transparent; color:inherit; border-radius:99px; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; cursor:pointer; animation:cv-pulse 2.4s ease infinite}
.cv .cover-hint{font-family:var(--i-sans); font-size:.72rem; opacity:.8; margin:12px 0 0}
.cv.opened .cover{opacity:0; transform:translateY(-6%); visibility:hidden; pointer-events:none}
/* ---------- corpo ---------- */
.cv .body{padding:54px 24px 48px; display:flex; flex-direction:column; align-items:center; min-height:100%}
.cv .orn{color:var(--i-gold)}
.cv .orn path,.cv .orn circle{stroke-dasharray:300; stroke-dashoffset:300; transition:stroke-dashoffset 2.2s ease .3s}
.cv .orn.in path,.cv .orn.in circle{stroke-dashoffset:0}
.cv .eyebrow{font-family:var(--i-sans); font-size:.66rem; letter-spacing:.44em; text-transform:uppercase; color:var(--i-soft); margin:18px 0 12px; padding-left:.44em}
.cv .names{font-weight:500; font-size:clamp(1.9rem,9.5vw,2.7rem); line-height:1.1; margin:0; text-wrap:balance; overflow-wrap:break-word; max-width:100%}
.cv .amp{display:block; font-family:var(--i-script); font-style:normal; font-size:1.05em; color:var(--i-gold); line-height:1.1; margin:4px 0}
.cv .msg{font-style:italic; font-size:1.12rem; line-height:1.55; color:var(--i-soft); margin:18px 0 0; max-width:30ch; overflow-wrap:break-word}
.cv .photo{margin:26px 0 0; width:100%; max-width:320px; padding:8px; border:1px solid var(--i-rule); background:var(--i-card); border-radius:160px 160px 14px 14px; overflow:hidden}
.cv .photo img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:150px 150px 8px 8px; animation:cv-kb 18s ease-in-out infinite alternate}
.cv .rule{width:0; border:none; border-top:1px solid var(--i-gold); margin:28px auto; transition:width 1s ease .4s}
.cv .rule.in{width:60px}
.cv .date{font-size:1.32rem; line-height:1.4; margin:0}
.cv .date::first-letter{text-transform:uppercase}
.cv .time{font-family:var(--i-sans); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--i-soft); margin:8px 0 0}
.cv .count{font-family:var(--i-sans); margin:22px 0 0; display:flex; gap:10px; justify-content:center}
.cv .count div{min-width:58px; padding:9px 4px; border:1px solid var(--i-rule); border-radius:12px; background:color-mix(in srgb, var(--i-card) 60%, transparent)}
.cv .count b{display:block; font-size:1.45rem; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.1}
.cv .count span{font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--i-soft)}
.cv .blk{margin:30px 0 0; max-width:34ch}
.cv .blk h3{font-family:var(--i-script); font-weight:400; font-size:1.9rem; color:var(--i-gold); margin:0 0 6px; line-height:1}
.cv .blk .story{font-size:1.02rem; line-height:1.6; color:var(--i-soft); margin:0; white-space:pre-line; overflow-wrap:break-word}
.cv .venue b{display:block; font-size:1.2rem; font-weight:600}
.cv .venue p{font-family:var(--i-sans); font-size:.86rem; color:var(--i-soft); margin:6px auto 0; line-height:1.5; overflow-wrap:break-word}
.cv .map{display:block; width:100%; max-width:340px; height:190px; border:0; border-radius:14px; margin:12px auto 0; filter:saturate(.85); box-shadow:0 10px 26px rgba(0,0,0,.12)}
.cv .maplink{font-family:var(--i-sans); display:inline-block; margin-top:10px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--i-gold); text-decoration:none; border-bottom:1px solid var(--i-gold); padding-bottom:2px}
.cv .pixkey{font-family:var(--i-sans); margin-top:12px; display:flex; flex-direction:column; gap:8px; align-items:center}
.cv .pixkey code{font-size:.82rem; background:var(--i-card); border:1px dashed var(--i-rule); border-radius:8px; padding:8px 12px; max-width:100%; overflow-wrap:anywhere}
.cv .copypix{font-family:var(--i-sans); border:1px solid var(--i-gold); background:transparent; color:var(--i-gold); border-radius:99px; padding:9px 18px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
.cv .mono{margin:40px 0 0; color:var(--i-gold)}
.cv .mono i{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border:1px solid var(--i-gold); border-radius:50%; font-style:normal; font-size:1.25rem; letter-spacing:.04em}
.cv .mono em{font-family:var(--i-script); font-style:normal; font-size:.95rem; margin:0 2px}
.cv .sign{font-family:var(--i-script); font-size:1.7rem; color:var(--i-soft); margin:12px 0 0}
.cv .sign em{font-style:normal; color:var(--i-gold)}
.cv .snd-unused{position:fixed; left:14px; bottom:14px; z-index:9; width:44px; height:44px; border-radius:50%; border:1px solid var(--i-gold); background:var(--i-card); color:var(--i-gold); font-size:1.2rem; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.cv .snd.off{opacity:.55; text-decoration:line-through}
.cv .cover-ask{font-family:var(--i-serif); font-style:italic; font-size:1.25rem; margin:0 0 10px; line-height:1.3}
.cv .ask{font-family:var(--i-serif); font-style:italic; font-size:1.35rem; color:var(--i-gold); margin:0 0 10px; line-height:1.3; max-width:22ch}
.cv .cotas{display:flex; flex-direction:column; gap:10px; margin-top:12px; width:100%; max-width:340px; font-family:var(--i-sans); text-align:left}
.cv .cota{background:var(--i-card); border:1px solid var(--i-rule); border-radius:12px; padding:12px 14px}
.cv .cota b{display:block; font-family:var(--i-serif); font-size:1.1rem}
.cv .cota span{font-size:.82rem; color:var(--i-soft)}
.cv .bar{height:6px; background:var(--i-rule); border-radius:99px; margin:8px 0 4px; overflow:hidden}
.cv .bar i{display:block; height:100%; background:var(--i-gold); border-radius:99px; transition:width .8s ease}
.cv .got{font-size:.7rem; color:var(--i-soft)}
.cv .cota-btn{float:right; margin-top:-2px; font-family:var(--i-sans); border:1px solid var(--i-gold); background:transparent; color:var(--i-gold); border-radius:99px; padding:7px 14px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer}
.cv .gift-form{font-family:var(--i-sans); margin-top:12px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:8px; text-align:left}
.cv .gift-form input{width:100%; border:1px solid var(--i-rule); background:var(--i-card); color:var(--i-ink); border-radius:8px; padding:10px; font:inherit; font-size:.95rem}
.cv .cover-ask{font-family:var(--i-serif); font-style:italic; font-size:1.25rem; margin:0 0 10px; line-height:1.3}
.cv .ask{font-family:var(--i-serif); font-style:italic; font-size:1.35rem; color:var(--i-gold); margin:0 0 10px; line-height:1.3; max-width:22ch}
.cv .cotas{display:flex; flex-direction:column; gap:10px; margin-top:12px; width:100%; max-width:340px; font-family:var(--i-sans); text-align:left}
.cv .cota{background:var(--i-card); border:1px solid var(--i-rule); border-radius:12px; padding:12px 14px}
.cv .cota b{display:block; font-family:var(--i-serif); font-size:1.1rem}
.cv .cota span{font-size:.82rem; color:var(--i-soft)}
.cv .bar{height:6px; background:var(--i-rule); border-radius:99px; margin:8px 0 4px; overflow:hidden}
.cv .bar i{display:block; height:100%; background:var(--i-gold); border-radius:99px; transition:width .8s ease}
.cv .got{font-size:.7rem; color:var(--i-soft)}
.cv .cota-btn{float:right; margin-top:-2px; font-family:var(--i-sans); border:1px solid var(--i-gold); background:transparent; color:var(--i-gold); border-radius:99px; padding:7px 14px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer}
.cv .gift-form{font-family:var(--i-sans); margin-top:12px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:8px; text-align:left}
.cv .gift-form input{width:100%; border:1px solid var(--i-rule); background:var(--i-card); color:var(--i-ink); border-radius:8px; padding:10px; font:inherit; font-size:.95rem}
/* ---------- RSVP ---------- */
.cv .rsvp-box{font-family:var(--i-sans); background:var(--i-card); border:1px solid var(--i-rule); border-radius:16px; padding:22px 20px; margin-top:34px; width:100%; max-width:340px; text-align:left; box-shadow:0 14px 36px rgba(0,0,0,.09)}
.cv .rsvp-box.demo{text-align:center; padding:16px}
.cv .rsvp-box.demo span{display:block; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--i-gold)}
.cv .rsvp-box.demo small{display:block; font-size:.72rem; color:var(--i-soft); margin-top:4px}
.cv .rsvp-box h2{font-family:var(--i-serif); font-size:1.35rem; font-weight:600; margin:0 0 4px; text-align:center}
.cv .rsvp-box .sub{font-size:.8rem; color:var(--i-soft); margin:0 0 10px; text-align:center}
.cv .rsvp-box label{display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--i-soft); margin:12px 0 4px}
.cv .rsvp-box input,.cv .rsvp-box textarea{width:100%; border:1px solid var(--i-rule); background:var(--i-bg); color:var(--i-ink); border-radius:8px; padding:10px; font:inherit; font-size:.95rem}
.cv .rsvp-box textarea{resize:vertical; min-height:52px}
.cv .choices{display:flex; gap:8px; margin-top:4px}
.cv .choices button{flex:1; border:1px solid var(--i-rule); background:var(--i-bg); color:var(--i-ink); border-radius:8px; padding:10px 6px; font:inherit; font-size:.86rem; cursor:pointer}
.cv .choices button.sel{border-color:var(--i-gold); color:var(--i-gold); font-weight:600}
.cv .comp-list{display:flex; flex-direction:column; gap:6px}
.cv .comp-row{display:flex; gap:6px}
.cv .comp-row button{flex:none; width:38px; border:1px solid var(--i-rule); background:var(--i-bg); color:var(--i-soft); border-radius:8px; cursor:pointer; font-size:1.1rem}
.cv .comp-add{margin-top:6px; border:none; background:none; color:var(--i-gold); font:inherit; font-size:.84rem; cursor:pointer; padding:4px 0}
.cv .rsvp-send{width:100%; margin-top:16px; padding:13px; border:none; border-radius:99px; background:var(--i-gold); color:var(--i-bg); font:inherit; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; animation:cv-pulse 2.6s ease 3s infinite}
.cv .rsvp-send:disabled{opacity:.6; animation:none}
.cv .rsvp-done{color:var(--i-gold); font-size:.95rem; text-align:center; margin:10px 0 0}
/* ---------- reveal ---------- */
.cv .rv{opacity:0; transform:translateY(18px); filter:blur(4px); transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.3,1), filter .85s ease; transition-delay:calc(min(var(--k,0), 7) * 70ms)}
.cv .rv.in{opacity:1; transform:none; filter:none}
.cv.instant .rv{transition:none}
@keyframes cv-fade{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
@keyframes cv-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes cv-kb{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){
  .cv .rv{opacity:1; transform:none; filter:none; transition:none}
  .cv .rule{width:60px} .cv .orn path,.cv .orn circle{stroke-dasharray:none; stroke-dashoffset:0}
  .cv .open,.cv .rsvp-send,.cv .photo img{animation:none} .cv .fx{display:none}
}