/* Soneliora 5 · a interface toma a luz da atmosfera escolhida */
:root {
  color-scheme: dark;
  --base: #0a171e; --base-2: #11232c; --accent: #9fd3df; --glow: 84, 170, 196; --warm: #d9e7ea;
  --text: #edece9; --text-2: rgba(237, 236, 233, .74); --text-3: rgba(237, 236, 233, .52);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
  --surface: rgba(255, 255, 255, .032); --surface-2: rgba(255, 255, 255, .06);
  --danger: #ffb4a8; --ok: #b9e6c3;
  --font-display: 'Marcellus', 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --s1: 13px; --s2: 16px; --s3: 20px; --s4: 25px; --s5: 31px; --s6: 39px; --s7: 49px; --s8: 61px;
  --r-s: 10px; --r-m: 16px; --r-l: 26px;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; min-height: 100vh; background: var(--base); color: var(--text);
  font: 400 var(--s2)/1.55 var(--font-ui); letter-spacing: .005em;
  transition: background-color 1.4s var(--ease);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--text); color: var(--base); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* textura de grão sobre tudo */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 120; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───── topo ───── */
.top {
  position: fixed; inset: var(--pv, 0px) 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 24px;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px; transition: background .5s, backdrop-filter .5s, opacity .8s;
}
.top.solid { background: color-mix(in srgb, var(--base) 78%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.brand span { font: 400 var(--s3)/1 var(--font-display); letter-spacing: .06em; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--text-2); text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.top-actions { display: flex; gap: 8px; }
.btn-quiet { background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; font-size: 15px; transition: border-color .2s, background .2s; }
.btn-quiet:hover { border-color: var(--accent); background: var(--surface); }
.btn-quiet.is-premium { border-color: rgba(var(--glow), .6); }

/* ───── palco ───── */
.stage { position: relative; min-height: min(100svh, 980px); min-height: max(640px, min(100svh, 980px)); overflow: hidden; isolation: isolate; display: grid; grid-template-rows: 1fr auto; }
.stage-photo { position: absolute; inset: -6%; z-index: -3; background-size: cover; background-position: center; filter: blur(14px) saturate(1.15) brightness(.5); transform: scale(1.06); transition: background-image 1.2s, opacity 1.2s; animation: drift 70s ease-in-out infinite alternate; }
.stage-photo.swap { opacity: 0; }
@keyframes drift { from { transform: scale(1.06) translate3d(-1.2%, -.6%, 0); } to { transform: scale(1.12) translate3d(1.2%, .8%, 0); } }
#stageCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.stage-vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 30%, rgba(0,0,0,.42) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 18%, transparent 62%, var(--base) 100%); }
.stage-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 110px var(--gutter) 28px; max-width: 1400px; width: 100%; margin: 0 auto; }
.stage-intro { align-self: end; padding-bottom: 40px; max-width: 540px; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.stage-intro h1 { font: 400 clamp(34px, 4.2vw, var(--s8))/1.06 var(--font-display); margin: 0 0 18px; letter-spacing: -.01em; text-wrap: balance; max-width: 9.5em; }
.stage-intro p { margin: 0; color: var(--text-2); font-size: 17px; max-width: 36ch; }
.stage-side { align-self: end; justify-self: end; text-align: right; padding-bottom: 40px; max-width: 28ch; transition: opacity 1s var(--ease); }
.scene-name { font: 400 var(--s5)/1.1 var(--font-display); margin: 0 0 8px; }
.scene-line { margin: 0; color: var(--text-2); font-size: 15px; }
.scene-meta { margin: 12px 0 0; color: var(--text-3); font-size: 14px; }
body.playing .stage-intro { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* orbe: uma lente para dentro da paisagem */
.orb { --b: .5; --e: 0; position: relative; width: clamp(200px, 32vmin, 320px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: transparent; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.orb-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow), calc(.28 + var(--e) * .5)) 0%, rgba(var(--glow), 0) 62%); transform: scale(calc(.8 + var(--b) * .35)); pointer-events: none; }
.orb-ring { position: absolute; inset: -14%; border-radius: 50%; border: 1px solid rgba(255,255,255,calc(.1 + var(--b) * .14)); transform: scale(calc(.9 + var(--b) * .16)); pointer-events: none; }
.orb-ring.two { inset: -30%; border-color: rgba(255,255,255,calc(.04 + var(--b) * .07)); transform: scale(calc(.94 + var(--b) * .1)); }
.orb-lens { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transform: scale(calc(.82 + var(--b) * .2)); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.22); background: var(--base-2); }
.orb-lens img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: saturate(1.1) brightness(calc(.72 + var(--e) * .4)); transition: opacity 1s; }
.orb-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 32%), radial-gradient(circle at 70% 82%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%), radial-gradient(circle, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%); }
.orb-text { position: relative; z-index: 2; display: grid; gap: 6px; justify-items: center; text-shadow: 0 2px 20px rgba(0,0,0,.6); pointer-events: none; }
.orb-word { font: 400 clamp(24px, 3vw, 34px)/1 var(--font-display); }
.orb-count { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.orb-play { width: 22px; height: 22px; opacity: .9; }
.orb:hover .orb-ring { border-color: rgba(255,255,255,.32); }
body.playing .orb-play { display: none; }

/* dock de controles */
.dock { position: relative; z-index: 3; margin: 0 auto 28px; width: min(100% - 2 * var(--gutter), 920px); display: flex; align-items: center; gap: 18px; padding: 10px 14px 10px 10px; border-radius: 999px;
  background: rgba(8, 10, 14, .38); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 20px 60px rgba(0,0,0,.3); transition: opacity .8s; }
.play { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--text); color: var(--base); display: grid; place-items: center; transition: transform .2s var(--ease), background .3s; }
.play:hover { transform: scale(1.05); }
.play svg { width: 20px; height: 20px; }
.dock-time { flex: 1 1 160px; min-width: 120px; display: grid; gap: 7px; }
.dock-time-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dock-time-row b { color: var(--text); font-weight: 600; font-size: 15px; }
.track { height: 3px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s linear; }
.durs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); }
.durs button { border: 0; background: transparent; padding: 6px 10px; border-radius: 999px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.durs button[aria-pressed="true"] { background: var(--text); color: var(--base); }
.durs button.locked { color: var(--text-3); opacity: .7; }
.vol { display: flex; align-items: center; gap: 8px; flex: 0 1 150px; color: var(--text-2); }
.vol svg { width: 18px; height: 18px; flex: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; flex: none; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover:not(:disabled) { border-color: var(--accent); }

/* modo imersão: só o orbe fica */
body.immersed .top, body.immersed .dock, body.immersed .stage-side { opacity: .08; }
body.immersed .stage { cursor: none; }

/* sliders */
input[type=range] { --val: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--val), rgba(255,255,255,.16) var(--val)); }
input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.16); }
input[type=range]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text); margin-top: -6.5px; box-shadow: 0 0 0 4px rgba(var(--glow), .18); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px rgba(var(--glow), .18); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(var(--glow), .55); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(var(--glow), .55); }

/* ───── faixas de conteúdo ───── */
main > .band { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: clamp(64px, 9vw, 112px) 0 0; }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 36px; }
.band-head h2 { font: 400 clamp(30px, 3.6vw, var(--s7))/1.08 var(--font-display); margin: 0; letter-spacing: -.005em; text-wrap: balance; }
.band-head p { margin: 0; color: var(--text-2); max-width: 46ch; }

/* atmosferas */
.scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.scene { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; border: 0; padding: 0; text-align: left; background: var(--base-2); isolation: isolate; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.95) brightness(.82); }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); }
.scene:hover img { transform: scale(1.04); filter: saturate(1.05) brightness(.92); }
.scene-label { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 4px; }
.scene-label b { font: 400 var(--s4)/1.1 var(--font-display); }
.scene-label small { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.4; }
.scene .tag { position: absolute; top: 12px; left: 12px; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.scene[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--base), 0 0 0 3px var(--accent); }
.scene[aria-pressed="true"] .tag-now { display: inline-block; }
.tag-now { display: none; position: absolute; top: 12px; right: 12px; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--text); color: var(--base); }

/* jornadas */
.journeys { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.journey { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 170px; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.journey h3 { font: 400 var(--s4)/1.15 var(--font-display); margin: 0 0 4px; }
.journey p { margin: 0; color: var(--text-2); font-size: 15px; }
.journey .purpose { color: var(--text); font-size: 16px; margin-bottom: 6px; }
.shape { display: grid; gap: 4px; }
.shape svg { width: 100%; height: 56px; overflow: visible; }
.shape .fill { fill: rgba(var(--glow), .14); }
.shape .line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.shape-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.journey-go { display: grid; gap: 8px; justify-items: end; text-align: right; }
.journey-go small { color: var(--text-3); font-size: 13px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 20px; font-weight: 600; font-size: 15px; border: 1px solid var(--line-2); background: transparent; text-decoration: none; color: var(--text); transition: background .2s, border-color .2s, transform .2s; }
.btn:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); }
.btn-solid { background: var(--text); color: var(--base); border-color: var(--text); }
.btn-solid:hover:not(:disabled) { background: #fff; border-color: #fff; }
.btn-accent { background: var(--accent); color: #0b0d10; border-color: var(--accent); }
.btn-accent:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
.btn-small { padding: 8px 14px; font-size: 14px; }
.btn-wide { width: 100%; }
.journey.active { background: linear-gradient(90deg, rgba(var(--glow), .08), transparent 70%); }

/* estúdio */
.studio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-l); padding: 26px; background: var(--surface); }
.panel h3 { font: 400 var(--s4)/1.2 var(--font-display); margin: 0 0 6px; }
.panel > p.lead { margin: 0 0 18px; color: var(--text-2); font-size: 15px; }
.p-mix { grid-column: span 7; } .p-breath { grid-column: span 5; } .p-waves { grid-column: span 6; } .p-tune { grid-column: span 6; } .p-fx { grid-column: span 12; }
/* 5.3.2 · nota base em loop, medidor e efeitos terapêuticos */
.tone-box { display: grid; gap: 10px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.tone-box .row { padding: 6px 0 0; border-top: 0; }
.tone-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface); transition: border-color .25s, background .25s, box-shadow .25s; }
.tone-btn:hover { border-color: var(--accent); }
.tone-btn b { display: block; font-weight: 600; font-size: 15.5px; }
.tone-btn small { display: block; color: var(--text-3); font-size: 13px; margin-top: 2px; }
.tone-ic { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--text); }
.tone-ic::before { content: ''; position: absolute; left: 16px; top: 13px; border-left: 13px solid var(--base); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.tone-btn[aria-pressed="true"] { border-color: rgba(var(--glow), .8); background: linear-gradient(120deg, rgba(var(--glow), .2), rgba(var(--glow), .05)); box-shadow: 0 0 32px rgba(var(--glow), .18); }
.tone-btn[aria-pressed="true"] .tone-ic { background: var(--accent); animation: tonePulse 2.4s ease-in-out infinite; }
.tone-btn[aria-pressed="true"] .tone-ic::before { left: 14px; top: 14px; width: 14px; height: 14px; border: 0; background: var(--base); border-radius: 3px; }
@keyframes tonePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--glow), .5); } 50% { box-shadow: 0 0 0 10px rgba(var(--glow), 0); } }
.meter { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.meter small { color: var(--text-3); font-size: 13px; }
.meter-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.meter-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent) 0 70%, #ffd38a 82%, #ff9b8a 100%); background-size: 100vw 100%; transition: width .09s linear; }
.meter-mark { position: absolute; left: 75%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.35); }
.meter output { font-variant-numeric: tabular-nums; }
.fx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.fx-head .lead { margin: 0 0 18px; color: var(--text-2); font-size: 15px; max-width: 760px; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.fx-card { --fxc: var(--accent); position: relative; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .3s, background .3s, box-shadow .3s; }
.fx-card.on { border-color: color-mix(in srgb, var(--fxc) 70%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--fxc) 16%, transparent), transparent 70%); }
.fx-card.hit { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fxc) 80%, transparent), 0 0 36px color-mix(in srgb, var(--fxc) 35%, transparent); }
.fx-top { display: flex; align-items: center; gap: 12px; }
.fx-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--fxc) 14%, transparent); color: var(--fxc); transition: transform .25s var(--ease); }
.fx-ic svg { width: 26px; height: 26px; }
.fx-card.hit .fx-ic { transform: scale(1.12); }
.fx-name { flex: 1; min-width: 0; }
.fx-name b { display: block; font-weight: 600; }
.fx-name small { display: block; color: var(--text-3); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.fx-play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); display: grid; place-items: center; font-size: 13px; transition: background .2s, border-color .2s, color .2s; }
.fx-play:hover { border-color: var(--fxc); }
.fx-card.on .fx-play { background: var(--fxc); border-color: var(--fxc); color: #0b0d10; }
.fx-card .row { padding: 2px 0 0; border-top: 0; }
.fx-card .row-head label { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.fx-card .seg button { padding: 6px 10px; font-size: 13px; }
.fx-vib { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.row { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; padding-top: 4px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row-head label, .row-head strong { font-weight: 600; font-size: 16px; }
.row-head output { color: var(--text-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.row small { color: var(--text-3); font-size: 14px; }
.inline-select { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--text-2); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--base); }
.breaths { display: grid; gap: 8px; margin: 4px 0 16px; }
.breath-opt { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: transparent; transition: border-color .2s, background .2s; }
.breath-opt:hover { border-color: var(--line-2); }
.breath-opt[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--glow), .07); }
.breath-opt b { font-weight: 600; }
.breath-opt small { grid-column: 1 / -1; color: var(--text-3); font-size: 13px; }
.bars { display: flex; gap: 2px; width: 120px; height: 8px; }
.bars i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.bars i.hold, .bars i.rest { background: rgba(255,255,255,.22); }
.bars i.out { background: rgba(var(--glow), .55); }
.toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.toggle strong { display: block; font-weight: 600; }
.toggle small { display: block; color: var(--text-3); font-size: 14px; margin-top: 2px; }
.switch { position: relative; flex: none; width: 46px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.16); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); background: #101214; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.note { font-size: 14px; color: var(--text-3); margin: 14px 0 0; }
.studio-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* diário */
.diary-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.summary { font: 400 clamp(24px, 2.6vw, var(--s5))/1.3 var(--font-display); margin: 0 0 18px; text-wrap: pretty; }
.summary em { font-style: normal; color: var(--accent); }
.moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.moods button { border: 1px solid var(--line-2); background: transparent; border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.moods button:hover { border-color: var(--accent); }
.moods button[aria-pressed="true"] { background: var(--text); color: var(--base); border-color: var(--text); }
.list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.list li span { color: var(--text-2); }
.list .empty { color: var(--text-3); }
.mood-dots { display: flex; gap: 3px; }
.mood-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mood-dots i.on { background: var(--accent); }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* premium */
.premium-wrap { border: 1px solid var(--line-2); border-radius: var(--r-l); overflow: hidden; background: linear-gradient(160deg, rgba(var(--glow), .1), transparent 55%), var(--surface); }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.compare > div { padding: 28px; }
.compare > div + div { border-left: 1px solid var(--line); }
.compare h3 { font: 400 var(--s4)/1.2 var(--font-display); margin: 0 0 4px; }
.compare .price { color: var(--text-2); margin: 0 0 14px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: var(--text-2); }
.ticks li::before { content: ""; width: 14px; height: 8px; margin-top: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.plan { padding: 28px; display: grid; gap: 12px; align-content: start; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan h4 { font: 400 var(--s4)/1.2 var(--font-display); margin: 0; }
.plan .amount { font: 400 var(--s6)/1 var(--font-display); margin: 4px 0 0; color: var(--text); }
.plan .amount small { font: 400 var(--s2)/1 var(--font-ui); color: var(--text-2); margin-left: 4px; }
.plan p { margin: 0; color: var(--text-2); font-size: 15px; }
.plan-status { padding: 16px 28px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.plan-status.active { color: var(--ok); }
/* 5.3.2 · três planos, anual em destaque */
.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-best { position: relative; background: linear-gradient(170deg, rgba(var(--glow), .16), rgba(var(--glow), .04) 60%, transparent); box-shadow: inset 0 0 0 1px rgba(var(--glow), .45); }
.plan-badge { justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0b0d10; background: var(--accent); }
.plan .plan-eq { color: var(--accent); font-weight: 500; }
.plan .plan-alt { font-size: 13.5px; color: var(--text-3); }
.plan .plan-alt span { white-space: nowrap; }
.plan-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-claim { margin: 0; padding: 0 28px 18px; font-size: 14px; color: var(--text-3); }
.pay-choice { display: grid; gap: 10px; }
.pay-choice .btn { justify-content: space-between; text-align: left; }
.pay-choice .btn small { font-weight: 400; color: var(--text-3); }
.pay-note { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; color: var(--text-2); }
.pay-note b { color: var(--text); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#mEmailNote { margin: 12px 0 0; }
.diag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.diag-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: var(--text-2); }
.diag-list li::before { content: '✓'; color: var(--ok); }
.diag-list li.no::before { content: '✕'; color: var(--danger); }
.diag-list li.warn::before { content: '!'; color: var(--gold, #ffd38a); font-weight: 700; }
.diag-list small { display: block; color: var(--text-3); }
.support { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px; align-items: center; margin-top: 14px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--r-l); }
.support h3 { font: 400 var(--s4)/1.2 var(--font-display); margin: 0 0 4px; }
.support p { margin: 0; color: var(--text-2); font-size: 15px; }
.support-amounts { display: flex; gap: 8px; flex-wrap: wrap; }

/* conhecimento */
.know { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; border-top: 1px solid var(--line); }
.know details { border-bottom: 1px solid var(--line); }
.know summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 400 var(--s3)/1.3 var(--font-display); }
.know summary::-webkit-details-marker { display: none; }
.know summary::after { content: "+"; font-family: var(--font-ui); color: var(--accent); font-size: 22px; line-height: 1; transition: transform .25s var(--ease); }
.know details[open] summary::after { transform: rotate(45deg); }
.know .body { padding: 0 0 22px; color: var(--text-2); font-size: 15px; max-width: 60ch; }
.know .body p { margin: 0 0 10px; }
.know .src { font-size: 13px; color: var(--text-3); }

/* rodapé */
.foot { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: clamp(72px, 10vw, 120px) auto 0; padding: 32px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; color: var(--text-3); font-size: 14px; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--text-2); }
.foot p { margin: 0; max-width: 60ch; }

/* mini player */
.mini { position: fixed; z-index: 70; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(10, 12, 16, .7); border: 1px solid var(--line-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .5s var(--ease); max-width: calc(100% - 24px); }
.mini.show { transform: translate(-50%, 0); }
.mini .play { width: 40px; height: 40px; }
.mini .play svg { width: 15px; height: 15px; }
.mini-text { display: grid; line-height: 1.25; min-width: 0; }
.mini-text b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-text span { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* diálogos */
dialog { border: 1px solid var(--line-2); border-radius: var(--r-l); padding: 0; width: min(100% - 24px, 480px); max-height: calc(100dvh - 24px); background: var(--base-2); color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dlg { padding: 28px; position: relative; display: grid; gap: 14px; }
.dlg h2 { font: 400 var(--s5)/1.15 var(--font-display); margin: 0; padding-right: 40px; }
.dlg p { margin: 0; color: var(--text-2); font-size: 15px; }
.dlg-close { position: absolute; top: 16px; right: 16px; }
.dlg-form { display: grid; gap: 14px; padding-top: 16px; }
#payContent.dlg-form { padding-top: 0; }
.sub-h { font: 400 20px/1.2 var(--font-display); margin: 8px 0 0; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); }
.tabs button { flex: 1; border: 0; background: transparent; padding: 9px 8px; border-radius: 10px; font-size: 14px; color: var(--text-2); }
.tabs button[aria-selected="true"] { background: var(--text); color: var(--base); }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.field input { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; background: rgba(0,0,0,.2); font-size: 16px; color: var(--text); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--glow), .2); }
.field small { color: var(--text-3); font-size: 13px; }
.field input[type=checkbox] { width: 18px; height: 18px; padding: 0; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.msg { font-size: 14px; min-height: 1.4em; color: var(--text-2); }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--ok); }
.qr { width: 220px; height: 220px; margin: 4px auto; border-radius: 14px; background: #fff; padding: 10px; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; background: rgba(0,0,0,.2); font-size: 13px; color: var(--text-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; margin: 0; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; }
.danger-zone { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn-danger { border-color: rgba(255,180,168,.4); color: var(--danger); }
.fine { font-size: 13px !important; color: var(--text-3) !important; }
.after { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 420px); padding: 24px; border-radius: var(--r-l); background: rgba(10,12,16,.72); border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: center; display: grid; gap: 12px; }
.after h2 { font: 400 var(--s5)/1.15 var(--font-display); margin: 0; }
.after .moods { justify-content: center; }

.toast { position: fixed; z-index: 150; left: 50%; top: calc(16px + var(--pv, 0px) + env(safe-area-inset-top)); transform: translate(-50%, -200%); visibility: hidden; padding: 12px 18px; border-radius: 14px; background: var(--text); color: var(--base); font-size: 15px; box-shadow: 0 20px 60px rgba(0,0,0,.4); transition: transform .45s var(--ease); max-width: calc(100% - 24px); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.preview-bar { position: relative; z-index: 61; background: var(--accent); color: #0b0d10; text-align: center; font-size: 13px; line-height: 1.4; padding: 7px 16px; }

/* ───── responsivo ───── */
@media (max-width: 1080px) {
  .stage-body { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 96px; gap: 10px; }
  .stage-intro { order: 0; align-self: auto; padding: 0; max-width: 24ch; }
  .stage-intro h1 { font-size: clamp(30px, 6vw, 44px); margin-bottom: 10px; }
  .stage-intro p { display: none; }
  .orb { order: 1; margin: 18px 0; }
  .stage-side { order: 2; align-self: auto; justify-self: center; text-align: center; padding: 0; }
  .scenes { grid-template-columns: repeat(4, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .scenes::-webkit-scrollbar { display: none; }
  .scenes { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(220px, 40%); }
  .scenes > li { scroll-snap-align: start; }
  .p-mix, .p-breath, .p-waves, .p-tune, .p-fx { grid-column: span 12; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .band-head { grid-template-columns: 1fr; gap: 12px; }
  .journey { grid-template-columns: 1fr; gap: 14px; }
  .journey-go { justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: space-between; }
  .diary-grid, .compare, .plans, .plans-3, .know { grid-template-columns: 1fr; }
  .compare > div + div, .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .support { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --s4: 22px; }
  .dock { flex-wrap: wrap; border-radius: 24px; gap: 12px 14px; padding: 12px; }
  .dock-time { flex: 1 1 calc(100% - 130px); }
  .durs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .durs::-webkit-scrollbar { display: none; }
  .vol { order: 4; flex: 1 1 100%; }
  .scenes { grid-auto-columns: 72%; }
  .panel { padding: 20px; }
  .compare > div, .plan { padding: 22px; }
  .plan-status { padding: 14px 22px; }
  .plan-claim { padding: 0 22px 16px; }
  .fx-head { flex-direction: column; gap: 0; }
  .fx-head .btn { margin-bottom: 14px; }
  .stage { min-height: max(600px, 100svh); }
  .orb { width: clamp(190px, 58vw, 260px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body.reduce-motion .stage-photo { animation: none; }

/* Laboratório 5.1: feedback de controles, acessibilidade e foco */
.studio-status{margin:16px 0 0;padding:14px 18px;border:1px solid #386d73;border-radius:15px;background:#0b2230;color:#bbdedb;font-size:.89rem;line-height:1.5}
#estudio input:disabled{opacity:.32;cursor:not-allowed;filter:grayscale(1)}
#waveStates[aria-disabled="true"]{opacity:.45;pointer-events:none}
#testTone{width:100%;font-size:.88rem}

/* Atlas do Firmamento: acesso na página principal */
.atlas-promo-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(170px,.65fr);align-items:center;gap:14px;border:1px solid #295975;border-radius:24px;background:radial-gradient(ellipse at 80% 48%,#173b58 0%,transparent 55%),linear-gradient(140deg,#0b2033,#091625);padding:clamp(22px,3vw,40px);overflow:hidden}
.atlas-promo-inner h2{font:normal clamp(28px,3.3vw,44px)/1.1 Georgia,serif;margin:7px 0 11px}
.atlas-promo-inner p{color:#b5d2dc;max-width:680px}
.atlas-promo-inner .btn{display:inline-block;text-decoration:none;margin-top:12px}
.atlas-eyebrow{letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#8ff5da!important;font-size:11px}
.atlas-art{width:min(28vw,260px);aspect-ratio:1;justify-self:center;position:relative;border-radius:50%;border:1px solid #568c9b;background:radial-gradient(circle at 45% 36%,#1a4761 0%,#112945 42%,#071523 84%);box-shadow:0 0 75px #4ef5d321, inset 0 0 44px #90bffb1c}
.atlas-ring{position:absolute;inset:18%;border:1px solid #a2ddfb57;border-radius:50%;transform:rotate(-22deg) scaleY(.62);box-shadow:0 0 0 26px #8ff6da0b}
.atlas-star{position:absolute;color:#b9f8ec;text-shadow:0 0 22px #c9f6ff;line-height:1}.s1{left:21%;top:32%;font-size:28px}.s2{right:19%;top:17%;font-size:22px}.s3{right:29%;bottom:20%;font-size:27px}.s4{left:22%;bottom:14%;font-size:19px}
@media(max-width:650px){.atlas-promo-inner{grid-template-columns:1fr}.atlas-art{width:150px;order:-1}}

/* Duração Premium contínua: estado visual com temporizador crescente */
.durs button.unlimited{font-size:19px;font-weight:750;min-width:36px;line-height:1.05}
.durs button.unlimited[aria-pressed="true"]{box-shadow:0 0 0 1px var(--accent),0 0 16px rgba(130,235,226,.3)}
.duration-hint{margin:8px 16px 0;text-align:center;font-size:11px;color:var(--text-3)}
.track.infinite i{width:30%!important;animation:soneliora-infinite 4s ease-in-out infinite alternate;box-shadow:0 0 10px var(--accent)}
@keyframes soneliora-infinite{from{transform:translateX(-90%)}to{transform:translateX(310%)}}
@media(prefers-reduced-motion:reduce){.track.infinite i{animation:none;transform:none}}

/* 5.3.6: trocar senha e versão do site na janela da conta */
.pass-box { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 4px; }
.pass-box summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 600; }
.pass-box .dlg-form { margin-top: 10px; }
.ver-note { margin: 10px 0 0; font-size: 12px; color: var(--text-3, rgba(255,255,255,.5)); }
.ver-note.warn { color: #ffd38a; }
.temper-box { margin: 14px 0 6px; display: grid; gap: 8px; }
.seg.seg-wrap { flex-wrap: wrap; }
.scene .tag-new { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; font: 700 11px/1.2 var(--font-ui, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #1a1206; background: linear-gradient(135deg, #ffe3a3, #f0b45c); box-shadow: 0 4px 14px rgba(240, 180, 92, .35); }
.scene[aria-pressed="true"] .tag-new { display: none; }
/* 6.7: atmosferas com gravações reais da natureza */
.scene-label .tag-real { justify-self: start; font: 700 10.5px/1.2 var(--font-ui, system-ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px 4px 20px; border-radius: 999px; color: #e6fbf6; background: rgba(10, 30, 32, .55) radial-gradient(circle at 10px 50%, #8fe3d8 0 3px, transparent 4px); border: 1px solid rgba(143, 227, 216, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ───────── 6.6 · portal de entrada do Atlas do Firmamento ───────── */
.atlas-gate { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
.ag-art { position: relative; display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid rgba(214, 176, 106, .38); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(214, 176, 106, .08); isolation: isolate; }
.ag-art::after { content: ''; position: absolute; inset: 9px; border-radius: 20px; border: 1px solid rgba(214, 176, 106, .2); pointer-events: none; }
.ag-art img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; display: block; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), filter .6s; filter: saturate(1.05); }
.ag-art:hover img, .ag-art:focus-visible img { transform: scale(1.1); filter: saturate(1.2) brightness(1.06); }
.ag-badge { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px 8px 26px; border-radius: 99px; background: rgba(5, 8, 16, .7); border: 1px solid rgba(214, 176, 106, .45); color: #f2dca4; font: 600 11px/1 'Cinzel', Georgia, serif; letter-spacing: .18em; text-transform: uppercase; backdrop-filter: blur(6px); }
.ag-badge::before { content: ''; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #ff5b5b; box-shadow: 0 0 10px #ff5b5b; animation: agLive 1.6s ease-in-out infinite; }
@keyframes agLive { 50% { opacity: .3; } }
.ag-eyebrow { font: 600 11px/1 'Cinzel', Georgia, serif !important; letter-spacing: .3em; text-transform: uppercase; color: #d6b06a !important; }
.atlas-gate h2 { margin: 14px 0 12px; font: 600 clamp(34px, 4.6vw, 62px)/1 'Cinzel', Georgia, serif; text-transform: uppercase; letter-spacing: .02em; background: linear-gradient(180deg, #fff6d8, #e9cd8c 45%, #b98a43); -webkit-background-clip: text; background-clip: text; color: transparent; }
.atlas-gate h2 em { font-style: normal; }
.ag-lead { color: #d8d0bf !important; font-size: 17px; max-width: 560px; }
.ag-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 22px; }
.ag-links a { display: grid; grid-template-columns: 38px 1fr; gap: 0 12px; align-items: center; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #f1e8d4; border: 1px solid rgba(214, 176, 106, .22); background: rgba(214, 176, 106, .05); transition: border-color .25s, background .25s, transform .25s; }
.ag-links a:hover { border-color: rgba(214, 176, 106, .55); background: rgba(214, 176, 106, .1); transform: translateY(-2px); }
.ag-links i { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(214, 176, 106, .45); color: #f2dca4; font-style: normal; }
.ag-links b { font-size: 15px; } .ag-links small { font-size: 12.5px; color: #b5ad9c; }
.ag-cta { display: inline-flex; gap: 8px; text-decoration: none; }
@media (max-width: 860px) { .atlas-gate { grid-template-columns: 1fr; } .ag-links { grid-template-columns: 1fr; } }
@media (max-width: 860px) { body.fx-has-dock .mini { bottom: calc(92px + env(safe-area-inset-bottom)) !important; } }

/* 6.7: escolha de idioma no topo */
.lang-pick { position: relative; display: inline-flex; align-items: center; }
.lang-pick select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 30px 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--text, #fff); font: 600 13px/1 var(--font-ui, system-ui); letter-spacing: .06em; cursor: pointer; }
.lang-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-pick select option { color: #111; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 420px) { .lang-pick select { height: 36px; padding: 0 26px 0 11px; } }

/* 6.8 · Premium de presente */
.gift-box { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px 22px; align-items: center; margin: 18px 28px 22px; padding: 18px 20px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent, #9fd3df) 40%, transparent); background: linear-gradient(135deg, rgba(255, 200, 120, .1), rgba(255, 255, 255, .02)); }
.gift-box h3 { margin: 0 0 4px; font-size: 20px; }
.gift-box p { margin: 0; color: var(--text-2, #cfd8da); }
.gift-box .plan-claim { grid-column: 1 / -1; padding: 0; }
.gift-big { margin: 4px 0; font-size: 26px; font-weight: 600; text-align: center; }
.gift-msg { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent, #9fd3df); font-style: italic; }
@media (max-width: 720px) { .gift-box { grid-template-columns: 1fr; margin: 14px 12px 18px; } }

/* 6.8 · meditações guiadas */
.meds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.med { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.med h3 { margin: 0; font-size: 18px; }
.med p { margin: 0; color: var(--text-2, #c7d1d3); font-size: 14px; flex: 1; }
.med small { color: var(--accent, #9fd3df); font-weight: 600; }
.med .btn { margin-top: 8px; }
.med.on { border-color: var(--accent, #9fd3df); box-shadow: 0 0 0 1px var(--accent, #9fd3df) inset; }
.med-now { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1); }
.med-step { margin: 0 0 10px; font-size: 18px; line-height: 1.45; min-height: 52px; }
.med-now .track { margin-bottom: 12px; }
/* 6.8 · mixer de ambientes */
.mix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mix { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.mix button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: 600 14px var(--sans, system-ui); cursor: pointer; padding: 0; text-align: left; }
.mix button i { font-style: normal; font-size: 20px; width: 26px; text-align: center; }
.mix input[type=range] { width: 100%; }
.mix.on { border-color: var(--accent, #9fd3df); background: rgba(159, 211, 223, .1); }
.mix:not(.on) input { display: none; }
.mix.lock { opacity: .55; }
/* 6.8 · dormir e despertar */
.p-sleep h3 { margin-top: 0; }
.wake { display: grid; gap: 8px; margin-top: 12px; }
.wake small { display: block; color: var(--text-3, #9fb0b3); }
.wake-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wake-row input, .wake-row select { padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .3); color: inherit; font: 600 15px var(--sans, system-ui); color-scheme: dark; }
.wake-row select { flex: 1; min-width: 140px; }
.wake-on { color: var(--accent, #9fd3df); font-weight: 600; }
.p-mixer, .p-sleep { margin-top: 14px; }
.pix-livre .qr { display: block; margin: 6px auto; background: #fff; border-radius: 12px; padding: 6px; }
.pix-livre .btn-small { justify-self: center; }
/* 7.1 · rotina de dormir, ouvir sem internet, humor antes × depois */
.rot-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.rotina { display: grid; gap: 14px; }
.rot-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }
.rot-row label { color: var(--text-2, #c7d1d3); font-weight: 600; font-size: 14px; }
.rot-row select { min-height: 46px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text, #edece9); font: 500 15px var(--font-ui, system-ui); }
.rot-row select option { background: #0f1f27; }
.rot-chk { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 15px; }
.rot-chk input { width: 20px; height: 20px; accent-color: var(--accent, #9fd3df); }
.rot-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.offline h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.tag-prem { font: 700 11px var(--font-ui, system-ui); letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, #f3d48b, #c99a45); color: #1a1205; }
.off-track { margin: 6px 0 10px; }
.before { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; margin: 10px auto 0; color: var(--text-2, #c7d1d3); font-size: 14px; }
.before[hidden] { display: none; }
.moods.moods-mini button { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.moods button[aria-pressed="true"] { background: var(--accent, #9fd3df); color: #0a171e; border-color: transparent; }
.mood-week { margin-top: 18px; }
.mood-chart svg { width: 100%; height: auto; display: block; }
.mood-chart .g { stroke: rgba(255, 255, 255, .08); }
.mood-chart .ax { fill: var(--text-3, #8a979c); font: 11px var(--font-ui, system-ui); }
.mood-chart rect.antes, .mood-leg i.antes { fill: rgba(200, 160, 255, .55); background: rgba(200, 160, 255, .55); }
.mood-chart rect.depois, .mood-leg i.depois { fill: var(--accent, #9fd3df); background: var(--accent, #9fd3df); }
.mood-leg { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-3, #8a979c); margin: 6px 0 0; }
.mood-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 6px; }
.atalho-go { position: fixed; inset: auto 16px calc(110px + env(safe-area-inset-bottom)) 16px; z-index: 9300; display: grid; gap: 2px; padding: 20px; border-radius: 22px; border: 1px solid rgba(241, 211, 140, .5); background: linear-gradient(160deg, #1d2c46, #0b1220); color: #fff; font: 400 15px var(--font-ui, system-ui); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); cursor: pointer; animation: atalho-in .5s ease-out; }
.atalho-go b { font: 400 24px var(--font-display, Georgia, serif); }
.atalho-go span { color: #f1d38c; }
@keyframes atalho-in { from { opacity: 0; transform: translateY(20px); } }
@media (max-width: 760px) { .rot-grid { grid-template-columns: 1fr; } .rot-row { grid-template-columns: 1fr; gap: 6px; } }
.stage-side .before { margin-top: 12px; flex-direction: column; gap: 6px; }
.stage-side .before .moods { margin: 0; justify-content: center; }
.stage-side .before .moods button { background: rgba(10, 14, 20, .35); backdrop-filter: blur(6px); }
.sono { margin-top: 18px; }
.sono .moods[hidden] { display: none; }
/* 7.2 · cupom */
.cupom-box { display: grid; gap: 8px; max-width: 520px; margin: 18px auto 0; text-align: center; }
.cupom-box label { color: var(--text-2); font-size: 14px; }
.cupom-row { display: flex; gap: 8px; }
.cupom-row input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); font: 600 15px var(--font-ui, system-ui); text-transform: uppercase; letter-spacing: .06em; }
.cupom-msg { margin: 0; font-size: 14px; color: var(--text-3); } .cupom-msg.ok { color: #b9e6c3; } .cupom-msg.err { color: #ffb4a8; }
.cupom-preco { margin: 8px 0 0; color: #ffe2a0; font-weight: 600; font-size: 14px; }
.cupom-preco[hidden] { display: none; }
/* 7.2 · dentro dos apps das lojas não há compras */
html.app-loja .plans, html.app-loja .cupom-box, html.app-loja .gift-box .plan-pay, html.app-loja .plan-claim, html.app-loja #promoInline, html.app-loja .support, html.app-loja [data-loja-oculto] { display: none !important; }
[data-so-app] { display: none; }
html.app-loja [data-so-app] { display: block; }
html.app-loja .gift-box { display: none !important; }
.app-note { max-width: 640px; margin: 0 auto 18px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line-2); text-align: center; color: var(--text-2); }