/* =====================================================================
   MOLCORP · Inicio
   ===================================================================== */

/* =====================================================================
   HERO
   Dos acomodos (los decide home.js según el video y la pantalla):
   - panel: el video vertical es una pantalla a la derecha y su luz azul
     se derrama sobre el fondo blanco.
   - fondo: el video ocupa todo y el texto va encima con un degradado.
   ===================================================================== */
.hero {
  --arn: .5625;                     /* proporción del video (ancho / alto) */
  --pad-x: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  background:
    radial-gradient(42% 58% at 78% 50%, rgba(29, 106, 255, .12), transparent 72%),
    var(--fondo);
}

/* ---------- capas de fondo ---------- */
.hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-ambient {
  position: absolute; inset: -6%;
  width: 112%; height: 112%;
  filter: blur(48px) saturate(1.6);
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero.has-ambient .hero-ambient { opacity: .8; }
.hero-grid {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 46%, #000 0%, transparent 78%);
  mask-image: radial-gradient(60% 70% at 72% 46%, #000 0%, transparent 78%);
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .78) 34%, rgba(255, 255, 255, .08) 64%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 76%, var(--fondo) 100%);
}

/* ---------- pantalla del video ---------- */
.hero-media { position: relative; }
.hero-screen {
  position: relative;
  overflow: hidden;
  background: var(--sup-2) center / cover no-repeat;
}
.hero-video, .hero-freeze {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video { z-index: 0; }
.hero-freeze { z-index: 1; opacity: 0; pointer-events: none; }
.hero.is-frozen .hero-freeze { opacity: 1; }
.no-js .hero-screen { background-image: url('../video/kit01-final.jpg'); }

/* consola: tiempo, avance y sonido */
.hero-console {
  display: flex; align-items: center; gap: 12px;
  width: 0; min-width: 100%;
  font-size: 11px; letter-spacing: .02em; color: var(--gris-2);
}
.hc-time { white-space: nowrap; color: var(--gris-1); }
.hc-bar { position: relative; flex: 1; min-width: 32px; height: 2px; border-radius: 2px; background: var(--linea-2); }
.hc-bar span {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--azul); box-shadow: 0 0 8px var(--azul-claro);
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.hc-actions { display: flex; gap: 8px; }
.hc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--linea-2); background: rgba(255, 255, 255, .8);
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--texto);
  white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.hc-btn:hover { border-color: var(--azul); color: var(--azul-profundo); background: #fff; }
.hc-btn svg { width: 13px; height: 13px; flex: none; }
.hc-btn[aria-pressed="true"] { border-color: rgba(29, 106, 255, .5); color: var(--azul-profundo); background: rgba(29, 106, 255, .07); }
.hc-btn .i-on { display: none; }
.hc-btn[aria-pressed="true"] .i-on { display: block; }
.hc-btn[aria-pressed="true"] .i-off { display: none; }
.no-js .hero-console { display: none; }

/* botón grande cuando el navegador no deja reproducir solo */
.hero-play {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 18px; border-radius: 999px;
  border: 1px solid var(--linea-2);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--texto); font-weight: 500; font-size: .95rem;
  box-shadow: 0 14px 40px -14px var(--luz-fuerte);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.hero-play:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.hero-play svg { width: 18px; height: 18px; }

/* ---------- acomodo: panel (computadora con video vertical) ---------- */
.hero[data-layout="panel"] {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "content media";
  align-items: center;
  column-gap: clamp(40px, 6vw, 120px);
  padding: calc(var(--nav-h) + 40px) var(--pad-x) 88px;
}
.hero[data-layout="panel"] .hero-content { grid-area: content; }
.hero[data-layout="panel"] .hero-media {
  grid-area: media;
  display: flex; flex-direction: column; gap: 16px;
}
.hero[data-layout="panel"] .hero-screen {
  width: min(48vw, calc(min(72svh, 800px) * var(--arn)));
  aspect-ratio: var(--arn);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(16, 56, 140, .10),
    0 50px 110px -46px rgba(29, 106, 255, .6),
    0 0 130px -26px rgba(29, 106, 255, .32);
}
.hero[data-layout="panel"] .corners { inset: -12px; }

/* ---------- acomodo: fondo (celular o video horizontal) ---------- */
.hero[data-layout="fondo"] {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding: calc(var(--nav-h) + 32px) var(--pad-x) calc(92px + env(safe-area-inset-bottom, 0px));
  background: var(--fondo);
}
.hero[data-layout="fondo"] .hero-media { position: absolute; inset: 0; z-index: -1; }
.hero[data-layout="fondo"] .hero-screen { position: absolute; inset: 0; border-radius: 0; }
.hero[data-layout="fondo"] .hero-screen::before {   /* velo blanco que aparece al final */
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(70% 45% at 50% 40%, rgba(29, 106, 255, .16), transparent 70%), rgba(255, 255, 255, .5);
  opacity: 0; transition: opacity 2.2s var(--ease);
}
.hero[data-layout="fondo"] .hero-screen::after {    /* degradado blanco para leer el texto */
  content: ''; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .22) calc(var(--nav-h) + 90px), rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .74) 50%, rgba(255, 255, 255, .95) 62%, var(--fondo) 82%);
}
.hero[data-layout="fondo"] .hero-video,
.hero[data-layout="fondo"] .hero-freeze { transition: filter 2.2s var(--ease), transform 8s var(--ease); }
/* al terminar, el último cuadro se queda y se vuelve parte del fondo: se suaviza y se aclara */
.hero[data-layout="fondo"].is-ended .hero-video,
.hero[data-layout="fondo"].is-ended .hero-freeze { filter: blur(6px) saturate(1.15); transform: scale(1.06); }
.hero[data-layout="fondo"].is-ended .hero-screen::before { opacity: 1; }
.hero[data-layout="fondo"] .corners,
.hero[data-layout="fondo"] .hero-grid,
.hero[data-layout="fondo"] .hero-shade { display: none; }
.hero[data-layout="fondo"] .hero-console {
  position: absolute; z-index: 5;
  left: var(--pad-x); right: var(--pad-x); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  width: auto; min-width: 0;
}
.hero[data-layout="fondo"] .hero-scroll { display: none; }
/* video horizontal en pantalla horizontal: degradado de izquierda a derecha */
@media (min-aspect-ratio: 1/1) {
  .hero[data-layout="fondo"] .hero-screen::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .7) 38%, rgba(255, 255, 255, .08) 70%),
      linear-gradient(180deg, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 72%, var(--fondo) 100%);
  }
}

/* ---------- contenido ---------- */
.hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0;
}
.hero-meta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: clamp(22px, 3.4vh, 36px);
  font-size: var(--t-xs); letter-spacing: .03em; color: var(--gris-2);
}
.hero-meta::before { content: ''; width: 28px; height: 1px; background: var(--linea-3); }
.hero-logo { line-height: 0; }
.hl { width: clamp(272px, 40vw, 610px); height: auto; overflow: visible; }
.hl .hl-ink { fill: var(--logo); }
.hl .hl-edge { fill: var(--azul); }
.hl .hl-pulses { stroke: var(--azul-claro); }

.hero-words {
  position: relative;
  display: flex; flex-wrap: wrap; gap: .35em 1.25em;
  margin-top: clamp(26px, 4vh, 40px);
  font-size: clamp(.8rem, .64rem + .5vw, 1.04rem);
  font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--texto);
}
.hw { position: relative; display: inline-block; white-space: nowrap; }
.hw-bracket {
  position: absolute; left: 0; top: -9px; bottom: -9px;
  transform: translateX(var(--bx, 0px)); width: var(--bw, 0px);
  opacity: 0; pointer-events: none;
}
.hw-bracket::before, .hw-bracket::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 11px;
  border: 1.5px solid var(--azul);
}
.hw-bracket::before { left: 0; border-right: 0; }
.hw-bracket::after { right: 0; border-left: 0; }

.hero-tag {
  margin-top: 16px; min-height: 1.6em;
  font-size: var(--t-sm); color: var(--gris-2);
}
.hero-tag .caret {
  display: inline-block; width: .6em; height: 2px; margin-left: 3px;
  vertical-align: -1px; background: var(--azul); box-shadow: 0 0 8px var(--azul-claro);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-tag .caret { animation: parpadeo 1.05s steps(1) 10; }
}
@keyframes parpadeo { 50% { opacity: 0; } }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 5vh, 48px); }

.hero-scroll {
  position: absolute; left: var(--pad-x); bottom: 30px; z-index: 2;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .08em; color: var(--gris-2); text-decoration: none;
}
.hero-scroll:hover { color: var(--texto); }
.hero-scroll i { position: relative; width: 1px; height: 34px; overflow: hidden; background: var(--linea-2); }
.hero-scroll i::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: var(--azul); box-shadow: 0 0 6px var(--azul-claro);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll i::after { animation: baja 2.2s var(--ease-io) 1.5s 4; }
}
@keyframes baja { to { top: 110%; } }

/* ---------- intro (solo la primera visita de la sesión) ---------- */
.hero.intro .hl,
.hero.intro .hero-words,
.hero.intro .hero-tag { visibility: hidden; }
.hero.intro.intro-run .hl,
.hero.intro.intro-run .hero-words,
.hero.intro.intro-run .hero-tag { visibility: visible; }
.hero.intro [data-intro-item] {
  opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(5px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
}
.hero.intro [data-intro-item].is-in { opacity: 1; transform: none; filter: none; }
.hero.intro .hero-media[data-intro-item] { transform: translate3d(0, 18px, 0) scale(.985); transition-duration: 1.4s; }
.hero.intro .hero-media[data-intro-item].is-in { transform: none; }

/* ---------- celular ---------- */
@media (max-width: 560px) {
  .hero-meta { display: none; }
  .hl { width: min(100%, 310px); }
  .hero-words { margin-top: 22px; gap: .3em .85em; font-size: .76rem; letter-spacing: .2em; }
  .hero-tag { margin-top: 10px; font-size: 11.5px; }
  .hero-cta { width: 100%; margin-top: 26px; gap: 10px; }
  .hero-cta .btn { flex: 1 1 0; padding: 0 10px; font-size: .9rem; }
  .hero-cta .btn-lg { --h: 50px; }
  .hc-time { font-size: 10px; }
}
@media (max-width: 350px) {
  .hero-cta .btn { flex-basis: 100%; }
}

/* =====================================================================
   ¿QUÉ ES MOLCORP?
   ===================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}
.about-k {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: var(--t-md); font-weight: 500; letter-spacing: -0.01em; color: var(--azul);
}
.about-k::after { content: ''; flex: 0 0 56px; height: 1px; background: linear-gradient(90deg, var(--azul), transparent); }
.statement {
  font-size: clamp(1.65rem, 1.1rem + 2.1vw, 3rem);
  font-weight: 400; line-height: 1.16; letter-spacing: -0.03em;
  text-wrap: pretty;
  color: var(--texto);
}
.js .statement .w { color: rgba(10, 18, 38, .16); transition: color .5s var(--ease); }
.js .statement .w.on { color: var(--texto); }
.about-note { margin-top: clamp(26px, 3vw, 36px); max-width: 46ch; font-size: var(--t-md); color: var(--gris-1); }

/* átomo interactivo */
.atom {
  position: relative; justify-self: center;
  width: 100%; max-width: 560px; aspect-ratio: 1;
  container-type: inline-size;
}
.atom-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atom-orbits .orb { stroke: var(--linea-3); stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease); }
.atom[data-on] .atom-orbits .orb { stroke: var(--linea-2); }
.atom-electrons circle { fill: var(--azul); filter: drop-shadow(0 0 5px rgba(29, 106, 255, .7)); }
.atom-ends circle { fill: var(--fondo); stroke: var(--linea-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill .3s var(--ease), stroke .3s var(--ease), r .3s var(--ease); }
.atom-ends circle.is-on { fill: var(--azul); stroke: var(--azul); r: 8px; }
.atom-core { fill: var(--azul); }
.atom-core-glow { fill: url(#atom-glow); }
.atom-center {
  position: absolute; left: 50%; top: 50cqw; transform: translate(-50%, 30px);
  font-size: 11px; letter-spacing: .1em; color: var(--gris-2);
}
.atom-label {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, calc(-100% - 16px));
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--linea-2); background: rgba(255, 255, 255, .9);
  font-size: var(--t-sm); color: var(--gris-1);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .3s var(--ease);
}
.atom-label.is-low { transform: translate(-50%, 16px); }
.atom-label:hover, .atom-label.is-on {
  color: var(--azul-profundo); border-color: rgba(29, 106, 255, .55); background: #fff;
  box-shadow: 0 10px 30px -12px var(--luz-fuerte);
}
.atom-cap {
  position: absolute; left: 50%; bottom: -8px; transform: translate(-50%, 100%);
  width: min(100%, 420px); text-align: center;
  font-size: var(--t-sm); color: var(--gris-1); text-wrap: balance;
}

/* principios */
.principles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(120px, 12vw, 190px);
}
.pr-line { display: block; height: 2px; border-radius: 2px; margin-bottom: 26px; background: linear-gradient(90deg, var(--azul), var(--linea-2) 45%, transparent); }
.principle p { margin-top: 12px; max-width: 34ch; color: var(--gris-1); }

@media (max-width: 1100px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .atom { max-width: 520px; margin-top: 24px; }
}
@media (max-width: 640px) {
  .atom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; aspect-ratio: auto; }
  .atom-svg { position: relative; inset: auto; grid-column: 1 / -1; aspect-ratio: 1; height: auto; }
  .atom-center { top: 50cqw; }
  .atom-label, .atom-label.is-low { position: static; transform: none; text-align: center; }
  .atom-cap { position: static; grid-column: 1 / -1; transform: none; width: 100%; margin-top: 8px; min-height: 3em; }
  .principles { grid-template-columns: minmax(0, 1fr); margin-top: 88px; }
}

/* =====================================================================
   OBJETIVO Y META
   ===================================================================== */
.goal { overflow: clip; background: linear-gradient(180deg, var(--fondo), var(--sup) 50%, var(--fondo)); }
.goal::before {
  content: ''; position: absolute; inset: 10% 0 auto; height: 70%; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 15% 55%, rgba(29, 106, 255, .10), transparent 70%);
}
.goal > .wrap { position: relative; }
.stages-wrap { position: relative; margin-top: clamp(64px, 7vw, 104px); }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stages-line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--linea); }
.stages-line span {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul-claro) 16%, rgba(29, 106, 255, .3) 30%, rgba(29, 106, 255, .14) 100%);
  box-shadow: 0 0 10px rgba(29, 106, 255, .45);
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.no-js .stages-line span { transform: scaleX(.25); }
.stage { position: relative; padding: 44px clamp(16px, 2.4vw, 40px) 0 0; }
.st-node {
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--linea-3); background: var(--fondo);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.st-node::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--gris-3); transition: background-color .5s var(--ease);
}
.stage.is-reached .st-node { border-color: rgba(29, 106, 255, .4); }
.stage.is-reached .st-node::after { background: var(--gris-2); }
.stage.is-now .st-node { border-color: var(--azul); box-shadow: 0 0 0 6px rgba(29, 106, 255, .12), 0 0 22px rgba(29, 106, 255, .6); }
.stage.is-now .st-node::after { background: var(--azul); }
.st-n { font-size: 11px; letter-spacing: .06em; color: var(--gris-2); }
.st-t { margin: 10px 0 12px; font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.stage p { max-width: 30ch; font-size: .96rem; color: var(--gris-1); }
.stage .chip { margin-top: 22px; }

.path {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 18px 48px;
  margin-top: clamp(72px, 8vw, 120px); padding-top: 30px;
  border-top: 1px solid var(--linea);
}
.path-k { font-size: var(--t-sm); color: var(--gris-2); }
.path-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.path-list li {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--t-lg); letter-spacing: -0.02em; color: var(--gris-3);
}
.path-list li + li::before { content: ''; width: clamp(18px, 3.4vw, 56px); height: 1px; background: var(--linea-3); }
.path-list li.is-now { color: var(--texto); }

@media (max-width: 900px) {
  .stages { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .stages-line { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .stages-line span { transform-origin: top; transform: scaleY(var(--p, 0));
    background: linear-gradient(180deg, var(--azul) 0%, var(--azul-claro) 18%, rgba(29, 106, 255, .3) 32%, rgba(29, 106, 255, .14) 100%); }
  .no-js .stages-line span { transform: scaleY(.25); }
  .stage { padding: 0 0 0 44px; }
  .st-t { margin-top: 6px; }
  .path { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   LABORATORIO: plano técnico sobre papel azul claro
   ===================================================================== */
.lab-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head stage" "data stage";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 5vw, 88px); row-gap: 0;
  align-items: start;
}
.lab-head { grid-area: head; }
.lab-data { grid-area: data; }
.lab-stage { grid-area: stage; align-self: center; }
.lab-head .lead { margin-top: 20px; }
.for-touch { display: none; }
@media (hover: none) {
  .for-mouse { display: none; }
  .for-touch { display: inline; }
}
.telemetry { margin: 36px 0 32px; border-top: 1px solid var(--linea); }
.tm-row {
  display: grid; grid-template-columns: minmax(9.5rem, auto) minmax(0, 1fr);
  align-items: center; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.tm-row dt { font-size: var(--t-sm); color: var(--gris-2); }
.tm-row dd { margin: 0; display: flex; align-items: center; gap: 14px; min-width: 0; }
.tm-row b { min-width: 6ch; font-family: var(--mono); font-size: var(--t-md); font-weight: 500; color: var(--texto); }
.tm-range { position: relative; flex: 1; height: 2px; border-radius: 2px; min-width: 40px; background: var(--linea-2); }
.tm-range i {
  position: absolute; top: -5px; left: var(--m, 50%);
  width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px;
  background: var(--azul); box-shadow: 0 0 8px var(--azul-claro);
}
.tm-lim { font-size: 11px; color: var(--gris-3); white-space: nowrap; }
.lab-block {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 8px;
  background: #2f7bff; color: #fff; font-size: .9rem; font-weight: 500;
  box-shadow: 0 2px 0 #1f5fd0;
}
.lab-block b {
  min-width: 4.2ch; padding: 1px 8px; border-radius: 999px; text-align: center;
  background: #fff; color: #0d1a36; font-size: .85rem;
}
.tm-code code { font-family: var(--mono); font-size: .92rem; color: var(--azul-profundo); }

.lab-stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--linea-2); border-radius: var(--r-lg);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(29, 106, 255, .12), transparent 60%),
    linear-gradient(180deg, #f7faff, #edf3ff);
  box-shadow: 0 40px 90px -60px rgba(29, 106, 255, .55);
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.lab-dots {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 85%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 85%);
}
.lab-stage .corners { inset: 14px; }
.lab-svg { position: relative; z-index: 1; width: 100%; height: auto; }
.lab-svg .bp-line { fill: none; stroke: rgba(29, 106, 255, .55); stroke-width: 1.3; }
.lab-svg .bp-thin { stroke: rgba(29, 106, 255, .3); }
.lab-svg .bp-fill { fill: rgba(29, 106, 255, .14); stroke: var(--azul); stroke-width: 1.3; }
.lab-svg .bp-text { fill: var(--gris-2); stroke: none; font-family: var(--mono); font-size: 12px; }
.lab-svg .bp-line-c { fill: none; stroke: rgba(29, 106, 255, .55); stroke-width: 1.3; }
.lab-svg .bp-thin-c { fill: none; stroke: rgba(29, 106, 255, .25); }
.lab-svg .bp-line-r { fill: #f3f7ff; stroke: rgba(29, 106, 255, .55); stroke-width: 1.3; }
.lab-svg .bp-ball { fill: #fff; stroke: rgba(13, 58, 140, .55); stroke-width: 1.6; }
.lab-svg .bp-iris { fill: var(--azul); }
.lab-svg .bp-pupil { fill: var(--texto); }
.lab-svg .bp-shine { fill: #fff; }
.lab-svg .bp-dim line { stroke: rgba(29, 106, 255, .3); stroke-width: 1; }
.lab-svg .bp-dim .bp-dim-mark { stroke: var(--azul); stroke-width: 2; }
.lab-mode {
  position: absolute; left: 18px; top: 18px; z-index: 2;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lab-stage.is-following .lab-mode { border-color: rgba(29, 106, 255, .45); color: var(--azul-profundo); }
.lab-stage.is-following .lab-mode .led { background: var(--azul); box-shadow: 0 0 8px var(--azul-claro); }

@media (max-width: 1000px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "data"; grid-template-rows: auto; }
  .lab-stage { margin-top: 36px; }
  .telemetry { margin-top: 28px; }
}
@media (max-width: 520px) {
  .tm-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lab-mode { left: 12px; top: 12px; }
}

/* =====================================================================
   MOLCORP STUDIO
   ===================================================================== */
.studio { border-top: 1px solid var(--linea); }
.studio-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 88px); align-items: center;
}
.studio-text .lead { margin-top: 20px; }
.steps { margin: 34px 0 22px; border-top: 1px solid var(--linea); }
.steps li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px;
  padding: 16px 0; border-bottom: 1px solid var(--linea);
}
.steps li .mono { grid-row: span 2; padding-top: 3px; font-size: 12px; color: var(--azul); }
.steps li b { font-weight: 500; }
.steps li span:last-child { font-size: var(--t-sm); color: var(--gris-2); }
.studio-req { margin-bottom: 26px; }
.studio-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* maqueta del editor (colores reales de Studio en su tema claro) */
.studio-mock {
  position: relative; overflow: hidden;
  border: 1px solid var(--linea-2); border-radius: 16px;
  background: #fff;
  box-shadow: 0 50px 110px -50px rgba(29, 106, 255, .55), 0 0 0 1px rgba(16, 56, 140, .04);
  font-size: 13px;
}
.sm-bar {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: #0d1117; border-bottom: 1px solid #262d38;
}
.sm-bar img { width: 18px; height: 18px; }
.sm-name { font-weight: 600; color: #f2f5fa; }
.sm-file { padding: 3px 9px; border-radius: 6px; background: #1b2230; color: #94a1b5; font-size: 11px; }
.sm-upload { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: #2563ff; color: #fff; font-size: 12px; font-weight: 500; }
.sm-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 300px; }
.sm-blocks {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 26px 20px;
  background-color: #f3f5f8;
  background-image: radial-gradient(circle at 1px 1px, #d6dde8 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.sb {
  position: relative;
  padding: 8px 14px 8px 12px; border-radius: 6px;
  color: #fff; font-weight: 500; font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  transition: box-shadow .3s var(--ease);
}
.sb em { font-style: normal; padding: 1px 7px; margin-left: 2px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #10161f; font-size: 11.5px; }
.sb-hat { background: #1b2130; border-radius: 14px 14px 6px 6px; padding-top: 10px; margin-bottom: 2px; }
.sb-eye { background: #2f7bff; margin-left: 10px; }
.sb-wait { background: #f2891d; margin-left: 10px; }
.sb-anim { background: #8b5cf6; margin-left: 10px; }
.sb-led { background: #e0457b; margin-left: 10px; }
.sb.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 255, .85), 0 10px 24px -6px rgba(37, 99, 255, .5); }
.sm-code {
  margin: 0; padding: 26px 20px;
  background: #f7f9fc; border-left: 1px solid #d4dae3;
  font-size: 12px; line-height: 1.85; color: #6b7a8f;
  white-space: normal; overflow: hidden;
}
.sm-code span { display: block; white-space: pre; border-radius: 4px; padding: 0 4px; margin: 0 -4px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.sm-code span[data-i] { color: #111620; }
.sm-code span.is-on { background: #fff1c2; }
.sm-code i { font-style: normal; color: #6b7a8f; }

@media (max-width: 1000px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sm-body { grid-template-columns: minmax(0, 1fr); }
  .sm-code { border-left: 0; border-top: 1px solid #d4dae3; }
  .sm-file { display: none; }
}

/* =====================================================================
   PRIMER KIT (antes del pie): un cuarto de luz azul con rayos, como el video
   ===================================================================== */
.kitsec {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: clamp(100px, 11vw, 170px);
  border-top: 1px solid var(--linea);
  background:
    radial-gradient(55% 70% at 30% 55%, rgba(29, 106, 255, .20) 0%, rgba(29, 106, 255, .08) 45%, transparent 75%),
    linear-gradient(180deg, var(--fondo) 0%, var(--sup-2) 50%, var(--fondo) 100%);
}
.kitsec-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kitsec-bg::before {           /* rayos de luz que salen del kit */
  content: ''; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at 30% 55%, rgba(29, 106, 255, .07) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(45% 65% at 30% 55%, #000 0%, transparent 85%);
  mask-image: radial-gradient(45% 65% at 30% 55%, #000 0%, transparent 85%);
}
.kitsec-bg .dots {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(60% 70% at 30% 55%, transparent 30%, #000 60%, transparent 95%);
  mask-image: radial-gradient(60% 70% at 30% 55%, transparent 30%, #000 60%, transparent 95%);
}
.kitsec-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.kitsec-stage { width: 100%; aspect-ratio: 7 / 5; }
.kitsec-text { display: grid; justify-items: start; gap: 22px; }
.kitsec-title { font-size: clamp(2.2rem, 1.3rem + 2.7vw, 3.8rem); }
.kitsec-text .lead { max-width: 34ch; }
.kitsec-facts { display: flex; flex-wrap: wrap; gap: 0; border-block: 1px solid var(--linea-2); width: 100%; }
.kitsec-facts li {
  flex: 1 1 auto; padding: 14px 18px 14px 0; margin-right: 18px;
  border-right: 1px solid var(--linea-2);
  font-size: var(--t-sm); color: var(--gris-1); white-space: nowrap;
}
.kitsec-facts li:last-child { border-right: 0; margin-right: 0; }
.kitsec-buy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.kitsec-price { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.02em; }
.kitsec-price-note { font-size: var(--t-sm); color: var(--gris-2); }
.kitsec-date { font-size: var(--t-md); color: var(--gris-1); }
.kitsec-date b { font-weight: 500; color: var(--texto); }
.kitsec-date [data-countdown] { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--azul); }
.kitsec-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.kit3d-label .card b { display: block; }
@media (max-width: 1000px) {
  .kitsec-grid { grid-template-columns: minmax(0, 1fr); }
  .kitsec-stage { max-width: 760px; justify-self: center; }
  .kitsec-bg::before { background: repeating-conic-gradient(from 0deg at 50% 28%, rgba(29, 106, 255, .07) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask-image: radial-gradient(70% 40% at 50% 28%, #000 0%, transparent 85%); mask-image: radial-gradient(70% 40% at 50% 28%, #000 0%, transparent 85%); }
}
@media (max-width: 560px) {
  .kitsec-stage { aspect-ratio: 4 / 3; }
  .kitsec-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kitsec-facts li { padding: 12px 8px 12px 0; margin-right: 8px; white-space: normal; font-size: var(--t-xs); line-height: 1.35; }
  .kitsec-actions, .kitsec-buy { justify-self: stretch; }
  .kitsec-actions .btn { flex: 1 1 100%; }
}