/* ==========================================================
   PET WELLNESS 360
   Petandim — Sección 03
   Ingredientes que marcan la diferencia
   ========================================================== */


/* ======================================================
   SECTION
   ====================================================== */

.pw-petandim-ingredients{

    position:relative;

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

    background:
            linear-gradient(
                    180deg,
                    #F7FAF5 0%,
                    #FFFFFF 100%
            );

    overflow:hidden;
}


.pw-petandim-ingredients__container{

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

    margin-inline:auto;
}


/* ======================================================
   INTRO
   ====================================================== */

.pw-petandim-ingredients__intro{

    max-width:780px;

    margin:0 auto 3.5rem;

    text-align:center;
}


.pw-petandim-ingredients__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-ingredients__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-ingredients__title strong{

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


.pw-petandim-ingredients__lead{

    max-width:680px;

    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;
}


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

.pw-petandim-ingredients__content{

    display:grid;

    grid-template-columns:
            minmax(300px,.88fr)
            minmax(0,1.12fr);

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

    align-items:stretch;
}


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

.pw-petandim-ingredients__visual{

    position:relative;

    min-height:560px;

    overflow:hidden;

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

    background:#E8EEE5;

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

    isolation:isolate;
}


/*
 * Capa suave para que la imagen se integre con el
 * lenguaje visual de Pet Wellness 360.
 */

.pw-petandim-ingredients__visual::after{

    content:"";

    position:absolute;

    z-index:1;

    inset:0;

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

    pointer-events:none;
}


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

.pw-petandim-ingredients__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-ingredients__visual:hover
.pw-petandim-ingredients__image{

    transform:scale(1.035);
}


/* ======================================================
   VISUAL OVERLAY
   ====================================================== */

.pw-petandim-ingredients__visual-overlay{

    position:absolute;

    z-index:2;

    left:0;

    right:0;

    bottom:0px;

    padding:
            2rem
            clamp(1.5rem,4vw,3rem);

    background:
            linear-gradient(
                    180deg,
                    transparent 0%,
                    rgba(13,44,84,.78) 100%
            );
}


.pw-petandim-ingredients__visual-mark{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:34px;

    padding:.45rem .8rem;

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

    border-radius:999px;

    background:
            rgba(255,255,255,.10);

    color:var(--pw-white);

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

    font-size:.75rem;

    font-weight:800;

    letter-spacing:.04em;

    backdrop-filter:blur(8px);
}


.pw-petandim-ingredients__visual-text{

    max-width:420px;

    margin:.9rem 0 0;

    color:var(--pw-white);

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

    font-size:
            clamp(
                    1.65rem,
                    2.7vw,
                    2.35rem
            );

    font-weight:800;

    line-height:1.08;

    letter-spacing:-.025em;
}


/* ======================================================
   LIST
   ====================================================== */

.pw-petandim-ingredients__list{

    display:grid;

    grid-template-columns:1fr;

    gap:.9rem;
}


.pw-petandim-ingredients__item{

    display:grid;

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

    align-items:center;

    gap:1.15rem;

    padding:
            1.2rem
            1.35rem;

    border:
            1px solid
            #E5EAF0;

    border-radius:20px;

    background:#FFFFFF;

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

    transition:
            transform var(--pw-transition-fast),
            box-shadow var(--pw-transition-fast);
}


.pw-petandim-ingredients__item:hover{

    transform:translateY(-2px);

    box-shadow:
            0 14px 30px rgba(13,44,84,.08);
}


/* ======================================================
   ICON
   ====================================================== */

.pw-petandim-ingredients__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#F0F7EA;

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


.pw-petandim-ingredients__icon svg{

    width:27px;

    height:27px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;
}


/* ======================================================
   TEXT
   ====================================================== */

.pw-petandim-ingredients__item h3{

    margin:0;

    color:var(--pw-navy);

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

    font-size:1rem;

    font-weight:800;

    line-height:1.25;
}


.pw-petandim-ingredients__item p{

    margin:.35rem 0 0;

    color:var(--pw-text);

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

    font-size:.84rem;

    line-height:1.55;
}


/* ======================================================
   CLOSING
   ====================================================== */

.pw-petandim-ingredients__closing{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.65rem;

    margin:3rem auto 0;

    color:var(--pw-navy);

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

    font-size:.9rem;

    font-weight:700;

    text-align:center;
}


.pw-petandim-ingredients__closing-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    flex:0 0 34px;

    border-radius:50%;

    background:#F0F7EA;

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


.pw-petandim-ingredients__closing-icon svg{

    width:17px;

    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}


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

@media (max-width:900px){

    .pw-petandim-ingredients{

        padding:
                4.5rem 0
                4rem;
    }


    .pw-petandim-ingredients__container{

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


    .pw-petandim-ingredients__intro{

        margin-bottom:2.75rem;
    }


    .pw-petandim-ingredients__content{

        grid-template-columns:1fr;

        gap:1.5rem;
    }


    .pw-petandim-ingredients__visual{

        min-height:420px;

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


    .pw-petandim-ingredients__image{

        min-height:420px;
    }


    .pw-petandim-ingredients__visual-text{

        max-width:620px;
    }


    .pw-petandim-ingredients__list{

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

        gap:.85rem;
    }


    .pw-petandim-ingredients__item{

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

        align-items:start;

        gap:.85rem;

        padding:1.1rem;
    }


    .pw-petandim-ingredients__icon{

        width:48px;

        height:48px;
    }


    .pw-petandim-ingredients__icon svg{

        width:23px;

        height:23px;
    }

}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width:600px){

    .pw-petandim-ingredients{

        padding:
                3.5rem 0
                3rem;
    }


    .pw-petandim-ingredients__container{

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


    .pw-petandim-ingredients__intro{

        margin-bottom:2.25rem;
    }


    .pw-petandim-ingredients__eyebrow{

        font-size:.68rem;
    }


    .pw-petandim-ingredients__title{

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


    .pw-petandim-ingredients__lead{

        font-size:.9rem;

        line-height:1.6;
    }


    .pw-petandim-ingredients__content{

        gap:1rem;
    }


    .pw-petandim-ingredients__visual{

        min-height:330px;

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


    .pw-petandim-ingredients__image{

        min-height:330px;
    }


    .pw-petandim-ingredients__visual-overlay{

        padding:
                1.5rem
                1.25rem;
    }


    .pw-petandim-ingredients__visual-mark{

        min-height:30px;

        padding:.35rem .65rem;

        font-size:.68rem;
    }


    .pw-petandim-ingredients__visual-text{

        margin-top:.7rem;

        font-size:
                clamp(
                        1.45rem,
                        7.5vw,
                        1.9rem
                );
    }


    .pw-petandim-ingredients__list{

        grid-template-columns:1fr;

        gap:.75rem;
    }


    .pw-petandim-ingredients__item{

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

        align-items:start;

        gap:.85rem;

        padding:1rem;

        border-radius:16px;
    }


    .pw-petandim-ingredients__icon{

        width:46px;

        height:46px;
    }


    .pw-petandim-ingredients__icon svg{

        width:22px;

        height:22px;
    }


    .pw-petandim-ingredients__item h3{

        font-size:.9rem;

        line-height:1.25;
    }


    .pw-petandim-ingredients__item p{

        margin-top:.3rem;

        font-size:.76rem;

        line-height:1.5;
    }


    .pw-petandim-ingredients__closing{

        align-items:flex-start;

        margin-top:2rem;

        padding:0 .25rem;

        font-size:.76rem;

        line-height:1.45;
    }


    .pw-petandim-ingredients__closing-icon{

        width:30px;

        height:30px;

        flex:0 0 30px;
    }


    .pw-petandim-ingredients__closing-icon svg{

        width:15px;

        height:15px;
    }

}