/* ===========================================================
   Who's Up? — in-phone app simulator
   Phase 1: HOME — rebuilt 1:1 from Figma (node 2953:2498)
   Reference frame: 390 × 844.  Positions use the Figma % insets,
   font sizes use cqw (1cqw = 1% of card width) so everything
   scales exactly with the phone.
   =========================================================== */

:root {
  --sf: -apple-system, "SF Pro Display", "SF Pro Text", system-ui,
        "Inter", sans-serif;
}

.wu-app {
  position: absolute;
  inset: 0;
  background: #000;
  font-family: var(--sf);
  color: #fff;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* --- iOS status bar --- */
.wu-statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 46px;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px 26px 0 30px;
  pointer-events: none;
  color: #fff;                 /* status icons use currentColor */
}
.wu-app.on-light .wu-statusbar { color: #000; }   /* dark icons on light pages */
/* dark bottom-nav icons on light pages (Events / Profile) */
.wu-app.on-light .wu-tab:not(.wu-tab-profile) img { filter: invert(1); }
.wu-app.on-light .wu-tab.active::after { background: #000; }
.wu-time { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; }
.wu-status-icons { display: flex; align-items: center; gap: 6px; }

/* --- Pages --- */
.wu-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease;
}
.wu-page.active { opacity: 1; visibility: visible; }

.wu-soon {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  font-size: 22px; font-weight: 800;
  background: radial-gradient(120% 80% at 50% 30%, #161616 0%, #000 70%);
}
.wu-soon span {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.4); letter-spacing: 0.4px;
}

/* ===========================================================
   HOME — vertical invitation feed
   =========================================================== */
.wu-feed {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wu-feed::-webkit-scrollbar { display: none; }

/* grab-to-swipe affordance on the vertical feeds (desktop) */
.wu-feed, .wu-cerca-feed, .wu-pfeed-feed { cursor: grab; }
.wu-feed.wu-grabbing, .wu-cerca-feed.wu-grabbing, .wu-pfeed-feed.wu-grabbing { cursor: grabbing; }

.wu-card {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #111;
  container-type: size;   /* enables cqw/cqh for children */
}

.wu-card-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* darkening (mirrors the Figma multiply shadows) */
.wu-card::before,
.wu-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
}
.wu-card::before {       /* top — for wordmark + yellow category */
  top: 0; height: 32%;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}
.wu-card::after {        /* bottom — for host / info / actions */
  bottom: 0; height: 46%;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 6%, rgba(0,0,0,0.45) 48%, rgba(0,0,0,0) 100%);
}

/* fixed chrome overlay — wordmark + rail + join stay put while feed scrolls */
.wu-home-fixed {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;       /* let the feed scroll underneath */
  container-type: size;       /* enables cqw/% for its children */
}

/* wordmark "Who's up?" (image asset) — Figma: left 5.44% top 4.84% w 36.92% */
.wu-wordmark {
  position: absolute;
  left: 5.44%;
  top: 6.6%;
  width: 36.92%;       /* 144 / 390 */
  height: 5.23%;       /* 44 / 844 */
  object-fit: contain;
  object-position: left center;
  z-index: 5;
}

/* category "#Fútbol" — Figma: left 5.38% top 9.12%, Chakra Petch 75px */
.wu-category {
  position: absolute;
  left: 5.38%;
  top: 12.8%;          /* default; JS re-aligns by each font's actual cap-top */
  right: 8%;
  z-index: 5;
  font-family: 'Chakra Petch', var(--sf);
  font-weight: 400;
  font-size: 19.23cqw;       /* 75 / 390 */
  line-height: 1;
  letter-spacing: -0.5px;
  white-space: nowrap;       /* always one line — JS shrinks to fit */
}

/* right action rail (image asset) — Figma: left 335px top 547px 35×133.7 */
.wu-rail {
  position: absolute;
  right: 5.13%;
  top: 64.81%;
  width: 8.98%;        /* 35 / 390 */
  height: 15.84%;      /* 133.7 / 844 */
  z-index: 6;
}
.wu-rail img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wu-rail-hit {
  position: absolute;
  left: 0; right: 0;
  height: 33.33%;
  cursor: pointer;
  pointer-events: auto;
}
.wu-rail-hit:active { transform: scale(0.9); }
.wu-rail-hit.share { top: 0; }
.wu-rail-hit.loc   { top: 33.33%; }
.wu-rail-hit.ppl   { top: 66.66%; }

/* host avatar — Figma: left 6.36% top 71.09% size 34.5px */
.wu-avatar {
  position: absolute;
  left: 6.36%;
  top: 71.09%;
  width: 8.85%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  z-index: 5;
  cursor: pointer;              /* opens the host's full-screen profile */
}

/* host name — Figma: left 16.67% top 72.14%, SF Pro Semibold 17px */
.wu-host {
  position: absolute;
  left: 16.67%;
  top: 72.0%;
  z-index: 5;
  font-weight: 600;
  font-size: 4.36cqw;        /* 17 / 390 */
}

/* description — Figma: left 6.15% top 76.4%, SF Pro 17px */
.wu-desc {
  position: absolute;
  left: 6.15%;
  top: 76.4%;
  right: 32.05%;
  z-index: 5;
  font-weight: 400;
  font-size: 4.36cqw;
  line-height: 1.25;
}

/* time — Figma: left 6.15% top 83.53%, Montserrat ExtraBold 27px */
.wu-hour {
  position: absolute;
  left: 6.15%;
  top: 84.5%;
  z-index: 5;
  font-family: 'Montserrat', var(--sf);
  font-weight: 800;
  font-size: 6.92cqw;        /* 27 / 390 */
  line-height: 1;
}

/* date — sits tight under the hour */
.wu-date {
  position: absolute;
  left: 6.15%;
  top: 87.7%;
  z-index: 5;
  font-weight: 700;
  font-size: 3.59cqw;        /* 14 / 390 */
  color: #e6e6e6;
}

/* join button — Figma: left 54.87% top 84.31% w 40.14% h 42px, outlined pill */
.wu-join {
  position: absolute;
  left: 54.87%;
  top: 84.5%;
  width: 40.14%;             /* 156.5 / 390 */
  height: 4.98%;             /* 42 / 844 */
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 3.6cqw;     /* rounded rectangle, not a pill */
  color: #fff;
  font-family: var(--sf);
  font-weight: 800;
  font-size: 5.38cqw;        /* 21 / 390 */
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s ease, background 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.wu-join:active { transform: scale(0.95); }
.wu-join.joined {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
}

/* swipe-up hint on first card — centered on screen */
.wu-hint {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  z-index: 7;
  text-align: center;
  font-size: 3.1cqw;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
  animation: wuHint 1.8s ease-in-out infinite;
}
@keyframes wuHint {
  0%, 100% { transform: translateY(-50%); opacity: 0.5; }
  50% { transform: translateY(calc(-50% - 7px)); opacity: 1; }
}

/* ===========================================================
   Bottom navigation — exact Figma positions
   =========================================================== */
/* full-screen overlay so tab %-positions resolve against the whole
   screen (like the Figma), while letting feed scroll pass through */
.wu-nav {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.wu-tab {
  position: absolute;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.14s ease, opacity 0.2s ease;
}
.wu-tab img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wu-tab:active { transform: scale(0.86); }

/* Figma left% / top% / width% / height% per button */
.wu-tab-home    { left: 8.12%;  top: 93.74%; width: 6.99%; height: 2.87%; }
.wu-tab-friends { left: 26.11%; top: 93.80%; width: 7.73%; height: 2.86%; }
.wu-tab-create  { left: 45.47%; top: 93.12%; width: 9.07%; height: 4.19%; }
.wu-tab-events  { left: 66.40%; top: 93.86%; width: 6.60%; height: 2.81%; }
.wu-tab-profile { left: 84.25%; top: 93.54%; width: 7.32%; height: 3.39%; }

/* profile circular avatar */
.wu-pf {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.wu-pf img { width: 100%; height: 100%; object-fit: cover; }

/* active underline indicator */
.wu-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.22s ease;
}
.wu-tab.active::after { transform: translateX(-50%) scaleX(1); }
.wu-tab-create.active::after,
.wu-tab-profile.active::after { bottom: -5px; }

/* ===========================================================
   CERCA TUYO — vertical feed of nearby people
   Rebuilt from Figma node 2953:3126
   =========================================================== */
#wuCerca { container-type: inline-size; }

.wu-cerca-feed {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wu-cerca-feed::-webkit-scrollbar { display: none; }

.wu-pcard {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #111;
}
.wu-pcard-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.wu-pcard::before, .wu-pcard::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
}
.wu-pcard::before { top: 0; height: 26%;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); }
.wu-pcard::after { bottom: 0; height: 46%;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 6%, rgba(0,0,0,0.4) 46%, rgba(0,0,0,0) 100%); }

/* fixed top overlay (title + report) — full height so % positions resolve */
.wu-cerca-top {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.wu-cerca-title {
  position: absolute;
  left: 6.92%;
  top: 7%;
  font-size: 7.69cqw;        /* 30 / 390 */
  font-weight: 700;
  color: #fff;
}
.wu-cerca-report {
  position: absolute;
  right: 6.62%;
  top: 6.4%;
  width: 4.3cqw;
  aspect-ratio: 16.67 / 21.12;
  background: none; border: none; padding: 0;
  pointer-events: auto;
  cursor: pointer;
}
.wu-cerca-report img { width: 100%; height: 100%; object-fit: contain; }

/* per-card content */
.wu-pcard-name {
  position: absolute;
  left: 5.9%;
  right: 8%;
  bottom: 18.5%;        /* sit just above the meta line */
  z-index: 5;
  font-size: 16cqw;
  line-height: 1;
  white-space: nowrap;
}
.wu-pcard-meta {
  position: absolute;
  left: 5.13%;
  top: 82.4%;
  z-index: 5;
  font-size: 4.1cqw;         /* 16 / 390 */
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
.wu-pcard-meta .dot {
  width: 1cqw; height: 1cqw;
  border-radius: 50%;
  background: #fff;
}
.wu-pcard-ig {
  position: absolute;
  left: 5.13%;
  top: 86.6%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  font-size: 3.6cqw;         /* 14 / 390 */
  font-weight: 500;
  color: #fff;
}
.wu-pcard-ig img { width: 4cqw; height: 4cqw; }
.wu-pcard-count {
  position: absolute;
  right: 8.46%;
  top: 86.3%;
  z-index: 5;
  font-size: 3.6cqw;
  color: #fff;
  letter-spacing: -0.03em;
}

/* ===========================================================
   PROFILE — your own card (Figma node 2953:2840 / 2894)
   Reuses the Cerca .wu-pcard treatment (bg, gradients, name, meta, ig)
   =========================================================== */
#wuProfile { container-type: inline-size; }
/* top chrome: "Perfil" title + dots (→ Configuración) + camera */
.wu-pf-top {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.wu-pf-dots, .wu-pf-cam {
  position: absolute;
  right: 6.6%;
  background: none; border: none; padding: 0;
  pointer-events: auto;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wu-pf-dots { top: 4.9%; width: 6.4cqw; height: 6.4cqw; }
.wu-pf-cam  { top: 8.4%; width: 6.2cqw; height: 6.2cqw; }
.wu-pf-dots svg, .wu-pf-cam svg { width: 100%; height: 100%; display: block; }
.wu-pf-dots:active, .wu-pf-cam:active { opacity: 0.5; }

/* ===========================================================
   CONFIGURACIÓN — settings list (slides from right, Figma 2953:2286)
   =========================================================== */
.wu-config {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.34s;
  container-type: inline-size;
  font-family: var(--sf);
}
.wu-config.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-config-bar {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 5% 14px;
}
.wu-config-back {
  position: absolute;
  left: 5.6%;
  top: 42px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.wu-config-back svg { width: 5.4cqw; height: 5.4cqw; }
.wu-config-back:active { opacity: 0.5; }
.wu-config-title {
  font-size: 4.1cqw;        /* 16 / 390 */
  font-weight: 700;
  letter-spacing: -0.03em;
}
.wu-config-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 0;
}
.wu-config-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none; border: none;
  border-top: 1px solid #ececec;
  padding: 5.1cqw 6.4%;
  font-family: var(--sf);
  font-size: 4.1cqw;        /* 16 / 390 */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  cursor: pointer;
}
.wu-config-row:active { background: #f5f5f5; }

/* ===========================================================
   FULL-SCREEN PROFILES — attendee swipe feed (Figma node 2953:2207)
   Reuses the Cerca .wu-pcard; adds a back + "Asistiendo" bar and a
   bottom-left "n/total" counter. Slides in from the right.
   =========================================================== */
.wu-pfeed {
  position: absolute;
  inset: 0;
  z-index: 65;                 /* above the participants list (z60) */
  background: #000;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.34s;
  container-type: inline-size;
  font-family: var(--sf);
}
.wu-pfeed.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-pfeed-feed {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wu-pfeed-feed::-webkit-scrollbar { display: none; }

/* top chrome: back + centered "Asistiendo" + report (over the photo) */
.wu-pfeed-top {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.wu-pfeed-back {
  position: absolute;
  left: 6.52%;
  top: 3.3%;
  width: 6.5cqw; height: 6.5cqw;
  background: none; border: none; padding: 0;
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wu-pfeed-back svg { width: 5.4cqw; height: 5.4cqw; }
.wu-pfeed-back:active { opacity: 0.5; }
.wu-pfeed-title {
  position: absolute;
  left: 0; right: 0;
  top: 4.2%;
  text-align: center;
  font-size: 4.1cqw;          /* 16 / 390 */
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}
.wu-pfeed-report {
  position: absolute;
  right: 6.6%;
  top: 3.1%;
  width: 4.3cqw;
  aspect-ratio: 16.67 / 21.12;
  background: none; border: none; padding: 0;
  pointer-events: auto; cursor: pointer;
}
.wu-pfeed-report img { width: 100%; height: 100%; object-fit: contain; }
.wu-pfeed-count {
  position: absolute;
  left: 5.9%;
  top: 92.06%;
  z-index: 11;
  font-size: 3.59cqw;         /* 14 / 390 */
  color: #fff;
  letter-spacing: -0.03em;
  pointer-events: none;
}

/* ===========================================================
   ASISTIENDO — event invitation detail (Figma node 2953:2228)
   Reuses the Home .wu-card (bg + gradients + category), with the
   lower content nudged up to the Figma positions for this screen.
   =========================================================== */
.wu-asist {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #000;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.34s;
  container-type: inline-size;
  font-family: var(--sf);
}
.wu-asist.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
/* this screen's content sits a bit higher than the Home card */
.wu-asist-card .wu-avatar { top: 68%; left: 5.97%; }
.wu-asist-card .wu-host   { top: 69.41%; left: 16.67%; font-weight: 700; }
.wu-asist-card .wu-desc   { top: 73.68%; right: 28%; }
.wu-asist-card .wu-hour   { top: 80.09%; }
.wu-asist-card .wu-date   { top: 84.24%; }

/* top bar: back + centered "Asistiendo" */
.wu-asist-top {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.wu-asist-back {
  position: absolute;
  left: 6.52%;
  top: 3.3%;
  width: 6.5cqw; height: 6.5cqw;
  background: none; border: none; padding: 0;
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wu-asist-back svg { width: 5.4cqw; height: 5.4cqw; }
.wu-asist-back:active { opacity: 0.5; }
.wu-asist-title {
  position: absolute;
  left: 0; right: 0;
  top: 4.2%;
  text-align: center;
  font-size: 4.1cqw;          /* 16 / 390 */
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}

/* cancelar — outlined pill, bottom-right (mirrors the Home "unirme" style) */
.wu-asist-cancel {
  position: absolute;
  left: 55.43%;
  top: 91.82%;
  width: 40.55%;              /* 158 / 390 */
  height: 4.98%;             /* 42 / 844 */
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 3.6cqw;
  color: #fff;
  font-family: var(--sf);
  font-weight: 800;
  font-size: 5.38cqw;        /* 21 / 390 */
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.16s ease;
}
.wu-asist-cancel:active { transform: scale(0.95); }

/* ===========================================================
   EVENTS — your hangouts (light list, grouped by date)
   Rebuilt from Figma node 2953:2306
   =========================================================== */
#wuEvents {
  container-type: inline-size;
  background: #fff;
  color: #000;
  font-family: var(--sf);
}
.wu-ev-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 46px 6.6% 12px;
  background: #fff;
}
.wu-ev-title {
  font-size: 7.69cqw;        /* 30 / 390 */
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wu-ev-past {
  background: none; border: none; padding: 0; cursor: pointer;
}
.wu-ev-past img { width: 6.3cqw; height: 5.8cqw; object-fit: contain; display: block; }
.wu-ev-past:active { opacity: 0.5; }

.wu-ev-list {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 96px 4.2% calc(96px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}
.wu-ev-list::-webkit-scrollbar { display: none; }

.wu-ev-daygroup { margin-bottom: 6px; }
.wu-ev-dayhead {
  font-size: 4.1cqw;         /* 16 / 390 */
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #aeaeb2;
  padding: 14px 3% 9px;
}

.wu-ev-card {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  padding: 11px 13px;
  margin-bottom: 11px;
  cursor: pointer;            /* whole card body opens the chat */
}
.wu-ev-thumb {
  flex: none;
  width: 13.6cqw;            /* 53 / 390 */
  height: 13.6cqw;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
}
.wu-ev-thumb img, .wu-ev-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wu-ev-info { flex: 1; min-width: 0; }
.wu-ev-name {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: 5.13cqw;        /* 20 / 390 */
  font-weight: 700;
  letter-spacing: -0.03em;
}
.wu-ev-dot {
  width: 1.8cqw; height: 1.8cqw;
  border-radius: 50%;
  background: #ff3b30;
}
.wu-ev-time {
  font-size: 4.36cqw;        /* 17 / 390 */
  font-weight: 400;
  color: #000;
  letter-spacing: -0.03em;
}
.wu-ev-actions {
  position: relative;
  flex: none;
  width: 23.9cqw;            /* 93.1 / 390 */
  aspect-ratio: 93.1 / 20.9;
}
.wu-ev-icons { width: 100%; height: 100%; object-fit: contain; display: block; }
.wu-ev-hit {
  position: absolute;
  top: -40%; bottom: -40%;   /* taller hit area for easy tapping */
  width: 33.33%;
  background: none; border: none; padding: 0; cursor: pointer;
}
.wu-ev-hit[data-evact="people"] { left: 0; }
.wu-ev-hit[data-evact="loc"]    { left: 33.33%; }
.wu-ev-hit[data-evact="share"]  { left: 66.66%; }
.wu-ev-hit:active { opacity: 0.4; }
/* red "new" dot on the participants icon */
.wu-ev-actions.has-new::before {
  content: '';
  position: absolute;
  top: -22%;
  left: 26%;
  width: 1.8cqw; height: 1.8cqw;
  border-radius: 50%;
  background: #ff3b30;
  z-index: 2;
}

.wu-ev-empty {
  text-align: center;
  color: #aeaeb2;
  font-size: 14px;
  font-weight: 500;
  padding: 60px 20px;
}

/* ===========================================================
   Event group CHAT — slides in from the right
   Rebuilt from Figma node 2953:2247
   =========================================================== */
.wu-chat {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #f2f2f2;
  color: #000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.34s;
  container-type: inline-size;
  font-family: var(--sf);
}
.wu-chat.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-chat-bar {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: 40px 5% 12px;
  background: #fff;
}
.wu-chat-back {
  position: absolute;
  left: 5%;
  top: 38px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.wu-chat-back svg { width: 5.4cqw; height: 5.4cqw; }
.wu-chat-back:active { opacity: 0.5; }
.wu-chat-head {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wu-chat-thumb {
  width: 8.4cqw; height: 8.4cqw;   /* 32.8 / 390 */
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
  flex: none;
}
.wu-chat-thumb img, .wu-chat-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wu-chat-name { font-size: 4.1cqw; font-weight: 700; letter-spacing: -0.03em; }

.wu-chat-msgs {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 4%;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
.wu-chat-msgs::-webkit-scrollbar { display: none; }
.wu-chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: 11px;
  max-width: 86%;
}
.wu-chat-msg.right { flex-direction: row-reverse; align-self: flex-end; }
.wu-chat-av {
  width: 8.4cqw; height: 8.4cqw;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.wu-chat-bubble {
  background: #fff;
  border-radius: 19px;
  padding: 9px 14px;
  font-size: 4.1cqw;
  line-height: 1.3;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  word-break: break-word;
}

.wu-chat-input {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4% calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #ececec;
}
.wu-chat-input input {
  flex: 1;
  min-width: 0;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 16px;
  font-family: var(--sf);
  background: #fff;
  color: #000;
  outline: none;
}
.wu-chat-input input::placeholder { color: #808080; }
.wu-chat-send {
  flex: none;
  background: none; border: none; padding: 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
}
.wu-chat-send:active { opacity: 0.5; }

/* ===========================================================
   Participants screen (light) — slides in from the right
   Rebuilt from Figma node 2953:3555
   =========================================================== */
.wu-participants {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.38s;
  container-type: inline-size;
  font-family: var(--sf);
}
.wu-participants.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
/* opened from Events → slide in from the right */
.wu-participants.from-right { transform: translateX(100%); }
.wu-participants.from-right.open { transform: translateX(0); }

/* top bar */
.wu-part-bar {
  flex: none;
  display: flex;
  align-items: center;
  padding: 46px 5.9% 10px;   /* top padding clears the notch */
  margin-bottom: 4px;
}
.wu-part-title {
  flex: 1;
  text-align: center;
  font-size: 4.1cqw;         /* 16 / 390 */
  font-weight: 700;
  letter-spacing: -0.04em;
}
.wu-part-back, .wu-part-add {
  flex: none;
  width: 7cqw;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.wu-part-back { justify-content: flex-start; }
.wu-part-add  { justify-content: flex-end; }
.wu-part-back svg { width: 5.4cqw; height: 5.4cqw; }
.wu-part-add svg  { width: 6.4cqw; height: 6.4cqw; }
.wu-part-back:active, .wu-part-add:active { opacity: 0.5; }

/* list */
.wu-part-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 6.6% calc(20px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}
.wu-part-list::-webkit-scrollbar { display: none; }

.wu-part-head {
  font-size: 4.1cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  padding: 14px 0 9px;
  border-bottom: 1px solid #ededed;
  margin-bottom: 4px;
}

.wu-part-row {
  display: flex;
  align-items: center;
  gap: 4.4cqw;
  padding: 6px 0;
  cursor: pointer;          /* opens the full-screen profile */
}
.wu-part-row:active { opacity: 0.6; }
.wu-part-av {
  width: 14.6cqw;        /* 57 / 390 */
  height: 14.6cqw;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.wu-part-name {
  font-size: 4.1cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* ===========================================================
   CREATE flow — slides up from the bottom
   Step 1: category mosaic (Figma node 2953:3260)
   =========================================================== */
.wu-create {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #000;
  color: #fff;
  overflow: hidden;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.38s;
  container-type: inline-size;
  font-family: var(--sf);
}
.wu-create.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* wizard steps slide horizontally */
.wu-cstep {
  position: absolute;
  inset: 0;
  background: #000;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;            /* only the active step is interactive */
}
.wu-cstep.active { transform: translateX(0); pointer-events: auto; }
.wu-cstep.past   { transform: translateX(-100%); }
.wu-cstep-light  { background: #fff; color: #000; }

/* shared back button */
.wu-cstep-back {
  position: relative;
  flex: none;
  width: 7cqw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none; border: none; padding: 0;
  cursor: pointer;
  pointer-events: auto;
}
.wu-cstep-back::before {        /* enlarged invisible tap target */
  content: '';
  position: absolute;
  inset: -14px -18px;
}
.wu-cstep-back svg { width: 5.4cqw; height: 5.4cqw; }
.wu-cstep-back:active { opacity: 0.5; }

/* category step header (over the full-bleed grid) */
.wu-create-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 46px 5.9% 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
}
.wu-create-title {
  flex: 1;
  text-align: center;
  font-size: 4.1cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.wu-create-bar::after { content: ''; flex: none; width: 7cqw; }

/* light step header (Cuándo) */
.wu-light-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;                 /* sit above .wu-when-body (inset:0) so the back arrow is tappable */
  display: flex;
  align-items: center;
  padding: 46px 5.9% 12px;
}
.wu-light-title {
  flex: 1;
  text-align: center;
  font-size: 4.1cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #000;
}
.wu-light-ok {
  flex: none;
  width: 7cqw;
  text-align: right;
  background: none; border: none; padding: 0;
  font-size: 4.1cqw;
  font-weight: 700;
  color: #000;
  cursor: pointer;
}
.wu-light-ok:active { opacity: 0.5; }

/* Cuándo body */
.wu-when-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5cqw;
}
.wu-when-now {
  width: 80%;
  padding: 5cqw 0;
  background: #fff;
  border: 1.5px solid #e3e3e3;
  border-radius: 4.5cqw;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  font-size: 7.2cqw;        /* 28 / 390 */
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #000;
  cursor: pointer;
}
.wu-when-later {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  padding: 2.6cqw 5cqw;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-size: 4.1cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #000;
  cursor: pointer;
}
.wu-when-later svg { width: 4.4cqw; height: 4.4cqw; }
.wu-when-now:active, .wu-when-later:active { transform: scale(0.98); }

/* ===========================================================
   "Más tarde" date + time picker (Figma node 2953:3494)
   Slides over the wizard from the right; light screen.
   =========================================================== */
.wu-datepick {
  position: absolute;
  inset: 0;
  z-index: 5;                  /* above the wizard steps */
  background: #fff;
  color: #000;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.32s;
}
.wu-datepick.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-datepick .wu-light-bar { padding: 46px 5.9% 12px; }
.wu-date-ok {
  flex: none;
  background: none; border: none; padding: 0;
  font-size: 4.1cqw;          /* 16 / 390 */
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #000;
  cursor: pointer;
}
.wu-date-ok:active { opacity: 0.5; }
.wu-date-label {
  position: absolute;
  left: 5.38%;
  font-size: 4.36cqw;         /* 17 / 390 */
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #000;
}
.wu-date-dia  { top: 13.98%; }
.wu-date-hora { top: 34.6%; }

/* horizontal scrolling day cards */
.wu-date-days {
  position: absolute;
  top: 19.22%;
  left: 0; right: 0;
  display: flex;
  gap: 2.3cqw;
  padding: 0 5.9% 0 6.67%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wu-date-days::-webkit-scrollbar { display: none; }
.wu-date-day {
  flex: none;
  width: 17.95cqw;            /* 70 / 390 */
  height: 80px;
  border: none;
  border-radius: 10px;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  scroll-snap-align: start;
}
.wu-date-day .dw {
  font-size: 4.36cqw;         /* 17 / 390 */
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #333;
}
.wu-date-day .dn {
  font-size: 8.2cqw;          /* 32 / 390 */
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #373737;
}
.wu-date-day.sel { background: #323232; }
.wu-date-day.sel .dw, .wu-date-day.sel .dn { color: #fff; }
.wu-date-day:active { transform: scale(0.97); }

/* iOS-style two-column time wheel with a centered selection band */
.wu-when-wheel {
  position: absolute;
  top: 41%;
  left: 15.58%; right: 18.18%;
  height: 200px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6cqw;
}
.wu-when-band {
  position: absolute;
  left: -6%; right: -6%;
  top: 50%; transform: translateY(-50%);
  height: 44px;
  background: #f2f2f2;
  border-radius: 10px;
  pointer-events: none;
}
.wu-when-sep {
  align-self: center;
  font-size: 5.6cqw;
  font-weight: 600;
  color: #111;
  z-index: 1;
}
.wu-when-col {
  flex: none;
  width: 26cqw;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  text-align: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
}
.wu-when-col::-webkit-scrollbar { display: none; }
.wu-when-opt {
  height: 44px;
  line-height: 44px;
  scroll-snap-align: center;
  font-size: 4.6cqw;          /* ~18 */
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #bcbcbc;
  transition: color 0.15s ease, font-size 0.15s ease;
}
.wu-when-opt.sel {
  color: #111;
  font-size: 5.4cqw;          /* selected, larger */
}
.wu-when-pad { height: 78px; }   /* (200 wheel − 44 row) / 2 → lets first/last center */

/* Dónde (where) step — full-bleed map screenshot + tap targets */
.wu-where-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wu-where-back {
  position: absolute;
  top: 2.5%;
  left: 2%;
  width: 14%;
  height: 6%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.wu-where-pick {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 70%;
  bottom: 9%;
  background: none;
  border: none;
  cursor: pointer;
  color: transparent;
  font-size: 0;            /* hide the label (it's baked into the image) */
}
.wu-where-pick:active { background: rgba(0,0,0,0.04); }

/* Customize (Invitación) step — live preview card + tools */
.wu-inv-card { position: absolute; inset: 0; }
.wu-inv-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 30px 5% 8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.wu-inv-bar .wu-create-title { color: #fff; }
.wu-inv-gif {
  flex: none;
  background: none; border: none; padding: 0;
  font-size: 4cqw;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
.wu-inv-gif:active { opacity: 0.5; }

.wu-inv-tools {
  position: absolute;
  top: 9%;                 /* below the GIF label, with breathing room */
  right: 5%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6cqw;
}

/* Customize card uses the Invitación Figma positions (not Home's) */
.wu-inv-card .wu-category { left: 6.15%; right: 16.15%; font-size: 17.95cqw; }  /* 70px, clears tools */
.wu-inv-card .wu-avatar   { top: 73.45%; left: 5.88%; }
.wu-inv-card .wu-host     { top: 74.64%; }
.wu-inv-card .wu-desc     { top: 79.27%; left: 6.41%; }
.wu-inv-card .wu-hour     { top: 83.53%; }
.wu-inv-card .wu-date     { top: 87.68%; font-size: 3.33cqw; }  /* 13px */
.wu-inv-color {
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
  background: #ED1C24;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.wu-inv-aa {
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 3cqw;
  font-weight: 700;
  cursor: pointer;
}
.wu-inv-color:active, .wu-inv-aa:active { transform: scale(0.9); }

.wu-inv-publish {
  top: auto;
  bottom: 4.5%;
  z-index: 10;
}

/* GIF picker (Portada) — slides up over the Customize step */
.wu-gifpicker {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.32s;
  container-type: inline-size;
}
.wu-gifpicker.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* full-bleed explore mosaic (like the category grid) */
.wu-gp-grid {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50cqw;
  grid-auto-flow: dense;
  gap: 0;
  padding-bottom: 24px;     /* gifs go full-bleed to the top, chrome floats over */
  scrollbar-width: none;
}
.wu-gp-grid::-webkit-scrollbar { display: none; }
.wu-gp-tile {
  position: relative;
  padding: 0;
  border: none;
  background: #161616;
  overflow: hidden;
  cursor: pointer;
}
.wu-gp-tile.big { grid-row: span 2; }
.wu-gp-tile.big.right { grid-column: 2 / span 2; }
.wu-gp-tile.big.left  { grid-column: 1 / span 2; }
.wu-gp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wu-gp-tile:active { transform: scale(0.98); }

/* floating chrome: back + Portada + search */
.wu-gp-chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%);
  padding-bottom: 18px;
}
.wu-gp-bar {
  display: flex;
  align-items: center;
  padding: 36px 5% 8px;
}
.wu-gp-bar .wu-create-title { color: #fff; }
.wu-gp-bar::after { content: ''; flex: none; width: 7cqw; }
.wu-gp-bar .wu-cstep-back { pointer-events: auto; }
.wu-gp-bar .wu-cstep-back svg { stroke: #fff; }

.wu-gp-search {
  position: relative;
  padding: 0 5%;
}
.wu-gp-search svg {
  position: absolute;
  left: calc(5% + 13px);
  top: 10px;
  width: 18px;
  height: 18px;
}
.wu-gp-search input {
  width: 100%;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 15px;
  font-family: var(--sf);
  padding: 0 16px 0 40px;
  outline: none;
  pointer-events: auto;
}
.wu-gp-search input::placeholder { color: #8a8a8e; }

.wu-gp-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 0;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 600;
}
.wu-gp-attr {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  text-align: center;
  padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

/* category mosaic grid — Instagram-explore pattern (2×2 featured tile) */
.wu-cat-grid {
  position: absolute;
  inset: 0;                  /* full-bleed to the top, header floats over it */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50cqw;     /* portrait cells (~1 : 1.5) */
  grid-auto-flow: dense;
  gap: 0;
  padding-bottom: 24px;
  scrollbar-width: none;
}
.wu-cat-grid::-webkit-scrollbar { display: none; }

.wu-cat-tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #111;
}
.wu-cat-tile.big { grid-row: span 2; }
.wu-cat-tile.big.right { grid-column: 2 / span 2; }
.wu-cat-tile.big.left  { grid-column: 1 / span 2; }

.wu-cat-tile video,
.wu-cat-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wu-cat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 42%);
  pointer-events: none;
}
.wu-cat-tile:active { transform: scale(0.98); }
.wu-cat-label {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 6%;
  z-index: 2;
  text-align: center;
  font-size: 6cqw;
  line-height: 1;
  white-space: nowrap;
}
.wu-cat-tile.big .wu-cat-label { font-size: 11cqw; }

/* ===========================================================
   Map / location screen — slides up from the bottom
   Rebuilt from Figma node 2953:2829
   =========================================================== */
.wu-map {
  position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: #e8eaed;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.38s;
  container-type: inline-size;
  font-family: var(--sf);
}
.wu-map.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
/* opened from Events → slide in from the right */
.wu-map.from-right { transform: translateX(100%); }
.wu-map.from-right.open { transform: translateX(0); }

/* Events variant (Map 7): exact venue — no radius circle, show action buttons */
.wu-map.from-right .wu-map-circle { display: none; }
.wu-map-actions {
  position: absolute;
  left: 4.32%;
  right: 5.15%;
  bottom: 4.4%;
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: 9px;
}
.wu-map.from-right .wu-map-actions { display: flex; }
.wu-map-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  padding: 16px 18px;
  font-size: 4.1cqw;
  font-family: var(--sf);
  color: #000;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.wu-map-action svg { width: 5.6cqw; height: 5.6cqw; flex: none; }
.wu-map-action:active { transform: scale(0.99); background: #f6f6f6; }

/* map zoomed/panned so the Google chrome is cropped (Figma insets) */
.wu-map-bg {
  position: absolute;
  left: -18.15%;
  top: -26.79%;
  width: 138%;
  height: 138%;
  object-fit: cover;
}
/* approximate-location blue circle, centered per Figma */
.wu-map-circle {
  position: absolute;
  left: 7.14%;
  top: 32.89%;
  width: 86.58%;       /* 337.66 / 390 */
  aspect-ratio: 1;     /* keep it a circle, not an ellipse */
  height: auto;
  pointer-events: none;
}
/* subtle darkening (the Figma multiply shadow) + header legibility */
.wu-map-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 9%, rgba(0,0,0,0) 17%);
  pointer-events: none;
}

.wu-map-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  padding: 46px 6.5% 10px;
  z-index: 2;
}
.wu-map-title {
  flex: 1;
  text-align: center;
  font-size: 4.1cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}
.wu-map-back {
  flex: none;
  width: 7cqw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.wu-map-back svg { width: 5.4cqw; height: 5.4cqw; }
.wu-map-back:active { opacity: 0.5; }
/* keep the title visually centered against the back button */
.wu-map-bar::after { content: ''; flex: none; width: 7cqw; }

/* --- simulated toast --- */
.wu-toast {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%) translateY(20px);
  z-index: 50;
  background: rgba(20,20,20,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  max-width: 80%;
  text-align: center;
}
.wu-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }