.herida-abandono-hero {
    position: relative;

    background-image:
        url("../../img/herida-abandono-fondo.jpg");

    background-size: cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    color: #ffffff;

    min-height: 70vh;

    display: flex;
    align-items: center;

    padding: 60px 0;

    overflow: hidden;
}


/* Película oscura para mantener el texto perfectamente legible */
.herida-abandono-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(15, 23, 42, .88) 0%,
            rgba(15, 23, 42, .76) 38%,
            rgba(15, 23, 42, .48) 68%,
            rgba(15, 23, 42, .38) 100%
        );

    z-index: 1;
}


/* Contenido por encima de la película */
.herida-abandono-hero > .container {
    position: relative;
    z-index: 2;
}


.herida-abandono-hero h1,
.herida-abandono-hero p {
    color: #ffffff !important;
}


.herida-abandono-hero .text-white-50 {
    color:
        rgba(
            255,
            255,
            255,
            .82
        ) !important;
}


/* Etiqueta superior */
.herida-abandono-hero .badge {
    color: #172033 !important;

    background:
        rgba(
            255,
            255,
            255,
            .88
        ) !important;

    backdrop-filter:
        blur(4px);
}


/* Caja Idea central */
.herida-abandono-hero .p-md-4 {
    background:
        rgba(
            15,
            23,
            42,
            .82
        ) !important;

    border-left:
        4px solid #f9a8d4 !important;

    backdrop-filter:
        blur(4px);
}


/* Escritorio */
@media (min-width: 1200px) {

    .herida-abandono-hero {
        min-height: 70vh;

        background-position:
            center center;
    }

    .herida-abandono-hero
    .col-lg-7 {
        max-width: 720px;
    }
}


/* Tablet */
@media (max-width: 991.98px) {

    .herida-abandono-hero {
        min-height: 60vh;

        padding:
            45px 0;

        background-position:
            center center;
    }

    .herida-abandono-hero::before {
        background:
            rgba(
                15,
                23,
                42,
                .66
            );
    }

    .herida-abandono-hero h1 {
        font-size:
            clamp(
                2rem,
                6vw,
                3rem
            ) !important;
    }
}


/* Móvil */
@media (max-width: 575.98px) {

    .herida-abandono-hero {
        min-height: 560px;

        padding:
            38px 0;

        /*
         * Este encuadre mantiene visibles
         * al niño y al oso.
         */
        background-position:
            55% center;
    }

    .herida-abandono-hero::before {
        background:
            rgba(
                15,
                23,
                42,
                .69
            );
    }

    .herida-abandono-hero h1 {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.5rem
            ) !important;

        line-height:
            1.08;
    }

    .herida-abandono-hero p {
        font-size:
            .98rem;
    }
}


/* Pantallas muy pequeñas */
@media (max-width: 359.98px) {

    .herida-abandono-hero {
        min-height: 540px;

        background-position:
            55% center;
    }
}