/* ============================================================
   Line by Fraxuo — design-system.css
   Paleta física (frío sistémico) + alias semánticos + base
   ============================================================ */

:root{
  /* --- físico --- */
  --abismo:        #0A0E16;
  --noche-senal:   #0E1422;
  --piedra-fria:   #131B2C;
  --piedra-alta:   #18223A;
  --senal:         #4D6BFF;
  --senal-claro:   #7C93FF;
  --voz:           #8B5CF6;
  --pico:          #22E3D3;
  --marfil-frio:   #EAF0FA;
  --tenue-frio:    #8A98B5;
  --linea-debil:   rgba(234,240,250,.10);
  --linea-media:   rgba(234,240,250,.16);
  --vidrio:        rgba(19,27,44,.55);
  --sombra:        0 24px 60px -20px rgba(0,0,0,.65);

  /* --- alias semánticos --- */
  --color-bg:        var(--abismo);
  --color-surface:   var(--piedra-fria);
  --color-text:      var(--marfil-frio);
  --color-muted:     var(--tenue-frio);
  --color-muted-strong: #A6B6D4;
  --color-primary:   var(--senal);
  --color-accent:    var(--pico);
  --grad-voz: linear-gradient(100deg, var(--senal) 0%, var(--voz) 55%, var(--pico) 100%);
  --grad-voz-soft: linear-gradient(100deg, rgba(77,107,255,.18), rgba(139,92,246,.14) 55%, rgba(34,227,211,.16));

  /* --- tipografía --- */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- escala fluida --- */
  --step--2: clamp(.74rem, .71rem + .12vw, .82rem);
  --step--1: clamp(.82rem, .79rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.8rem);
  --step-4:  clamp(2.9rem, 2rem + 4.3vw, 6rem);

  /* --- ritmo --- */
  --gap: clamp(1rem, .7rem + 1.4vw, 1.6rem);
  --pad-sec: clamp(3.25rem, 2.4rem + 4.2vw, 6rem);
  --wrap: 1280px;
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body.line-body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* fondo atmosférico global (mesh estático sutil) */
body.line-body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(55vw 55vw at 82% -12%, rgba(77,107,255,.11), transparent 62%),
    radial-gradient(45vw 45vw at 10% 6%, rgba(139,92,246,.07), transparent 62%),
    radial-gradient(60vw 60vw at 50% 122%, rgba(34,227,211,.045), transparent 62%);
}
/* grano fino anti-banding */
body.line-body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }
img,canvas,svg{ display:block; max-width:100%; }
em{ font-style:normal; color:var(--senal-claro); }
::selection{ background:rgba(77,107,255,.35); color:#fff; }

:focus-visible{ outline:2px solid var(--pico); outline-offset:3px; border-radius:4px; }

/* skip-to-content */
.line-skip{ position:fixed; top:-60px; left:1rem; z-index:400; padding:.7rem 1.2rem; background:var(--senal); color:#fff; border-radius:8px; font-family:var(--font-display); font-weight:500; font-size:.95rem; transition:top .25s var(--ease); }
.line-skip:focus{ top:1rem; }

/* utilidades de texto */
.line-eyebrow{
  font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase;
  letter-spacing:.22em; color:var(--color-muted); margin-bottom:1.1rem; display:inline-flex; gap:.7rem; align-items:center;
}
.line-eyebrow::before{ content:""; width:26px; height:1px; background:var(--grad-voz); }
.line-h2{ font-size:var(--step-3); margin-bottom:1.1rem; }
.line-lead{ font-size:var(--step-1); color:var(--color-muted-strong); max-width:46ch; line-height:1.5; }
.line-grad{ background:var(--grad-voz); -webkit-background-clip:text; background-clip:text; color:transparent; }