/* ==========================================================
   PET WELLNESS 360
   Petandim — Sección 02
   La necesidad
   ========================================================== */


/* ======================================================
   NEED
   ====================================================== */

.pw-petandim-need{

    position:relative;

    padding:
            clamp(4rem,7vw,6.5rem)
            0;

    background:var(--pw-white);

    overflow:hidden;
}


.pw-petandim-need__container{

    width:min(
            calc(100% - 32px),
            var(--pw-container)
    );

    margin-inline:auto;
}


/* ======================================================
   NEED — INTRO
   ====================================================== */

.pw-petandim-need__intro{

    max-width:780px;

    margin:0 auto 3.5rem;

    text-align:center;
}


.pw-petandim-need__eyebrow{

    display:inline-block;

    margin:0 0 .8rem;

    color:var(--pw-green);

    font-family:var(--pw-font-heading);

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.pw-petandim-need__title{

    margin:0;

    color:var(--pw-navy);

    font-family:var(--pw-font-heading);

    font-size:
            clamp(
                    2rem,
                    4vw,
                    3.4rem
            );

    font-weight:800;

    line-height:1.08;

    letter-spacing:-.035em;
}


.pw-petandim-need__title strong{

    color:var(--pw-green);
}


.pw-petandim-need__lead{

    max-width:690px;

    margin:1.25rem auto 0;

    color:var(--pw-text);

    font-family:var(--pw-font-body);

    font-size:
            clamp(
                    1rem,
                    1.4vw,
                    1.12rem
            );

    line-height:1.7;
}


/* ======================================================
   NEED — MESSAGE
   ====================================================== */

.pw-petandim-need__message{

    display:grid;

    grid-template-columns:
            minmax(300px,.82fr)
            minmax(0,1.18fr);

    gap:clamp(2rem,5vw,5rem);

    align-items:stretch;
}


/* ======================================================
   NEED — IMAGE
   ====================================================== */

.pw-petandim-need__media{

    position:relative;

    min-height:100%;

    overflow:hidden;

    border-radius:
            28px
            28px
            28px
            72px;

    background:#F2F4F1;

    box-shadow:
            0 20px 50px rgba(13,44,84,.10);
}


.pw-petandim-need__media::after{

    content:"";

    position:absolute;

    inset:0;

    background:
            linear-gradient(
                    180deg,
                    rgba(13,44,84,0) 52%,
                    rgba(13,44,84,.12) 100%
            );

    pointer-events:none;
}


.pw-petandim-need__image{

    display:block;

    width:100%;

    height:100%;

    min-height:560px;

    object-fit:cover;

    object-position:center center;

    transform:scale(1.01);

    transition:
            transform .5s ease;
}


.pw-petandim-need__media:hover .pw-petandim-need__image{

    transform:scale(1.035);
}


/* ======================================================
   NEED — DETAILS
   ====================================================== */

.pw-petandim-need__details{

    display:flex;

    flex-direction:column;

    gap:1rem;
}


/* ======================================================
   NEED — STATEMENT
   ====================================================== */

.pw-petandim-need__statement{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:330px;

    padding:
            clamp(2rem,3.5vw,3rem);

    border-radius:28px;

    background:
            linear-gradient(
                    145deg,
                    var(--pw-navy) 0%,
                    #174C86 100%
            );

    overflow:hidden;

    box-shadow:
            0 20px 50px rgba(13,44,84,.12);
}


.pw-petandim-need__statement::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-110px;

    top:-100px;

    border-radius:50%;

    background:
            rgba(168,208,141,.14);
}


.pw-petandim-need__statement::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:-110px;

    bottom:-120px;

    border-radius:50%;

    background:
            rgba(76,175,80,.16);
}


.pw-petandim-need__statement-icon{

    position:relative;

    z-index:1;

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    margin-bottom:1.35rem;

    border-radius:50%;

    background:var(--pw-green);

    color:var(--pw-white);
}


.pw-petandim-need__statement-icon svg{

    width:27px;

    height:27px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.pw-petandim-need__statement-title{

    position:relative;

    z-index:1;

    max-width:520px;

    margin:0;

    color:var(--pw-white);

    font-family:var(--pw-font-heading);

    font-size:
            clamp(
                    1.7rem,
                    2.6vw,
                    2.35rem
            );

    font-weight:800;

    line-height:1.1;

    letter-spacing:-.025em;
}


.pw-petandim-need__statement-text{

    position:relative;

    z-index:1;

    max-width:560px;

    margin:1rem 0 0;

    color:rgba(255,255,255,.88);

    font-family:var(--pw-font-body);

    font-size:.92rem;

    line-height:1.65;
}


/* ======================================================
   NEED — PILLARS
   ====================================================== */

.pw-petandim-need__pillars{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:.75rem;

    flex:1;
}


.pw-petandim-need__pillar{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:.75rem;

    padding:
            1.25rem
            1.15rem;

    border:1px solid #E5EAF0;

    border-radius:20px;

    background:#FFFFFF;

    box-shadow:
            0 8px 24px rgba(13,44,84,.045);
}


.pw-petandim-need__pillar-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    flex:0 0 48px;

    border-radius:50%;

    background:#F0F7EA;

    color:var(--pw-green);
}


.pw-petandim-need__pillar-icon svg{

    width:23px;

    height:23px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.pw-petandim-need__pillar-title{

    margin:0;

    color:var(--pw-navy);

    font-family:var(--pw-font-heading);

    font-size:.95rem;

    font-weight:800;

    line-height:1.25;
}


.pw-petandim-need__pillar-text{

    margin:.35rem 0 0;

    color:var(--pw-text);

    font-family:var(--pw-font-body);

    font-size:.78rem;

    line-height:1.5;
}


/* ======================================================
   NEED — CLOSING
   ====================================================== */

.pw-petandim-need__closing{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.65rem;

    margin:2.75rem auto 0;

    color:var(--pw-navy);

    font-family:var(--pw-font-heading);

    font-size:.9rem;

    font-weight:700;

    text-align:center;
}


.pw-petandim-need__closing-mark{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#F0F7EA;

    color:var(--pw-green);

    flex:0 0 34px;
}


.pw-petandim-need__closing-mark svg{

    width:17px;

    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}


/* ======================================================
   RESPONSIVE — TABLET
   ====================================================== */

@media (max-width:1100px){

    .pw-petandim-need__message{

        grid-template-columns:
                minmax(260px,.75fr)
                minmax(0,1.25fr);

        gap:2rem;
    }


    .pw-petandim-need__pillars{

        grid-template-columns:1fr;
    }


    .pw-petandim-need__pillar{

        display:grid;

        grid-template-columns:52px minmax(0,1fr);

        align-items:center;

        gap:1rem;
    }
}


@media (max-width:900px){

    .pw-petandim-need{

        padding:
                4.5rem 0
                4rem;
    }


    .pw-petandim-need__container{

        width:min(
                calc(100% - 32px),
                760px
        );
    }


    .pw-petandim-need__intro{

        margin-bottom:2.75rem;
    }


    .pw-petandim-need__title{

        font-size:
                clamp(
                        2rem,
                        6vw,
                        3rem
                );
    }


    .pw-petandim-need__lead{

        font-size:1rem;

        line-height:1.65;
    }


    .pw-petandim-need__message{

        grid-template-columns:1fr;

        gap:1.5rem;
    }


    .pw-petandim-need__media{

        min-height:360px;

        max-height:460px;

        border-radius:
                24px
                24px
                24px
                56px;
    }


    .pw-petandim-need__image{

        min-height:360px;

        max-height:460px;
    }


    .pw-petandim-need__details{

        gap:1rem;
    }


    .pw-petandim-need__statement{

        min-height:auto;

        padding:2.5rem 2.25rem;
    }


    .pw-petandim-need__statement-title{

        max-width:620px;

        font-size:
                clamp(
                        1.9rem,
                        5vw,
                        2.5rem
                );
    }


    .pw-petandim-need__statement-text{

        max-width:620px;
    }


    .pw-petandim-need__pillars{

        grid-template-columns:repeat(3,1fr);

        gap:.85rem;
    }


    .pw-petandim-need__pillar{

        display:flex;

        padding:1.15rem;
    }


    .pw-petandim-need__closing{

        margin-top:2.5rem;
    }

}


/* ======================================================
   RESPONSIVE — MOBILE
   ====================================================== */

@media (max-width:600px){

    .pw-petandim-need{

        padding:
                3.5rem 0
                3rem;
    }


    .pw-petandim-need__container{

        width:calc(100% - 24px);
    }


    .pw-petandim-need__intro{

        margin-bottom:2.25rem;
    }


    .pw-petandim-need__eyebrow{

        margin-bottom:.65rem;

        font-size:.68rem;

        letter-spacing:.07em;
    }


    .pw-petandim-need__title{

        font-size:
                clamp(
                        1.85rem,
                        9vw,
                        2.35rem
                );

        line-height:1.08;

        letter-spacing:-.03em;
    }


    .pw-petandim-need__lead{

        margin-top:1rem;

        font-size:.9rem;

        line-height:1.6;
    }


    .pw-petandim-need__message{

        gap:1rem;
    }


    .pw-petandim-need__media{

        min-height:280px;

        max-height:340px;

        border-radius:
                20px
                20px
                20px
                44px;
    }


    .pw-petandim-need__image{

        min-height:280px;

        max-height:340px;

        object-position:center center;
    }


    .pw-petandim-need__statement{

        min-height:auto;

        padding:2rem 1.5rem;

        border-radius:22px;
    }


    .pw-petandim-need__statement-icon{

        width:52px;

        height:52px;

        margin-bottom:1.25rem;
    }


    .pw-petandim-need__statement-icon svg{

        width:25px;

        height:25px;
    }


    .pw-petandim-need__statement-title{

        font-size:
                clamp(
                        1.65rem,
                        8vw,
                        2.05rem
                );

        line-height:1.08;
    }


    .pw-petandim-need__statement-text{

        margin-top:1rem;

        font-size:.84rem;

        line-height:1.6;
    }


    .pw-petandim-need__pillars{

        grid-template-columns:1fr;

        gap:.75rem;
    }


    .pw-petandim-need__pillar{

        display:grid;

        grid-template-columns:46px minmax(0,1fr);

        align-items:start;

        gap:.85rem;

        padding:1rem;

        border-radius:16px;
    }


    .pw-petandim-need__pillar-icon{

        width:46px;

        height:46px;
    }


    .pw-petandim-need__pillar-icon svg{

        width:22px;

        height:22px;
    }


    .pw-petandim-need__pillar-title{

        font-size:.9rem;

        line-height:1.25;
    }


    .pw-petandim-need__pillar-text{

        margin-top:.3rem;

        font-size:.76rem;

        line-height:1.5;
    }


    .pw-petandim-need__closing{

        align-items:flex-start;

        gap:.5rem;

        margin-top:2rem;

        padding:0 .25rem;

        font-size:.76rem;

        line-height:1.45;
    }


    .pw-petandim-need__closing-mark{

        width:30px;

        height:30px;

        flex:0 0 30px;
    }


    .pw-petandim-need__closing-mark svg{

        width:15px;

        height:15px;
    }

}