/* phicode.dev.br — física como linguagem visual */
:root {
  --bg: #0e0d0b;
  --s1: #12110e;
  --s2: #16140f;
  --photo: #1a1814;
  --ink: #ece8e1;
  --ink2: #cfcac1;
  --mute: #a39e94;
  --acc: oklch(0.8 0.13 70);
  --green: oklch(0.78 0.15 150);
  --line: rgba(236, 232, 225, .12);
  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --io: cubic-bezier(.76, 0, .24, 1);
  --sans: Geist, system-ui, sans-serif;
  --serif: 'Instrument Serif', serif;
  --mono: 'JetBrains Mono', monospace;
}

html, body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--acc); }
::selection { background: var(--acc); color: var(--bg); }
button { -webkit-tap-highlight-color: transparent; }

@keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes mask { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ripple { from { transform: scale(0); opacity: .9; } to { transform: scale(1); opacity: 0; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 oklch(0.8 0.13 70 / .5); } 50% { box-shadow: 0 0 0 8px oklch(0.8 0.13 70 / 0); } }

/* Entradas — desligadas ao trocar idioma (.quiet) para não repetir a coreografia */
.rise { animation: rise var(--dur, 1s) var(--ease) var(--d, 0s) both; }
.rise-b { animation: rise var(--dur, .9s) var(--ease) var(--d, 0s) backwards; }
.mask-in { display: inline-block; animation: mask 1.2s var(--io) var(--d, 0s) both; }
.fade-in { animation: fadein var(--dur, 1.4s) ease var(--d, 0s) both; }
.quiet .rise, .quiet .rise-b, .quiet .mask-in, .quiet .fade-in { animation: none !important; }

.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); font-weight: 400; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.acc { color: var(--acc); }
.muted { color: var(--mute); }
.label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }

.app { min-height: 100vh; font-family: var(--sans); background: var(--bg); color: var(--ink); position: relative; overflow-x: hidden; overflow-x: clip; }

/* ── Header ───────────────────────────────────────────── */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: flex-start; gap: 24px; flex-wrap: wrap; padding: 20px var(--pad); background: linear-gradient(#0e0d0b 35%, rgba(14, 13, 11, 0)); }
.logo { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.logo-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed oklch(0.8 0.13 70 / .5); animation: spin 14s linear infinite; }
.logo-dot { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.logo-phi { width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: var(--bg); display: grid; place-items: center; font-family: var(--serif); font-size: 22px; line-height: 1; padding-bottom: 2px; }
.hdr-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.lang-btn { font: inherit; letter-spacing: .08em; color: var(--ink); background: none; border: 1px solid rgba(236, 232, 225, .22); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .3s; }
.lang-btn:hover { border-color: var(--acc); color: var(--acc); }

/* ── Transição "lente" ────────────────────────────────── */
.curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.curtain-a { position: absolute; inset: 0; background: var(--acc); clip-path: circle(0% at 50% 50%); }
.curtain-b { position: absolute; inset: 0; background: var(--s2); display: grid; place-items: center; overflow: hidden; clip-path: circle(0% at 50% 50%); }
.curtain-ring { position: absolute; width: 120vmax; height: 120vmax; border-radius: 50%; border: 1px solid oklch(0.8 0.13 70 / .5); animation: ripple 2.6s ease-out infinite; }
.curtain-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; transform: translateY(40px); }
.curtain-num { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--acc); }
.curtain-name { font-family: var(--serif); font-style: italic; font-size: clamp(64px, 12vw, 180px); line-height: 1; color: var(--ink); }
.curtain-psi { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--mute); }

/* ── Navegador orbital ───────────────────────────────── */
.orbit-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.orbit-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; animation: fadein 2.2s ease .1s both; }
.planet { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; color: var(--ink); transform: translate(-999px, -999px); will-change: transform; transition: color .3s; animation: fadein 1.2s ease 1.2s backwards; }
.planet:hover { color: var(--acc) !important; }
.planet-dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 7px rgba(236, 232, 225, .07), 0 0 28px currentColor; flex: none; }
.planet-txt { display: flex; flex-direction: column; gap: 3px; }
.planet-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; opacity: .65; }
.planet-name { font-size: 17px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }

/* Celular: doca compacta (só os pontos) que expande em tela cheia ao tocar */
.orbit-toggle { position: absolute; top: 0; right: 0; width: 120px; height: 92px; padding: 0; border: 0; background: none; cursor: pointer; display: none; -webkit-tap-highlight-color: transparent; }
.orbit-layer.mini .orbit-toggle { display: block; pointer-events: auto; }
.orbit-layer.mini .planet { pointer-events: none; }
.orbit-layer.mini .planet-txt { display: none; }
.orbit-scrim { position: absolute; inset: 0; display: none; pointer-events: auto; }
.orbit-layer.open .orbit-scrim { display: block; }

#stage { transform-origin: 50% 40vh; }

/* ── Tipografia de página ────────────────────────────── */
.page { padding: clamp(130px, 16vw, 200px) var(--pad) 0; }
.h1-page { margin: 0; font-size: clamp(60px, 12vw, 180px); font-weight: 500; letter-spacing: -.055em; line-height: .85; }
.h1-num { font-family: var(--mono); font-size: 14px; letter-spacing: 0; color: var(--acc); vertical-align: top; margin-right: 12px; }
.h2-serif { margin: 0; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(48px, 7vw, 96px); line-height: 1; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sec { margin-top: clamp(110px, 13vw, 200px); }

/* ── 01 Início ───────────────────────────────────────── */
.hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; }
.hero-title { margin: 0; position: absolute; inset: 0; pointer-events: none; font-weight: 500; font-size: clamp(40px, 5.6vw, 96px); line-height: .95; letter-spacing: -.045em; }
.hero-a { position: absolute; left: var(--pad); top: clamp(96px, 13vh, 140px); display: block; overflow: hidden; padding-bottom: .06em; }
.hero-b { position: absolute; right: var(--pad); bottom: clamp(36px, 7vh, 72px); display: block; overflow: hidden; padding-bottom: .12em; text-align: right; }
.hero-b .mask-in { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--acc); }
.hero-phi { position: absolute; left: var(--pad); bottom: clamp(40px, 7vh, 76px); display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--mute); pointer-events: none; }
.hero-phi-digits { color: var(--acc); max-width: min(40vw, 360px); overflow: hidden; white-space: nowrap; text-overflow: clip; }
.hero-hint { position: absolute; left: 0; right: 0; top: 72vh; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--mute); pointer-events: none; }
.hero-tick { width: 1px; height: 28px; background: linear-gradient(rgba(0, 0, 0, 0), var(--acc)); }

.laws-sec { padding: clamp(100px, 14vw, 200px) var(--pad) 0; }
.laws { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--line); }
.law { opacity: .14; transition: opacity .4s; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; padding: 56px 24px; }
.law-num { font-family: var(--mono); font-size: 12px; color: var(--acc); }
.law-eq { font-family: var(--serif); font-size: clamp(44px, 4.6vw, 72px); line-height: 1; letter-spacing: .04em; word-spacing: .18em; white-space: nowrap; color: var(--ink); }
.law-txt { display: flex; flex-direction: column; gap: 10px; }
.law-title { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; }
.law-body { font-size: 16px; line-height: 1.55; color: var(--mute); text-wrap: pretty; max-width: 340px; margin: 0 auto; }

/* ── 02 Formações ────────────────────────────────────── */
.works-sub { margin: 28px 0 0; max-width: 460px; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.25; color: var(--ink2); }
.filters-bar { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { font: inherit; font-size: 14px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(236, 232, 225, .2); background: rgba(0, 0, 0, 0); color: var(--ink); transition: all .3s; }
.chip-btn.on { border-color: var(--acc); background: var(--acc); color: var(--bg); }
.chip-count { font-family: var(--mono); font-size: 11px; opacity: .7; }
.works-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 12px; align-items: start; }
.atom-card { position: sticky; top: 100px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--s1); }
.atom-stage { position: relative; height: 300px; }
.atom-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.atom-cap { position: absolute; top: 18px; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.atom-detail { display: grid; padding: 28px 32px 36px; border-top: 1px solid rgba(236, 232, 225, .08); }
.cert-detail { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .5s, transform .8s var(--ease); }
.cert-detail.on { opacity: 1; transform: none; pointer-events: auto; }
.cert-el { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--acc); }
.cert-title { font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; text-wrap: pretty; }
.cert-issuer { font-size: 16px; color: var(--ink2); }
.btn-solid { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; transition: background .3s; }
.btn-solid:hover { background: var(--acc); color: var(--bg); }
.btn-ghost { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 999px; border: 1px solid rgba(236, 232, 225, .3); font-size: 15px; transition: all .3s; }
.btn-ghost:hover { border-color: var(--acc); }
.cert-note { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.cert-list { display: flex; flex-direction: column; gap: 8px; }
.cert-row { font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 6px; border: 1px solid rgba(236, 232, 225, .12); background: var(--bg); transition: border-color .4s, background .4s, transform .5s var(--ease); }
.cert-row.on { border-color: var(--acc); background: var(--s2); }
.cert-row:hover { border-color: oklch(0.8 0.13 70 / .6); transform: translateX(-4px); }
.cert-row-num { font-family: var(--mono); font-size: 12px; color: var(--acc); }
.cert-row-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cert-row-title { font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.cert-row-org { font-size: 13px; color: var(--mute); }
.cert-sym { width: 44px; height: 44px; border-radius: 4px; border: 1px solid rgba(236, 232, 225, .18); display: grid; place-items: center; font-size: 15px; font-weight: 500; color: var(--mute); transition: all .4s; }
.cert-row.on .cert-sym { border-color: var(--acc); color: var(--acc); }

.stack-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.stack-scene { position: relative; height: clamp(420px, 46vw, 580px); perspective: 1600px; display: grid; place-items: center; overflow: visible; }
.stack-rig { position: relative; width: clamp(220px, 24vw, 320px); height: clamp(220px, 24vw, 320px); transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.plate { position: absolute; inset: 0; border-radius: 10px; border: 1px solid rgba(236, 232, 225, .22); background: rgba(22, 20, 15, .78); box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: transform .9s var(--ease), border-color .5s, background .5s, box-shadow .6s; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; backdrop-filter: blur(2px); }
.plate.on { border-color: var(--acc); background: rgba(40, 33, 22, .92); box-shadow: 0 0 60px oklch(0.8 0.13 70 / .25); }
.plate-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.plate-sym { font-family: var(--serif); font-style: italic; font-size: 22px; }
.plate-cat { font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.plate.on .plate-top, .plate.on .plate-cat { color: var(--acc); }
.plate-chips { display: flex; flex-wrap: wrap; gap: 5px; opacity: .35; transition: opacity .5s; }
.plate.on .plate-chips { opacity: 1; }
.plate-chip { padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(236, 232, 225, .25); font-size: 10px; color: var(--ink); }
.stack-note { position: absolute; left: 0; bottom: 8px; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.layers { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.layer { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.layer-num { font-family: var(--mono); font-size: 12px; color: var(--acc); }
.layer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.layer-cat { font-size: clamp(28px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.035em; line-height: 1; color: var(--ink); transition: transform .6s var(--ease), color .4s; }
.layer.on .layer-cat { color: var(--acc); transform: translateX(10px); }
.layer-z { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.layer-body { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.layer.on .layer-body { grid-template-rows: 1fr; }
.layer-items { overflow: hidden; display: flex; flex-wrap: wrap; gap: 8px; }
.layer-chip { margin-top: 12px; padding: 7px 13px; border: 1px solid rgba(236, 232, 225, .22); border-radius: 999px; font-size: 14px; color: var(--ink2); }
.li-note { margin: 28px 0 0; font-size: 15px; color: var(--mute); }
.li-note a { color: var(--ink); border-bottom: 1px solid var(--acc); }

/* ── 03 Sobre ────────────────────────────────────────── */
.about-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(48px, 6vw, 96px); align-items: center; }
.portrait { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; justify-self: center; }
.portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait-photo { position: absolute; inset: 24%; border-radius: 50%; overflow: hidden; background: var(--photo); box-shadow: 0 0 0 1px oklch(0.8 0.13 70 / .55), 0 0 90px oklch(0.8 0.13 70 / .18); }
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .8s, transform 1.2s var(--ease); }
.portrait-photo img:hover { filter: grayscale(0); transform: scale(1.06); }
.role-pill { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(236, 232, 225, .2); background: rgba(14, 13, 11, .88); color: var(--ink); font-size: 14px; transform: translate(-999px, -999px); will-change: transform; transition: color .5s, border-color .5s; }
.role-pill.on { color: var(--bg); border-color: var(--acc); background: var(--acc); }
.about-txt { display: flex; flex-direction: column; gap: 28px; }
.about-lead { margin: 0; font-family: var(--serif); font-size: clamp(36px, 4vw, 60px); line-height: 1.04; text-wrap: pretty; }
.about-intro { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }
.status { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); animation: pulse 2s infinite; flex: none; }
.wl { position: relative; margin-top: 64px; }
.wl canvas { position: absolute; left: 0; top: 0; width: clamp(56px, 10vw, 140px); height: 100%; }
.wl-list { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 128px); padding-left: clamp(76px, 12vw, 180px); }
.wl-ev { display: flex; flex-direction: column; gap: 14px; max-width: 780px; opacity: .15; transform: translateY(28px); transition: opacity .7s, transform .9s var(--ease); }
.wl-t { font-family: var(--mono); font-size: 13px; color: var(--acc); }
.wl-title { font-size: clamp(34px, 4.6vw, 64px); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.wl-body { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.closing { margin-top: clamp(120px, 14vw, 220px); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.closing-eq { font-family: var(--serif); font-size: clamp(44px, 7.4vw, 120px); line-height: 1; letter-spacing: -.01em; }

/* ── 04 Contato ──────────────────────────────────────── */
.contact { position: relative; }
.contact-bg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100vh; pointer-events: none; }
.contact-status { font-size: 13px; }
.h1-contact { margin: 24px 0 0; font-size: clamp(60px, 13vw, 200px); font-weight: 500; letter-spacing: -.055em; line-height: .88; }
.h1-contact .l1 { display: block; overflow: hidden; padding-bottom: .04em; }
.h1-contact .l2 { display: block; overflow: hidden; padding-bottom: .1em; }
.h1-contact .l2 .mask-in { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--acc); }
.contact-intro { margin: 24px 0 0; max-width: 460px; font-size: 18px; line-height: 1.55; color: var(--ink2); }
.composer { position: relative; margin-top: clamp(120px, 16vw, 240px); max-width: 980px; }
.composer-in { display: flex; flex-direction: column; gap: 28px; }
.composer-head { display: flex; justify-content: space-between; gap: 16px; }
.madlib { font-size: clamp(26px, 3vw, 44px); line-height: 1.5; letter-spacing: -.02em; font-weight: 500; text-wrap: pretty; }
.madlib input { font: inherit; color: var(--acc); background: none; border: none; border-bottom: 1px dashed oklch(0.8 0.13 70 / .6); outline: none; padding: 0 4px; font-family: var(--serif); font-style: italic; max-width: 100%; }
.madlib input::placeholder { color: oklch(0.8 0.13 70 / .45); }
.topics { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; margin: 4px 0; }
.topic { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(236, 232, 225, .22); background: rgba(0, 0, 0, 0); color: var(--ink); transition: all .3s; }
.topic.on { border-color: var(--acc); background: var(--acc); color: var(--bg); }
.composer textarea { font: inherit; font-size: 18px; line-height: 1.55; color: var(--ink); background: var(--s1); border: 1px solid rgba(236, 232, 225, .14); border-radius: 6px; padding: 20px; outline: none; resize: vertical; transition: border-color .3s; }
.composer textarea:focus { border-color: var(--acc); }
.send { display: flex; gap: 12px; flex-wrap: wrap; }
.send .btn-solid { padding: 16px 24px; }
.tuner { position: relative; margin-top: clamp(110px, 13vw, 180px); }
.tuner .h2-serif { font-size: clamp(44px, 6vw, 84px); }
.tuner-body { margin-top: 40px; position: relative; }
.tuner-dial { display: block; width: 100%; height: 110px; }
.stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.station { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 12px 24px; min-width: 0; border-radius: 6px; background: rgba(0, 0, 0, 0); transition: background .5s; }
.station.on { background: rgba(236, 232, 225, .04); }
.station-freq { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--mute); transition: color .4s; }
.station-link { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); transition: color .4s; }
.station.on .station-freq, .station.on .station-link { color: var(--acc); }
.station-name { font-size: clamp(24px, 3vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.station-val { font-size: 13px; color: var(--mute); overflow-wrap: anywhere; max-width: 100%; }
.station-acts { display: flex; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.station.on .station-acts { opacity: 1; transform: none; }
.mini-solid, .mini-ghost { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 8px 14px; border-radius: 999px; }
.mini-solid { background: var(--ink); color: var(--bg); }
.mini-solid:hover { background: var(--acc); color: var(--bg); }
.mini-ghost { cursor: pointer; color: var(--ink); background: none; border: 1px solid rgba(236, 232, 225, .3); }
.mini-ghost:hover { border-color: var(--acc); }
@media (max-width: 639px) {
  .tuner-dial { display: none; }
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Rodapé ──────────────────────────────────────────── */
.foot-wrap { padding: 0 var(--pad) 32px; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--mute); }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink2); }

.noscript { padding: 140px var(--pad); max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
.noscript h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 500; letter-spacing: -.045em; line-height: .95; color: var(--ink); }

/* ── Responsivo ──────────────────────────────────────── */
/* Formações em coluna única: o card do átomo deixa de ser fixo para não cobrir a lista */
@media (max-width: 879px) {
  .atom-card { position: relative; top: auto; }
}
@media (max-width: 639px) {
  .hdr { padding-top: 18px; padding-bottom: 18px; }

  /* Início: título, galáxia, dica, segunda linha e φ empilhados sem colisão */
  .hero-hint { top: 60%; }
  .hero-b { bottom: 150px; }
  .hero-phi-digits { max-width: calc(100vw - 40px); }
  .laws-sec { padding-top: 72px; }
  .law { padding: 44px 8px; gap: 22px; }

  .page { padding-top: 120px; }
  .h1-page { font-size: clamp(48px, 15vw, 72px); }
  .works-sub { font-size: 22px; }
  .about-lead { font-size: 30px; }
  .filters-bar { margin-top: 40px; }
  .chip-btn { padding: 8px 13px; font-size: 13px; }
  .atom-stage { height: 240px; }
  .atom-detail { padding: 24px 20px 28px; }
  .cert-row { grid-template-columns: 26px minmax(0, 1fr) 38px; gap: 12px; padding: 16px 14px; }
  .cert-sym { width: 38px; height: 38px; font-size: 14px; }
  .cert-row:hover { transform: none; }

  .stack-scene { height: 360px; }
  .stack-rig { width: 190px; height: 190px; }
  .plate { padding: 14px; }
  .plate-cat { font-size: 20px; }
  .plate-chip { font-size: 9px; padding: 2px 6px; }
  .layer { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; padding: 20px 0; }

  .about-grid { margin-top: 32px; gap: 40px; }
  .role-pill { font-size: 12px; padding: 6px 11px; }
  .wl-list { gap: 64px; }
  .closing-eq { font-size: 8.4vw; white-space: nowrap; }

  .contact-intro, .about-intro { font-size: 17px; }
  .composer { margin-top: 88px; }
  .madlib { font-size: 26px; }
  .send .btn-solid, .send .btn-ghost { flex: 1 1 100%; justify-content: center; }
  .tuner { margin-top: 96px; }
  .station { padding: 22px 6px 18px; gap: 12px; }
  .station-name { font-size: 24px; }
  .station-acts { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .mini-solid, .mini-ghost { white-space: nowrap; padding: 7px 10px; font-size: 10px; }

  .curtain-name { font-size: clamp(48px, 15vw, 72px); }
}
@media (max-width: 639px) and (max-height: 700px) {
  .hero-hint { top: 55%; }
}
@media (max-width: 360px) {
  .hero-title { font-size: 34px; }
  .madlib { font-size: 22px; }
  .station-val { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-ring, .curtain-ring { animation: none; }
}