:root {
    /* PALETA NEURANIA • VIOLETA IR REALISTA */
    --violet-core:   #5B1E81;
    --violet-glow:   #7B2E9E;
    --violet-soft:   #9A3FB7;
    --lavender-fog:  #CDA4E4;
    --ir-shadow:     #3C3A40;
    --ir-green:      #A1B89D;
  
    /* Fondo base */
    --night:   #120A1A;
    --deep:    #1A0F24;
    --fog:     #271733;
  
    --white:   #F8F0FF;
    --muted:   #D7C7EB;
  
    --glass:   rgba(255,255,255,.06);
    --border:  rgba(205,164,228,.25);
    --radius:  22px;
    --shadow:  0 18px 60px rgba(0,0,0,.55);
  
    --grad: linear-gradient(
      135deg,
      var(--violet-core),
      var(--violet-glow),
      var(--lavender-fog)
    );
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: Inter, sans-serif;
    color: var(--white);
    background:
      radial-gradient(900px 700px at 20% -10%, rgba(155, 85, 195, .55) 0%, transparent 60%),
      radial-gradient(1000px 900px at 80% 0%, rgba(91, 30, 129, .55) 0%, transparent 65%),
      radial-gradient(1400px 1000px at 50% 90%, rgba(205,164,228,.40) 0%, transparent 70%),
      radial-gradient(1200px 1200px at 70% 60%, rgba(161,184,157,.20) 0%, transparent 75%),
      linear-gradient(180deg, var(--night) 0%, var(--deep) 50%, var(--fog) 120%);
    overflow-x: hidden;
  }
  
  h1, h2, h3 {
    font-family: Nunito, sans-serif;
    letter-spacing: -.02em;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 22px;
  }
  
  .center {
    text-align: center;
  }
  
  .section {
    padding: 110px 0;
  }
  
  /* ===========================================================
     ESTRELLAS
     =========================================================== */
  
  .stars {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
      radial-gradient(1px 1px at 5% 10%,  rgba(255,255,255,.9) 50%, transparent 55%),
      radial-gradient(1px 1px at 22% 34%, rgba(255,255,255,.8) 50%, transparent 55%),
      radial-gradient(1px 1px at 40% 12%, rgba(205,164,228,.9) 50%, transparent 55%),
      radial-gradient(1px 1px at 63% 22%, rgba(248,244,255,.8) 50%, transparent 55%),
      radial-gradient(1px 1px at 78% 8%,  rgba(161,184,157,.9) 50%, transparent 55%),
      radial-gradient(1px 1px at 88% 35%, rgba(255,255,255,.9) 50%, transparent 55%);
    background-size: 330px 330px;
    opacity: .55;
    animation: starsMove 55s linear infinite;
  }
  
  @keyframes starsMove {
    from { background-position: 0 0; }
    to   { background-position: 330px 330px; }
  }
  
  /* ===========================================================
     PULSOS NIR CÓSMICOS (810 + 940 nm)
     =========================================================== */
  
  .nir-pulses {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.55;
    transition: transform 1.5s ease-out;
  }
  
  /* Pulso 1: núcleo violeta */
  .nir-pulses::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1500px;
    height: 1500px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(91,30,129,0.60) 0%,
      rgba(123,46,158,0.45) 35%,
      rgba(154,63,183,0.25) 60%,
      transparent 100%
    );
    animation: pulseNIR 9s infinite ease-in-out;
    filter: blur(24px);
  }
  
  /* Pulso 2: halo lavanda + verde IR */
  .nir-pulses::after {
    content: "";
    position: absolute;
    top: 48%;
    left: 52%;
    width: 1800px;
    height: 1800px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(205,164,228,0.52) 0%,
      rgba(154,63,183,0.30) 40%,
      rgba(161,184,157,0.22) 70%,
      transparent 100%
    );
    animation: pulseNIR 11s infinite ease-in-out;
    animation-delay: -4.5s;
    filter: blur(40px);
  }
  
  @keyframes pulseNIR {
    0%   { transform: translate(-50%, -50%) scale(0.75); opacity: 0.55; }
    50%  { transform: translate(-50%, -50%) scale(1.08); opacity: 0.95; }
    100% { transform: translate(-50%, -50%) scale(1.4);  opacity: 0.55; }
  }
  
  /* ===========================================================
     NAVBAR
     =========================================================== */
  
  .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 92vw);
    background: rgba(18,10,26,.82);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    box-shadow: var(--shadow);
  }
  
  .logo {
    font-weight: 800;
    font-size: 1.2rem;
  }
  
  .logo span {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .links {
    display: flex;
    gap: 20px;
  }
  
  .links a {
    font-weight: 600;
    color: var(--muted);
    font-size: 0.95rem;
  }
  
  .links a:hover {
    color: var(--white);
  }
  
  /* ===========================================================
     HERO
     =========================================================== */
  
  .hero {
    position: relative;
    padding-top: 190px;
    padding-bottom: 120px;
    overflow: hidden;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
  }
  
  .pill {
    display: inline-block;
    background: rgba(154,63,183,.26);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(205,164,228,.5);
    font-size: .85rem;
    font-weight: 800;
    color: var(--white);
    box-shadow: 0 8px 30px rgba(0,0,0,.55);
  }
  
  .hero h1 {
    font-size: 3.2rem;
    margin: 16px 0;
    text-shadow: 0 10px 45px rgba(0,0,0,.7);
  }
  
  .gradtext {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(205,164,228,.35));
  }
  
  .hero p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.12rem;
  }
  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--glass);
    border-radius: 999px;
    border: 1px solid var(--border);
    color: white;
    font-weight: 700;
    box-shadow: var(--shadow);
    transition: .25s;
  }
  
  .btn:hover {
    transform: translateY(-3px);
    background: rgba(205,164,228,.18);
    border-color: rgba(205,164,228,.7);
  }
  
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lavender-fog);
    box-shadow: 0 0 0 4px rgba(205,164,228,.3);
  }
  
  /* ===========================================================
     CARDS & BLOQUES
     =========================================================== */
  
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 20px;
    margin-top: 45px;
  }
  
  .card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
    transition: .25s;
  }
  
  .card:hover {
    transform: translateY(-6px);
    background: rgba(205,164,228,.12);
    border-color: rgba(205,164,228,.5);
  }
  
  .card p {
    color: var(--muted);
  }
  
  /* ===========================================================
     TRL
     =========================================================== */
  
  .trl {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    margin-top: 25px;
    box-shadow: var(--shadow);
  }
  
  .track {
    width: 100%;
    height: 10px;
    background: rgba(205,164,228,.18);
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0;
  }
  
  .fill {
    width: 0%;
    height: 100%;
    background: var(--grad);
    transition: 1.4s;
  }
  
  /* ===========================================================
     TIMELINE
     =========================================================== */
  
  .timeline {
    max-width: 720px;
    margin: 36px auto 0;
    padding-left: 18px;
    border-left: 2px solid rgba(205,164,228,.55);
  }
  
  .step {
    position: relative;
    padding-left: 18px;
    margin-bottom: 26px;
  }
  
  .step:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 3px;
    width: 12px;
    height: 12px;
    background: #120A1A;
    border-radius: 50%;
    border: 2px solid var(--lavender-fog);
    box-shadow: 0 0 14px rgba(205,164,228,.8);
  }
  
  .year {
    font-weight: 900;
    color: var(--white);
    margin-bottom: 6px;
  }
  
  /* REVEAL */
  
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: .9s;
  }
  
  .reveal.active {
    opacity: 1;
    transform: none;
  }
  
  /* ===========================================================
     FOOTER
     =========================================================== */
  
  footer {
    background: rgba(18,10,26,.95);
    border-top: 1px solid var(--border);
    padding: 60px 0 36px;
    margin-top: 80px;
  }
  
  .legal {
    max-width: 880px;
    margin: 14px auto;
    padding: 14px;
    background: rgba(205,164,228,.07);
    border-radius: 14px;
    border: 1px dashed rgba(205,164,228,.45);
    color: var(--muted);
    font-size: .9rem;
  }
  
  /* ===========================================================
     RED NEURONAL (tipo constelación 3D)
     =========================================================== */
    /* ===========================
   RED NEURONAL 3D PARALLAX
   =========================== */

:root {
    --net-offset: 0px; /* lo moveremos con scroll en JS */
  }
  
  .hero {
    position: relative;
    z-index: 1;
  }
  
  /* SVG general */
  /* Contenedor fijo para la red */
.neuron-net-wrapper {
  position: fixed;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  z-index: -1;               /* detrás del contenido, delante de los pulsos */
  pointer-events: none;
  overflow: visible;
}

/* El SVG ocupa todo el viewport (no se corta al hacer scroll) */
.neuron-net {
  width: 100vw;
  height: 100vh;
  display: block;
}

/* Capas de profundidad (puedes dejar tus filtros tal cual) */
.layer-back  { opacity: .25; filter: blur(2px);  }
.layer-mid   { opacity: .45; filter: blur(1px);  }
.layer-front { opacity: .9;  filter: blur(0px);  }

  
  /* capas de profundidad */
  .neuron-net .layer-back   { opacity: 0.22; filter: blur(2px); }
  .neuron-net .layer-mid    { opacity: 0.45; filter: blur(1.2px); }
  .neuron-net .layer-front  { opacity: 0.95; filter: blur(0px); }
  
  /* líneas */
  .neuron-net .edge {
    stroke: rgba(255,255,255,0.18);
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke;
  }
  
  .neuron-net .edge.bright {
    stroke: rgba(255,235,255,0.7);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 6px rgba(255,230,255,0.65));
  }
  
  /* nodos */
  .neuron-net .node {
    fill: rgba(255,255,255,0.7);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.35));
  }
  
  .neuron-net .bright-node {
    fill: rgba(255,220,255,0.98);
    filter: drop-shadow(0 0 10px rgba(255,220,255,0.95));
  }
  
  /* nodo “soma” central */
  .neuron-net .core {
    fill: rgba(250,230,255,0.98);
    stroke: rgba(255,205,255,0.85);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 22px rgba(255,230,255,0.95));
  }
  
  /* respiración suave de toda la red */
  .neuron-net .net-main {
    animation: netBreath 18s ease-in-out infinite alternate;
  }
  
  @keyframes netBreath {
    0%   { transform: scale(1);    opacity: 0.7; }
    50%  { transform: scale(1.04); opacity: 0.95; }
    100% { transform: scale(1.02); opacity: 0.8; }
  }