/* ==================================================================
   HOTSPOTS — las tarjetas ancladas a la maquinaria
   ================================================================== */

/*
 * El parallax se aplica aqui y solo aqui. Moviendo la escena entera se notaba
 * que la fotografia se desplazaba en bloque, que es justo lo que delata el
 * truco; moviendo unicamente las tarjetas, estas flotan por encima del
 * laboratorio, que es el efecto que se buscaba.
 */
.hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}

/*
 * Cada hotspot se posiciona en coordenadas de viewport, calculadas por JS a
 * partir del punto de escena: asi sigue a la maquina cuando la imagen se
 * recorta, pero su tipografia no se escala con el zoom de la escena.
 */
.hot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0);
  pointer-events: auto;
  will-change: transform;
}

.hot__inner {
  position: absolute;
  top: calc(-13 * var(--u));
  left: calc(-9 * var(--u));
  display: flex;
  align-items: flex-start;
}
.hot--left .hot__inner { flex-direction: row-reverse; left: auto; right: calc(-9 * var(--u)); }

/* ---- badge -------------------------------------------------------- */
.hot__badge {
  position: relative;
  z-index: 2;
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  /* deja el centro del badge exactamente sobre el ancla de escena */
  margin-top: calc(4 * var(--u));
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 calc(2 * var(--u)) calc(9 * var(--u)) -2px rgba(20, 90, 230, 0.6);
  transition: transform 0.28s var(--ease-out), background 0.2s;
}
.hot__badge::before,
.hot__badge::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.3s var(--ease-out);
}
.hot__badge::before { width: calc(8 * var(--u)); height: calc(1.7 * var(--u)); }
.hot__badge::after  { width: calc(1.7 * var(--u)); height: calc(8 * var(--u)); }

/* anillo que late para llamar la atencion */
.hot__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--blue);
  animation: ring 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ring {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.hot:hover .hot__badge,
.hot.is-open .hot__badge { transform: scale(1.08); background: var(--blue-deep); }
.hot.is-open .hot__badge::after { transform: rotate(90deg); }
.hot.is-open .hot__ring { animation: none; opacity: 0; }

/* ---- tarjeta ------------------------------------------------------ */
.hot__card {
  margin-left: calc(5 * var(--u));
  padding: calc(7 * var(--u)) calc(13 * var(--u)) calc(9 * var(--u));
  min-width: calc(112 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--panel);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--panel-shadow);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.hot--left .hot__card {
  margin-left: 0;
  margin-right: calc(5 * var(--u));
  text-align: right;
}

.hot:hover .hot__card {
  transform: translateY(calc(-1.5 * var(--u)));
  box-shadow: 0 1px 2px rgba(16, 30, 66, 0.07),
              0 calc(14 * var(--u)) calc(34 * var(--u)) -10px rgba(16, 30, 66, 0.3);
}

.hot__title {
  font-size: var(--fs-hud);
  font-weight: 600;
  letter-spacing: 0.075em;
  color: var(--ink-strong);
  white-space: nowrap;
  margin-bottom: calc(4 * var(--u));
}

.hot__row {
  font-size: var(--fs-hud-sm);
  line-height: 1.5;
  color: var(--ink-3);
  white-space: nowrap;
}
.hot__row b { font-weight: 500; color: var(--ink-2); }

/* ---- panel desplegable -------------------------------------------- */
.hot__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-out),
              opacity 0.3s var(--ease), margin-top 0.42s var(--ease-out);
  opacity: 0;
  margin-top: 0;
}
.hot.is-open .hot__detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: calc(9 * var(--u));
}
.hot__detail > div { overflow: hidden; min-height: 0; }

.hot__detail-in {
  width: calc(206 * var(--u));
  padding-top: calc(9 * var(--u));
  border-top: 1px solid var(--hair-soft);
}
.hot--left .hot__detail-in { margin-left: auto; }

.hot__metric {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
  margin-bottom: calc(7 * var(--u));
}
.hot--left .hot__metric { justify-content: flex-end; }
.hot__metric b {
  font-size: calc(19 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.hot__metric span {
  font-size: calc(7.8 * var(--u));
  letter-spacing: 0.08em;
  color: var(--ink-5);
}

.hot__body {
  font-size: calc(8.6 * var(--u));
  line-height: 1.65;
  color: var(--ink-3);
  margin-bottom: calc(9 * var(--u));
  text-wrap: pretty;
}

.hot__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(7 * var(--u));
}
.hot__stats div {
  border-left: 1px solid var(--hair-soft);
  padding-left: calc(7 * var(--u));
}
.hot--left .hot__stats div {
  border-left: 0;
  border-right: 1px solid var(--hair-soft);
  padding-left: 0;
  padding-right: calc(7 * var(--u));
}
.hot__stats dt {
  font-size: calc(6.8 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: calc(2 * var(--u));
}
.hot__stats dd {
  margin: 0;
  font-size: calc(9.4 * var(--u));
  font-weight: 500;
  color: var(--ink-2);
}

/* ---- linea guia del badge a la maquina ---------------------------- */
.hot__leader {
  position: absolute;
  left: calc(9 * var(--u));
  top: calc(18 * var(--u));
  width: 1px;
  height: calc(13 * var(--u));
  background: linear-gradient(to bottom, var(--blue), transparent);
  opacity: 0.45;
  pointer-events: none;
}

/* El compositor marca los que caen fuera de la escena visible o pisan la
   interfaz. Se ocultan con transicion para que al redimensionar no parpadeen. */
.hot.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}

/* Entre el layout de escritorio y el corte movil, estas dos tarjetas se
   acercan por el recorte de la escena. Conservamos el espacio entre ambas. */
@media (min-width: 761px) and (max-width: 900px) {
  .hot[data-id="control-center"] { margin-left: 80px; }
}

/* en pantallas estrechas estorban mas de lo que aportan */
@media (max-width: 760px) {
  .hotspots { display: none; }
}