/* Approved welcome composition from prototipo-v3/index.html. */
.welcome { background: linear-gradient(180deg,#D7EEDF 0,#F6FBF7 55%,#fff 100%); }
.welcome-head { display:flex; justify-content:space-between; align-items:center; padding-top:8px; }
.w-logo { font-family:var(--k-display); font-weight:800; font-size:28px; letter-spacing:-.05em; color:var(--k-forest); display:flex; align-items:baseline; gap:2px; }
.w-logo i { width:9px; height:9px; border-radius:50%; background:var(--k-pink); display:inline-block; }
.welcome .tag { display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:var(--k-mist); font-size:12.5px; font-weight:600; color:var(--k-forest); }
/* The cards are sized by width, so the collage height must follow the width too (340px at the 350px
   prototype column); a fixed height let the cards cover the headline on wider phones. */
.collage { position:relative; aspect-ratio:35/34; max-width:400px; margin:10px auto 6px; }
.collage .c1,.collage .c2 { position:absolute; width:58%; aspect-ratio:3/4; border-radius:28px; overflow:hidden; box-shadow:var(--k-shadow); border:5px solid #fff; }
.collage .c1 { left:4%; top:16px; transform:rotate(-7deg); }
.collage .c2 { right:4%; top:44px; transform:rotate(6deg); }
.collage .ph { position:relative; overflow:hidden; background:var(--k-mint); width:100%; height:100%; }
.collage .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; }
.collage .c1 img { object-position:50% 20%; transform:scale(1.15); transform-origin:50% 20%; }
.collage .c2 img { object-position:45% 25%; transform:scale(1.2); transform-origin:45% 25%; }
.collage .spark { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--k-pink); box-shadow:var(--k-shadow); }
.collage .spark svg { width:30px; height:30px; }
.collage .pill { position:absolute; background:#fff; border-radius:999px; padding:8px 12px; font-size:12.5px; font-weight:600; display:flex; gap:6px; align-items:center; box-shadow:var(--k-shadow); white-space:nowrap; }
.pill-near { left:0; bottom:6px; }
.pill-invite { right:0; top:0; }
.pill-invite svg { width:15px; height:15px; color:var(--k-pink); }
.online { width:8px; height:8px; border-radius:50%; background:var(--k-online); display:inline-block; flex:none; }
.w-h { font-family:var(--k-display); font-weight:800; font-size:38px; line-height:1.02; letter-spacing:-.045em; margin:18px 0 10px; text-wrap:balance; }
.w-h em { font-style:normal; color:var(--k-pink); }
.welcome .sub { color:var(--k-moss); margin:0; font-size:15px; }
.role-pick { display:grid; gap:10px; margin-top:20px; }
.role-pick a { display:flex; align-items:center; gap:14px; background:#fff; border-radius:22px; padding:14px 16px; border:1px solid var(--k-line); text-align:left; text-decoration:none; color:var(--k-ink); }
.role-pick .avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex:none; }
.role-pick .avatar img { width:100%; height:100%; object-fit:cover; }
.role-pick .role-label { display:block; }
.role-pick b { display:block; font-size:16px; }
.role-pick .role-label span { display:block; font-size:13px; color:var(--k-moss); }
.role-pick .arr { margin-left:auto; color:var(--k-forest); width:22px; height:22px; flex:none; }
.fine { font-size:12px; color:#8D9B93; text-align:center; margin:16px 0 26px; }
.fine .link { color:var(--k-pink-text); font-weight:600; font-size:13.5px; text-decoration:none; }