/* ==========================================================================
   ARTESSA — Hero (Sección 1: Inicio)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--color-black-soft), var(--color-black-ceremonial) 60%);
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  display: grid;
  gap: var(--space-lg);
  text-align: center;
  justify-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.hero__title {
  font-size: var(--fs-hero);
  max-width: 18ch;
  color: var(--color-white-warm);
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(180deg, var(--color-gold-glow), var(--color-gold-antique));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  max-width: 46rem;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.hero__frase {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold-muted);
}

.hero__figure-wrap {
  position: absolute;
  inset: 0;
  z-index: var(--z-decor);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__figure {
  position: relative;
  width: min(60vw, 420px);
  max-height: 55vh;
  aspect-ratio: 3/4;
  opacity: 0.5;
}

.hero__figure img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 40px 90px rgba(0, 0, 0, 0.6));
}

/* Nicho de arco tras la pieza — rompe la silueta rectangular del hero,
   evocando el óculo y las hornacinas de una capilla. */
.hero__arch-glow {
  position: absolute;
  inset: 6% 10% -4%;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(183, 138, 61, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(183, 138, 61, 0.08), transparent 60%);
}

.hero__arch-glow::before {
  border-color: rgba(183, 138, 61, 0.28);
}

.hero__content {
  position: relative;
  z-index: var(--z-content);
  background: linear-gradient(180deg, rgba(9, 8, 7, 0.2), rgba(9, 8, 7, 0.75) 60%, var(--color-black-ceremonial) 100%);
  width: 100%;
  padding-top: 22vh;
  padding-bottom: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

.scroll-indicator {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-gold-muted);
}

.scroll-indicator__label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.scroll-indicator__line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--color-gold-antique), transparent);
}

@media (max-width: 640px) {
  .hero {
    padding-top: 5.5rem;
  }
  .hero__content {
    padding-top: 16vh;
  }
  .hero__figure {
    width: 82vw;
  }
  /* En pantallas estrechas el interletrado amplio (0.28em) empuja la
     primera línea al límite del ancho y el motor la ajusta mal,
     encimando las palabras. Se reduce el interletrado y se acota la
     medida para que envuelva de forma limpia y centrada. */
  .hero__frase {
    letter-spacing: 0.14em;
    max-width: 26ch;
    margin-inline: auto;
    line-height: 1.9;
  }
  /* En móvil el hero es muy alto y su contenido rebasa la primera
     pantalla, por lo que el indicador "Descender" (posicionado al fondo
     del hero) ya no queda al borde inferior visible y se encima con la
     frase editorial. Es puramente decorativo (aria-hidden), así que se
     oculta en pantallas estrechas. */
  .scroll-indicator {
    display: none;
  }
}