.box-icon img{
width: 100px;
}

section article header h6{
    color: #fff;
}

.seccion_1 p {
    font-size: 18px;
}

.seccion_2 {
    background: #eee;
}

/* COLORES */

.text-rvio-verde {
    --bs-text-opacity: 1;
    color: var(--rvio-verde) !important;
}

.bg-rvio_verde {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--rvio-verde), 0.5) !important;
}

.bg-danger {
    /* --bs-bg-opacity: 1; */
    background: var(--rvio-verde);
}

.bg-warning {
    /* --bs-bg-opacity: 1; */
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.text-rvio-rosa {
    --bs-text-opacity: 1;
    color: var(--rvio-rosa) !important;
}

.text-rvio-celeste {
    --bs-text-opacity: 1;
    color: var(--rvio-celeste) !important;
}

.text-rvio-azul {
    --bs-text-opacity: 1;
    color: var(--rvio-azul) !important;
}

/* INFOGRAFIA */

#infographic .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    position: relative;
}

#infographic .step article {
    margin: 20px 0;
}

#infographic .circle h4 {
    color: var(--rvio-verde) !important;
    font-weight: 200;
    font-family: var(--tg-heading-font-family);
    font-size: 1.0rem;
    margin: 10px 0;
}

#infographic .circle h4 b {
    font-weight: 800 !important;
}

#infographic .circle img {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    filter: drop-shadow(0 0 10px #fff);
}

#infographic .circle {
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 9px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 40px;
    position: absolute;
    left: 50%;
    margin: 40px 0;
    background: radial-gradient(#fff,#aaa);
    line-height: normal;
    font-size: 20px;
    font-weight: 300;
}

#infographic section:nth-child(odd) .circle {
    transform: translateX(-100%);
}

#infographic article {
    max-width: 410px;
    margin-bottom: 20px;
    cursor: pointer;
    left: 50%;
    position: relative;
}

#infographic article header {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
}

#infographic article header i {
    display: flex;
    font-size: 2em;
    border-radius: 50%;
    background-clip: padding-box;
    padding: 14px;
    transition: transform 0.4s;
    color: #fff;
    border: 7px solid #999;
    margin: -16px 0 -16px -20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

#infographic article:hover header i {
    transform: scale(1.2);
}

#infographic article.active header i {
    transform: none;
}

#infographic article .body {
    background: var(--bgColor);
    padding: 0 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    max-height: 0;
    transition: max-height 0.5s, padding 0.5s;
    overflow: hidden;
}

#infographic article .body .btn {
    padding: 3px 10px;
    text-transform: uppercase;
}

#infographic :nth-child(even) article {
    text-align: right;
    transform: translateX(-100%);
}

#infographic :nth-child(even) article header {
    flex-flow: row-reverse;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

#infographic :nth-child(even) article header i {
    margin: -16px -20px -16px 0;
}

#infographic section:nth-child(odd) article.active header {
    border-bottom-right-radius: 0;
}

#infographic section:nth-child(even) article.active header {
    border-bottom-left-radius: 0;
}

#infographic article.active .body {
    padding: 20px;
    max-height: 300px;
    id; */
    box-shadow
Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0;
    omitted colors are a user agent chosen color.
Learn more
Don't show: 0 0 10px 5px rgba(0, 0, 0, 0.2);';
    box-shadow
Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0;
    omitted colors are a user agent chosen color.
Learn more
Don't show: 0 0 10px 5px rgba(0, 0, 0, 0.2);';
    box-shadow
Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0;
    omitted colors are a user agent chosen color.
Learn more
Don't show: 0 0 10px 5px rgba(0, 0, 0, 0.2);';
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
    background: #fff;
}

#infographic article[data-step="1"]  { margin-left: 6px; }
#infographic article[data-step="2"]  { margin-left: 54px; }
#infographic article[data-step="3"]  { margin-left: 6px; }

#infographic article[data-step="4"]  { margin-left: -16px; }
#infographic article[data-step="5"]  { margin-left: -64px; }
#infographic article[data-step="6"]  { margin-left: -16px; }

#infographic article[data-step="7"]  { margin-left: 6px; }
#infographic article[data-step="8"]  { margin-left: 54px; }
#infographic article[data-step="9"]  { margin-left: 6px; }

#infographic article[data-step="10"] { margin-left: -16px; }
#infographic article[data-step="11"] { margin-left: -64px; }
#infographic article[data-step="12"] { margin-left: -16px; }

#infographic article[data-step="13"] { margin-left: 6px; }
#infographic article[data-step="14"] { margin-left: 54px; }
#infographic article[data-step="15"] { margin-left: 6px; }