/* mibrocha.com/<artist> and /r/<invite>: the web only sends people to the app. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/jakarta-v1.woff2) format('woff2'); }
:root {
  --bg: #fbf7f4; --bg-2: #f5ede7; --card: #ffffff; --line: rgba(60, 35, 30, 0.08); --line-2: rgba(60, 35, 30, 0.14);
  --text: #241c1a; --text-2: #5a4d49; --muted: #8f817c; --blush: #c4787a; --blush-deep: #a4585b; --blush-soft: #f3dcd8;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60% 45% at 85% 0%, rgba(241, 211, 190, 0.55), transparent 70%),
    radial-gradient(55% 40% at 0% 100%, rgba(243, 220, 216, 0.7), transparent 70%),
    var(--bg);
}
/* one language at a time: html.lang-xx (get.js) */
html:not(.lang-es) .es, html:not(.lang-en) .en, html:not(.lang-pt) .pt, html:not(.lang-fr) .fr, html:not(.lang-it) .it, html:not(.lang-de) .de, html:not(.lang-tr) .tr { display: none !important; }
.wrap { max-width: 440px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; }
.brand { font-weight: 800; font-size: 22px; letter-spacing: -0.04em; color: var(--blush); text-decoration: none; margin-bottom: max(76px, 9vh); }
.card {
  width: 100%; text-align: center; padding: 34px 24px 30px; border-radius: 30px; background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(120, 60, 50, 0.25);
}
.photo { position: relative; width: 132px; height: 132px; margin: -86px auto 18px; border-radius: 50%; background: var(--blush-soft); box-shadow: 0 0 0 6px var(--bg), 0 18px 40px -16px rgba(120, 60, 50, 0.45); overflow: hidden; display: grid; place-items: center; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.initial { font-weight: 800; font-size: 48px; color: var(--blush-deep); }
.badge { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 22px; background: var(--blush-soft); color: var(--blush-deep); display: grid; place-items: center; }
.badge svg { width: 28px; height: 28px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blush); margin-bottom: 10px; }
h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; }
.city { margin-top: 8px; color: var(--muted); font-weight: 600; font-size: 15px; }
.city:empty { display: none; }
.lead { margin-top: 16px; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.actions { width: 100%; display: grid; gap: 10px; margin-top: 22px; }
.store {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 18px; text-decoration: none; color: #fff; background: var(--text);
  font-weight: 700; font-size: 19px; line-height: 1.1; transition: transform 0.5s var(--spring), box-shadow 0.5s var(--spring);
  box-shadow: 0 16px 30px -18px rgba(36, 28, 26, 0.8);
}
.store svg { width: 28px; height: 28px; flex: none; }
.store small { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; margin-bottom: 3px; }
.store:active { transform: scale(0.98); }
@media (hover: hover) { a.store:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgba(36, 28, 26, 0.85); } }
.store.soon { background: var(--bg-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); cursor: default; }
.open { margin-top: 18px; color: var(--blush-deep); font-weight: 700; font-size: 15px; text-decoration: none; padding: 10px 14px; border-radius: 12px; }
.open:active { background: var(--blush-soft); }
.foot { margin-top: auto; padding-top: 40px; display: flex; gap: 18px; font-size: 13px; }
.foot a { color: var(--muted); text-decoration: none; }
.rise { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--spring) forwards; animation-delay: calc(var(--d, 0) * 70ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }