/* Mobile styles for AI Hero Robot (migrated from inline) */
@keyframes aiIconFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-14px) scale(1.08); }
  100% { transform: translateY(0); }
}

/* Animación para los íconos superiores e inferiores del robot */
.ai-bot-icons-animated .tech-icon,
.ai-bot-icons-bottom .tech-icon {
  animation: aiIconFloat 2.8s ease-in-out infinite;
  will-change: transform;
}
.ai-bot-icons-animated .icon0 { animation-delay: 0s; }
.ai-bot-icons-animated .icon1 { animation-delay: 0.5s; }
.ai-bot-icons-animated .icon3 { animation-delay: 1s; }
.ai-bot-icons-bottom .iconb0 { animation-delay: 0.2s; }
.ai-bot-icons-bottom .iconb1 { animation-delay: 0.7s; }
.ai-bot-icons-bottom .iconb2 { animation-delay: 1.2s; }
/* Home page only styles (index.html) */

/* Footer banner (index) */
.page-index .modern-footer {
  position: relative;
  overflow: hidden;
  --compass-duration: 12s;
  --compass-size: 64px;
  --mouth-h: 4px;
  --human-mouth-h: 6px;
  --human-eye-scale: 1.25;
  background:
    radial-gradient(80% 120% at 10% 50%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(80% 120% at 90% 50%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(90deg,
      #2341a6 0%,
      #3a6bff 22%,
      #2aa7ff 44%,
      #4fe6ff 62%,
      #3a6bff 78%,
      #2341a6 100%
    );
  background-size: auto, auto, 420% 420%;
  background-position: 0 0, 0 0, 0% 50%;
  animation: footerBannerFlow 4.2s linear infinite;

  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);

  /* Make the banner thicker like the original */
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

@property --human-eye-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* Hero HUD sizing vars (shared by video, overlay, frame, and bg canvas) */
.page-index {
  --hero-inset-y: clamp(36px, 10vh, 120px);
  --hero-inset-x: clamp(18px, 6vw, 96px);
  --hero-radius: 16px;
}

/* Make the hero area tall enough for vh-based insets */
.page-index #header-carousel,
.page-index #header-carousel .carousel-item,
.page-index .index-video-wrap {
  height: 100vh;
  min-height: 620px;
}

.page-index .index-video-wrap {
  position: relative;
  /* Outside the HUD frame should reveal the particle background */
  background: transparent;
}

/* Dark overlay ONLY inside the HUD frame (previous behavior) */
.page-index #header-carousel .carousel-caption {
  background: transparent !important;
  /* Keep the pseudo-element anchored correctly */
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* Clip the video to the same HUD frame size */
.page-index .index-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  -webkit-clip-path: inset(var(--hero-inset-y) var(--hero-inset-x) round var(--hero-radius));
  clip-path: inset(var(--hero-inset-y) var(--hero-inset-x) round var(--hero-radius));
}

/* Keep the dark overlay and rounded corners aligned with the HUD frame */
.page-index .index-video-overlay {
  inset: var(--hero-inset-y) var(--hero-inset-x) !important;
  border-radius: var(--hero-radius) !important;
  pointer-events: none;
  overflow: hidden;
  -webkit-clip-path: inset(0 round var(--hero-radius));
  clip-path: inset(0 round var(--hero-radius));
}

/* Ensure carousel navigation stays clickable on top of the hero layers */
.page-index #header-carousel .carousel-control-prev,
.page-index #header-carousel .carousel-control-next {
  z-index: 6;
}

@media (max-width: 768px) {
  .page-index #header-carousel,
  .page-index #header-carousel .carousel-item,
  .page-index .index-video-wrap {
    min-height: 520px;
  }
}

.page-index .index-video-frame {
  position: absolute;
  inset: var(--hero-inset-y) var(--hero-inset-x);
  border-radius: var(--hero-radius);
  pointer-events: none;
  z-index: 2;
}

.page-index .index-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* Border + corners + grid */
  background:
    /* big bracket corners */
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) left top/140px 4px no-repeat,
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) left top/4px 90px no-repeat,
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) right top/140px 4px no-repeat,
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) right top/4px 90px no-repeat,
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) left bottom/140px 4px no-repeat,
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) left bottom/4px 90px no-repeat,
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) right bottom/140px 4px no-repeat,
    linear-gradient(rgba(0, 191, 255, 0.92), rgba(0, 191, 255, 0.92)) right bottom/4px 90px no-repeat,

    /* diagonal corner accents (gives the original angled look) */
    linear-gradient(135deg, rgba(0, 191, 255, 0) 45%, rgba(0, 191, 255, 0.78) 50%, rgba(0, 191, 255, 0) 55%) left top/64px 64px no-repeat,
    linear-gradient(225deg, rgba(0, 191, 255, 0) 45%, rgba(0, 191, 255, 0.78) 50%, rgba(0, 191, 255, 0) 55%) right top/64px 64px no-repeat,
    linear-gradient(45deg, rgba(0, 191, 255, 0) 45%, rgba(0, 191, 255, 0.78) 50%, rgba(0, 191, 255, 0) 55%) left bottom/64px 64px no-repeat,
    linear-gradient(315deg, rgba(0, 191, 255, 0) 45%, rgba(0, 191, 255, 0.78) 50%, rgba(0, 191, 255, 0) 55%) right bottom/64px 64px no-repeat,

    /* grid */
    repeating-linear-gradient(
      0deg,
      rgba(0, 191, 255, 0.00) 0px,
      rgba(0, 191, 255, 0.00) 22px,
      rgba(0, 191, 255, 0.14) 22px,
      rgba(0, 191, 255, 0.14) 23px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 191, 255, 0.00) 0px,
      rgba(0, 191, 255, 0.00) 22px,
      rgba(0, 191, 255, 0.10) 22px,
      rgba(0, 191, 255, 0.10) 23px
    );

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(0, 191, 255, 0.25),
    0 0 46px rgba(0, 191, 255, 0.10);
  opacity: 0.78;
}

.page-index .index-video-frame::after {
  content: "";
  position: absolute;
  inset: -25% -30%;
  border-radius: 22px;
  background: linear-gradient(
    110deg,
    rgba(0, 191, 255, 0) 0%,
    rgba(0, 191, 255, 0.10) 38%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(0, 191, 255, 0.10) 62%,
    rgba(0, 191, 255, 0) 100%
  );
  transform: translateX(-40%) skewX(-18deg);
  animation: heroHudSweep 4.8s linear infinite;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes heroHudSweep {
  0% { transform: translateX(-55%) skewX(-18deg); }
  100% { transform: translateX(55%) skewX(-18deg); }
}

/* Extra layer via existing markup: moving yellow scan line (like original) */
.page-index .modern-footer .row {
  position: relative;
  min-height: 110px;
  align-items: center;
  display: flex;
  padding-bottom: 36px;
}

.page-index .modern-footer .row::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 0;
  width: var(--compass-size);
  height: var(--compass-size);
  margin-top: calc(var(--compass-size) / -2);
  border-radius: 999px;
  border: 1px solid rgba(255, 230, 122, 0.65);
  box-shadow:
    inset 0 0 10px rgba(255, 230, 122, 0.35),
    0 0 12px rgba(255, 230, 122, 0.5);
  background:
    /* antenna */
    linear-gradient(180deg, rgba(255, 230, 122, 0.98) 0 0) 50% 6%/3px 18px no-repeat,
    radial-gradient(circle, rgba(255, 230, 122, 0.98) 0 5px, rgba(255, 230, 122, 0) 6px) 50% 0%/12px 12px no-repeat,
    /* eyes */
    radial-gradient(circle, #0b1b26 0 4px, rgba(0, 0, 0, 0) 5px) 36% 54%/10px 10px no-repeat,
    radial-gradient(circle, #0b1b26 0 4px, rgba(0, 0, 0, 0) 5px) 64% 54%/10px 10px no-repeat,
    /* mouth */
    linear-gradient(90deg, #0b1b26 0 0) 50% 70%/18px var(--mouth-h) no-repeat,
    /* body */
    conic-gradient(
      from 0deg,
      rgba(255, 230, 122, 0.0) 0deg,
      rgba(255, 230, 122, 0.9) 35deg,
      rgba(255, 230, 122, 0.0) 70deg,
      rgba(255, 230, 122, 0.0) 180deg,
      rgba(255, 230, 122, 0.9) 215deg,
      rgba(255, 230, 122, 0.0) 250deg,
      rgba(255, 230, 122, 0.0) 360deg
    );
  transform: translate3d(0, -50%, 0);
  animation:
    compassTraverseLeft var(--compass-duration) linear infinite,
    compassSpin var(--compass-duration) linear infinite,
    compassHue 7.5s steps(5, end) infinite;
  pointer-events: none;
  z-index: 1;
}
.page-index .modern-footer .row::before {
  content: "";
  position: absolute;
  top: 114%;
  left: 0;
  width: calc(var(--compass-size) * 1.15);
  height: calc(var(--compass-size) * 1.15);
  margin-top: calc(var(--compass-size) / -2.1);
  border-radius: 22px;
  background:
    /* hair */
    radial-gradient(ellipse, rgba(0, 0, 0, 0.9) 0 10px, rgba(0, 0, 0, 0) 11px) 50% 6%/30px 18px no-repeat,
    /* head */
    radial-gradient(circle, rgba(255, 230, 122, 0.98) 0 12px, rgba(0, 0, 0, 0) 13px) 50% 18%/30px 30px no-repeat,
    /* visor */
    linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0 0) 50% 20%/24px 8px no-repeat,
    linear-gradient(90deg, rgba(154, 216, 255, 0.85) 0 0) 50% 20%/24px 3px no-repeat,
    /* eyes */
    radial-gradient(circle, rgba(0, 0, 0, 0.98) 0 calc(3.2px * var(--human-eye-scale)), rgba(0, 0, 0, 0) calc(4.8px * var(--human-eye-scale))) 41% 28%/12px 12px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, 0.98) 0 calc(3.2px * var(--human-eye-scale)), rgba(0, 0, 0, 0) calc(4.8px * var(--human-eye-scale))) 59% 28%/12px 12px no-repeat,
    /* mouth */
    linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0 0) 50% 44%/20px var(--human-mouth-h) no-repeat,
    /* neck */
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0 0) 50% 30%/6px 6px no-repeat,
    /* torso */
    linear-gradient(180deg, rgba(255, 230, 122, 0.9), rgba(255, 230, 122, 0.25)) 50% 58%/28px 30px no-repeat,
    /* arms */
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0 0) 36% 58%/6px 22px no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0 0) 64% 58%/6px 22px no-repeat,
    /* legs */
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0 0) 45% 88%/7px 14px no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0 0) 55% 88%/7px 14px no-repeat;
  box-shadow:
    0 0 14px rgba(154, 216, 255, 0.4),
    0 0 26px rgba(255, 230, 122, 0.35);
  transform: translate3d(0, -50%, 0);
  animation:
    cyberTraverseLeft var(--compass-duration) linear infinite,
    compassHue 7.5s steps(5, end) infinite,
    humanBlink 4.6s steps(1, end) infinite;
  pointer-events: none;
  z-index: 1;
}
.page-index .modern-footer.ai-beep {
  --mouth-h: 10px;
  --human-mouth-h: 10px;
}
.page-index .modern-footer .footer-beep {
  position: absolute;
  top: 46%;
  left: 0;
  transform: translate3d(0, -50%, 0);
  animation: compassTraverseLeft var(--compass-duration) linear infinite;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.08em;
  color: rgba(255, 230, 122, 0.95);
  text-shadow: 0 0 6px rgba(255, 230, 122, 0.6), 0 0 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  margin-left: 18px;
}
.page-index .modern-footer .footer-cyber {
  position: absolute;
  top: 114%;
  left: 0;
  transform: translate3d(0, calc(-50% - 14px), 0);
  animation: cyberTraverseLeft var(--compass-duration) linear infinite;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.08em;
  color: rgba(154, 216, 255, 0.95);
  text-shadow: 0 0 6px rgba(154, 216, 255, 0.6), 0 0 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  margin-left: calc(var(--compass-size) + 8px);
}
.page-index .modern-footer.ai-beep .footer-cyber {
  opacity: 1;
}
.page-index .modern-footer.ai-beep .footer-beep {
  opacity: 1;
}

.page-index .modern-footer .col-12 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding-top: 24px;
}

.page-index .modern-footer::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: repeating-linear-gradient(-45deg,
    rgba(255, 255, 255, 0.14) 0px,
    rgba(255, 255, 255, 0.14) 2px,
    rgba(255, 255, 255, 0.00) 2px,
    rgba(255, 255, 255, 0.00) 12px
  );
  opacity: 0.42;
  transform: translate3d(-24px, 0, 0);
  animation: footerBannerStripesMove 1.25s linear infinite;
  will-change: transform;
  pointer-events: none;
}

.page-index .modern-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.18) 48%, transparent 100%);
  transform: translateX(-120%);
  animation: footerBannerSweep 4.8s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.55;
}

.page-index .modern-footer .modern-text {
  margin: 0;
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.88rem, 1.7vw, 1.05rem);
  line-height: 1.15;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 4px 14px rgba(0, 0, 0, 0.22);
}

.page-index .modern-footer .animated-gradient-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Solid text for readability */
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  animation: footerBannerTextDrift 6s ease-in-out infinite;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.35);
}

.page-index .modern-footer .star-icon,
.page-index .modern-footer .robot-icon {
  display: inline-block;
  transform: translateY(-1px);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
  animation: footerBannerIconPop 2.2s ease-in-out infinite;

  /* Ensure icons remain solid even when parent uses background-clip:text */
  background: none !important;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.page-index .modern-footer .robot-icon {
  animation-delay: 0.25s;
}

@keyframes footerBannerFlow {
  0% { background-position: 0 0, 0 0, 0% 50%; }
  50% { background-position: 0 0, 0 0, 100% 50%; }
  100% { background-position: 0 0, 0 0, 0% 50%; }
}

@keyframes footerBannerStripesMove {
  0% { transform: translate3d(-24px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes footerBannerTextFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes footerBannerTextDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(10px, 0, 0); }
}

@keyframes footerBannerYellowLine {
  0% { transform: translate3d(-40vw, 0, 0); }
  100% { transform: translate3d(140vw, 0, 0); }
}
@keyframes compassTraverseLeft {
  0% { left: 0; }
  50% { left: calc(100% - var(--compass-size)); }
  100% { left: 0; }
}
@keyframes cyberTraverseLeft {
  0% { left: 4%; }
  50% { left: calc(96% - var(--compass-size)); }
  100% { left: 4%; }
}
@keyframes humanBlink {
  0%, 86%, 100% { --human-eye-scale: 1; }
  88% { --human-eye-scale: 0.15; }
  90% { --human-eye-scale: 1; }
  92% { --human-eye-scale: 0.2; }
  94% { --human-eye-scale: 1; }
}
@keyframes compassSpin {
  0% { transform: translate3d(0, -50%, 0) rotate(0deg); }
  100% { transform: translate3d(0, -50%, 0) rotate(360deg); }
}
@keyframes compassHue {
  0% { filter: hue-rotate(0deg); }
  20% { filter: hue-rotate(45deg); }
  40% { filter: hue-rotate(110deg); }
  60% { filter: hue-rotate(180deg); }
  80% { filter: hue-rotate(250deg); }
  100% { filter: hue-rotate(320deg); }
}

@keyframes footerBannerSweep {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@keyframes footerBannerIconPop {
  0%, 100% { transform: translateY(-1px) scale(1); }
  50% { transform: translateY(-3px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .index-video-frame::after {
    animation: none;
    opacity: 0;
  }
  .page-index .modern-footer {
    animation: none;
  }
  .page-index .modern-footer::before {
    animation: none;
  }
  .page-index .modern-footer::after {
    animation: none;
  }
  .page-index .modern-footer .row::before {
    animation: none;
    opacity: 0;
  }
  .page-index .modern-footer .animated-gradient-text {
    animation: none;
    -webkit-text-fill-color: #fff;
  }
  .page-index .modern-footer .star-icon,
  .page-index .modern-footer .robot-icon {
    animation: none;
  }
}

@keyframes glowAndRoll {
  0%, 100% {
    text-shadow: 0 0 3px rgba(0, 191, 255, 0.18), 0 0 8px rgba(0, 191, 255, 0.10);
    transform: rotate(0deg);
  }
  50% {
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.26), 0 0 12px rgba(0, 191, 255, 0.14);
    transform: rotate(360deg);
  }
}

.glow-roll {
  display: inline-block;
  color: rgba(0, 191, 255, 0.85) !important;
  animation: glowAndRoll 3s infinite;
}

@keyframes indexBrandGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(0, 191, 255, 0.35),
      0 0 16px rgba(0, 191, 255, 0.18),
      0 0 28px rgba(0, 191, 255, 0.10);
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 10px rgba(0, 191, 255, 0.55),
      0 0 26px rgba(0, 191, 255, 0.28),
      0 0 42px rgba(0, 191, 255, 0.16);
    filter: brightness(1.08);
  }
}

.page-index .index-brand-glow {
  animation: indexBrandGlowPulse 2.8s ease-in-out infinite;
}

/* Index-only background animation (replaces tsParticles) */
#index-hex-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #000;
}

#index-hex-bg canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Keep mobile lightweight (tsParticles was disabled on mobile too) */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  #index-hex-bg {
    display: none;
  }
}

/* Desktop/tablet: let the animated background be the actual page background */
@media (min-width: 769px) {
  html,
  body {
    background: transparent !important;
  }
}

@media (max-width: 768px) {
  body {
    background-color: #000;
  }
}