/* =============================================
   ULTRA Buenos Aires 2026 — Sección Electrónica / Neon
   ============================================= */

/* Sección principal */
#homepage-ultra {
  position: relative;
  overflow: hidden;
}

/* Logo ULTRA con neon en la silueta de las letras */
.ultra-logo-neon {
  filter:
    drop-shadow(0 0 2px #00f0ff)
    drop-shadow(0 0 5px #00f0ff)
    drop-shadow(0 0 10px rgba(0, 240, 255, 0.6))
    drop-shadow(0 0 20px rgba(180, 0, 255, 0.4)) !important;
  mix-blend-mode: screen;
  animation: ultra-logo-glow 3s ease-in-out infinite alternate !important;
}

@keyframes ultra-logo-glow {
  0%   { filter: drop-shadow(0 0 2px #00f0ff) drop-shadow(0 0 5px #00f0ff) drop-shadow(0 0 10px rgba(0,240,255,0.6)) drop-shadow(0 0 20px rgba(180,0,255,0.4)); }
  100% { filter: drop-shadow(0 0 3px #b400ff) drop-shadow(0 0 8px #b400ff) drop-shadow(0 0 15px rgba(180,0,255,0.6)) drop-shadow(0 0 25px rgba(0,240,255,0.4)); }
}

/* Línea de luz animada en la parte superior */
.ultra-glow-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f0ff, #b400ff, #00f0ff, transparent) !important;
  animation: ultra-glow-sweep 4s ease-in-out infinite !important;
  z-index: 3;
}

@keyframes ultra-glow-sweep {
  0%, 100% { opacity: 0.4; transform: scaleX(0.5); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

/* Card clickeable completa */
a.ultra-card-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}

a.ultra-card-link:hover,
a.ultra-card-link:focus,
a.ultra-card-link:visited {
  text-decoration: none !important;
  color: inherit !important;
}

/* Tarjetas con overlay oscuro */
#homepage-ultra .ultra-card-overlay {
  background: rgba(10, 2, 33, 0.7) !important;
  border-radius: 10px;
  padding: 12px;
  margin: 12px;
  position: relative;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

/* Efecto neon en bordes de las tarjetas */
#homepage-ultra .ultra-neon-border {
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  box-shadow:
    0 0 5px rgba(0, 240, 255, 0.15),
    0 0 10px rgba(0, 240, 255, 0.08),
    inset 0 0 5px rgba(0, 240, 255, 0.05) !important;
}

#homepage-ultra .ultra-neon-border:hover {
  border-color: rgba(0, 240, 255, 0.8) !important;
  box-shadow:
    0 0 8px rgba(0, 240, 255, 0.4),
    0 0 20px rgba(0, 240, 255, 0.2),
    0 0 40px rgba(180, 0, 255, 0.15),
    inset 0 0 8px rgba(0, 240, 255, 0.1) !important;
  transform: translateY(-2px);
}

/* Pulso neon animado en hover */
#homepage-ultra .ultra-neon-border::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 11px;
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: linear-gradient(135deg, #00f0ff, #b400ff, #00f0ff) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

#homepage-ultra .ultra-neon-border:hover::before {
  opacity: 1;
  animation: ultra-neon-pulse 2s ease-in-out infinite;
}

@keyframes ultra-neon-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Partículas flotantes de fondo */
.ultra-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ultra-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #00f0ff;
  border-radius: 50%;
  opacity: 0;
  animation: ultra-float 8s ease-in-out infinite;
  box-shadow: 0 0 6px #00f0ff, 0 0 12px #00f0ff;
}

/* Partículas cyan */
.ultra-particle:nth-child(1)  { left: 5%;  top: 80%; animation-delay: 0s;    animation-duration: 7s; }
.ultra-particle:nth-child(3)  { left: 20%; top: 85%; animation-delay: 2s;    animation-duration: 6s; }
.ultra-particle:nth-child(5)  { left: 35%; top: 88%; animation-delay: 3s;    animation-duration: 8s; }
.ultra-particle:nth-child(7)  { left: 50%; top: 75%; animation-delay: 4s;    animation-duration: 11s; }
.ultra-particle:nth-child(9)  { left: 65%; top: 90%; animation-delay: 0.8s;  animation-duration: 7.5s; }
.ultra-particle:nth-child(11) { left: 78%; top: 82%; animation-delay: 2.2s;  animation-duration: 9.5s; }
.ultra-particle:nth-child(13) { left: 92%; top: 78%; animation-delay: 3.5s;  animation-duration: 6.5s; }
.ultra-particle:nth-child(15) { left: 8%;  top: 95%; animation-delay: 5s;    animation-duration: 10s; }
.ultra-particle:nth-child(17) { left: 45%; top: 92%; animation-delay: 1.2s;  animation-duration: 8.5s; }
.ultra-particle:nth-child(19) { left: 88%; top: 87%; animation-delay: 6s;    animation-duration: 12s; }

/* Partículas púrpura */
.ultra-particle:nth-child(2)  { left: 12%; top: 90%; animation-delay: 1s;    animation-duration: 9s;   background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(4)  { left: 28%; top: 95%; animation-delay: 0.5s;  animation-duration: 10s;  background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(6)  { left: 42%; top: 92%; animation-delay: 1.5s;  animation-duration: 7s;   background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(8)  { left: 58%; top: 82%; animation-delay: 2.5s;  animation-duration: 9s;   background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(10) { left: 72%; top: 96%; animation-delay: 3.8s;  animation-duration: 8s;   background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(12) { left: 83%; top: 88%; animation-delay: 0.3s;  animation-duration: 11s;  background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(14) { left: 95%; top: 93%; animation-delay: 4.5s;  animation-duration: 7.5s; background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(16) { left: 18%; top: 98%; animation-delay: 5.5s;  animation-duration: 9.5s; background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(18) { left: 52%; top: 86%; animation-delay: 6.5s;  animation-duration: 10.5s;background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }
.ultra-particle:nth-child(20) { left: 3%;  top: 70%; animation-delay: 7s;    animation-duration: 13s;  background: #b400ff; box-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff; }

/* Partículas más grandes cada 5 */
.ultra-particle:nth-child(5n) {
  width: 5px;
  height: 5px;
}

/* Partículas con diferente tamaño para variedad */
.ultra-particle:nth-child(3n+1) {
  width: 2px;
  height: 2px;
}

@keyframes ultra-float {
  0%   { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  10%  { opacity: 0.8; transform: scale(1) translateX(5px); }
  50%  { transform: translateY(-200px) translateX(-10px) scale(1.2); opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-450px) translateX(8px) scale(0); opacity: 0; }
}

/* Botones "Ver Todo" con gradiente neon */
.ultra-ver-todo,
.ultra-ver-todo-mobile {
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.ultra-ver-todo:hover,
.ultra-ver-todo-mobile:hover {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5), 0 0 30px rgba(180, 0, 255, 0.3) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* Header border override para la sección ultra */
#homepage-ultra .a-heading-border::after {
  background: linear-gradient(90deg, #00f0ff, #b400ff, #00f0ff) !important;
}

/* Separadores blancos entre cards */
#homepage-ultra .o-card {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Responsive */
@media (max-width: 62.499rem) {
  .ultra-logo-neon {
    height: 60px !important;
  }

  #homepage-ultra .ultra-card-overlay {
    margin: 8px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .ultra-logo-neon {
    height: 45px !important;
  }
}