/* Demostración del hero · fase «expediente»: anillos sobre los nodos, clic en «Convertir en expediente»
   y tarjeta «Expediente creado» (entra y sale girando). Posiciones en % de la captura
   (ver views/components/showcase.php). */
.camera--case { animation-name: cameraCase; }

.nring { position: absolute; width: 5.4%; aspect-ratio: 1; margin: -2.7% 0 0 -2.7%; opacity: 0; animation: nringShow var(--loop) infinite; }
.nring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2557d6; animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(0.7); opacity: 0.95; } 100% { transform: scale(2.1); opacity: 0; } }

.glowbtn {
  position: absolute;
  border-radius: 10px;
  border: 2px solid #2557d6;
  box-shadow: 0 0 18px rgba(37, 87, 214, 0.65);
  opacity: 0;
  animation: glowbtn var(--loop) infinite;
}
.cursor2 {
  position: absolute;
  left: 90%;
  top: 30%;
  width: 1.9%;
  aspect-ratio: 12 / 19;
  margin: -0.4% 0 0 -0.3%;
  opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
  animation: cursor2 var(--loop) infinite;
}
.cursor2 svg { display: block; width: 100%; height: 100%; }
.click2 {
  position: absolute;
  width: 3.4%;
  aspect-ratio: 1;
  margin: -1.7% 0 0 -1.7%;
  border-radius: 50%;
  background: rgba(37, 87, 214, 0.3);
  border: 2px solid #2557d6;
  opacity: 0;
  animation: click2 var(--loop) infinite;
}

/* Tarjeta «Expediente creado»: va más abajo del centro para no tapar el botón que se acaba de pulsar */
.casecard {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 62%;
  width: 48cqw;
  transform: translate(-50%, -50%);
  padding: 2.4cqw 2.6cqw;
  border-radius: 2cqw;
  color: #fff;
  background: rgba(9, 14, 30, 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, 0.45);
  opacity: 0;
  animation: casecard var(--loop) infinite;
}
.casecard-head { display: flex; align-items: center; gap: 1.8cqw; }
.casecard-icon { flex: none; display: grid; place-items: center; width: 6cqw; aspect-ratio: 1; border-radius: 1.5cqw; background: linear-gradient(135deg, #2557d6, #3ccfbd); }
.casecard-icon svg { width: 58%; height: 58%; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.casecard strong { display: block; font-size: 2.7cqw; line-height: 1.15; letter-spacing: -0.01em; }
.casecard small { display: block; color: #aebbd9; font-size: 1.45cqw; margin-top: 0.3cqw; }
.casecard-stats { display: flex; gap: 1cqw; list-style: none; padding: 0; margin: 1.8cqw 0 1.6cqw; }
.casecard-stats li {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.7cqw 1.6cqw;
  font-size: 1.5cqw;
  color: #cfe0ff;
}
.casecard-stats b { color: #fff; font-size: 1.15em; }
.casecard-foot { display: flex; align-items: center; gap: 0.9cqw; margin: 0; font-size: 1.55cqw; font-weight: 700; color: #e4ecff; }
.casecard-foot i { width: 1.3cqw; aspect-ratio: 1; border-radius: 50%; display: inline-block; }
.casecard-foot .gpt { background: #4fd1a5; }
.casecard-foot .claude { background: #ff9a76; }