.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 15%, rgba(255, 255, 255, 0.08) 0 5rem, transparent 5.1rem),
    radial-gradient(circle at 88% 88%, rgba(238, 116, 2, 0.12) 0 7rem, transparent 7.1rem),
    linear-gradient(125deg, var(--green-950) 0%, var(--green) 65%, var(--green-700) 100%);
  border-bottom: 0.25rem solid var(--orange);
}

.hero__layout {
  min-height: 22rem;
  display: grid;
  align-items: center;
  gap: 2rem;
  padding-block: 3.5rem;
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero .banner__eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--orange-200);
}

.hero h1 {
  margin: 0;
  color: var(--surface);
  font-size: 2.75rem;
  line-height: 1.05;
}

.hero__content > p:not(.banner__eyebrow) {
  max-width: 36rem;
  margin: 1rem 0 0;
  color: var(--green-100);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.hero__actions .button {
  margin: 0;
  white-space: nowrap;
  gap: 0.5rem;
}

.hero__actions .button svg {
  width: 1.25rem;
  flex: 0 0 1.25rem;
}

.button--outline {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  color: var(--surface);
}

.button--outline:hover {
  border-color: var(--surface);
  background: rgba(255, 255, 255, 0.12);
}

.button--outline svg {
  width: 1.25rem;
  flex: 0 0 1.25rem;
}

.hero__visual {
  display: none;
}

@media (min-width: 48rem) {
  .hero__layout {
    min-height: 25rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    padding-block: 3rem;
  }

  .hero__visual {
    min-height: 21rem;
    display: grid;
    place-items: center;
    position: relative;
  }

  .hero__visual::before {
    content: "";
    position: absolute;
    width: 22rem;
    aspect-ratio: 1;
    border: 0.125rem solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
  }

  .hero__visual::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: 8%;
    width: 4.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--orange);
    opacity: 0.35;
  }

  .calendar-illustration {
    width: min(24rem, 92%);
    height: auto;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 70rem) {
  .hero__visual::before {
    width: 25rem;
  }
}

/* Mantener el banner igual que en light (tokens dark remapean --surface) */
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero .button--primary,
[data-theme="dark"] .hero .button--outline {
  color: #ffffff;
}

[data-theme="dark"] .hero__content > p:not(.banner__eyebrow) {
  color: #eaf4ef;
}

[data-theme="dark"] .hero .banner__eyebrow {
  color: var(--orange-200);
}

[data-theme="dark"] .hero .button--outline {
  border-color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .hero .button--outline:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}