/* =========================================================
   Hero estándar del plugin
   Solo estilos del hero clásico; carousel y video siguen en el tema
   ========================================================= */

.home-hero--standard {
  --hero-space-progress: 0;
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-height, 166px) + clamp(1.8rem, 3vw, 3rem));
  padding-bottom: clamp(3.4rem, 5vw, 4.8rem);
  color: #fff;
  background: linear-gradient(180deg, #29347f 0%, #273377 100%);
  overflow: clip;
}

.home-hero--standard::before,
.home-hero--standard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-hero--standard::before {
  background:
    conic-gradient(from 210deg at 0% 20%, rgba(108, 199, 255, 0.16), transparent 38%),
    conic-gradient(from 20deg at 100% 10%, rgba(39, 166, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(72, 175, 255, 0.08) 0 18%, transparent 18% 100%),
    linear-gradient(180deg, rgba(9, 16, 58, 0.08) 0%, rgba(9, 16, 58, 0.24) 100%);
}

.home-hero--standard::after {
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.4px),
    radial-gradient(circle at 22% 24%, rgba(255, 215, 102, 0.9) 0 1.8px, transparent 2.1px),
    radial-gradient(circle at 30% 12%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.4px),
    radial-gradient(circle at 38% 20%, rgba(255, 255, 255, 0.64) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 48% 14%, rgba(111, 227, 255, 0.88) 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 58% 28%, rgba(255, 255, 255, 0.56) 0 1px, transparent 1.4px),
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.76) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 78% 26%, rgba(195, 121, 255, 0.86) 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.68) 0 1px, transparent 1.4px),
    radial-gradient(circle at 94% 28%, rgba(135, 221, 255, 0.94) 0 1.7px, transparent 2px),
    radial-gradient(circle at 14% 42%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.4px),
    radial-gradient(circle at 24% 56%, rgba(255, 171, 221, 0.9) 0 1.7px, transparent 2px),
    radial-gradient(circle at 36% 48%, rgba(255, 255, 255, 0.58) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 46% 62%, rgba(255, 255, 255, 0.68) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 57% 52%, rgba(255, 215, 102, 0.92) 0 1.7px, transparent 2px),
    radial-gradient(circle at 68% 60%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 46%, rgba(96, 227, 255, 0.9) 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 88% 54%, rgba(255, 255, 255, 0.74) 0 1px, transparent 1.4px),
    radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.58) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 34% 84%, rgba(195, 121, 255, 0.84) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 48% 76%, rgba(255, 255, 255, 0.66) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 62% 88%, rgba(255, 171, 221, 0.9) 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 76% 80%, rgba(255, 255, 255, 0.48) 0 1px, transparent 1.4px),
    radial-gradient(circle at 90% 86%, rgba(255, 255, 255, 0.76) 0 1.1px, transparent 1.5px);
}

.home-hero--standard .wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: clamp(330px, calc(100svh - var(--header-height) - 11rem), 470px);
  padding-top: clamp(1rem, 1.8vw, 1.8rem);
}

@media (max-width: 991.98px) {
  .home-hero--standard {
    padding-top: calc(var(--header-height-compact, 76px) + clamp(0.9rem, 2vw, 1.4rem));
    padding-bottom: clamp(2.4rem, 5vw, 3.4rem);
  }

  .home-hero--standard .wrapper {
    padding-top: clamp(0.45rem, 1.2vw, 0.85rem);
  }
}

@media (max-width: 575.98px) {
  .home-hero--standard {
    padding-top: calc(var(--header-height-compact, 76px) + 0.15rem);
    padding-bottom: 1.4rem;
  }

  .home-hero--standard .wrapper {
    padding-top: 0;
  }
}

html.js .home .home-hero--standard > .wrapper {
  opacity: 0;
  visibility: hidden;
}

html.js .home .home-hero--standard > .wrapper.is-ready {
  opacity: 1;
  visibility: visible;
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero-wave {
  position: absolute;
  width: 140%;
  left: -20%;
  border-radius: 50%;
  filter: blur(52px);
}

.hero-wave--top {
  top: 12%;
  height: 40%;
  background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(90, 60, 180, 0.18) 0%, rgba(40, 30, 120, 0.10) 50%, transparent 100%);
  transform: rotate(-3deg);
}

.hero-wave--middle {
  top: 44%;
  height: 46%;
  background: radial-gradient(ellipse 70% 55% at 70% 40%, rgba(30, 80, 180, 0.14) 0%, rgba(15, 25, 80, 0.20) 45%, transparent 100%);
  transform: rotate(2deg);
}

.hero-wave--bottom {
  bottom: -20%;
  height: 52%;
  background: radial-gradient(ellipse 90% 70% at 50% 60%, rgba(8, 14, 46, 0.70) 0%, rgba(10, 16, 52, 0.50) 40%, transparent 100%);
  transform: rotate(-1deg);
}

.hero-star {
  position: absolute;
  display: block;
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor);
}

.hero-star::before,
.hero-star::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.hero-star::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
}

.hero-star::after {
  width: 12px;
  height: 12px;
  background:
    linear-gradient(90deg, transparent 0 46%, currentColor 46% 54%, transparent 54% 100%),
    linear-gradient(180deg, transparent 0 46%, currentColor 46% 54%, transparent 54% 100%);
  opacity: 1;
}

.hero-star--a { top: 10%; left: 6%; color: #7fe4ff; }
.hero-star--b { top: 18%; left: 26%; color: #ffffff; }
.hero-star--c { top: 14%; right: 14%; color: #ffd761; }
.hero-star--d { top: 42%; left: 14%; color: #ff9bdb; }
.hero-star--e { top: 48%; right: 18%; color: #7fe4ff; }
.hero-star--f { bottom: 34%; left: 32%; color: #ffffff; }
.hero-star--g { bottom: 22%; right: 26%; color: #ffd761; }
.hero-star--h { bottom: 14%; left: 20%; color: #7fe4ff; }
.hero-star--i { top: 6%; left: 42%; color: #ffffff; }
.hero-star--j { top: 24%; right: 36%; color: #ff9bdb; }
.hero-star--k { top: 8%; right: 4%; color: #ffd761; }
.hero-star--l { top: 36%; left: 44%; color: #7fe4ff; }
.hero-star--m { top: 56%; left: 4%; color: #ffffff; }
.hero-star--n { bottom: 28%; right: 8%; color: #ff9bdb; }
.hero-star--o { bottom: 10%; left: 46%; color: #ffd761; }
.hero-star--p { bottom: 6%; right: 38%; color: #ffffff; }

.hero-planet {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.hero-planet--cyan {
  top: 32%;
  right: 3%;
  width: min(26vw, 320px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.18) 0 10%, transparent 11%),
    repeating-linear-gradient(150deg, rgba(59, 190, 255, 0.94) 0 28px, rgba(36, 170, 245, 0.76) 28px 56px),
    linear-gradient(145deg, #3cc7ff, #009de6);
  box-shadow: 0 0 60px 10px rgba(60, 199, 255, 0.12);
}

.hero-planet--pink {
  top: 30%;
  left: 8%;
  width: min(5vw, 62px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 110, 170, 0.92) 0 34%, rgba(255, 49, 121, 0.96) 35% 62%, #ff266c 63% 100%);
  box-shadow: 0 0 24px 6px rgba(255, 74, 140, 0.14);
}

.hero-planet--ringed {
  left: 18%;
  bottom: 28%;
  width: min(11vw, 148px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.18) 0 14%, transparent 15%),
    repeating-linear-gradient(180deg, rgba(170, 112, 255, 0.96) 0 16px, rgba(122, 80, 235, 0.88) 16px 32px),
    linear-gradient(145deg, #9258ff, #7a4fea);
  box-shadow: 0 0 40px 8px rgba(146, 88, 255, 0.10);
}

.hero-planet--ringed::before {
  content: "";
  position: absolute;
  inset: 40% -18% auto;
  height: 18%;
  border: 8px solid rgba(232, 208, 255, 0.82);
  border-radius: 50%;
  transform: rotate(-16deg);
}

.hero-planet--orange {
  right: 8%;
  bottom: 24%;
  width: min(7vw, 90px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 220, 124, 0.34) 0 16%, transparent 17%),
    radial-gradient(circle at 62% 66%, rgba(255, 153, 0, 0.44) 0 18%, transparent 19%),
    repeating-linear-gradient(160deg, rgba(255, 170, 38, 0.96) 0 18px, rgba(255, 122, 0, 0.88) 18px 36px),
    linear-gradient(145deg, #ffb529, #ff7200);
  box-shadow: 0 0 30px 6px rgba(255, 122, 0, 0.10);
}

.hero-planet--earth {
  left: 7%;
  bottom: 14%;
  width: min(15vw, 192px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.18) 0 12%, transparent 13%),
    radial-gradient(circle at 26% 58%, #40c98f 0 18%, transparent 19%),
    radial-gradient(circle at 72% 42%, #40c98f 0 14%, transparent 15%),
    radial-gradient(circle at 52% 72%, #34b284 0 18%, transparent 19%),
    linear-gradient(145deg, #83dfff, #69c6ff 58%, #53aef4 100%);
  box-shadow: 0 0 50px 10px rgba(105, 198, 255, 0.10);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .5rem;
}

.hero-copy--center {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

.hero-copy--center .display-title,
.hero-copy--center .hero-subtitle {
  margin-inline: auto;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 760px);
  margin: 0.9rem auto 0;
}

.hero-meta__item {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  padding: 1rem 1.4rem;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  text-align: center;
}

.hero-meta__header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
  text-align: center;
}

.hero-meta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.95rem;
}

.hero-meta__label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 165, 214, 0.88);
}

.hero-meta__value {
  display: block;
  font-family: var(--font-display-light);
  font-weight: 300;
  font-size: clamp(1.34rem, 1.9vw, 1.5rem);
  line-height: 1.08;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

.hero-subtitle {
  margin-bottom: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  line-height: 1.25;
}

html[data-theme="light"] .home-hero--standard {
  background: linear-gradient(180deg, #2b3684 0%, #28347a 52%, #23306d 100%);
}

html[data-theme="light"] .home-hero--standard::before {
  background:
    conic-gradient(from 210deg at 0% 20%, rgba(108, 199, 255, 0.16), transparent 38%),
    conic-gradient(from 20deg at 100% 10%, rgba(39, 166, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(72, 175, 255, 0.08) 0 18%, transparent 18% 100%),
    linear-gradient(180deg, rgba(9, 16, 58, 0.08) 0%, rgba(9, 16, 58, 0.24) 100%);
}

html[data-theme="light"] .home-hero--standard::after {
  opacity: 1;
}

html[data-theme="dark"] .home-hero--standard {
  background: linear-gradient(180deg, #090d27 0%, #0d1234 52%, #111743 100%);
}

html[data-theme="dark"] .home-hero--standard::before {
  background:
    conic-gradient(from 210deg at 0% 20%, rgba(61, 124, 221, 0.1), transparent 38%),
    conic-gradient(from 20deg at 100% 10%, rgba(29, 88, 184, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(30, 60, 132, 0.12) 0 18%, transparent 18% 100%),
    linear-gradient(180deg, rgba(2, 4, 15, 0.18) 0%, rgba(2, 4, 15, 0.46) 100%);
}

html[data-theme="dark"] .home-hero--standard::after {
  opacity: 0.74;
}

html[data-theme="dark"] .hero-wave--top {
  background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(60, 40, 140, 0.14) 0%, rgba(20, 15, 70, 0.08) 50%, transparent 100%);
}

html[data-theme="dark"] .hero-wave--middle {
  background: radial-gradient(ellipse 70% 55% at 70% 40%, rgba(20, 50, 130, 0.12) 0%, rgba(8, 14, 50, 0.18) 45%, transparent 100%);
}

html[data-theme="dark"] .hero-wave--bottom {
  background: radial-gradient(ellipse 90% 70% at 50% 60%, rgba(3, 6, 24, 0.80) 0%, rgba(5, 8, 30, 0.55) 40%, transparent 100%);
}

html[data-theme="dark"] .hero-star::before {
  background: rgba(243, 245, 255, 0.9);
}

html[data-theme="dark"] .hero-star::after {
  opacity: 0.84;
}

html[data-theme="dark"] .hero-planet--cyan {
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.1) 0 10%, transparent 11%),
    repeating-linear-gradient(150deg, rgba(38, 110, 182, 0.86) 0 28px, rgba(23, 80, 140, 0.88) 28px 56px),
    linear-gradient(145deg, #2b79c6, #104d8f);
  box-shadow: 0 0 60px 10px rgba(19, 69, 137, 0.16);
}

html[data-theme="dark"] .hero-planet--pink {
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 110, 170, 0.78) 0 34%, rgba(201, 54, 121, 0.92) 35% 62%, #b31552 63% 100%);
}

html[data-theme="dark"] .hero-planet--ringed {
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.12) 0 14%, transparent 15%),
    repeating-linear-gradient(180deg, rgba(84, 50, 150, 0.9) 0 16px, rgba(58, 31, 126, 0.9) 16px 32px),
    linear-gradient(145deg, #5b2aa8, #48259a);
}

html[data-theme="dark"] .hero-planet--ringed::before {
  border-color: rgba(216, 204, 255, 0.7);
}

html[data-theme="dark"] .hero-planet--orange {
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 220, 124, 0.22) 0 16%, transparent 17%),
    radial-gradient(circle at 62% 66%, rgba(255, 153, 0, 0.28) 0 18%, transparent 19%),
    repeating-linear-gradient(160deg, rgba(214, 131, 31, 0.92) 0 18px, rgba(170, 82, 10, 0.9) 18px 36px),
    linear-gradient(145deg, #d96e12, #a94e05);
}

html[data-theme="dark"] .hero-planet--earth {
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.1) 0 12%, transparent 13%),
    radial-gradient(circle at 26% 58%, #2da76f 0 18%, transparent 19%),
    radial-gradient(circle at 72% 42%, #2da76f 0 14%, transparent 15%),
    radial-gradient(circle at 52% 72%, #23885e 0 18%, transparent 19%),
    linear-gradient(145deg, #57b0df, #3f8fd0 58%, #2f78b7 100%);
}

html[data-theme="dark"] .hero-meta__label {
  color: rgba(255, 210, 235, 0.88);
}

html[data-theme="dark"] .hero-meta__icon {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

@media (max-width: 767px) {
  .home-hero--standard .wrapper {
    min-height: min(92svh, 620px);
  }

  .hero-planet--cyan {
    width: min(52vw, 240px);
    top: 22%;
    right: -10%;
  }

  .hero-planet--pink {
    width: 46px;
    left: -2%;
  }

  .hero-planet--ringed {
    width: min(30vw, 120px);
    left: -8%;
    bottom: 24%;
  }

  .hero-planet--orange {
    width: min(18vw, 72px);
    right: -4%;
    bottom: 18%;
  }

  .hero-planet--earth {
    width: min(30vw, 138px);
    left: -8%;
    bottom: 10%;
  }

  .hero-meta {
    grid-template-columns: 1fr;
    width: min(100%, 420px);
  }

  .hero-meta__item {
    padding: 0.92rem 1.05rem;
  }
}

@media (max-width: 575px) {
  .hero-planet--cyan {
    right: -18%;
    top: 24%;
  }

  .hero-planet--pink {
    left: -6%;
    top: 28%;
  }

  .hero-planet--ringed {
    left: -14%;
    bottom: 22%;
  }

  .hero-planet--orange {
    right: -8%;
    bottom: 16%;
  }

  .hero-planet--earth {
    left: -12%;
    bottom: 8%;
  }

  .hero-meta__item strong {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
  }
}