.hero {
  background-image: linear-gradient(90deg, #f8fbfff8 0%, #f8fbffec 43%, #edf8ff9e 100%), url('./assets/fibra-tv-3d-v1.png');
  background-size: cover;
  background-position: center;
}

.hero-visual {
  overflow: hidden;
  border: 1px solid #9edcff99;
  border-radius: 32px;
  background: linear-gradient(135deg, #eff8ff14, #0c327624);
  box-shadow: 0 24px 50px #133f7126;
}

.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #eff8ff18, transparent 55%);
}

.hero-visual::after { z-index: 0; }
.hero-visual .signal { z-index: 0; }
.hero-visual .device-card { z-index: 1; }
.hero-visual .floating-card { z-index: 2; }

.hero-visual .device-card,
.hero-visual .floating-card {
  will-change: transform;
  animation: intermex-float 5s ease-in-out infinite;
}

.hero-visual .card-wifi { animation-delay: -1.5s; }
.hero-visual .card-devices { animation-delay: -3s; }

.hero-visual .signal-a,
.hero-visual .signal-b,
.hero-visual .signal-c {
  will-change: transform, opacity;
  animation: intermex-pulse 4s ease-in-out infinite;
}

.hero-visual .signal-b { animation-delay: -1.35s; }
.hero-visual .signal-c { animation-delay: -2.7s; }

.tv-section {
  background-image: linear-gradient(90deg, #071329f7 0%, #071329ed 42%, #07132982 100%), url('./assets/entretenimiento-3d-v1.png');
  background-size: cover;
  background-position: center;
}

.tv-offer-card,
.bundle-grid article { backdrop-filter: blur(8px); }

.tv-offer-card,
.bundle-grid article {
  will-change: transform;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.tv-offer-card:hover,
.bundle-grid article:hover {
  transform: translate3d(0, -5px, 0);
  border-color: #5bdbff;
  box-shadow: 0 18px 34px #001a4f52;
}

@keyframes intermex-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes intermex-pulse {
  0%, 100% { transform: scale(0.98); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual .device-card,
  .hero-visual .floating-card,
  .hero-visual .signal-a,
  .hero-visual .signal-b,
  .hero-visual .signal-c {
    animation: none;
  }
}

@media (max-width: 540px) {
  .hero-visual { border-radius: 24px; }
  .tv-section { background-position: 63% center; }
}