:root {
  --noche: #060510;
  --plata: #e4e7ef;
  --rosa: #e6a8c4;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #060510; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--plata);
  font-family: "EB Garamond", serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; }
#space { position: fixed; inset: 0; z-index: 0; display: block; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 44%, transparent 36%, rgba(0,0,0,.84) 100%); }

.leftbar { position: fixed; top: calc(2.6vh + env(safe-area-inset-top)); left: calc(20px + env(safe-area-inset-left)); z-index: 32; display: flex; gap: 12px; }
.site-menu-button, .site-back-button {
  --magnet-x: 0px; --magnet-y: 0px;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(228,231,239,.24); border-radius: 10px;
  background: rgba(6,5,16,.38); color: rgba(228,231,239,.86); cursor: pointer;
  transform: translate(var(--magnet-x), var(--magnet-y));
  transition: border-color .3s ease, color .3s ease, transform .35s cubic-bezier(.19,1,.22,1), box-shadow .3s ease;
}
.site-menu-button span, .site-menu-button span::before, .site-menu-button span::after { display: block; width: 18px; height: 1px; background: currentColor; }
.site-menu-button span { position: relative; }
.site-menu-button span::before, .site-menu-button span::after { content: ""; position: absolute; left: 0; }
.site-menu-button span::before { top: -5px; }
.site-menu-button span::after { top: 5px; }
.site-back-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@keyframes topbar-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.topbar { position: fixed; top: calc(2.6vh + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); z-index: 32; opacity: 0; animation: topbar-in 1s .45s ease both; }
.tb-session, .account-shell { position: relative; display: inline-flex; }
.tb-login {
  --magnet-x: 0px; --magnet-y: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 18px; overflow: hidden;
  border: 1px solid rgba(228,231,239,.28); border-radius: 12px;
  background: rgba(6,5,16,.38); color: var(--plata);
  font: 600 11px "Cinzel", serif; letter-spacing: .13em; text-decoration: none; text-transform: uppercase;
  transform: translate(var(--magnet-x), var(--magnet-y));
  transition: border-color .3s ease, color .3s ease, transform .35s cubic-bezier(.19,1,.22,1), box-shadow .3s ease;
}
.session-tools { display: flex; align-items: center; gap: 10px; }
.session-icon, .user-chip { --magnet-x: 0px; --magnet-y: 0px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(228,231,239,.9); cursor: pointer; transform: translate(var(--magnet-x),var(--magnet-y)); }
.session-icon svg, .user-chip-ring { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.user-chip-ring { position: absolute; }
.user-avatar { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #17151d center/cover; color: transparent; font-size: 0; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 178px; padding: 6px; border: 1px solid rgba(230,168,196,.3); border-radius: 10px; background: rgba(6,5,16,.92); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .22s; }
.account-shell.open .account-menu { opacity: 1; visibility: visible; transform: none; }
.account-option { width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: rgba(228,231,239,.82); font: 600 11px "Cinzel",serif; letter-spacing: .11em; text-align: left; text-transform: uppercase; cursor: pointer; }
.account-option.primary { color: #fff; background: rgba(230,168,196,.12); }
body.has-session .tb-login { display: none; }

.coming-main { position: relative; z-index: 4; display: grid; place-items: center; min-height: max(100vh, 760px); padding: 9rem 1.5rem 5rem; text-align: center; }
.coming-inner { width: min(680px, 100%); }
.coming-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 52px; color: var(--plata); text-decoration: none; }
.coming-mark { --aluen-icon-x: 0px; --aluen-icon-y: 0px; position: relative; display: grid; place-items: center; width: 62px; height: 62px; transform: translate(var(--aluen-icon-x),var(--aluen-icon-y)); transition: transform .4s cubic-bezier(.19,1,.22,1), filter .35s ease; }
.coming-mark::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle,rgba(230,168,196,.34),rgba(107,79,163,.12) 38%,transparent 70%); opacity: .48; filter: blur(8px); transition: opacity .35s ease, transform .4s ease; }
.coming-mark svg { position: relative; width: 54px; height: 54px; filter: drop-shadow(0 0 10px rgba(228,231,239,.16)); }
.coming-mark.is-aluen-icon-magnet::before, .coming-brand:hover .coming-mark::before { opacity: .95; transform: scale(1.12); }
.coming-mark.is-aluen-icon-magnet, .coming-brand:hover .coming-mark { filter: drop-shadow(0 0 18px rgba(230,168,196,.42)); }
.coming-wordmark { font: 500 clamp(17px,3vw,24px) "Cinzel",serif; letter-spacing: .28em; }
.coming-eyebrow { margin: 0 0 18px; color: rgba(230,168,196,.8); font: 600 11px "Cinzel",serif; letter-spacing: .3em; }
.coming-title { margin: 0; font: 400 clamp(44px,8vw,82px)/1.05 "Cinzel",serif; letter-spacing: .03em; }
.coming-rule { width: 54px; height: 1px; margin: 30px auto; background: rgba(230,168,196,.26); }
.coming-copy { max-width: 600px; margin: 0 auto; color: rgba(228,231,239,.62); font-size: clamp(18px,2.2vw,22px); line-height: 1.55; }
.coming-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; color: rgba(228,231,239,.44); font: 600 10px "Cinzel",serif; letter-spacing: .22em; }
.coming-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 12px rgba(230,168,196,.55); }

.profile-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 22px; background: rgba(3,1,7,.66); backdrop-filter: blur(10px); }
.profile-overlay[hidden] { display: none; }
.profile-card { position: relative; width: min(92vw,430px); padding: 34px 30px 30px; border: 1px solid rgba(228,231,239,.16); border-radius: 8px; background: rgba(8,7,14,.96); text-align: center; }
.profile-close { position: absolute; right: 15px; top: 12px; border: 0; background: transparent; color: rgba(228,231,239,.62); font-size: 24px; cursor: pointer; }
.profile-avatar { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 16px; border: 1px solid rgba(230,168,196,.44); border-radius: 50%; background: #17151d center/cover; color: transparent; font-size: 0; }
.profile-title { margin: 0; font: 500 24px "Cinzel",serif; letter-spacing: .15em; text-transform: uppercase; }
.profile-sub { margin: 8px 0 24px; color: rgba(228,231,239,.58); font: 500 11px "Cinzel",serif; letter-spacing: .18em; text-transform: uppercase; }
.profile-data { display: grid; gap: 10px; margin: 0; text-align: left; }
.profile-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 11px 12px; border: 1px solid rgba(228,231,239,.08); border-radius: 7px; }
.profile-row dt { color: rgba(228,231,239,.46); font: 9px "Cinzel",serif; letter-spacing: .16em; text-transform: uppercase; }
.profile-row dd { margin: 0; overflow-wrap: anywhere; }
.profile-status { min-height: 1.2em; }
.profile-actions { display: grid; gap: 9px; margin-top: 20px; }
.profile-action { min-height: 42px; border: 1px solid rgba(228,231,239,.2); border-radius: 7px; background: transparent; color: var(--plata); font: 600 10px "Cinzel",serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

.site-menu-overlay { position: fixed; inset: 0; z-index: 34; background: rgba(0,0,0,.58); backdrop-filter: blur(4px); }
.site-menu-overlay[hidden] { display: none; }
.site-menu-panel { position: fixed; inset: 0 auto 0 0; z-index: 35; display: flex; flex-direction: column; }
.site-menu-panel[hidden] { display: flex; transform: translateX(-104%); pointer-events: none; }
.site-menu-head { display: flex; align-items: center; justify-content: space-between; }
.site-menu-brand { display: inline-flex; align-items: center; color: var(--plata); text-decoration: none; }
.site-menu-list { display: grid; }
.site-menu-item { display: flex; align-items: center; justify-content: space-between; color: rgba(228,231,239,.84); text-decoration: none; }
.site-menu-language { margin-top: auto; }
body.menu-open { overflow: hidden; }

body.site-header-hidden .leftbar, body.site-header-hidden .topbar { opacity: 0; pointer-events: none; transform: translateY(-14px); }
.leftbar, .topbar { transition: opacity .35s ease, transform .35s ease; }

@media (max-width: 620px) {
  .leftbar { left: 12px; }
  .topbar { right: 12px; }
  .session-icon { display: none; }
  .coming-main { padding-top: 8rem; }
  .coming-wordmark { letter-spacing: .2em; }
}