/* MacroGym Inicio — hero principal del ecosistema.
 * El bloque se inyecta mediante hooks de Blocksy justo después del header.
 */

/* La portada MacroGym replica el ritmo vertical de NUTRI: cabecera más compacta
 * y menor separación entre el hero y el primer bloque de contenido. */
body.home .ct-header [data-row="middle"] {
    --height: 84px !important;
}

body.home .mg-home-panel {
    margin-top: -20px !important;
}

.mg-ecosystem-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;
}

/* Degradado de lectura corto: protege el titular sin lavar móvil,
 * portátil ni la mayor parte de la comida. */
.mg-ecosystem-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-ecosystem-hero__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 58%;
}

.mg-ecosystem-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;
}

.mg-ecosystem-hero__title {
    max-width: 570px;
    margin: 0;
    color: #111827;
    font-size: clamp(36px, 2.4vw, 43px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.032em;
}

.mg-ecosystem-hero__title-line {
    display: block;
    white-space: nowrap;
}

.mg-ecosystem-hero__lead {
    max-width: 560px;
    margin: 18px 0 0;
    color: #334155;
    font-size: clamp(18px, 1.2vw, 21px);
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

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

    .mg-ecosystem-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-ecosystem-hero__content {
        padding: 30px clamp(30px, 4vw, 48px);
        transform: translateY(18px);
    }

    .mg-ecosystem-hero__title {
        max-width: 540px;
        font-size: clamp(35px, 4vw, 42px);
    }

    .mg-ecosystem-hero__title-line {
        white-space: normal;
    }

    .mg-ecosystem-hero__lead {
        max-width: 500px;
        font-size: 18px;
    }
}

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

    .mg-ecosystem-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-ecosystem-hero__image {
        object-position: center center;
    }

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

    .mg-ecosystem-hero__title {
        max-width: 400px;
        font-size: clamp(27px, 3.6vw, 31px);
        line-height: 1.04;
    }

    .mg-ecosystem-hero__lead {
        max-width: 360px;
        margin-top: 9px;
        font-size: 15px;
        line-height: 1.24;
    }
}

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

    .mg-ecosystem-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-ecosystem-hero__image {
        /* Ajuste fino: ~3-4 px más a la derecha respecto a la versión anterior. */
        object-position: 44% center;
    }

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

    .mg-ecosystem-hero__title {
        max-width: min(57%, 200px);
        font-size: clamp(17px, 4.55vw, 19.5px);
        line-height: 1.02;
        letter-spacing: -0.024em;
    }

    .mg-ecosystem-hero__title-line {
        display: block;
        white-space: normal;
    }

    .mg-ecosystem-hero__title-line:not(:last-child)::after {
        content: none;
    }

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

/* El subtítulo usa las mismas dos líneas en desktop, tablet y móvil. */
.mg-ecosystem-hero__lead-line {
    display: block;
}

/* Refuerzo puntual del cierre del subtítulo: conserva tamaño, línea y posición. */
.mg-ecosystem-hero__lead-strong {
    font-weight: 700;
}