.pw-prevision-hero{
    overflow:hidden;
    padding:clamp(6rem,9vw,8rem) 0 clamp(4rem,7vw,6rem);
    background:
            radial-gradient(
                    circle at 78% 34%,
                    rgba(168,208,141,.20),
                    transparent 24rem
            ),
            linear-gradient(
                    180deg,
                    #fff 0%,
                    #f7f8f8 100%
            );
}

.pw-prevision-hero__container{
    width:min(calc(100% - 32px),var(--pw-container));
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
    gap:clamp(2rem,5vw,5rem);
    align-items:center;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.pw-prevision-hero__content{
    position:relative;
    z-index:2;
    max-width:720px;
}

.pw-prevision-hero__eyebrow{
    margin:0 0 1rem;
    color:var(--pw-green);
    font-family:var(--pw-font-heading);
    font-size:.70rem;
    font-weight:800;
    letter-spacing:.14em;
}

.pw-prevision-hero__title{
    max-width:700px;
    margin:0;
    color:var(--pw-navy);
    font-family:var(--pw-font-heading);
    font-size:clamp(2.55rem,4.25vw,4.65rem);
    font-weight:800;
    line-height:1.04;
    letter-spacing:-.025em;
}

.pw-prevision-hero__title strong{
    display:block;
    margin-top:.08em;
    color:var(--pw-green);
}

.pw-prevision-hero__text{
    max-width:620px;
    margin:1.35rem 0 0;
    color:var(--pw-text);
    font-family:var(--pw-font-body);
    font-size:1rem;
    line-height:1.7;
}

.pw-prevision-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:1.7rem;
}

.pw-prevision-hero__note{
    display:flex;
    align-items:center;
    gap:.7rem;
    margin-top:1.6rem;
    color:var(--pw-navy);
    font-size:.82rem;
    font-weight:600;
}

.pw-prevision-hero__note-icon{
    display:grid;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(76,175,80,.12);
    color:var(--pw-green);
    font-size:1.15rem;
}


/* =========================================================
   MEDIA
   ========================================================= */

.pw-prevision-hero__media{
    position:relative;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}

/*
 * Halo ambiental.
 *
 * No crea una tarjeta ni una figura visible.
 * Sólo aporta profundidad detrás de la fotografía.
 */
.pw-prevision-hero__media::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:92%;
    height:82%;
    top:9%;
    right:-2%;
    border-radius:50%;
    background:
            radial-gradient(
                    ellipse at center,
                    rgba(168,208,141,.32) 0%,
                    rgba(168,208,141,.16) 38%,
                    rgba(168,208,141,0) 72%
            );
    filter:blur(12px);
    pointer-events:none;
}


/*
 * FOTOGRAFÍA
 *
 * La máscara elimina el aspecto rectangular.
 *
 * Izquierda:
 *   la imagen desaparece progresivamente hacia el fondo.
 *
 * Arriba / abajo:
 *   también existe una transición suave.
 */
.pw-prevision-hero__image{
    position:relative;
    z-index:1;
    display:block;

    width:118%;
    max-width:none;
    height:500px;

    object-fit:cover;
    object-position:center center;

    border:0;
    outline:0;
    box-shadow:none;

    transform:translateX(5%);

    filter:saturate(.96) contrast(.98);

    /*
     * Fundido orgánico.
     */
    -webkit-mask-image:
            linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(0,0,0,.08) 7%,
                    rgba(0,0,0,.45) 16%,
                    #000 28%,
                    #000 100%
            ),
            linear-gradient(
                    180deg,
                    transparent 0%,
                    rgba(0,0,0,.45) 10%,
                    #000 19%,
                    #000 82%,
                    rgba(0,0,0,.45) 92%,
                    transparent 100%
            );

    mask-image:
            linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(0,0,0,.08) 7%,
                    rgba(0,0,0,.45) 16%,
                    #000 28%,
                    #000 100%
            ),
            linear-gradient(
                    180deg,
                    transparent 0%,
                    rgba(0,0,0,.45) 10%,
                    #000 19%,
                    #000 82%,
                    rgba(0,0,0,.45) 92%,
                    transparent 100%
            );

    /*
     * Intersección de las dos máscaras:
     * izquierda + arriba + abajo.
     */
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .pw-prevision-hero{
        padding-top:6rem;
    }

    .pw-prevision-hero__container{
        grid-template-columns:1fr;
        gap:2.5rem;
    }

    .pw-prevision-hero__content{
        max-width:720px;
    }

    .pw-prevision-hero__media{
        min-height:430px;
        max-width:680px;
        width:100%;
        margin-inline:auto;
    }

    .pw-prevision-hero__image{
        width:112%;
        height:430px;
        transform:translateX(4%);
    }

    .pw-prevision-hero__media::before{
        width:85%;
        height:80%;
        right:4%;
        top:10%;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media(max-width:560px){

    .pw-prevision-hero{
        padding-top:5.5rem;
        padding-bottom:4rem;
    }

    .pw-prevision-hero__container{
        width:min(calc(100% - 28px),var(--pw-container));
        gap:1.8rem;
    }

    .pw-prevision-hero__title{
        font-size:clamp(2.35rem,10vw,3.15rem);
        line-height:1.04;
        letter-spacing:-.02em;
    }

    .pw-prevision-hero__text{
        font-size:.96rem;
        line-height:1.65;
    }

    .pw-prevision-hero__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .pw-prevision-hero__note{
        align-items:flex-start;
        font-size:.78rem;
    }

    .pw-prevision-hero__media{
        min-height:340px;
        margin-top:.2rem;
    }

    .pw-prevision-hero__image{
        width:116%;
        height:340px;
        transform:translateX(4%);
    }

    .pw-prevision-hero__media::before{
        width:92%;
        height:82%;
        right:3%;
        top:9%;
    }
}