/* ==================================================================
   HERO — la escena del laboratorio y la interfaz que va encima
   ================================================================== */

.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

/* ---- capas de escena --------------------------------------------- */
.stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/*
 * `.scene` mide exactamente el espacio de escena (1536x1024) y se escala en
 * bloque, de modo que todo lo que va dentro puede usar coordenadas de la
 * imagen original tal cual. El compositor publica las tres variables.
 */
.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 1536px;
  height: 1024px;
  transform-origin: 0 0;
  transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), 0) scale(var(--scene-scale, 1));
  will-change: transform;
}

.scene>* {
  position: absolute;
  inset: 0;
  width: 1536px;
  height: 1024px;
}

.plate {
  object-fit: cover;
}

.fx {
  pointer-events: none;
}

.emissive {
  mix-blend-mode: screen;
  opacity: var(--glow, 0.38);
  pointer-events: none;
}

.screens {
  pointer-events: none;
}

.decals {
  pointer-events: none;
}

.decal {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  display: grid;
  place-items: center;
  white-space: nowrap;
  letter-spacing: 0.06em;
  line-height: 1;
}

.screens canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* los paneles reales de la referencia son mas vivos que un canvas plano */
  filter: saturate(1.14) brightness(1.07) contrast(1.04);
}

/* ---- velos de legibilidad ---------------------------------------- */
.veil {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/*
 * Medido sobre la imagen original: no hay ningun velo lateral —esa zona es
 * clara porque el laboratorio lo es— y arriba solo hay un lavado muy tenue.
 * Asi que el unico velo real es local, justo detras del bloque de texto, para
 * que en proporciones distintas a 3:2 el titular no caiga sobre maquinaria.
 */
.veil--top {
  inset: 0 0 auto 0;
  height: calc(68 * var(--u));
  background: linear-gradient(to bottom,
      rgba(238, 241, 250, 0.7) 0%,
      rgba(238, 241, 250, 0.34) 52%,
      rgba(238, 241, 250, 0) 100%);
}

.veil--left {
  left: 0;
  top: calc(96 * var(--u));
  width: calc(468 * var(--u));
  height: calc(320 * var(--u));
  background: radial-gradient(118% 96% at 6% 46%,
      rgba(238, 241, 250, 0.88) 0%,
      rgba(238, 241, 250, 0.5) 46%,
      rgba(238, 241, 250, 0) 100%);
}

@media (max-width: 900px) {

  /* en vertical el texto ocupa toda la anchura, asi que el velo pasa a ser
     una banda que cubre el bloque entero hasta pasado el enlace */
  .veil--left {
    top: 0;
    width: 100%;
    height: calc(478 * var(--u));
    background: linear-gradient(to bottom,
        rgba(238, 241, 250, 0.94) 0%,
        rgba(238, 241, 250, 0.92) 78%,
        rgba(238, 241, 250, 0) 100%);
  }
}

/* ================================================================== */
/* barra superior                                                     */
/* ================================================================== */
.topbar {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: calc(66 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  padding: 0 var(--pad-x);
}

.logo {
  font-size: var(--fs-logo);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.logo__dot {
  color: var(--ink-strong);
}

/* el guion bajo parpadeante del logo y del titular */
.caret {
  display: inline-block;
  width: 0.58em;
  height: 0.085em;
  margin-left: 0.06em;
  background: var(--blue-ink);
  vertical-align: baseline;
  animation: blink 1.15s steps(1) infinite;
}

.caret--lg {
  height: 0.075em;
  width: 0.6em;
}

@keyframes blink {

  0%,
  55% {
    opacity: 1;
  }

  56%,
  100% {
    opacity: 0.15;
  }
}

/* ---- chip de estado ---------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(13 * var(--u));
  height: calc(27 * var(--u));
  padding: 0 calc(13 * var(--u));
  border: 1px solid var(--hair);
  border-radius: calc(6 * var(--u));
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(6px);
  font-size: var(--fs-chip);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.chip__label {
  color: var(--ink-4);
}

.chip__sep {
  width: 1px;
  height: calc(15 * var(--u));
  background: var(--hair);
}

.chip__state {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  color: var(--ink);
  font-weight: 500;
}

.chip__dot {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(7, 190, 143, 0.55);
  animation: pulse-dot 2.4s var(--ease) infinite;
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 190, 143, 0.5);
  }

  70% {
    box-shadow: 0 0 0 calc(7 * var(--u)) rgba(7, 190, 143, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(7, 190, 143, 0);
  }
}

/* ---- navegacion --------------------------------------------------- */
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  align-self: stretch;
  padding: 0 var(--pad-x) 0 calc(38 * var(--u));
  margin-right: calc(0px - var(--pad-x));
  background: rgba(255, 255, 255, 0.7);
  box-shadow: -1px 0 0 rgba(24, 38, 74, 0.04);
  font-size: var(--fs-nav);
  letter-spacing: 0.085em;
  color: var(--ink-2);
}

.nav>a {
  position: relative;
  padding: calc(6 * var(--u)) 0;
  transition: color 0.2s;
}

.nav>a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: calc(1 * var(--u));
  height: 1px;
  background: var(--blue);
  transition: right 0.28s var(--ease-out);
}

.nav>a:hover {
  color: var(--ink-strong);
}

.nav>a:hover::after {
  right: 0;
}

.nav>a.is-active {
  color: var(--ink-strong);
  font-weight: 600;
}

.nav__sep {
  width: 1px;
  height: calc(20 * var(--u));
  background: var(--hair);
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(80 * var(--u));
  height: calc(28 * var(--u));
  padding: 0 calc(17 * var(--u));
  font-size: calc(10 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.09em;
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) -4px rgba(20, 90, 230, 0.42);
  transition: background 0.2s, transform 0.2s var(--ease-out);
}

.btn-contact::after {
  display: none;
}

.btn-contact:hover {
  background: var(--blue-deep);
  transform: translateY(-1px);
}

/* ---- boton de rejilla -------------------------------------------- */
.dots {
  display: grid;
  grid-template-columns: repeat(3, calc(3.4 * var(--u)));
  gap: calc(3.4 * var(--u));
  cursor: pointer;
  padding: calc(4 * var(--u));
}

.dots span {
  width: calc(3.4 * var(--u));
  height: calc(3.4 * var(--u));
  border-radius: 50%;
  background: var(--blue);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.dots span:nth-child(2),
.dots span:nth-child(4),
.dots span:nth-child(9) {
  opacity: 0.28;
}

.dots span:nth-child(6) {
  opacity: 0.5;
}

.dots:hover span {
  opacity: 1;
  transform: scale(1.12);
}

/* ---- panel de navegacion movil ------------------------------------ */
.menu {
  position: absolute;
  z-index: 5;
  top: calc(66 * var(--u));
  right: var(--pad-x);
  left: var(--pad-x);
  padding: 8px 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--panel-shadow);
  transform-origin: 100% 0;
  animation: menu-in 0.26s var(--ease-out);
}

.menu[hidden] {
  display: none;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

.menu a i {
  font-style: normal;
  font-size: 9px;
  color: var(--blue-ink);
}

.menu a+a {
  border-top: 1px solid var(--hair-soft);
}

.menu a:active {
  background: var(--blue-wash);
}

/* el boton de rejilla solo hace de menu cuando la nav no cabe */
@media (min-width: 901px) {
  .menu {
    display: none;
  }
}

@media (max-width: 900px) {

  .chip,
  .nav>a,
  .nav__sep {
    display: none;
  }

  .nav {
    gap: 0;
    align-self: auto;
    padding: 0;
    margin-right: 0;
    background: transparent;
    box-shadow: none;
  }

  .dots span {
    width: calc(4 * var(--u));
    height: calc(4 * var(--u));
  }

  .dots {
    grid-template-columns: repeat(3, calc(4 * var(--u)));
    gap: calc(4 * var(--u));
  }
}

/* ================================================================== */
/* bloque de introduccion                                             */
/* ================================================================== */
.intro {
  position: absolute;
  z-index: 3;
  left: var(--pad-x);
  top: calc(136 * var(--u));
  max-width: calc(380 * var(--u));
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.145em;
  color: var(--ink-2);
  margin-bottom: calc(14 * var(--u));
}

.headline {
  font-size: var(--fs-headline);
  font-weight: 500;
  letter-spacing: 0.012em;
  line-height: 1.06;
  color: var(--ink-strong);
  white-space: nowrap;
  margin-bottom: calc(30 * var(--u));
}

.lede {
  font-size: var(--fs-lede);
  line-height: 2.02;
  color: var(--ink-3);
  margin-bottom: calc(50 * var(--u));
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: var(--fs-cta);
  font-weight: 500;
  letter-spacing: 0.135em;
  color: var(--blue-ink);
}

.cta__chev {
  transition: transform 0.3s var(--ease-out);
}

.cta:hover .cta__chev {
  transform: translateX(calc(4 * var(--u)));
}

.cta span:last-child {
  position: relative;
}

/* ================================================================== */
/* rail numerado                                                      */
/* ================================================================== */
.rail {
  position: absolute;
  z-index: 3;
  left: calc(11 * var(--u));
  top: calc(427 * var(--u));
  display: flex;
  flex-direction: column;
  font-size: var(--fs-rail);
}

.rail__line {
  position: absolute;
  left: 0;
  top: calc(-22 * var(--u));
  bottom: calc(-360 * var(--u));
  width: 1px;
  background: var(--hair);
}

.rail__fill {
  position: absolute;
  left: 0;
  top: calc(-22 * var(--u));
  width: 1px;
  background: var(--blue);
  transition: height 0.5s var(--ease-out);
}

.rail__cap {
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(-24 * var(--u));
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--blue);
}

.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  height: calc(33.4 * var(--u));
  color: var(--ink-5);
  transition: color 0.25s;
}

.rail__item::before {
  content: "";
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  margin-left: calc(-2 * var(--u));
  border-radius: 50%;
  background: #c3c8d8;
  flex: none;
  transition: background 0.25s, transform 0.25s var(--ease-out);
}

.rail__n {
  letter-spacing: 0.06em;
}

.rail__label {
  font-size: calc(8.6 * var(--u));
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(calc(-5 * var(--u)));
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease-out);
}

/* La etiqueta solo aparece al pasar por encima: en la imagen de partida el
   rail muestra unicamente el numero, tambien en el elemento activo. */
.rail__item:hover .rail__label,
.rail__item:focus-visible .rail__label {
  opacity: 0.8;
  transform: none;
}

.rail__item:hover {
  color: var(--ink-2);
}

.rail__item.is-active {
  color: var(--blue-ink);
}

.rail__item.is-active::before {
  background: var(--blue);
  transform: scale(1.15);
}

.rail__item.is-active:hover .rail__label {
  opacity: 1;
}

@media (max-width: 900px) {
  .rail {
    display: none;
  }
}

/* ================================================================== */
/* barra inferior: LAB FEED                                           */
/* ================================================================== */
.labbar {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(73 * var(--u));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad-x);
  font-size: var(--fs-foot);
  letter-spacing: 0.05em;
  background: var(--bg-band);
  border-top: 1px solid var(--hair-soft);
}

.labbar__feed {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
}

.labbar__title {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--ink-5);
  letter-spacing: 0.16em;
  font-size: calc(7.4 * var(--u));
}

.labbar__rule {
  width: calc(22 * var(--u));
  height: 1px;
  background: var(--hair);
}

.labbar__entry {
  display: inline-flex;
  align-items: center;
  gap: calc(11 * var(--u));
  color: var(--ink-3);
  white-space: nowrap;
}

.labbar__entry time {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.labbar__entry.is-new {
  animation: feed-in 0.5s var(--ease-out);
}

@keyframes feed-in {
  from {
    opacity: 0;
    transform: translateY(calc(4 * var(--u)));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.labbar__dot {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--green);
}

.labbar__mid {
  display: inline-flex;
  align-items: center;
  gap: calc(20 * var(--u));
  color: var(--ink-3);
}

.labbar__sep {
  width: 1px;
  height: calc(11 * var(--u));
  background: var(--hair);
}

.labbar__muted {
  color: var(--ink-5);
  letter-spacing: 0.12em;
}

.labbar__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(12 * var(--u));
}

/* medidor de barras del extremo derecho */
.meter {
  display: inline-flex;
  align-items: flex-end;
  gap: calc(2 * var(--u));
  height: calc(11 * var(--u));
}

.meter i {
  width: calc(2.4 * var(--u));
  background: var(--blue);
  border-radius: 0.5px;
  transition: height 0.32s var(--ease-out), opacity 0.32s;
}

@media (max-width: 900px) {
  .labbar {
    grid-template-columns: 1fr auto;
    height: calc(64 * var(--u));
  }

  .labbar__mid {
    display: none;
  }
}

/* ---- pista de scroll ---------------------------------------------- */
.scroll-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(84 * var(--u));
  transform: translateX(-50%);
  width: 1px;
  height: calc(34 * var(--u));
  background: linear-gradient(to bottom, transparent, var(--hair));
  overflow: hidden;
}

.scroll-hint i {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: calc(12 * var(--u));
  background: var(--blue);
  animation: hint 2.1s var(--ease) infinite;
}

@keyframes hint {
  0% {
    transform: translateY(calc(-14 * var(--u)));
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  100% {
    transform: translateY(calc(34 * var(--u)));
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .scroll-hint {
    display: none;
  }
}