/* --------------------------------------------------------------------------
   steps-section: numbered-step block over a blurred background photo, used
   by Space 360° ("01 Despegue / 02 Viaje gastronómico / 03 Universo
   inmersivo") and Happenings ("¿Cómo agregar un happening?"). Background
   image is set the same way as page-hero: inline "--hero-bg".
   -------------------------------------------------------------------------- */
.steps-section { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 112px) 0; color: #fff; background-color: #050b13; isolation: isolate; }
.steps-section__background { position: absolute; z-index: -2; inset: 0; background: var(--hero-bg, none) center / cover no-repeat; filter: blur(6px) brightness(.55); transform: scale(1.06); }
.steps-section__veil { position: absolute; z-index: -1; inset: 0;  }
.steps-section .section-heading h2 { color: #fff; }
.steps-section .section-heading > p:last-child { color: #c8d5e0; }

/*
 * Two-column variant for Happenings: copy on the left, a vertical numbered
 * list on the right, both inside the same blurred-background section.
 */
.steps-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; margin-top: 34px; }
.steps-section__copy p { margin-top: 14px; color: #d3dee8; font-size: 15px; line-height: 1.55; }
.steps-section__copy p:first-child { margin-top: 0; }
.steps-section__copy strong { display: block; margin-top: 4px; color: var(--color-gold); font-family: var(--font-display); font-size: 14px; text-transform: uppercase; }
.steps-section__actions { margin-top: 22px; }
.steps-section__actions .button--primary.btn-space { margin-inline: auto; }


.steps-section__actions--start { justify-content: flex-start; margin-top: 18px; }

/* Numbered list: 3 items (horizontal) for Space 360°, 4 (vertical) for Happenings. */
.steps-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 46px; margin-top: 36px; }
.steps-list--start { justify-content: flex-start; }
.steps-list--vertical { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 22px; margin-top: 0; }
.steps-list__item { display: flex; align-items: flex-start; gap: 12px; max-width: 260px; }
.steps-list--vertical .steps-list__item { max-width: none; }
.steps-list__number { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--color-gold); border: 1px solid rgba(255, 184, 63, .75); border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 13px; background-color: black; }
.steps-list__item h3 { margin-top: 6px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.steps-list__item h3.gold { color: #ffb83f !important; }
.steps-list__item p { margin-top: 3px; color: #c8d5e0; font-size: 13px; line-height: 1.3; }

/* Optional 3-photo gallery under the steps (Space 360° only). */
.steps-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.steps-gallery__item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; border: 1px solid rgba(26, 167, 246, .6); }
.steps-section__actions { display: flex; margin-top: 32px; }

@media (max-width: 700px) {
    .steps-gallery { grid-template-columns: 1fr; }
    .steps-section__grid { grid-template-columns: 1fr; gap: 34px; }
}