/* iPhone + invitación (compartido por la landing y la pantalla Crear) */
/* ---------- iPhone ---------- */
.phone{position:relative;width:100%;aspect-ratio:9/19.3;border-radius:16.5%/7.8%;padding:3.6%;
  background:linear-gradient(150deg,#56545e,#2a2930 22%,#1a191f 50%,#3b3a42 78%,#5d5b64);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 2px 2px rgba(0,0,0,.6),0 50px 90px -30px rgba(0,0,0,.9),0 30px 120px -40px rgba(140,82,255,.55)}
.phone::before,.phone::after{content:"";position:absolute;width:1.4%;border-radius:2px;background:#3a3940}
.phone::before{left:-.9%;top:22%;height:7%}
.phone::after{right:-.9%;top:28%;height:11%}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:13.5%/6.3%;background:#000;container-type:inline-size;isolation:isolate}
.island{position:absolute;z-index:9;top:2.2%;left:50%;width:33%;height:3.9%;transform:translateX(-50%);background:#000;border-radius:999px}
.statusbar{position:absolute;z-index:8;inset:0 0 auto;height:8.5%;display:flex;align-items:center;justify-content:space-between;padding:1% 9% 0 11%;
  font:600 4.4cqw/1 var(--sf);letter-spacing:-.01em;color:var(--sb,#111)}
.statusbar svg{height:4cqw;width:auto;fill:currentColor}
.statusbar span:last-child{display:flex;gap:1.6cqw;align-items:center}

/* ---------- invitación (componente reutilizable) ---------- */
.inv{--paper:#f7f2e8;--ink:#2e4a86;--gold:#c9a96a;--soft:#7e8db0;--btn:#2e4a86;--btn-ink:#fff;
  position:absolute;inset:0;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:22cqw 9cqw 9cqw;font-family:var(--serif);overflow:hidden}
.inv::before,.inv::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--gold)}
.inv::before{inset:12cqw 4.5cqw 4.5cqw;border-radius:3cqw}
.inv::after{inset:13.6cqw 6cqw 6cqw;opacity:.45;border-radius:2cqw}
.inv .k{margin-top:auto;font-style:italic;font-size:6.2cqw;color:var(--soft);line-height:1.2}
.inv .name{font-size:15cqw;line-height:1;font-weight:500;margin-top:3cqw;letter-spacing:-.01em}
.inv .xv{font-size:25cqw;line-height:.9;color:var(--gold);font-weight:500;margin-top:1cqw}
.inv .yr{font-size:6cqw;font-style:italic;color:var(--soft);margin-top:-1cqw}
.inv .orn{display:flex;align-items:center;gap:2.5cqw;margin:5cqw 0 4cqw;color:var(--gold)}
.inv .orn::before,.inv .orn::after{content:"";width:13cqw;height:1px;background:currentColor;opacity:.7}
.inv .orn i{width:2.2cqw;height:2.2cqw;background:currentColor;transform:rotate(45deg)}
.inv .when{font:600 3.4cqw/1.7 var(--sf);letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.inv .cd{display:flex;gap:2.4cqw;margin-top:6cqw}
.inv .cd span{display:flex;flex-direction:column;align-items:center;min-width:12.5cqw;padding:2.2cqw 0;border-radius:2.5cqw;
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);font:600 5.6cqw/1 var(--sf);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.inv .cd small{font-size:2.5cqw;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:1.2cqw;color:var(--soft)}
.inv .rsvp{margin-top:7cqw;font:600 3.9cqw/1 var(--sf);color:var(--btn-ink);background:var(--btn);padding:4cqw 7cqw;border-radius:999px;letter-spacing:-.01em;
  box-shadow:0 2cqw 6cqw -2cqw color-mix(in srgb,var(--btn) 70%,transparent)}
.inv .loc{margin-top:auto;font:500 3.2cqw/1.4 var(--sf);color:var(--soft);display:flex;align-items:center;gap:1.4cqw;letter-spacing:0}
.inv .loc svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:currentColor;stroke-width:2}
.inv.mini{justify-content:center}
.inv.mini .k{margin-top:0}
.inv .shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:shine 6s var(--ease) 2.2s infinite}
@keyframes shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}

.inv.purple{--paper:radial-gradient(120% 70% at 50% 0%,#3d2466,#1b0f2e 70%);--ink:#fff;--gold:#e6c27a;--soft:#c3a6ff;--btn:#e6c27a;--btn-ink:#22133a}
.inv.rose{--paper:linear-gradient(180deg,#fbeceb,#f3d9d7);--ink:#8a3f4a;--gold:#c98b8b;--soft:#b07a80;--btn:#8a3f4a}
.inv.purple,.inv.rose{background:var(--paper)}

/* mariposas */
.bf{position:absolute;z-index:2;width:9cqw;height:7cqw;color:#6f8fc9;animation:flyA 14s ease-in-out infinite}
.bf.b2{width:6cqw;height:5cqw;color:#c9a96a;animation:flyB 17s ease-in-out infinite;animation-delay:-5s}
.bf i{position:absolute;top:0;width:50%;height:100%;background:currentColor;opacity:.85}
.bf i:first-child{left:0;border-radius:70% 20% 60% 40%;transform-origin:100% 50%;animation:flapL .32s ease-in-out infinite alternate}
.bf i:last-child{right:0;border-radius:20% 70% 40% 60%;transform-origin:0 50%;animation:flapR .32s ease-in-out infinite alternate}
@keyframes flapL{to{transform:scaleX(.25)}}
@keyframes flapR{to{transform:scaleX(.25)}}
@keyframes flyA{0%{left:8%;top:30%;transform:rotate(-10deg)}25%{left:70%;top:16%;transform:rotate(12deg)}50%{left:78%;top:52%;transform:rotate(-6deg)}75%{left:12%;top:60%;transform:rotate(8deg)}100%{left:8%;top:30%;transform:rotate(-10deg)}}
@keyframes flyB{0%{left:80%;top:70%}30%{left:20%;top:44%}60%{left:60%;top:24%}100%{left:80%;top:70%}}