/* ============================================================
   SYMBIO · BASE
   Reset, tipografía, resplandores de fondo y sistema de entradas.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-extralight);   /* firma de la referencia: cuerpo ultraligero */
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  font-weight: var(--w-regular);      /* nunca bold: la jerarquía es escala + tracking */
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}

p { margin: 0 0 var(--s-18); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--blue); color: var(--white); }

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

.skip-link {
  position: fixed; top: var(--s-18); left: var(--s-18);
  z-index: 200;
  padding: var(--s-12) var(--s-24);
  background: var(--white); color: var(--void);
  border-radius: var(--r-full);
  font-size: var(--t-nav); font-weight: var(--w-medium);
  transform: translateY(-250%);
  transition: transform var(--d-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------- Resplandores
   Son la fuente de luz del sitio. El vidrio necesita algo detrás
   para refractar; sin esto los paneles se ven grises y muertos.
   Van fijos y detrás de todo, sin capturar el puntero. */

.glow {
  position: fixed;
  z-index: var(--z-glow);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}
.glow--a {
  top: -12vh; right: -6vw;
  width: 58vw; height: 58vw;
  background: radial-gradient(circle, rgba(74,125,255,.30), transparent 68%);
}
.glow--b {
  top: 92vh; left: -18vw;
  width: 52vw; height: 52vw;
  background: radial-gradient(circle, rgba(27,59,168,.34), transparent 70%);
}
.glow--c {
  top: 210vh; right: -10vw;
  width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(99,200,255,.16), transparent 70%);
}

/* ---------------------------------------------- Tipografía de página */

.h-lg {
  font-size: var(--t-h-lg);
  letter-spacing: var(--tr-head);
  max-width: 16ch;
}

.lead {
  font-size: clamp(1.06rem, 1.35vw, 1.25rem);
  color: var(--white);
}

.label {
  display: block;
  margin: 0 0 var(--s-24);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--warm);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-12);
  margin: 0 0 var(--s-30);
  font-size: var(--t-nav);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  color: var(--ash);
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 14px var(--blue-bright);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.72); }
}

/* ---------------------------------------------- Entradas por scroll
   El estado inicial cuelga de .js: sin JavaScript la página se ve
   completa en lugar de quedar en blanco esperando un observador. */

.js [data-reveal],
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.js [data-reveal].is-in,
.js [data-stagger] > .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}