/* Prototipo "punto-lente": en la mitad derecha del hero hay un mosaico de webs reales, casi invisible.
   Cuando el punto pasa por encima se abre como una lente y las muestra a color, con un poco de aumento. */
.lente {
  position: absolute;
  inset: 0;
  z-index: 2;            /* arriba de la onda (canvas), abajo del titular (z 7) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.lente.is-on { opacity: 1; }

/* el mosaico: dos columnas desfasadas, giradas, que se salen del borde derecho */
.lente__mosaico {
  position: absolute;
  top: -8vh;
  right: -9vw;
  width: 52vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2vw;
  transform: translate(var(--px, 0px), var(--py, 0px)) rotate(-7deg);
  transform-origin: 50% 50%;
}
.lente__col { display: flex; flex-direction: column; gap: 2.2vw; }
.lente__col:nth-child(2) { margin-top: 16vh; }
.lente__t {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a1a;
}
.lente__t img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* capa fantasma: se intuye que hay algo, sin competir con el titular */
.lente__fantasma { position: absolute; inset: 0; }
.lente__fantasma .lente__t {
  pointer-events: auto;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.lente__fantasma .lente__t img { opacity: 0.12; filter: grayscale(1) contrast(1.1); }

/* capa a color: solo se ve adentro del círculo; el aumento sale desde el punto */
.lente__vista {
  position: absolute;
  inset: 0;
  clip-path: circle(var(--r, 0px) at var(--x, 80%) var(--y, 45%));
}
.lente__zoom {
  position: absolute;
  inset: 0;
  transform-origin: var(--x, 80%) var(--y, 45%);
  transform: scale(var(--z, 1));
}
.lente__vista .lente__t { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

/* el aro lima y el punto en el centro (el punto WebGL queda tapado por la lente) */
.lente__aro {
  position: absolute;
  left: var(--x, 80%);
  top: var(--y, 45%);
  width: calc(var(--r, 0px) * 2);
  height: calc(var(--r, 0px) * 2);
  margin: calc(var(--r, 0px) * -1) 0 0 calc(var(--r, 0px) * -1);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--lime), 0 0 60px rgba(170, 238, 33, 0.18);
  opacity: var(--ao, 0);
}
.lente__aro::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--d) * 0.42);
  height: calc(var(--d) * 0.42);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.35);
}

/* etiqueta del proyecto que está bajo la lente */
.lente__tag {
  position: absolute;
  left: var(--x, 80%);
  top: var(--y, 45%);
  transform: translate(calc(var(--r, 0px) * 0.62), calc(var(--r, 0px) * 0.78));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font: 600 13px/1 Poppins, system-ui, sans-serif;
  color: var(--paper, #F7F7F5);
  white-space: nowrap;
  opacity: var(--ao, 0);
}
.lente__tag.is-izq { transform: translate(calc(-100% - var(--r, 0px) * 0.62), calc(var(--r, 0px) * 0.78)); }
.lente__tag b { color: var(--lime); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; }
.lente__tag small { font: 400 12px/1 Inter, system-ui, sans-serif; color: rgba(255, 255, 255, 0.6); }
.lente__tag i { font-style: normal; color: var(--lime); }

/* celular: el mosaico vive arriba, donde deambula el punto; el titular queda limpio abajo */
@media (max-width: 759px) {
  /* el mosaico se apaga antes de llegar al titular */
  .lente__fantasma, .lente__vista { -webkit-mask-image: linear-gradient(#000 0 30%, transparent 46%); mask-image: linear-gradient(#000 0 30%, transparent 46%); }
  .lente__fantasma .lente__t img { opacity: 0.2; }
  .lente__mosaico { top: 64px; right: -30vw; width: 118vw; gap: 3vw; }
  .lente__col { gap: 3vw; }
  .lente__col:nth-child(2) { margin-top: 9vh; }
  .lente__tag { font-size: 12px; padding: 8px 12px 8px 9px; transform: translate(-50%, calc(var(--r, 0px) + 10px)); }
  .lente__tag small { display: none; }
}