/* =============================================================
   musica.ae — dois produtos, duas identidades.

   [data-app="pagina"] → Página: tela em branco. Claro, grande,
   expressivo, vermelhão. É onde o artista se mostra.
   [data-app="caixa"]  → Caixa: ferramenta. Escuro, denso, frio,
   azul elétrico, metadado em mono. É onde o artista trabalha.

   O site institucional usa a base escura neutra e empresta os
   dois temas nas seções de cada produto.
   ============================================================= */

:root{
  /* base neutra (site) */
  --n-0:#08090C;
  --n-1:#0E1014;
  --n-2:#14171D;
  --n-3:#1C2029;
  --n-4:#272C37;
  --n-line:rgba(255,255,255,.08);
  --n-line-2:rgba(255,255,255,.14);
  --n-text:#F7F8FA;
  --n-dim:#9AA1AE;
  --n-faint:#646C7A;

  /* identidade Página (linktree) */
  --pg:#FF3D2E;
  --pg-deep:#D32110;
  --pg-tint:#FFF1EE;
  --pg-ink:#14110F;

  /* identidade Caixa (webmail) */
  --cx:#4C8DFF;
  --cx-deep:#2E6BE0;
  --cx-tint:#101828;

  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* tema: tela em branco */
[data-app="pagina"]{
  --bg:#FFFFFF; --bg-2:#F7F5F3; --bg-3:#EFEBE7;
  --fg:#14110F; --fg-dim:#6B635C; --fg-faint:#9A918A;
  --line:rgba(20,17,15,.1); --line-2:rgba(20,17,15,.18);
  --ac:var(--pg); --ac-deep:var(--pg-deep); --ac-on:#FFFFFF; --ac-tint:var(--pg-tint);
}
/* tema: ferramenta */
[data-app="caixa"]{
  --bg:#090B10; --bg-2:#0F131A; --bg-3:#161B24; --bg-4:#1F2630;
  --fg:#E9EDF3; --fg-dim:#8E98A8; --fg-faint:#5C6675;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --ac:var(--cx); --ac-deep:var(--cx-deep); --ac-on:#06080D; --ac-tint:rgba(76,141,255,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-feature-settings:"cv05" 1,"ss01" 1;-webkit-font-smoothing:antialiased;background:var(--bg,var(--n-0));color:var(--fg,var(--n-text))}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ac,#4C8DFF);outline-offset:2px;border-radius:5px}

/* grão: tira o aspecto de cor chapada */
.grain::before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* malha de 1px: dá estrutura ao fundo escuro */
.mesh{background-image:linear-gradient(var(--n-line) 1px,transparent 1px),linear-gradient(90deg,var(--n-line) 1px,transparent 1px);background-size:64px 64px;background-position:center}

.row{max-width:1240px;margin:0 auto;padding-left:20px;padding-right:20px}
@media (min-width:960px){ .row{padding-left:40px;padding-right:40px} }

/* ---------- marca ---------- */
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;letter-spacing:-0.02em}
.logoMk{width:24px;height:24px;border-radius:7px;background:linear-gradient(150deg,#FFA733,#F2690D);flex:none;position:relative;box-shadow:0 2px 9px -2px rgba(242,105,13,.55)}
.logoMk::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #121212}

/* ---------- botões ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:11px;font-size:14px;font-weight:600;letter-spacing:-0.012em;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s cubic-bezier(.2,.7,.3,1),background .15s,box-shadow .15s,opacity .15s}
.b:active{transform:translateY(1px)}
.b-ac{background:var(--ac,#4C8DFF);color:var(--ac-on,#06080D);font-weight:650}
.b-ac:hover{filter:brightness(1.08)}
.b-solid{background:var(--fg,#F7F8FA);color:var(--bg,#08090C)}
.b-solid:hover{opacity:.9}
.b-line{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2,rgba(255,255,255,.14))}
.b-line:hover{box-shadow:inset 0 0 0 1px currentColor}
.b-soft{background:var(--bg-3,#161B24);box-shadow:inset 0 0 0 1px var(--line,rgba(255,255,255,.07))}
.b-soft:hover{background:var(--bg-4,#1F2630)}
.b-lg{height:50px;padding:0 24px;font-size:15.5px;border-radius:13px}
.b-sm{height:34px;padding:0 13px;font-size:13px;border-radius:9px}
.b-full{width:100%}

/* ---------- peças ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:550;background:var(--bg-3,#161B24);box-shadow:inset 0 0 0 1px var(--line,rgba(255,255,255,.07))}
.chip-ac{background:var(--ac-tint,rgba(76,141,255,.12));color:var(--ac,#4C8DFF);box-shadow:inset 0 0 0 1px currentColor}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:-0.01em;font-variant-ligatures:none}
.kbd{font-family:var(--mono);font-size:10.5px;padding:3px 6px;border-radius:5px;background:var(--bg-3,#161B24);box-shadow:inset 0 0 0 1px var(--line-2,rgba(255,255,255,.14));color:var(--fg-dim,#8E98A8)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ac,#4C8DFF);flex:none}

/* ---------- campos ---------- */
.f{display:flex;flex-direction:column;gap:6px}
.f>span{font-size:12.5px;font-weight:600;color:var(--fg-dim)}
.i{height:44px;width:100%;padding:0 14px;border-radius:11px;border:0;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;transition:box-shadow .15s}
.i::placeholder{color:var(--fg-faint)}
.i:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ac)}
textarea.i{height:auto;padding:12px 14px;line-height:1.55;resize:vertical}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} }