/* =========================================================
   HERO - ENCUADRE ESPECÍFICO PARA MÓVIL
   Mantiene background-size: cover y corrige el recorte
========================================================= */

@media (max-width: 620px) {

    /* Hero 0 - Programa para Líderes */
    .hero-slide:nth-of-type(1) .hero-media {
        background-position: 50% center;
    }

    /* Hero 1 - Las respuestas viven en ti */
    .hero-slide:nth-of-type(2) .hero-media {
        background-position: 68% center;
    }

    /* Hero 2 - Coaching individual */
    .hero-slide:nth-of-type(3) .hero-media {
        background-position: 66% center;
    }

    /* Hero 3 - Mejores conversaciones. Mejores equipos. */
    .hero-slide:nth-of-type(4) .hero-media {
        background-position: 72% center;
    }

}


/* Pantallas muy angostas */
@media (max-width: 420px) {

    .hero-slide:nth-of-type(1) .hero-media {
        background-position: 52% center;
    }

    .hero-slide:nth-of-type(2) .hero-media {
        background-position: 70% center;
    }

    .hero-slide:nth-of-type(3) .hero-media {
        background-position: 68% center;
    }

    .hero-slide:nth-of-type(4) .hero-media {
        background-position: 75% center;
    }

}


/* =========================================================
   HERO 0 MÓVIL - IMAGEN COMPLETA SIN RECORTE
========================================================= */

.hero0-mobile-image {
    display: none;
}

@media (max-width: 620px) {

    /*
       En hero0 dejamos de usar la foto como background en móvil.
       La mostramos como <img> completa para que no se pierda
       ninguna parte de Ale, la estatua ni el paisaje.
    */
    .hero-slide-program {
        background: var(--olive-deep, #4B4F35);
    }

    .hero-slide-program .hero-media {
        display: none;
    }

    .hero-slide-program .hero0-mobile-image {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        z-index: 1;
    }

    /*
       Degradado elegante entre la imagen completa y el bloque
       de contenido para que no parezca una imagen "pegada".
    */
    .hero-slide-program::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(75,79,53,0) 0%,
                rgba(75,79,53,.04) 22%,
                rgba(75,79,53,.88) 42%,
                rgba(75,79,53,.98) 64%,
                rgba(75,79,53,1) 100%
            );
    }

    .hero-slide-program .hero-content {
        position: relative;
        z-index: 3;
        height: 100%;
        align-items: flex-start;
        justify-content: center;
        padding-top: clamp(245px, 61vw, 285px);
        padding-bottom: 82px;
    }

    .hero-slide-program .hero-copy-program {
        width: 100%;
        padding: 0 16px;
        text-align: left;
    }

    .hero-slide-program .hero-copy-program .hero-kicker {
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    .hero-slide-program .hero-copy-program .hero-kicker::after {
        display: none;
    }

    .hero-slide-program .hero-copy-program h1 {
        max-width: 100%;
        margin: 0;
        font-size: clamp(38px, 10.3vw, 53px);
        line-height: .98;
        text-align: left;
    }

    .hero-slide-program .hero-copy-program .hero-lead {
        max-width: 100%;
        margin: 22px 0 0;
        font-size: 22px;
        line-height: 1.3;
        text-align: left;
    }

    .hero-slide-program .hero-copy-program .hero-actions {
        justify-content: flex-start;
        margin-top: 30px;
    }

    .hero-slide-program .btn-hero-program {
        width: 100%;
        min-height: 54px;
    }
}

@media (max-width: 420px) {

    .hero-slide-program .hero-content {
        padding-top: clamp(225px, 60vw, 255px);
    }

    .hero-slide-program .hero-copy-program h1 {
        font-size: clamp(35px, 10vw, 46px);
    }

    .hero-slide-program .hero-copy-program .hero-lead {
        font-size: 20px;
    }
}


/* =========================================================
   TODOS LOS HERO EN MÓVIL - IMAGEN COMPLETA SIN RECORTE
========================================================= */

.hero-mobile-image {
    display: none;
}

@media (max-width: 620px) {

    /* Ningún hero usa background-image en móvil */
    .hero-slide .hero-media {
        display: none !important;
    }

    .hero-slide {
        background: var(--olive-deep, #4B4F35);
    }

    /* Imagen real: se muestra completa, sin crop */
    .hero-slide .hero-mobile-image {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center top;
        z-index: 1;
    }

    /* Overlay para que el texto tenga lectura y continuidad */
    .hero-slide::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(75,79,53,0) 0%,
                rgba(75,79,53,.06) 22%,
                rgba(75,79,53,.56) 42%,
                rgba(75,79,53,.90) 60%,
                rgba(75,79,53,.98) 78%,
                rgba(75,79,53,1) 100%
            );
    }

    /* Hero claro: overlay marfil para conservar identidad */
    .hero-slide:nth-of-type(3)::after {
        background:
            linear-gradient(
                180deg,
                rgba(244,241,231,0) 0%,
                rgba(244,241,231,.10) 22%,
                rgba(244,241,231,.68) 44%,
                rgba(244,241,231,.94) 64%,
                rgba(244,241,231,.99) 100%
            );
    }

    .hero-slide .hero-content {
        position: relative;
        z-index: 3;
        height: 100%;
        align-items: flex-start;
        padding-top: clamp(245px, 62vw, 300px);
        padding-bottom: 84px;
    }

    .hero-slide .hero-copy,
    .hero-slide .hero-copy-program {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        text-align: left;
    }

    .hero-slide .hero-kicker,
    .hero-slide .hero-copy-program .hero-kicker {
        justify-content: flex-start;
    }

    .hero-slide .hero-copy-program .hero-kicker::after {
        display: none;
    }

    .hero-slide .hero-actions,
    .hero-slide .hero-copy-program .hero-actions {
        justify-content: flex-start;
    }

    .hero-slide .hero-actions .btn,
    .hero-slide .btn-hero-program {
        width: 100%;
    }

    /* Hero claro */
    .hero-slide:nth-of-type(3) .hero-copy,
    .hero-slide:nth-of-type(3) .hero-copy h2,
    .hero-slide:nth-of-type(3) .hero-copy .hero-kicker,
    .hero-slide:nth-of-type(3) .hero-copy .hero-text {
        color: var(--olive-deep, #4B4F35);
    }

    /* Ajustes por relación de aspecto de cada foto */
    .hero-slide:nth-of-type(1) .hero-content {
        padding-top: clamp(245px, 61vw, 290px);
    }

    .hero-slide:nth-of-type(2) .hero-content {
        padding-top: clamp(250px, 66vw, 320px);
    }

    .hero-slide:nth-of-type(3) .hero-content {
        padding-top: clamp(250px, 66vw, 320px);
    }

    .hero-slide:nth-of-type(4) .hero-content {
        padding-top: clamp(250px, 66vw, 320px);
    }

    /* Mantiene el slider alto para que quepan imagen + contenido */
    .hero-slider {
        min-height: 760px;
        height: 760px;
    }
}

@media (max-width: 420px) {

    .hero-slider {
        min-height: 730px;
        height: 730px;
    }

    .hero-slide .hero-content {
        padding-top: clamp(225px, 61vw, 265px);
        padding-bottom: 74px;
    }

    .hero-slide:nth-of-type(2) .hero-content,
    .hero-slide:nth-of-type(3) .hero-content,
    .hero-slide:nth-of-type(4) .hero-content {
        padding-top: clamp(230px, 64vw, 280px);
    }
}