/* ==========================================================
   SEGUROS — BLOQUE EMOCIONAL
   ========================================================== */

.pw-insurance-emotional{
    position:relative;
    overflow:hidden;
    padding:clamp(4.5rem,9vw,8rem) 0;
    background:
            linear-gradient(
                    145deg,
                    #EFF6EA 0%,
                    #FFFFFF 55%,
                    #F1F5EF 100%
            );
}

.pw-insurance-emotional::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-260px;
    top:-220px;
    border-radius:50%;
    background:rgba(168,208,141,.28);
}

.pw-insurance-emotional__container{
    position:relative;
    z-index:1;
    width:min(calc(100% - 32px),var(--pw-container));
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);
    align-items:center;
    gap:clamp(3rem,7vw,7rem);
    text-align:left;
}


/* ==========================================================
   IMAGEN
   ========================================================== */

.pw-insurance-emotional__visual{
    position:relative;
    height:430px;
    isolation:isolate;
}

.pw-insurance-emotional__visual::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:10% -5% 5% 5%;
    border-radius:50%;
    background:
            radial-gradient(
                    ellipse at center,
                    rgba(168,208,141,.22),
                    transparent 72%
            );
    filter:blur(18px);
}

.pw-insurance-emotional__image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    border:0;
    box-shadow:none;
    filter:saturate(.92);

    -webkit-mask-image:
            linear-gradient(
                    90deg,
                    #000 0%,
                    #000 72%,
                    rgba(0,0,0,.75) 84%,
                    rgba(0,0,0,.20) 96%,
                    transparent 100%
            );

    mask-image:
            linear-gradient(
                    90deg,
                    #000 0%,
                    #000 72%,
                    rgba(0,0,0,.75) 84%,
                    rgba(0,0,0,.20) 96%,
                    transparent 100%
            );
}


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

.pw-insurance-emotional__content{
    max-width:760px;
}

.pw-insurance-emotional__icon{
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    margin:0 0 1.25rem;
    border-radius:50%;
    background:var(--pw-green);
    color:var(--pw-white);
}

.pw-insurance-emotional__icon svg{
    width:30px;
    height:30px;
}

.pw-insurance-emotional__title{
    margin:0;
    color:var(--pw-navy);
    font-family:var(--pw-font-heading);
    font-size:clamp(2.3rem,4.5vw,4.2rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.035em;
}

.pw-insurance-emotional__title span{
    display:block;
    color:var(--pw-green);
}

.pw-insurance-emotional__text{
    max-width:720px;
    margin:1.5rem 0 0;
    color:var(--pw-text);
    font-size:clamp(1rem,1.5vw,1.12rem);
    line-height:1.8;
}

.pw-insurance-emotional__signature{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    margin-top:2rem;
}

.pw-insurance-emotional__signature strong{
    color:var(--pw-navy);
    font-family:var(--pw-font-heading);
    font-size:1rem;
    font-weight:800;
}

.pw-insurance-emotional__signature span{
    color:var(--pw-text);
    font-size:.88rem;
}


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

@media (max-width:850px){

    .pw-insurance-emotional__container{
        grid-template-columns:1fr;
        gap:2.5rem;
    }

    .pw-insurance-emotional__visual{
        height:360px;
        max-width:650px;
        width:100%;
        margin-inline:auto;
    }
}


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

@media (max-width:600px){

    .pw-insurance-emotional{
        padding:3.75rem 0;
    }

    .pw-insurance-emotional__container{
        width:calc(100% - 24px);
    }

    .pw-insurance-emotional__visual{
        height:280px;
    }

    .pw-insurance-emotional__title{
        font-size:clamp(2.25rem,10vw,3.1rem);
    }

    .pw-insurance-emotional__text{
        font-size:.94rem;
        line-height:1.7;
    }
}