:root{
  --bg-base:#070a16;
  --nebula-1:#1a1f3f;
  --nebula-2:#10243e;
  --nebula-3:#2a1645;

  --stars-hue:220;
  --stars-sat:70%;
  --stars-lit:85%;

  --card: rgba(10,26,17,.45);
  --stroke: rgba(255,255,255,.1);
  --text:#e6ecff;
  --muted:#a9b6d9;
  --accent:#718a99ff;
  --accent-2:#c299ff;
  --radius:18px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --header-h:62px;

  --nebula-green-1: hsla(195,100%,70%,.28);
  --nebula-green-2: hsla(200,95%,60%,.22);
  --nebula-green-3: hsla(187,80%,45%,.20);
  --nebula-green-dust: hsla(195,100%,85%,.18);

  --nebula-title-1:#7de3ff;
  --nebula-title-2:#d5a6ff;
  --orb-glow-1: rgba(141,213,255,.35);
  --orb-glow-2: rgba(194,153,255,.30);
  --orb-ring: rgba(255,255,255,.12);

  --sun-core:#ffd34d;
  --sun-corona:#ffc107;
  --sun-halo: rgba(255,209,77,.25);
  --sun-shadow: 0 10px 40px rgba(255,209,77,.28), 0 0 120px rgba(255,209,77,.18) inset;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  background:
    radial-gradient(1200px 900px at 70% 5%, var(--nebula-3), transparent 60%),
    radial-gradient(1100px 800px at 15% 85%, var(--nebula-2), transparent 65%),
    radial-gradient(1400px 900px at 10% 20%, var(--nebula-1), transparent 55%),
    var(--bg-base);
  overflow-x:hidden;
}

/* Contenedor / secciones */
.container{ max-width:1750px; margin-inline:auto; padding-inline: clamp(20px,5vw,40px); }
main > section{ padding-block: clamp(36px, 6vw, 72px); }
.section-title{ margin:0 0 10px; font-size: clamp(24px, 3.4vw, 34px); }
.section-lead{ margin:0 0 18px; color:var(--muted); }

/* Estrellas */
canvas#sky{ position:fixed; inset:0; z-index:-2; width:100vw; height:100vh; display:block; pointer-events:none; }
.overlay{ position:fixed; inset:0; z-index:-3; pointer-events:none; }
.overlay::after{ content:""; position:absolute; inset:0; background:radial-gradient(100vw 100vh at 50% 120%, rgba(0,0,0,.32), transparent 62%); }

/* Header */
header.nav{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(7,10,22,.65), rgba(7,10,22,.25));
  border-bottom:1px solid var(--stroke);
  height:var(--header-h);
}
.wrap{ max-width:1200px; margin:0 auto; padding:12px clamp(20px,5vw,40px); display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--text); }
.brand .dot{ width:12px; height:12px; border-radius:50%; background: radial-gradient(circle at 40% 35%, #fff, var(--accent) 30%, #2aa0ff 60%, #0c3a73 100%); box-shadow:0 0 12px rgba(139,213,255,.7); }
nav a{ color:var(--muted); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:12px; transition: color .2s ease, background .2s ease; }
nav a:hover{ color:#fff; background: rgba(255,255,255,.06); }

section{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* Cards / base */
.card{ border-radius: var(--radius); border:1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid var(--stroke);
  text-decoration:none; color:#0b1221; font-weight:800; transition: transform .15s ease, background .2s ease, color .2s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
}
.btn:hover, .btn:focus-visible{ transform: translateY(-2px); outline:none; }
.btn.ghost{ color:#fff; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }

/* Reveal */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform:none; }

/* Footer */
footer{ padding:30px; text-align:center; color:var(--muted); border-top:1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); }

