/* Encabezado compartido de las páginas interiores. Clases propias para evitar
   los tamaños fijos y animaciones del carrusel de la página de inicio. */
.observatory-page-header {
    color: #fff;
    background: linear-gradient(120deg, #064c43, #01715d);
    border-bottom: 0.25rem solid #ffd75b;
    /* Móviles y tablets: reserva espacio para la barra fija del menú. */
    padding: 7.5rem 1.25rem 2rem;
    padding-bottom: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.observatory-page-header__content {
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
}

.observatory-page-header .observatory-page-header__label {
    margin: 0 0 0.875rem;
    color: #ffe28a;
    font-family: var(--ztc-family-font1);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.observatory-page-header .observatory-page-header__title {
    max-width: 52rem;
    margin: 0 auto;
    color: inherit;
    font-family: var(--ztc-family-font2);
    /* Crece de 28 a 48px; sin saltos de línea forzados ni alturas fijas. */
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.observatory-page-header .observatory-page-header__description {
    max-width: 44rem;
    margin: 1rem auto 0;
    color: #e1efeb;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
    line-height: 1.6;
    text-wrap: pretty;
}

/* Escritorio: el menú horizontal aparece a 80em (igual que front-navigation.css).
   Se reserva su altura para que nunca se superponga al título. */
@media (min-width: 80em) {
    .observatory-page-header {
        padding-top: 9rem;
        padding-inline: 2rem;
    }
}