/*
  Majora Studio Design System — tokens.
  Copia literal de tokens/*.css del proyecto "Majora Studio Design System" en Claude Design
  (versión del 2026-10-17). No editar aquí: actualizar desde el design system.
  Las fuentes (tokens/fonts.css) se cargan con <link> en index.html en lugar de @import.
*/
:root{--font-display:"Sora",system-ui,sans-serif;--font-wordmark:"Syncopate",system-ui,sans-serif;--font-sans:"Space Grotesk",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;}

:root{
/* spectrum — sampled from the Majora mark, ordered around the cycle */
--spec-violet:#7004d9;--spec-indigo:#440aea;--spec-orchid:#9404c7;--spec-magenta:#c80796;--spec-rose:#df0b74;
--spec-crimson:#f41147;--spec-red:#fb2826;--spec-ember:#fc4815;--spec-orange:#fd820a;--spec-amber:#fcbc04;
--spec-citron:#e3dd08;--spec-lime:#7ecf2d;--spec-teal:#11bdbe;
/* brand */
--brand-primary:#fb2826;--brand-primary-hover:#ff4a48;--brand-primary-press:#d81a18;
--brand-secondary:#7004d9;--brand-secondary-hover:#8b23f0;--brand-accent:#11bdbe;
/* void neutrals — near-black through white */
--void-0:#08080a;--void-1:#111114;--void-2:#16161a;--void-3:#1c1c21;--void-4:#24242a;
--void-5:#2e2e35;--void-6:#41414a;--void-7:#62626d;--void-8:#93939f;--void-9:#c6c6cf;--void-10:#f4f4f6;
/* semantic surface + ink */
--surface-void:var(--void-1);--surface-base:var(--void-2);--surface-card:var(--void-3);--surface-panel:#141417;--surface-light:#f4f4f6;
--surface-raised:var(--void-4);--surface-inset:var(--void-0);--surface-invert:var(--void-10);
--text-primary:#ffffff;--text-body:var(--void-9);--text-muted:var(--void-8);--text-faint:var(--void-7);
--text-invert:var(--void-1);--text-on-light:#16161a;--text-on-light-muted:#5e5e6a;--text-accent:var(--brand-primary);
--border-hairline:rgba(255,255,255,.08);--border-subtle:rgba(255,255,255,.14);
--border-strong:rgba(255,255,255,.26);--border-brand:rgba(251,40,38,.5);
/* status */
--status-success:#7ecf2d;--status-warning:#fcbc04;--status-danger:#fb2826;--status-info:#11bdbe;
/* gradients */
--grad-spectrum:linear-gradient(135deg,#fcbc04 0%,#fb2826 32%,#df0b74 58%,#7004d9 82%,#11bdbe 100%);
--grad-cycle:conic-gradient(from 210deg,#fcbc04,#fb2826,#df0b74,#7004d9,#11bdbe,#7ecf2d,#fcbc04);
--grad-ember:linear-gradient(135deg,#fd820a,#fb2826 55%,#df0b74);
--grad-dusk:linear-gradient(135deg,#7004d9,#11bdbe);
--grad-veil:linear-gradient(180deg,rgba(5,5,6,0) 0%,rgba(5,5,6,.72) 55%,var(--void-1) 100%);
--grad-fade-top:linear-gradient(180deg,var(--void-1) 0%,rgba(5,5,6,0) 100%);
/* mesh grounds — stand-ins for imagery on media cards */
--mesh-ember:radial-gradient(80% 90% at 85% 15%,#fcbc04 0%,transparent 55%),radial-gradient(90% 90% at 10% 90%,#df0b74 0%,transparent 60%),linear-gradient(135deg,#fb2826,#c80796);
--mesh-dusk:radial-gradient(70% 80% at 90% 10%,#11bdbe 0%,transparent 55%),radial-gradient(90% 100% at 0% 100%,#440aea 0%,transparent 60%),linear-gradient(135deg,#7004d9,#9404c7);
--mesh-tide:radial-gradient(70% 90% at 15% 15%,#7ecf2d 0%,transparent 55%),radial-gradient(90% 90% at 100% 100%,#7004d9 0%,transparent 60%),linear-gradient(135deg,#11bdbe,#440aea);
--mesh-flare:radial-gradient(70% 80% at 80% 80%,#fd820a 0%,transparent 55%),radial-gradient(80% 90% at 10% 10%,#7004d9 0%,transparent 60%),linear-gradient(135deg,#df0b74,#fb2826);
--glow-horizon:radial-gradient(60% 100% at 50% 100%,rgba(112,4,217,.38) 0%,rgba(17,189,190,.12) 45%,transparent 75%);
}

:root{
--fs-mega:clamp(4.5rem,13vw,12rem);--fs-display-xl:clamp(3rem,6.4vw,5.5rem);--fs-display-l:clamp(2.5rem,5vw,4.25rem);--fs-display-m:clamp(1.875rem,3.4vw,2.875rem);
--fs-h1:2.25rem;--fs-h2:1.75rem;--fs-h3:1.375rem;--fs-h4:1.125rem;
--fs-body-l:1.125rem;--fs-body:1rem;--fs-body-s:.9375rem;--fs-caption:.8125rem;--fs-micro:.6875rem;
--lh-tight:1.04;--lh-snug:1.12;--lh-normal:1.55;--lh-loose:1.7;
--ls-display:-.025em;--ls-mega:-.04em;--ls-wordmark:.34em;--ls-eyebrow:.02em;--ls-label:.01em;--ls-caps:.08em;--ls-body:0em;--ls-tight:-.01em;
--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
}

:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:180px;
--radius-none:0;--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--radius-pill:999px;--notch:64px;
--page-inset:14px;--container-max:1280px;--container-narrow:760px;--gutter:clamp(20px,5vw,64px);
--grid-cols:12;--grid-gap:16px;
}

:root{
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(0,0,0,.6);
--shadow-md:0 8px 24px -8px rgba(0,0,0,.8);
--shadow-lg:0 28px 60px -20px rgba(0,0,0,.85);
--shadow-inset-hairline:inset 0 1px 0 rgba(255,255,255,.06);
--glow-primary:0 0 0 1px rgba(251,40,38,.4),0 0 32px -6px rgba(251,40,38,.45);
--glow-secondary:0 0 0 1px rgba(112,4,217,.4),0 0 32px -6px rgba(112,4,217,.5);
--glow-soft:0 0 48px -12px rgba(251,40,38,.35);
--blur-veil:blur(18px);--blur-glass:blur(20px) saturate(140%);
--glass-bg:rgba(18,18,22,.62);--glass-border:rgba(255,255,255,.1);
--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-linear:linear;
--dur-fast:120ms;--dur-base:220ms;--dur-slow:420ms;--dur-cycle:12s;--dur-marquee:38s;
}

/* base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-void);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text-primary);font-family:var(--font-display);font-weight:var(--fw-regular);letter-spacing:var(--ls-display);line-height:var(--lh-snug);margin:0}
p{margin:0}
a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-brand);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--brand-primary);border-color:var(--brand-primary)}
::selection{background:var(--brand-primary);color:#fff}
:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px}
.eyebrow{font-family:var(--font-sans);font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:lowercase;color:var(--text-body)}
.mono{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--ls-body)}
@keyframes mj-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}