.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 78% 8%, #484d35 0%, var(--green-900) 46%, #080905 100%);
  isolation: isolate;
  text-align: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/*
  Cada slide es su propia capa absoluta del tamaño completo del hero.
  Importante: el tamaño se lo damos aquí al <picture> (no solo al <img>),
  porque <picture> es inline por defecto y sin un tamaño explícito la altura
  en % del <img> no tenía contra qué resolverse — por eso en pantallas altas
  angostas (celulares) la foto no llegaba a cubrir toda la sección.
*/
.hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

/* Que no todas las fotos respiren exactamente igual al mismo tiempo */
.hero__slide:nth-child(2) img {
  animation-duration: 26s;
}
.hero__slide:nth-child(3) img {
  animation-duration: 19s;
}

@keyframes heroKenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide img {
    animation: none;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 9, 5, 0.55) 0%, rgba(8, 9, 5, 0.4) 45%, rgba(8, 9, 5, 0.7) 100%);
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: var(--white);
}

.hero__logo {
  position: relative;
  width: clamp(170px, 120px + 14vw, 320px);
  height: clamp(170px, 120px + 14vw, 320px);
  margin-bottom: var(--sp-5);
  display: grid;
  place-items: center;
  animation: heroLogoIn 1.1s var(--ease-out) both;
}

@keyframes heroLogoIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo {
    animation: none;
  }
}

/* Halo sutil detrás del logo — mucho más discreto que el gradiente blanco
   original: solo ayuda a despegar el logo del fondo, sin verse como un
   círculo blanco sólido. */
.hero__logo::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle, rgba(250, 247, 240, 0.32) 0%, rgba(250, 247, 240, 0.1) 50%, transparent 72%);
  border-radius: 50%;
  filter: blur(4px);
}

.hero__logo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(8, 9, 5, 0.55));
}

@media (max-width: 480px) {
  .hero__logo {
    margin-bottom: var(--sp-4);
  }
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  animation: heroActionsIn 0.9s var(--ease-out) 0.35s both;
}

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

@media (prefers-reduced-motion: reduce) {
  .hero__actions {
    animation: none;
  }
}

@media (max-width: 480px) {
  .hero__actions {
    margin-top: var(--sp-5);
  }
}