/* Grid component */
.grid-wpp {
    max-width: 960px;
    width: 95% !important;
}
/* Utils */
.padding-top{
    padding-top: 10px;
}
.destacado{
    font-size: 20px;
}

.bg-red {
    background-color: #bf0d09;
}

.bg-white {
    background-color: #ffffff;
}

/* Elements */
.template-wpp {
    .section-wpp{
        justify-items: center;
        text-align : center;
        padding: 24px 0;
        .section-wpp-inner {
            justify-items: center;
            width: 100%;
            strong, b, .bold{
                font-weight: bold;
            }
            .title {
                color: white;
                font-size: 48px;
                margin: 0px 0px 20px;
                font-weight: bold;
                p {
                    color: white;
                    b,
                    strong {
                        font-weight: bold;
                        
                    }
                }
                
                .link {
                    color: white;
                        &:hover {
                            opacity: 0.8;
                        } 
                }
                
            }
            p {
                    color: white;
                    b,
                    strong {
                        font-weight: bold;
                        
                    }
            }
            .button{
                    background-color: white;
                    color: #bf0d09;
                    width: fit-content;
                    padding: 10px 25px;
                    margin: 10px;    
                    &:hover {
                        opacity: 0.6;
                    } 
                    &.mb-large{
                        margin-bottom: 35px;
                    }

            }
            .box-video{
                width: 85%;
                iframe{
                    aspect-ratio: 16 / 9;
                }
                .video{
                    width: 100%;
                }
            }
            .link {
                color: white;
                font-weight:bold;
                text-decoration: underline;

                &:visited {
                    color: white;
                    text-decoration: underline;
                }

                &:hover {
                    opacity: 0.8;
                }
            }
            ul, ol{
                list-style: initial;
                text-align: left;
            }
            li {
                color: white;
                padding-left: .5em;
            }
            .text-bases{
                display:block;
                margin-top: 40px;
                .link-bases{
                color: white;
                font-weight:bold;
                &:visited {
                color: white;
                }

                &:hover {
                    opacity: 0.8;
                    }
                }
            }
            .container-beneficios{
                display:flex;
                margin: 40px auto 40px;
                width: 100%;
                justify-content: space-between;
                align-items: flex-start;
                .beneficio{
                    flex: 1;
                    img{
                        width:100%;
                        height: auto;
                        max-width: 80px;
                        aspect-ratio: 1;
                        object-fit: contain;
                    }
                    p{
                        font-weight: 800;
                        color: white;
                        text-align: center;
                    }
                }
            }
            .logo-bottom{
                width: 100%;
                max-width: 180px;
                height: auto;
                object-fit: cover;
            }
            
            
        }
    }
    &.module-share{
        background-color:#fff;
        padding: 24px 0;
        .wrapper-rrss {
            border-top: none;
        }
    }
}

/* Media component */
@media (max-width: 768px) {
    .grid-wpp {
        width: 85% !important;
    }
    .template-wpp {
        .section-wpp{
            .section-wpp-inner {
                .title {
                    font-size: 40px;
                }
                .container-beneficios{

                    flex-direction: column;
                    .beneficio{
                        width:100%;
                        margin-bottom: 20px;
                    }
                }
            }
        }   
    }
}
@media (max-width: 480px) {
    .template-wpp {
        .section-wpp{
            .section-wpp-inner {
                .title {
                    font-size: 32px;
                }
            }
        }   
    }
}