/* ==========================================================
   PET WELLNESS 360
   Petandim — Sección 06
   Cierre
   ========================================================== */

.pw-petandim-closing{

    position:relative;

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

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

    overflow:hidden;
}


.pw-petandim-closing__container{

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

    margin-inline:auto;

    text-align:center;
}


/* ======================================================
   BRAND
   ====================================================== */

.pw-petandim-closing__brand{

    display:flex;

    justify-content:center;

    margin-bottom:1.5rem;
}


.pw-petandim-closing__logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.5rem;

    color:var(--pw-navy);

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


.pw-petandim-closing__logo-mark{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:78px;

    height:78px;

    border:3px solid var(--pw-navy);

    border-radius:50%;

    background:
            linear-gradient(
                    145deg,
                    #FFFFFF,
                    #EAF4E4
            );

    overflow:hidden;
}


.pw-petandim-closing__logo-mark::before{

    content:"";

    position:absolute;

    width:42px;

    height:55px;

    left:15px;

    top:9px;

    border-radius:
            60% 40% 55% 45%;

    background:var(--pw-navy);

    transform:rotate(-22deg);
}


.pw-petandim-closing__logo-mark::after{

    content:"";

    position:absolute;

    width:38px;

    height:50px;

    right:12px;

    bottom:8px;

    border-radius:
            45% 55% 45% 55%;

    background:var(--pw-green);

    transform:rotate(22deg);
}


.pw-petandim-closing__logo-mark span{

    position:relative;

    z-index:2;

    width:16px;

    height:16px;

    border-radius:50%;

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


.pw-petandim-closing__logo-name{

    color:var(--pw-navy);

    font-size:.82rem;

    font-weight:800;

    letter-spacing:.02em;
}


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

.pw-petandim-closing__content{

    max-width:820px;

    margin-inline:auto;
}


.pw-petandim-closing__title{

    margin:0;

    color:var(--pw-navy);

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

    font-size:
            clamp(
                    3.2rem,
                    7vw,
                    5.8rem
            );

    font-weight:800;

    line-height:.95;

    letter-spacing:-.045em;
}


.pw-petandim-closing__title sup{

    font-size:.3em;

    vertical-align:top;

    margin-left:.1em;
}


.pw-petandim-closing__tagline{

    display:inline-block;

    margin:1rem 0 0;

    padding:.45rem 1.2rem;

    border-radius:999px;

    background:
            var(--pw-green);

    color:var(--pw-white);

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

    font-size:
            clamp(
                    1rem,
                    2vw,
                    1.35rem
            );

    font-weight:800;

    font-style:italic;
}


.pw-petandim-closing__lead{

    max-width:620px;

    margin:1.5rem auto 0;

    color:var(--pw-navy);

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

    font-size:
            clamp(
                    1.05rem,
                    1.8vw,
                    1.3rem
            );

    line-height:1.6;
}


/* ======================================================
   BENEFITS
   ====================================================== */

.pw-petandim-closing__benefits{

    display:grid;

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

    margin-top:3.5rem;

    border-top:
            1px solid
            #DCE5D7;
}


.pw-petandim-closing__benefit{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:
            1.75rem
            1rem;

}


.pw-petandim-closing__benefit:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:25%;

    width:1px;

    height:50%;

    background:#DCE5D7;
}


.pw-petandim-closing__benefit-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:54px;

    height:54px;

    margin-bottom:.8rem;

    border:
            2px solid
            var(--pw-green);

    border-radius:50%;

    background:#FFFFFF;

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


.pw-petandim-closing__benefit-icon svg{

    width:25px;

    height:25px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.pw-petandim-closing__benefit h3{

    max-width:150px;

    margin:0;

    color:var(--pw-navy);

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

    font-size:.78rem;

    font-weight:800;

    line-height:1.3;

    text-transform:uppercase;
}


.pw-petandim-closing__benefit h3 span{

    display:block;

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


/* ======================================================
   FOOTER STRIP
   ====================================================== */

.pw-petandim-closing__footer{

    margin-top:2rem;

    padding:
            1.5rem
            1rem;

    background:var(--pw-navy);

    color:var(--pw-white);

    text-align:center;
}


.pw-petandim-closing__footer strong{

    display:block;

    color:var(--pw-green);

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

    font-size:1.15rem;

    font-weight:800;
}


.pw-petandim-closing__footer-links{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:.6rem;

    margin-top:.45rem;

    font-size:.75rem;

    opacity:.9;
}


.pw-petandim-closing__footer-links span:not(:last-child)::after{

    content:"•";

    margin-left:.6rem;

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


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

@media (max-width:900px){

    .pw-petandim-closing{

        padding-top:4.5rem;
    }


    .pw-petandim-closing__benefits{

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

        margin-top:3rem;
    }


    .pw-petandim-closing__benefit:nth-child(2)::after{

        display:none;
    }


    .pw-petandim-closing__benefit:nth-child(-n+2){

        border-bottom:
                1px solid
                #DCE5D7;
    }

}


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

@media (max-width:600px){

    .pw-petandim-closing{

        padding-top:3.5rem;
    }


    .pw-petandim-closing__container{

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


    .pw-petandim-closing__logo-mark{

        width:65px;

        height:65px;
    }


    .pw-petandim-closing__logo-name{

        font-size:.72rem;
    }


    .pw-petandim-closing__title{

        font-size:
                clamp(
                        2.8rem,
                        15vw,
                        4rem
                );
    }


    .pw-petandim-closing__tagline{

        margin-top:.85rem;

        padding:.4rem .85rem;

        font-size:.9rem;
    }


    .pw-petandim-closing__lead{

        margin-top:1.15rem;

        font-size:.9rem;

        line-height:1.55;
    }


    .pw-petandim-closing__benefits{

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

        margin-top:2.5rem;
    }


    .pw-petandim-closing__benefit{

        padding:
                1.25rem
                .5rem;
    }


    .pw-petandim-closing__benefit-icon{

        width:46px;

        height:46px;
    }


    .pw-petandim-closing__benefit-icon svg{

        width:21px;

        height:21px;
    }


    .pw-petandim-closing__benefit h3{

        font-size:.65rem;
    }


    .pw-petandim-closing__footer{

        margin-top:1.5rem;

        padding:
                1.25rem
                .75rem;
    }


    .pw-petandim-closing__footer strong{

        font-size:1rem;
    }


    .pw-petandim-closing__footer-links{

        font-size:.65rem;

        gap:.4rem;
    }


    .pw-petandim-closing__footer-links span:not(:last-child)::after{

        margin-left:.4rem;
    }

}