/* ==========================================================
   PET WELLNESS 360
   Petandim — Sección 04
   Respaldo científico, confianza total
   ========================================================== */

.pw-petandim-science{

    position:relative;

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

    background:#F7FAF5;

    overflow:hidden;
}


/* ======================================================
   CONTAINER
   ====================================================== */

.pw-petandim-science__container{

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

    margin-inline:auto;

    display:grid;

    grid-template-columns:
       minmax(0,1.1fr)
       minmax(300px,.9fr);

    align-items:center;

    gap:clamp(2.5rem,6vw,6rem);
}


/* ======================================================
   CONTENT
   ====================================================== */

.pw-petandim-science__content{

    max-width:720px;
}


.pw-petandim-science__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-science__title{

    margin:0;

    color:var(--pw-navy);

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

    font-size:
            clamp(
                    2.2rem,
                    4vw,
                    3.7rem
            );

    font-weight:800;

    line-height:1.06;

    letter-spacing:-.035em;
}


.pw-petandim-science__title strong{

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


.pw-petandim-science__lead{

    max-width:650px;

    margin:1.35rem 0 0;

    color:var(--pw-text);

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

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

    line-height:1.7;
}


/* ======================================================
   ITEMS
   ====================================================== */

.pw-petandim-science__items{

    display:grid;

    grid-template-columns:1fr;

    gap:1rem;

    margin-top:2.25rem;
}


.pw-petandim-science__item{

    display:grid;

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

    align-items:center;

    gap:1.15rem;

    padding:1.15rem 1.25rem;

    border:
            1px solid
            #E2E9E0;

    border-radius:18px;

    background:var(--pw-white);

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


.pw-petandim-science__item-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#EAF4E4;

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


.pw-petandim-science__item-icon svg{

    width:25px;

    height:25px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.pw-petandim-science__item h3{

    margin:0;

    color:var(--pw-navy);

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

    font-size:1rem;

    font-weight:800;

    line-height:1.3;
}


.pw-petandim-science__item p{

    margin:.3rem 0 0;

    color:var(--pw-text);

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

    font-size:.84rem;

    line-height:1.5;
}


/* ======================================================
   VISUAL / IMAGE
   ====================================================== */

.pw-petandim-science__visual{

    position:relative;

    min-height:560px;

    overflow:hidden;

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

    background:#E8EFE5;

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


.pw-petandim-science__image{

    display:block;

    width:100%;

    height:100%;

    min-height:560px;

    object-fit:cover;

    object-position:center center;

    transform:scale(1.01);

    transition:
            transform .6s ease;
}


.pw-petandim-science__visual:hover
.pw-petandim-science__image{

    transform:scale(1.035);
}


/* ======================================================
   IMAGE OVERLAY
   ====================================================== */

.pw-petandim-science__visual::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
            linear-gradient(
                    180deg,
                    rgba(13,44,84,0) 48%,
                    rgba(13,44,84,.08) 62%,
                    rgba(13,44,84,.72) 100%
            );
}


.pw-petandim-science__visual-overlay{

    position:absolute;

    z-index:2;

    right:0;

    bottom:0;

    left:0;

    padding:
            5rem
            2rem
            2rem;
}


.pw-petandim-science__visual-mark{

    display:inline-flex;

    align-items:center;

    min-height:36px;

    padding:
            .45rem
            .9rem;

    border:
            1px solid
            rgba(255,255,255,.4);

    border-radius:999px;

    background:
            rgba(13,44,84,.72);

    backdrop-filter:blur(8px);

    color:var(--pw-white);

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

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.03em;
}


.pw-petandim-science__visual-text{

    margin:.8rem 0 0;

    color:var(--pw-white);

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

    font-size:
            clamp(
                    1.05rem,
                    1.7vw,
                    1.35rem
            );

    font-weight:600;

    line-height:1.4;

    text-shadow:
            0 2px 12px rgba(0,0,0,.2);
}


.pw-petandim-science__visual-text strong{

    font-weight:800;
}


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

@media (max-width:900px){

    .pw-petandim-science{

        padding:
                4.5rem 0
                4rem;
    }


    .pw-petandim-science__container{

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

        grid-template-columns:1fr;

        gap:2rem;
    }


    .pw-petandim-science__content{

        max-width:none;
    }


    .pw-petandim-science__visual{

        min-height:500px;

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


    .pw-petandim-science__image{

        min-height:500px;
    }

}


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

@media (max-width:600px){

    .pw-petandim-science{

        padding:
                3.5rem 0
                3rem;
    }


    .pw-petandim-science__container{

        width:calc(100% - 24px);

        gap:1.5rem;
    }


    .pw-petandim-science__eyebrow{

        font-size:.68rem;
    }


    .pw-petandim-science__title{

        font-size:
                clamp(
                        1.9rem,
                        9vw,
                        2.4rem
                );
    }


    .pw-petandim-science__lead{

        margin-top:1rem;

        font-size:.9rem;

        line-height:1.6;
    }


    .pw-petandim-science__items{

        margin-top:1.75rem;

        gap:.75rem;
    }


    .pw-petandim-science__item{

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

        align-items:start;

        gap:.85rem;

        padding:1rem;

        border-radius:16px;
    }


    .pw-petandim-science__item-icon{

        width:46px;

        height:46px;
    }


    .pw-petandim-science__item-icon svg{

        width:22px;

        height:22px;
    }


    .pw-petandim-science__item h3{

        font-size:.9rem;

        line-height:1.25;
    }


    .pw-petandim-science__item p{

        font-size:.76rem;

        line-height:1.5;
    }


    .pw-petandim-science__visual{

        min-height:380px;

        border-radius:
                22px
                22px
                22px
                52px;
    }


    .pw-petandim-science__image{

        min-height:380px;
    }


    .pw-petandim-science__visual-overlay{

        padding:
                4rem
                1.25rem
                1.25rem;
    }


    .pw-petandim-science__visual-mark{

        min-height:32px;

        padding:
                .4rem
                .75rem;

        font-size:.7rem;
    }


    .pw-petandim-science__visual-text{

        margin-top:.65rem;

        font-size:.9rem;
    }

}