/* ==========================================================================
   hero_dna.css — fondo de la home generado con código (lo dibuja hero_dna.js)
   - Sustituye a background_home_bcb.png (imagen de stock con posible copyright).
   - Aquí: el degradado de fondo, la posición del <svg class="hero-dna"> y los colores
     y opacidades de cada parte del dibujo.
   - Se diseñó en utils/CSS/hero_dna_mockup.html: si se cambia aquí, cambiarlo también allí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Colores (medidos en la imagen original donde se indica)
   -------------------------------------------------------------------------- */
:root {
  --dna-bg-left: #a3bcd9;        /* fondo: azul grisáceo de la izquierda */
  --dna-bg-right: #cfe9f5;       /* fondo: azul muy claro de la derecha */
  --dna-bg-glow: #f2fbff;        /* fondo: resplandor blanquecino detrás de la hélice */
  --dna-bubble: #86cfee;         /* burbujas sueltas (medido: #89d2ee, #88cae8, #8ad0ed) */
  --dna-bubble-overlap: #4a6fd0; /* intersecciones: al 75 % sobre la burbuja da ≈ #5a88d5 (medido: #538acd, #6596de) */
  --dna-thread: #5fb6e0;         /* hilos de la cinta */
  --dna-thread-light: #ffffff;   /* hilos claros, mezclados con los azules */
  --dna-glow: #ffffff;           /* brillo a lo largo de la hélice y destellos */
  --dna-bokeh: #d4f7ff;          /* burbujas de brillo: cian casi blanco */
  --dna-node: #447ea1;           /* nodos oscuros (medido) */
  --dna-node-faint: #98c1d7;     /* nodos claros, "lejanos" (medido) */
  --dna-edge: #4f7f9f;           /* ramas */
}

/* --------------------------------------------------------------------------
   Fondo de la página y posición del dibujo
   - body:has(.hero) = solo la home (el resto de páginas no tienen .hero).
   - background-attachment: fixed: el degradado se queda quieto al hacer scroll, igual que la imagen de antes.
   -------------------------------------------------------------------------- */
body:has(.hero) {
  background:
    radial-gradient(ellipse 35% 45% at 66% 42%, var(--dna-bg-glow), transparent 70%),
    linear-gradient(100deg, var(--dna-bg-left), var(--dna-bg-right) 75%);
  background-attachment: fixed;
}

/* El dibujo: fijo detrás de todo, ocupando la ventana (el JS lo pone al principio del <body>)
   - position: fixed + inset: 0: tapa la ventana entera y no se mueve al hacer scroll.
   - z-index: -1: detrás del contenido.
   - pointer-events: none: no "tapa" clics. */
.hero-dna {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   1. Burbujas de la hélice
   -------------------------------------------------------------------------- */
.hero-dna .bubble {
  fill: var(--dna-bubble);               /* opacidad de cada una: la pone el JS según su "profundidad" */
}
.hero-dna .bubble-overlap {              /* la "lente" oscura donde se tocan dos burbujas */
  fill: var(--dna-bubble-overlap);
  fill-opacity: 0.75;
}

/* --------------------------------------------------------------------------
   2. Cinta de hilos
   -------------------------------------------------------------------------- */
.hero-dna .thread {
  fill: none;
  stroke: var(--dna-thread);
  stroke-width: 1.1;
  stroke-opacity: 0.55;
}
.hero-dna .thread--light {
  stroke: var(--dna-thread-light);
  stroke-opacity: 0.6;
}
.hero-dna .thread--mesh {                /* hilos en diagonal (la red): más tenues */
  stroke-opacity: 0.35;
  stroke-width: 0.8;
}
.hero-dna .thread--back {                /* la parte que pasa por detrás de la hélice: más tenue */
  stroke-opacity: 0.3;
}
.hero-dna .thread--edge {                /* borde externo (donde la cinta se ve de canto y los hilos se apiñan) */
  stroke-opacity: 0.12;
}

/* --------------------------------------------------------------------------
   3. Brillo
   -------------------------------------------------------------------------- */
.hero-dna .glow-band {                   /* halo ancho */
  fill: none;
  stroke: var(--dna-glow);
  stroke-width: 320;
  stroke-linecap: round;
  stroke-opacity: 0.55;        /* antes 0.8: demasiado intenso */
}
.hero-dna .glow-core {                   /* centro, más estrecho y blanco */
  fill: none;
  stroke: var(--dna-glow);
  stroke-width: 130;
  stroke-linecap: round;
  stroke-opacity: 0.5;         /* antes 0.85 */
}
.hero-dna .bokeh {
  fill: var(--dna-bokeh);
}
.hero-dna .sparkle {
  fill: var(--dna-glow);
}
/* Punto de luz en la primera intersección de la hélice: el color de su degradado (la opacidad la pone el JS) */
.hero-dna .hotspot-stop {
  stop-color: var(--dna-glow);
}

/* --------------------------------------------------------------------------
   4. Red de nodos y ramas
   -------------------------------------------------------------------------- */
.hero-dna .edge {
  stroke: var(--dna-edge);
  stroke-width: 1.3;
  stroke-opacity: 0.55;
}
.hero-dna .edge--faint {                 /* ramas largas entre grupos */
  stroke-width: 1;
  stroke-opacity: 0.25;
}
.hero-dna .node {
  fill: var(--dna-node);
}
.hero-dna .node--faint {
  fill: var(--dna-node-faint);
}