:root {
    font-size: 10px;
    --white: #FFFFFF;
    --pink: #BD279B;
    --rose: #e5a5d9;
    --light-pink: #fdf8fc;
    --red: #BD2727;
    --green: #27BD4A;
    --yellow: #BDA627;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --black: 800;
    --size-body: 1.8rem;
    --size-body-s: 1.6rem;
    --size-heading: 3rem;
    --size-heading-s: 2.8rem;
    --size-subheading: 2.4rem;
    --size-subheading-s: 2.2rem;
    --size-textvideo: 2.2rem;
    --size-textvideo-s: 2rem;
    --size-extras: 1.4rem;
    --size-extras-s: 1.2rem;
    --size-spacing: 3.5rem;
    --size-spacing-s: 2.5rem;
    --line-height: 1.4;
    --line-height-header: 1;
}

.light-blue {
    background-color: var(--light-blue);
}

.light-pink {
    background-color: var(--light-pink);
}

.oseas-metabolicas .text-pink {
    color: var(--pink);
}


.oseas-metabolicas .text-left {
    text-align: left;
}

.oseas-metabolicas .icon-content-container {
    margin-block: var(--size-spacing)
}

.oseas-metabolicas .icon-content-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
    min-height: 330px;


    p {
        font-size: var(--size-extras);
        margin-top: var(--size-spacing);
    }

    &.icon-content-item-inci {
        min-height: 455px;
        p {
            margin-top: 0;
        }
    }
    figure {
        margin: 0;

        img {
            max-width: 15rem;
        }
    }
}

.oseas-metabolicas .border-group {
    border: 1px solid var(--pink);
    border-radius: 1rem;
    padding: 1rem 10rem;
    text-align: center;
    position: relative;
    justify-self: left;
    margin: 2rem 0;
  }

.oseas-metabolicas .border-group::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 3;
  background-color: var(--pink);
  top: 50%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  left: -5px;
  border-radius: 50%;
}

.oseas-metabolicas .accordion-ref h4 a {
    color: var(--pink) !important;
}

.oseas-metabolicas {
    padding: 0;

    @media (min-width: 768px) and (max-width: 1000px) {
        margin-left: 20px;
        padding-left: 40px;
    }
    @media (min-width: 768px) and (max-width: 1000px)  {
        margin-left: 20px;
    }
}

.oseas-metabolicas .sect-1,
.oseas-metabolicas .sect-5 {
    padding: 0;
}

.oseas-metabolicas .sect-5 {
    margin-top: 2rem;
}

.oseas-metabolicas small {
    color: var(--black-text-gmg);
}

.oseas-metabolicas .sect-1 h2 {
    color: var(--pink);
}

.oseas-metabolicas .sect-1 h2 {
    color: var(--pink);
}

.oseas-metabolicas h5 {
    color: var(--pink);
}

.oseas-metabolicas .sect-1 p {
    font-weight: var(--semibold);
    color: var(--pink);
}

.oseas-metabolicas .img-1,
.oseas-metabolicas #sect-3 .img-2 {
    max-width: 100%;
    height: auto;
    width: 90rem;
    margin: 2rem 0;
}

.oseas-metabolicas .accordion-ref .panel-title .collapsed .fa::after {
    content: '';
    position: relative;
    top: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease, top 0.3s ease;
    transform: rotate(0deg);
    display: inline-block;
    left: 0;
    background: url("/content/dam/multibrand/ar/es/epof/hpp/img/hpp-arrow.png") no-repeat center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.oseas-metabolicas .accordion-ref .panel-title .fa::after {
    content: '';
    position: relative;
    top: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease, top 0.3s ease;
    transform: rotate(180deg);
    display: inline-block;
    left: 0;
    background: url("/content/dam/multibrand/ar/es/epof/hpp/img/hpp-arrow.png") no-repeat center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.oseas-metabolicas p {
    font-size: 2rem;
    color: var(--black-text-gmg);
}

.oseas-metabolicas .bg-at {
    padding: 5rem;
    background-color: var(--light-pink);
    margin-block: var(--size-spacing);
}

.oseas-metabolicas .bg-at h3,
.oseas-metabolicas h3 {
    color: var(--pink);
    line-height: var(--line-height);
    font-size: var(--size-heading) !important;
}

.oseas-metabolicas .bg-at h5 {
    color: var(--pink);
    text-align: center;
    line-height: var(--line-height)
}

.oseas-metabolicas #sect-3 .stat-col-container .stat-col-img {
    width: 100%;
    margin: 2rem auto;
    max-width: 23rem;
}

.oseas-metabolicas .stat-col-container > .row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.oseas-metabolicas .stat-text {
    font-size: 5rem;
    font-weight: var(--black);
    line-height: var(--line-height);
    color: var(--black-gmg);
}

.oseas-metabolicas .manifestaciones-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2rem 4rem;
    .manifestaciones-item {
        background-color: var(--rose);
        padding: 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        border-radius: 1rem;
        flex: 0 1 35rem;
        p {
            text-align: left;
            color: var(--white);
            margin: 0;
            flex: 1;
        }

        figure {
            max-width: 5rem;
            margin: 0;
            img {
                width: 100%;
                height: auto;
                object-fit: contain;
            }
        }
    }

    &.info {
        position: relative;
        .manifestaciones-item {
            padding: 1rem 3rem;
            p {
                text-align: center;
                font-size: var(--size-body-s);
            }
        }
        figure {
            margin: 0;
            max-width: 10rem;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            img {
                width: 100%;
                height: auto;
                object-fit: contain;
            }

            @media screen and (max-width: 1200px) {
                position: relative;
                top: unset;
                transform: unset;
                align-self: center;
            }
        }
        @media screen and (max-width: 1200px) {
            flex-direction: column;

            .manifestaciones-item {
                flex: auto;
            }
        }
    }
}

.oseas-metabolicas .moleculares-section {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2rem 4rem;

    .moleculares-item {
        flex: 0 1 20rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        .moleculares-hr {
            border: 0;
            height: .4rem;
            margin: 0;

            &.green {
                background-color: var(--green);
            }
            &.red {
                background-color: var(--red);
            }
            &.yellow {
                background-color: var(--yellow);
            }
        }
        p {
            margin: 0;
            text-align: center;
            padding-block: 1rem
        }

        .moleculares-item-desc {
            min-height: 15rem;
        }
    }
    
}