/* ==========================================================
   SEGUROS — HERO
   ========================================================== */

.pw-insurance-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(6rem,10vw,8.5rem) 0 clamp(4.5rem,8vw,7rem);
    background:
            radial-gradient(
                    circle at 78% 35%,
                    rgba(168,208,141,.20),
                    transparent 25rem
            ),
            linear-gradient(
                    180deg,
                    #F8FAF7 0%,
                    #FFFFFF 68%,
                    #F7F9F7 100%
            );
}

.pw-insurance-hero__container{
    width:min(calc(100% - 32px),var(--pw-container));
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
    align-items:center;
    gap:clamp(2rem,6vw,6rem);
}

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

.pw-insurance-hero__eyebrow{
    margin:0 0 1rem;
    color:var(--pw-green);
    font-family:var(--pw-font-heading);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.pw-insurance-hero__title{
    max-width:720px;
    margin:0;
    color:var(--pw-navy);
    font-family:var(--pw-font-heading);
    font-size:clamp(2.7rem,4.7vw,5rem);
    font-weight:800;
    line-height:1.03;
    letter-spacing:-.035em;
}

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

.pw-insurance-hero__lead{
    max-width:620px;
    margin:1.45rem 0 0;
    color:var(--pw-text);
    font-size:clamp(1rem,1.4vw,1.12rem);
    line-height:1.72;
}

.pw-insurance-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.75rem;
}

.pw-insurance-hero__trust{
    display:flex;
    flex-wrap:wrap;
    gap:1rem 1.5rem;
    margin-top:2rem;
}

.pw-insurance-hero__trust-item{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:var(--pw-navy);
    font-family:var(--pw-font-heading);
    font-size:.8rem;
    font-weight:700;
}

.pw-insurance-hero__trust-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#EDF6E9;
    color:var(--pw-green);
}

.pw-insurance-hero__trust-icon svg{
    width:16px;
    height:16px;
}


/* ==========================================================
   FOTOGRAFÍA
   ========================================================== */

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

.pw-insurance-hero__image-wrap{
    position:relative;
    width:min(100%,620px);
    height:clamp(360px,42vw,510px);
}

.pw-insurance-hero__image-wrap::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:7% -5% 5% 5%;
    border-radius:50%;
    background:
            radial-gradient(
                    ellipse at center,
                    rgba(168,208,141,.28) 0%,
                    rgba(168,208,141,.10) 45%,
                    transparent 74%
            );
    filter:blur(16px);
}

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

    /*
     * Fundido suave hacia el contenido.
     */
    -webkit-mask-image:
            linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(0,0,0,.35) 8%,
                    rgba(0,0,0,.85) 19%,
                    #000 30%,
                    #000 100%
            );

    mask-image:
            linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(0,0,0,.35) 8%,
                    rgba(0,0,0,.85) 19%,
                    #000 30%,
                    #000 100%
            );
}


/*
 * Mensaje flotante.
 *
 * No funciona como una tarjeta principal.
 * Es solamente un pequeño punto de apoyo visual.
 */
.pw-insurance-hero__visual-message{
    position:absolute;
    right:-1%;
    bottom:8%;
    z-index:3;
    display:flex;
    align-items:center;
    gap:.75rem;
    max-width:300px;
    padding:.9rem 1rem;
    border:1px solid rgba(13,44,84,.07);
    border-radius:18px;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(12px);
    box-shadow:0 16px 38px rgba(13,44,84,.10);
}

.pw-insurance-hero__visual-icon{
    display:grid;
    place-items:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#EDF6E9;
    color:var(--pw-green);
}

.pw-insurance-hero__visual-icon svg{
    width:21px;
    height:21px;
}

.pw-insurance-hero__visual-message span{
    display:block;
    color:var(--pw-text);
    font-size:.72rem;
    line-height:1.3;
}

.pw-insurance-hero__visual-message strong{
    display:block;
    margin-top:.15rem;
    color:var(--pw-navy);
    font-family:var(--pw-font-heading);
    font-size:.82rem;
    font-weight:800;
    line-height:1.3;
}


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

@media (max-width:900px){

    .pw-insurance-hero{
        padding-top:5.5rem;
    }

    .pw-insurance-hero__container{
        grid-template-columns:1fr;
        width:min(calc(100% - 32px),760px);
        gap:2.5rem;
    }

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

    .pw-insurance-hero__visual{
        min-height:420px;
    }

    .pw-insurance-hero__image-wrap{
        width:min(100%,620px);
        height:420px;
    }

    .pw-insurance-hero__visual-message{
        right:3%;
    }
}


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

@media (max-width:600px){

    .pw-insurance-hero{
        padding:4.5rem 0;
    }

    .pw-insurance-hero__container{
        width:calc(100% - 24px);
        gap:2rem;
    }

    .pw-insurance-hero__title{
        font-size:clamp(2.45rem,10vw,3.35rem);
        line-height:1.04;
    }

    .pw-insurance-hero__lead{
        font-size:.94rem;
    }

    .pw-insurance-hero__trust{
        gap:.7rem 1rem;
    }

    .pw-insurance-hero__visual{
        min-height:330px;
    }

    .pw-insurance-hero__image-wrap{
        width:calc(100% + 30px);
        height:330px;
        margin-left:-15px;
    }

    .pw-insurance-hero__visual-message{
        right:0;
        bottom:3%;
        max-width:255px;
        padding:.75rem .85rem;
    }

    .pw-insurance-hero__visual-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .pw-insurance-hero__visual-icon svg{
        width:18px;
        height:18px;
    }
}