/* ============================================================
   Alumne Flex — Design tokens
   Importado del design system de Alumne Flex (Claude Design).
   Fuentes sustitutas (Google Fonts) hasta disponer de los ficheros reales:
   Outfit ≈ logotipo geométrico · Plus Jakarta Sans = UI/cuerpo · JetBrains Mono = código.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root{
/* --- Brand: orange (gradiente del imagotipo) --- */
--orange-50:#FFF3EC;--orange-100:#FFE3D3;--orange-200:#FFC7A8;--orange-300:#FFA038;--orange-400:#FF8034;
--orange-500:#FF5A2D;--orange-600:#F5411F;--orange-700:#D0300F;--orange-800:#A2260C;--orange-900:#701A08;
/* --- Brand: navy ink (del wordmark) --- */
--navy-50:#F2F4F9;--navy-100:#E1E5F0;--navy-200:#BFC7DE;--navy-300:#8E9BC0;--navy-400:#5A688F;
--navy-500:#2E3C6B;--navy-600:#1A2856;--navy-700:#111E48;--navy-800:#081840;--navy-900:#050F2B;
/* --- Flex accent: teal --- */
--teal-50:#ECFAF8;--teal-100:#CFF2EE;--teal-200:#9AE4DC;--teal-300:#5FCFC5;--teal-400:#2BBBB0;
--teal-500:#12B2A6;--teal-600:#0B9188;--teal-700:#0A736D;--teal-800:#0A5A54;--teal-900:#073C38;
/* --- Neutrals: warm greys (arena) --- */
--sand-0:#FFFFFF;--sand-25:#FDFAF8;--sand-50:#FAF6F2;--sand-100:#F3EEE9;--sand-200:#E9E3DC;
--sand-300:#D8D1C9;--sand-400:#B4ACA3;--sand-500:#8B837A;--sand-600:#645D56;--sand-700:#443E39;
/* --- Semantic hues --- */
--green-100:#DCF5E9;--green-500:#17A673;--green-700:#0E6B4A;
--amber-100:#FFF1D6;--amber-500:#F5A524;--amber-700:#A66A05;
--red-100:#FDE4E4;--red-500:#E5484D;--red-700:#A32229;
--violet-100:#EDE9FE;--violet-500:#7C5CFF;--violet-700:#4B32B5;

/* ================= Semantic aliases ================= */
/* Text */
--text-strong:var(--navy-800);--text-body:var(--navy-700);--text-muted:var(--sand-500);
--text-subtle:var(--sand-400);--text-inverse:var(--sand-0);--text-brand:var(--orange-600);
--text-link:var(--orange-600);--text-link-hover:var(--orange-700);
/* Surfaces */
--surface-canvas:var(--sand-25);--surface-card:var(--sand-0);--surface-raised:var(--sand-0);
--surface-sunken:var(--sand-50);--surface-inverse:var(--navy-800);--surface-brand-soft:var(--orange-50);
--surface-accent-soft:var(--teal-50);--surface-overlay:rgba(8,24,64,.48);
/* Borders */
--border-subtle:var(--sand-200);--border-default:var(--sand-300);--border-strong:var(--navy-200);
--border-brand:var(--orange-500);--border-inverse:rgba(255,255,255,.16);
/* Interactive */
--action-primary:var(--orange-500);--action-primary-hover:var(--orange-600);--action-primary-press:var(--orange-700);
--action-secondary:var(--navy-800);--action-secondary-hover:var(--navy-700);
--action-accent:var(--teal-500);--action-accent-hover:var(--teal-600);
--focus-ring:var(--orange-500);--focus-ring-offset:var(--sand-0);
/* Status */
--status-success-fg:var(--green-700);--status-success-bg:var(--green-100);--status-success-solid:var(--green-500);
--status-warning-fg:var(--amber-700);--status-warning-bg:var(--amber-100);--status-warning-solid:var(--amber-500);
--status-danger-fg:var(--red-700);--status-danger-bg:var(--red-100);--status-danger-solid:var(--red-500);
--status-info-fg:var(--teal-700);--status-info-bg:var(--teal-50);--status-info-solid:var(--teal-500);
/* Signature gradients — con moderación: marca, un elemento del hero, un CTA por vista */
--gradient-brand:linear-gradient(135deg,#FFA038 0%,#FF5A2D 52%,#F5411F 100%);
--gradient-brand-soft:linear-gradient(135deg,#FFF3EC 0%,#FFE3D3 100%);
--gradient-ink:linear-gradient(160deg,#111E48 0%,#050F2B 100%);
--gradient-canvas:linear-gradient(180deg,#FFFFFF 0%,#FDFAF8 100%);

/* ================= Typography ================= */
--font-display:"Outfit","Plus Jakarta Sans",system-ui,sans-serif;
--font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--text-3xs:11px;--text-2xs:12px;--text-xs:13px;--text-sm:14px;--text-md:15px;--text-base:16px;
--text-lg:18px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:38px;--text-5xl:48px;
--text-6xl:60px;--text-7xl:76px;
--leading-tight:1.08;--leading-snug:1.22;--leading-normal:1.45;--leading-relaxed:1.62;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extra:800;
--tracking-display:-0.03em;--tracking-heading:-0.02em;--tracking-body:-0.005em;
--tracking-label:0.01em;--tracking-eyebrow:0.14em;
--type-body-size:var(--text-md);

/* ================= Spacing / layout ================= */
--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;
--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:104px;
--content-max:1200px;--prose-max:68ch;--topbar-h:72px;

/* ================= Radius ================= */
--radius-xs:6px;--radius-sm:8px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-2xl:24px;
--radius-3xl:32px;--radius-pill:999px;--radius-control:var(--radius-md);--radius-card:var(--radius-lg);

/* ================= Elevation ================= */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(8,24,64,.06);
--shadow-sm:0 1px 3px rgba(8,24,64,.07),0 1px 2px rgba(8,24,64,.04);
--shadow-md:0 4px 14px rgba(8,24,64,.08);
--shadow-lg:0 12px 32px rgba(8,24,64,.10);
--shadow-xl:0 28px 64px rgba(8,24,64,.14);
--shadow-brand:0 8px 22px rgba(245,65,31,.26);
--ring-focus:0 0 0 3px rgba(255,90,45,.28);
--ring-accent:0 0 0 3px rgba(18,178,166,.26);
--blur-glass:saturate(150%) blur(14px);

/* ================= Motion ================= */
--ease-standard:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:140ms;--dur-base:200ms;--dur-slow:320ms;--dur-slower:520ms;
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-slower:0ms}}

/* ================= Base ================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-sans);font-size:var(--type-body-size);line-height:var(--leading-normal);letter-spacing:var(--tracking-body);color:var(--text-body);background:var(--gradient-canvas);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--tracking-heading);line-height:var(--leading-snug);margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
code,kbd,pre{font-family:var(--font-mono);font-size:.92em}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--orange-200);color:var(--navy-800)}
img{max-width:100%;height:auto}