/* MacroGym Access Core — cabeceras contextuales.
 * El contenedor replica el hero de Inicio: misma altura, posición, encuadre,
 * degradado y responsive. Solo cambia el copy de cada página.
 */

/* En las páginas gestionadas por Access Core se replica la altura de la fila
 * principal de la cabecera usada en Inicio. La hoja solo se carga aquí. */
.ct-header [data-row="middle"] {
    --height: 84px !important;
}

/* Iguala el arranque del primer bloque al ritmo de Inicio. */
.mg-access,
.mg-account,
.mg-account-settings,
.mg-entrenos-dev {
    margin-top: -20px !important;
}

.mg-context-hero + .ct-container,
.mg-context-hero + .ct-container-full,
.mg-context-hero + .content-area,
.mg-context-hero + .site-main,
.mg-context-hero + .entry-content {
    margin-top: -20px !important;
}

.mg-context-hero {
    position: relative;
    width: 100vw;
    max-width: none;
    height: clamp(464px, 28.9vw, 494px);
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
    background: #f3f4f6;
    isolation: isolate;
}

/* Mismo degradado corto de Inicio: protege el texto sin lavar el móvil,
 * el portátil ni la mayor parte de la fotografía. */
.mg-context-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.42) 13%,
        rgba(255, 255, 255, 0.16) 24%,
        rgba(255, 255, 255, 0.03) 31%,
        rgba(255, 255, 255, 0) 37%
    );
    content: '';
    pointer-events: none;
}

.mg-context-hero__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 58%;
}

.mg-context-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 30px clamp(64px, 5vw, 86px);
    transform: translateY(18px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* En páginas internas el copy es deliberadamente menor que en Inicio.
 * El ancho de 520 px fuerza una composición segura antes del móvil de la foto
 * y evita que titulares largos parezcan cortados. */
.mg-context-hero__title {
    max-width: 500px;
    margin: 0;
    color: #111827;
    font-size: clamp(28px, 1.85vw, 34px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.mg-context-hero__title-line {
    display: block;
}

.mg-context-hero__lead {
    max-width: 530px;
    margin: 16px 0 0;
    color: #334155;
    font-size: clamp(17px, 1.1vw, 19px);
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

/* Los saltos editoriales del subtítulo se respetan en todos los breakpoints. */
.mg-context-hero__lead-line {
    display: block;
}

.mg-context-hero__lead--desktop {
    display: none;
}

@media (min-width: 1025px) {
    .mg-context-hero__lead--compact {
        display: none;
    }

    .mg-context-hero__lead--desktop {
        display: block;
    }
}

/* Las páginas legales mantienen exactamente la misma caja visual del hero.
 * Su sobriedad se consigue mediante el copy, no reduciendo la altura. */
.mg-context-hero--legal .mg-context-hero__title {
    max-width: 440px;
}

@media (max-width: 1100px) {
    .mg-context-hero {
        height: 474px;
    }

    .mg-context-hero::after {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(255, 255, 255, 0.56) 16%,
            rgba(255, 255, 255, 0.20) 28%,
            rgba(255, 255, 255, 0.04) 36%,
            rgba(255, 255, 255, 0) 42%
        );
    }

    .mg-context-hero__content {
        padding: 30px clamp(30px, 4vw, 48px);
        transform: translateY(18px);
    }

    .mg-context-hero__title,
    .mg-context-hero--legal .mg-context-hero__title {
        max-width: 470px;
        font-size: clamp(28px, 3.35vw, 33px);
    }

    .mg-context-hero__lead {
        max-width: 430px;
        font-size: 17px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Misma proporción tablet vertical medida en NUTRI:
     * 768 px -> 289 px y 820 px -> 309 px (~2.65:1). */
    .mg-context-hero {
        height: auto;
        aspect-ratio: 2.65 / 1;
    }

    .mg-context-hero::after {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.74) 0%,
            rgba(255, 255, 255, 0.54) 16%,
            rgba(255, 255, 255, 0.18) 27%,
            rgba(255, 255, 255, 0.03) 35%,
            rgba(255, 255, 255, 0) 41%
        );
    }

    .mg-context-hero__image {
        object-position: center center;
    }

    .mg-context-hero__content {
        padding: 22px 24px 14px;
        transform: translateY(12px);
        justify-content: center;
    }

    .mg-context-hero__title,
    .mg-context-hero--legal .mg-context-hero__title {
        max-width: 360px;
        font-size: clamp(24px, 3.25vw, 28px);
        line-height: 1.04;
    }

    .mg-context-hero__lead {
        max-width: 330px;
        margin-top: 9px;
        font-size: 14.5px;
        line-height: 1.26;
    }
}

@media (max-width: 767px) {
    /* Misma proporción móvil medida en NUTRI:
     * 390 px -> 196 px y 412 px -> 207 px (~2:1). */
    .mg-context-hero {
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .mg-context-hero::after {
        /* En móvil la protección de lectura llega solo hasta la zona del teléfono. */
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.56) 16%,
            rgba(255, 255, 255, 0.22) 31%,
            rgba(255, 255, 255, 0.05) 42%,
            rgba(255, 255, 255, 0) 48%
        );
    }

    .mg-context-hero__image {
        /* Ajuste fino: ~3-4 px más a la derecha respecto a la versión anterior. */
        object-position: 44% center;
    }

    .mg-context-hero__content {
        padding: 14px 16px 10px;
        transform: translateY(20px);
        justify-content: center;
    }

    .mg-context-hero__title,
    .mg-context-hero--legal .mg-context-hero__title {
        max-width: min(57%, 198px);
        font-size: clamp(16.5px, 4.45vw, 19px);
        line-height: 1.01;
        letter-spacing: -0.022em;
    }

    .mg-context-hero--aviso-legal .mg-context-hero__title,
    .mg-context-hero--aviso-legal .mg-context-hero__title-line {
        max-width: none;
        white-space: nowrap;
    }

    .mg-context-hero__lead {
        max-width: min(59%, 220px);
        margin-top: 7px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.18;
    }

    /* Ajuste medido a 412 px para igualar a Inicio: gap objetivo = 30 px.
     * Mi Cuenta y Configuración: 18 -> 30 px (+12).
     * ENTRENOS: 22 -> 30 px (+8).
     * Acceso queda pendiente de medición específica. */
    .mg-account,
    .mg-account-settings {
        margin-top: -4px !important;
    }

    .mg-entrenos-dev {
        margin-top: -8px !important;
    }

    .mg-access {
        margin-top: -16px !important;
    }

    .mg-context-hero + .ct-container,
    .mg-context-hero + .ct-container-full,
    .mg-context-hero + .content-area,
    .mg-context-hero + .site-main,
    .mg-context-hero + .entry-content {
        margin-top: -16px !important;
    }
}


/* v0.3.84 — ritmo hero → contenido igual que Inicio.
 * Access Core aplicaba -20px al panel y otros -20px al contenedor padre,
 * comprimiendo el hueco dos veces. Inicio solo desplaza el panel -20px.
 * Desde tablet en adelante neutralizamos únicamente el segundo desplazamiento.
 * Los ajustes móviles medidos (30px) se conservan sin cambios. */
@media (min-width: 768px) {
    .mg-context-hero + .ct-container,
    .mg-context-hero + .ct-container-full,
    .mg-context-hero + .content-area,
    .mg-context-hero + .site-main,
    .mg-context-hero + .entry-content {
        margin-top: 0 !important;
    }
}