/* ============================================================================
   Analizador YouTube Pro — Estilo del hero de inicio
   ---------------------------------------------------------------------------
   Réplica en CSS puro del estilo "Web3Media Hero" (React + framer-motion),
   pero con la paleta de la casa: negro y rojo YouTube. Sin librerías.

   Se carga DESPUÉS de style.css y solo pisa lo del hero. Para revertir,
   basta con quitar la línea <link> del index.html.

   Qué replica:
     · Fondo en degradado vertical + resplandor radial gigante desenfocado
     · Entradas escalonadas (aparecer + subir) de cada bloque
     · Píldoras flotantes en vidrio esmerilado con flotación infinita
     · Título con degradado animado
     · Carrusel infinito con desvanecido en los bordes
   ========================================================================== */

/* ─── Fondo del hero: degradado vertical (negro → rojo muy oscuro) ────────── */
/* Se le resta la altura del carrusel para que hero + carrusel llenen justo
   una pantalla: así la cinta se ve sin tener que bajar. */
.hero {
  background: linear-gradient(180deg, #0a0a0a 0%, #140303 55%, #1c0505 100%);
  min-height: calc(100vh - 60px - 132px);
}

/* Resplandor radial gigante, el corazón del efecto */
.hero-bg::after {
  content: "";
  position: absolute;
  width: 1200px;
  height: 1200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 0, 0, 0.18) 0%, rgba(255, 0, 0, 0) 70%);
  filter: blur(100px);
  pointer-events: none;
  animation: heroGlow 7s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* ─── Entradas escalonadas ────────────────────────────────────────────────── */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroPop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-label,
.hero-title,
.hero-subtitle,
.hero .mode-tabs,
.hero .mode-panel {
  opacity: 0;
  animation: heroUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-label      { animation-name: heroPop; animation-delay: 0.10s; }
.hero-title      { animation-delay: 0.20s; }
.hero-subtitle   { animation-delay: 0.32s; }
.hero .mode-tabs { animation-delay: 0.44s; }
.hero .mode-panel{ animation-delay: 0.56s; }

/* El panel oculto no debe reaparecer por la animación al cambiar de pestaña */
.hero .mode-panel.hidden { animation: none; opacity: 0; }

/* ─── Título con degradado animado ────────────────────────────────────────── */
.hero-title .highlight {
  background: linear-gradient(90deg, #ff0000 0%, #ff6b6b 50%, #ff0000 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroShine 4.5s linear infinite;
}
@keyframes heroShine {
  to { background-position: 200% center; }
}

/* ─── Píldoras flotantes de vidrio ────────────────────────────────────────── */
.hero-orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-orbit {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  opacity: 0;
  animation: heroPop 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             heroFloat 6s ease-in-out infinite;
}
.hero-orbit i {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 0, 0, 0.28);
  box-shadow: 0 0 40px rgba(255, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff4d4d;
}
.hero-orbit span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text2);
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

/* Posiciones y desfases: cada una flota a su ritmo */
.hero-orbit.o1 { left: 7%;  top: 20%; animation-delay: 0.35s, 0s;   animation-duration: 0.7s, 6.0s; }
.hero-orbit.o2 { left: 13%; top: 62%; animation-delay: 0.45s, 0.8s; animation-duration: 0.7s, 6.8s; }
.hero-orbit.o3 { right: 7%; top: 22%; animation-delay: 0.55s, 0.4s; animation-duration: 0.7s, 7.4s; }
.hero-orbit.o4 { right: 13%;top: 63%; animation-delay: 0.65s, 1.2s; animation-duration: 0.7s, 6.4s; }

/* Con poco ancho estorban: se esconden */
@media (max-width: 1240px) { .hero-orbits { display: none; } }

/* ─── Carrusel infinito de capacidades ────────────────────────────────────── */
.hero-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 132px;
  padding: 34px 0 4px;
  overflow: hidden;
  opacity: 0;
  animation: heroUp 0.9s ease-out 0.8s forwards;
  /* Continúa el degradado justo donde termina el hero, sin corte de color */
  background: linear-gradient(180deg, #1c0505 0%, #0a0a0a 100%);
}
.hero-marquee-label {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 18px;
}
/* Desvanecido en los bordes, para que entren y salgan sin corte */
.hero-marquee::before,
.hero-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 3;
  pointer-events: none;
}
.hero-marquee::before { left: 0;  background: linear-gradient(90deg,  #170404 0%, rgba(23,4,4,0) 100%); }
.hero-marquee::after  { right: 0; background: linear-gradient(270deg, #170404 0%, rgba(23,4,4,0) 100%); }

.hero-track {
  display: flex;
  align-items: center;
  gap: 46px;
  width: max-content;
  animation: heroSlide 26s linear infinite;
}
.hero-marquee:hover .hero-track { animation-play-state: paused; }
/* La cinta lleva la lista dos veces; al recorrer la mitad, reinicia sin salto */
@keyframes heroSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero-track b {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text2);
  opacity: 0.45;
  white-space: nowrap;
  transition: opacity var(--transition), color var(--transition);
}
.hero-track b:hover { opacity: 1; color: var(--red); }
.hero-track i {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0.35;
}

/* ─── Respeta a quien pidió menos movimiento en su sistema ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-label, .hero-title, .hero-subtitle,
  .hero .mode-tabs, .hero .mode-panel,
  .hero-orbit, .hero-marquee {
    animation: none !important;
    opacity: 1;
  }
  .hero-bg::after, .hero-track, .hero-title .highlight { animation: none !important; }
}