.hero {
  position: relative;
  min-height: calc(100vh - 82px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-video {
  position: relative;
  overflow: hidden;
}

.hero-video::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 210, 122, 0.08), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(163, 106, 22, 0.12), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(244, 210, 122, 0.06), transparent 24%);
  z-index: -1;
  animation: heroAmbientMove 9s ease-in-out infinite alternate;
  pointer-events: none;
}

/* VIDEO DE FONDO */

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.45) contrast(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(11, 11, 13, 0.9) 100%
    );
  z-index: 1;
}

/* GRID HERO */

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 3;
  padding-left: clamp(28px, 4vw, 64px);
}

.hero-content {
  max-width: 620px;
  animation: heroFade 1.1s ease forwards;
}

/* TITULOS */

.eyebrow,
.section-tag {
  color: var(--gold-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.98;
  margin-bottom: 22px;
  font-weight: 800;
  animation: heroTitle 1.2s ease forwards;
}

.hero-title span {
  display: block;
  color: var(--gold-3);
}

.hero-text {
  max-width: 650px;
  color: var(--text-soft);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

/* BOTONES */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
  animation: heroButtons 1.6s ease forwards;
}

/* CARDS HERO */

.hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  animation: heroCards 1.9s ease forwards;
}

.feature-card,
.info-card,
.class-card,
.event-card,
.gallery-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-gold);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.feature-card {
  padding: 18px;
  border-radius: var(--radius-md);
}

.feature-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-4);
}

.feature-card span {
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* VISUAL HERO */

.hero-visual {
  display: flex;
  justify-content: center;
}

.logo-card {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  animation: heroLogoEntrance 1s ease 0.15s both;
}

.logo-card::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(244, 210, 122, 0.2) 0%,
    rgba(244, 210, 122, 0.08) 35%,
    transparent 70%
  );
  filter: blur(28px);
  z-index: -2;
  animation: logoAura 4.2s ease-in-out infinite;
}

.logo-ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(244, 210, 122, 0.9), rgba(163, 106, 22, 0.52)),
    #111;
  box-shadow:
    0 0 0 2px rgba(244, 210, 122, 0.24),
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(244, 210, 122, 0.15);
  animation: logoPulse 3.8s ease-in-out infinite;
}

.logo-core {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(244, 210, 122, 0.08), transparent 20%),
    radial-gradient(circle at 70% 70%, rgba(244, 210, 122, 0.08), transparent 20%),
    linear-gradient(180deg, #0d0b0c 0%, #050506 100%);
  border: 2px solid rgba(246, 231, 193, 0.2);
}

.hero-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(244, 210, 122, 0.12))
    drop-shadow(0 0 18px rgba(244, 210, 122, 0.08));
  animation: heroLogoFloat 4.6s ease-in-out infinite;
}

/* HALO DORADO QUE SIGUE EL MOUSE */

.hero-mouse-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  opacity: 0.24;
  filter: blur(60px);
  background:
    radial-gradient(
      circle,
      rgba(244, 210, 122, 0.38) 0%,
      rgba(212, 166, 74, 0.20) 32%,
      rgba(163, 106, 22, 0.10) 58%,
      transparent 76%
    );
  transition:
    left 0.18s ease-out,
    top 0.18s ease-out,
    opacity 0.25s ease;
}

.hero:hover .hero-mouse-glow {
  opacity: 0.3;
}

/* RESPONSIVE */

@media (max-width: 1080px) {
  .hero-grid {
    padding-left: 20px;
  }
}

@media (max-width: 1024px) {
  .hero-grid {
    padding-left: 20px;
  }

  .hero-mouse-glow {
    width: 320px;
    height: 320px;
    opacity: 0.18;
    filter: blur(48px);
  }
}

@media (max-width: 768px) {
  .hero-grid {
    padding-left: 10px;
  }

  .hero-mouse-glow {
    display: none;
  }
}

/* ANIMACIONES */

@keyframes heroFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTitle {
  from {
    opacity: 0;
    transform: translateY(30px);
    letter-spacing: 0.08em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: normal;
  }
}

@keyframes heroButtons {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCards {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroAmbientMove {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate3d(-1.5%, 1.2%, 0) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: translate3d(1.5%, -1%, 0) scale(1.05);
    opacity: 0.88;
  }
}

@keyframes heroLogoFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes logoAura {
  0%,100% { transform: scale(0.96); opacity: 0.75; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes logoPulse {
  0%,100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(244, 210, 122, 0.24),
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 0 50px rgba(244, 210, 122, 0.15);
  }
  50% {
    transform: scale(1.015);
    box-shadow:
      0 0 0 2px rgba(244, 210, 122, 0.3),
      0 22px 70px rgba(0, 0, 0, 0.55),
      0 0 70px rgba(244, 210, 122, 0.2);
  }
}