/* TARJETA ESPECIAL HACKATON */
.hackaton-card-link .hackaton-card {
  overflow: hidden;
  isolation: isolate;
  color: #b7ffcf;
  background: #020b06;
  border: 1px solid #21e66b;
  box-shadow: 0 0 0 1px rgba(33, 230, 107, 0.18), 0 0 22px rgba(33, 230, 107, 0.25);
  animation: hackatonCardPulse 4s ease-in-out infinite;
}

.hackaton-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-image: linear-gradient(rgba(33, 230, 107, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 230, 107, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(33, 230, 107, 0.22), transparent 36%);
  background-size: 18px 18px, 18px 18px, 100% 100%;
  opacity: 0.8;
  pointer-events: none;
  animation: hackatonCircuitShift 6s linear infinite;
}

.hackaton-card-link:hover .hackaton-card {
  background: #031409;
  border-color: #63ff91;
  box-shadow: 0 0 0 1px rgba(99, 255, 145, 0.3), 0 0 34px rgba(33, 230, 107, 0.48);
}

.hackaton-glitch-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  color: #020b06;
  background: #21e66b;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 0 #b7ffcf;
  clip-path: polygon(0 8%, 100% 0, 94% 88%, 8% 100%);
  animation: hackatonPulse 2.4s ease-in-out infinite;
}

.hackaton-glitch-mark::before,
.hackaton-glitch-mark::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "H";
  opacity: 0.7;
  pointer-events: none;
}

.hackaton-glitch-mark::before {
  color: #b7ffcf;
  transform: translate(-3px, 2px);
  clip-path: inset(12% 0 56% 0);
  animation: hackatonGlitch 1.8s steps(2, end) infinite;
}

.hackaton-glitch-mark::after {
  color: #63ff91;
  transform: translate(3px, -2px);
  clip-path: inset(62% 0 8% 0);
  animation: hackatonGlitch 1.4s steps(2, end) infinite reverse;
}

.hackaton-card h3,
.hackaton-card-link:hover h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  padding: 7px 12px;
  color: #f2fff6;
  background: rgba(0, 12, 5, 0.82);
  border: 1px solid rgba(99, 255, 145, 0.65);
  border-radius: 4px;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-shadow: 0 0 5px #21e66b, 0 0 12px rgba(99, 255, 145, 0.8);
  animation: hackatonTitleGlitch 2.6s steps(2, end) infinite;
}

.hackaton-card p,
.hackaton-card-link:hover p {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  padding: 3px 6px;
  background: rgba(0, 12, 5, 0.62);
  color: #63ff91;
}

.hackaton-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #63ff91;
  box-shadow: 0 0 12px #63ff91;
  opacity: 0.75;
  pointer-events: none;
  animation: hackatonScan 2.8s linear infinite;
}

.hackaton-data-line {
  position: absolute;
  z-index: 0;
  height: 1px;
  background: #21e66b;
  box-shadow: 0 0 8px #21e66b;
  opacity: 0;
  pointer-events: none;
  animation: hackatonDataStream 3.2s linear infinite;
}

.hackaton-data-line-one {
  top: 32%;
  left: -30%;
  width: 72%;
}

.hackaton-data-line-two {
  top: 68%;
  left: -45%;
  width: 90%;
  background: #b7ffcf;
  box-shadow: 0 0 8px #b7ffcf;
  animation-delay: 1.4s;
}

.hackaton-particle {
  position: absolute;
  z-index: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #63ff91;
  box-shadow: 0 0 10px #63ff91;
  pointer-events: none;
  animation: hackatonParticleFloat 3s ease-in-out infinite;
}

.hackaton-particle-one {
  top: 18%;
  right: 14%;
}

.hackaton-particle-two {
  right: 25%;
  bottom: 20%;
  background: #b7ffcf;
  box-shadow: 0 0 10px #b7ffcf;
  animation-delay: 1.1s;
}

@keyframes hackatonGlitch {
  0%, 82%, 100% { opacity: 0; }
  84% { opacity: 0.8; }
  87% { opacity: 0.15; }
  90% { opacity: 0.7; }
}

@keyframes hackatonScan {
  from { transform: translateY(0); }
  to { transform: translateY(150px); }
}

@keyframes hackatonPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(33, 230, 107, 0.55)); }
  50% { filter: drop-shadow(0 0 12px rgba(99, 255, 145, 0.9)); }
}

@keyframes hackatonCardPulse {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-2px); }
  48% { transform: translate(2px, -2px); }
  51% { transform: translate(-2px, 0); }
  54% { transform: translateY(-2px); }
}

@keyframes hackatonTitleGlitch {
  0%, 78%, 100% { transform: translate(0); }
  80% { transform: translate(-2px, 1px); }
  82% { transform: translate(2px, -1px); }
  84% { transform: translate(0); }
}

@keyframes hackatonDataStream {
  0% { left: -45%; opacity: 0; }
  15% { opacity: 0.85; }
  70% { opacity: 0.5; }
  100% { left: 110%; opacity: 0; }
}

@keyframes hackatonParticleFloat {
  0%, 100% { transform: translate(0, 0) scale(0.7); opacity: 0.35; }
  50% { transform: translate(-10px, 14px) scale(1.2); opacity: 1; }
}

@keyframes hackatonCircuitShift {
  0% { background-position: 0 0, 0 0, 50% 42%; }
  50% { background-position: 9px 9px, -9px 9px, 50% 42%; }
  100% { background-position: 18px 18px, -18px 18px, 50% 42%; }
}

.hackaton-matrix-rain {
  position: absolute;
  z-index: 0;
  top: -20px;
  color: #21e66b;
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.55;
  text-shadow: 0 0 7px #21e66b;
  pointer-events: none;
  animation: hackatonMatrixRain 3.5s linear infinite;
}

.hackaton-matrix-rain-one {
  left: 12%;
}

.hackaton-matrix-rain-two {
  right: 12%;
  color: #b7ffcf;
  text-shadow: 0 0 7px #b7ffcf;
  animation-delay: 1.8s;
}

@keyframes hackatonMatrixRain {
  0% { transform: translateY(-30px); opacity: 0; }
  18% { opacity: 0.7; }
  80% { opacity: 0.35; }
  100% { transform: translateY(155px); opacity: 0; }
}