/* --------------------------------------------------------------------------
   page-hero: full-bleed intro used by every inner page (Space 360°, Menú,
   Happenings, Experiencias, Contacto). Each page sets its own background via
   the inline "--hero-bg" custom property, e.g.:
       <section class="page-hero" style="--hero-bg:url('<?= $base ?>hero-menu.jpg')">
   so the file name stays visible in the view (same rule as media-frame) and
   this stylesheet never needs a page-specific copy.
   -------------------------------------------------------------------------- */
.page-hero { position: relative; display: grid; min-height: 620px; overflow: hidden; color: #fff; background-color: #03070d; isolation: isolate; }
.page-hero--short { min-height: 460px; }
.page-hero__background { position: absolute; z-index: -2; inset: 0; background: var(--hero-bg, none) center / cover no-repeat; }
.page-hero__veil { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2, 6, 12, .96) 0%, rgba(3, 8, 15, .74) 42%, rgba(3, 8, 15, .28) 100%), linear-gradient(0deg, rgba(0, 1, 4, .42), transparent 38%); }
.page-hero__content { align-self: center; padding: 170px 0 90px; }
.page-hero__content h1.space1 { font-family: var(--font-display); font-size: 45px; margin: 0; line-height: 1; }
.page-hero__content strong.space2 { font-family: var(--font-display); font-size: 70px; margin: 0; line-height: 1; color: var(--color-gold); }
.page-hero__content h1.txtmenu1 { font-family: var(--font-display); font-size: 45px; margin: 0; line-height: 1; }
.page-hero__content strong.txtmenu2 { font-family: var(--font-display); font-size: 70px; margin: 0; line-height: 1; color: var(--color-gold); }
.page-hero__content h1.txtExperiencias1 { font-family: var(--font-display); font-size: 30px; margin: 0; line-height: 1; }
.page-hero__content strong.txtExperiencias2 { font-family: var(--font-display); font-size: 30px; margin: 0; line-height: 1; color: var(--color-gold); }
.page-hero__content.hero-happ-center { align-self: center; padding: 170px 0 0; text-align: center; }
.page-hero__content.hero-happ-center h1.happ1 { max-width: none; margin: 0; font-family: var(--font-display); font-size: 45px; color: #fff; }
.page-hero__content.hero-happ-center strong.happ2 { display: block; margin: 0; font-family: var(--font-display); font-size: 70px; font-weight: 700; line-height: 1; letter-spacing: .015em; color: var(--color-gold); text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.page-hero__content.hero-happ-center h1.happ3 { font-family: var(--font-display); max-width: none; margin: 8px 0 0; font-size: 30px; color: #fff; }
/* Optional mid-size line between the big title and the regular lead paragraph (used by Menú). */
.page-hero__subtitle { max-width: 620px; margin-top: 12px; font-family: var(--font-display); font-size: clamp(16px, 2vw, 22px); font-weight: 700; letter-spacing: .02em; line-height: 1.35; text-transform: uppercase; color: #fff; }
.page-hero__lead { max-width: 560px; margin-top: 18px; color: #e4eff8; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.4; }
.page-hero__actions { margin-top: 28px; }

@media (max-width: 600px) {
    .page-hero { min-height: 560px; }
    .page-hero__content { padding: 130px 0 70px; }
    .page-hero h1 { font-size: clamp(30px, 9vw, 44px); }
}