:root {
  --page-bg: #000000;
  --page-bg-tech: #000000;
  --bg-primary: #000000;
  --bg-elevated: #050505;
  --accent-primary: #0FFFD4;
  --accent-secondary: #7B61FF;
  /*
   * Componentes RGB de los accents. Usados con rgba(var(--accent-rgb), α)
   * cuando se necesita modular alpha en gradientes / glows (fan cards).
   */
  --accent-rgb: 15, 255, 212;
  --accent-secondary-rgb: 123, 97, 255;
  --surface-card: #0c0e12;
  --text-primary: #eef1f7;
  --text-secondary: #8b95a8;
  --font-heading: "Syne", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --glass-border: rgba(180, 195, 220, 0.08);
  --glass-bg: rgba(10, 12, 16, 0.78);
  --nav-height: calc(4.25rem + 0.25cm);
  --nav-mobile-toggle-w: 3.75rem;
  --nav-mobile-menu-bg: #ffffff;
  --nav-mobile-contact-bg: #4a4a4a;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bg-tech: #000000;
  /* Velo sobre la red neuronal (#bg-neural-canvas) en secciones donde debe verse */
  --bg-tech-over-neural: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.58) 48%,
    rgba(0, 0, 0, 0.82) 100%
  );
}

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

html {
  scroll-behavior: smooth;
  background: var(--page-bg);
  transition: background 0.35s ease;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background: var(--page-bg);
  transition: background 0.35s ease;
  --section-factor: 1;
  --vignette-boost: 0;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior: none;
}

header {
  position: relative;
}

/* Por encima del canvas neuronal (#bg-neural-canvas z-index 4) y del vignette */
main,
footer {
  position: relative;
  z-index: 5;
}

main {
  overflow-x: clip;
  max-width: 100%;
}

main > section {
  position: relative;
  z-index: 1;
}

body[data-section="tecnologias"] {
  background: var(--page-bg-tech);
  --section-factor: 1.15;
}

body[data-section="proyectos"] {
  --section-factor: 1.2;
}

body[data-section="proceso"] {
  --section-factor: 0.9;
}

body[data-section="contacto"] {
  --section-factor: 1.08;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

img,
canvas {
  display: block;
  max-width: 100%;
}