#herobr {
    background: #FFFFFF;
    padding: 16px 0 0;
}

    #herobr #hero_cards_desktop .hero_card.hero_card_pde {
        background: rgba(2, 135, 77, 0.05);
    }

    #herobr .hero_card .name {
        font-family: "IBMPlexRegularBold",sans-serif;
        font-size: 18px;
    }

    #herobr .hero_card .dispo {
        font-size: 18px;
    }

    #herobr .hero_card .subtext {
        font-family: "IBMPlexRegularBold",sans-serif;
        font-size: 12px;
        margin: 2px 0 4px;
    }

    #herobr .precio_despues, #herobr .prices .precio_mes {
        padding: 21px 0 6px;
        font-size: 30px;
        line-height: 45px;
        font-family: "IBMPlexRegularBold","IBMPlexRegular",sans-serif;
    }
    #herobr #selector_area {
        background: #FFFFFF;
        border-radius: 10px;
        text-align: center;
        padding: 17px 0;
        margin: 0 auto 1.5rem;
        box-shadow: 0 0 15px 0 rgba(0,0,0,.5);
        max-width: 1110px;
    }

        #herobr #selector_area .selector {
            display: inline-block;
            margin-right: 65px;
        }

            #herobr #selector_area .selector:last-child {
                margin-right: 0;
            }

    #herobr .selectortitle {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 0.5rem;
    }


    #herobr p.renew {
        font-size: 14px;
        line-height: 21px;
        font-family: "IBMPlexRegularBold","IBMPlexRegular",sans-serif;
        text-align: center;
        margin-bottom: 8px;
    }


    #herobr #hero_cards_desktop {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 30px;
        margin-bottom: 40px;
        position: relative;
        padding-top: 32px;
    }
    #herobr.mac #hero_cards_desktop {
        grid-template-columns: repeat(3, 1fr);
    }

        #herobr #hero_cards_desktop.mac {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: 30px;
            margin-bottom: 40px;
            position: relative;
            padding-top: 28px;
        }

    #herobr p.max_protect {
        position: absolute;
        width: 50%;
        border-radius: 10px 0;
        font-size: 15px;
        line-height: normal;
        font-family: "IBMPlexRegularBold","IBMPlexRegular",sans-serif;
        color: #FFFFFF;
        text-align: center;
        background-color: #02874D;
        padding: 4px 8px;
        top: 0;
        left: 0;
    }

    #herobr .container_cards_desktop {
        position: relative;
    }

        #herobr .container_cards_desktop.heightUS {
            margin-top: 40px;
        }




    #herobr .card_name {
        font-size: 1.375rem;
        line-height: 1.812rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    #herobr #hero_cards_desktop .hero_card {
        border-radius: 10px;
        background: #FFF;
        box-shadow: 0 0 10px 0 rgba(204, 204, 204, 0.50);
        padding: 29px 16px 18px 16px;
    }



    #herobr .hero_card_mobile_pdp {
        background: #F2F5FA !important;
    }

    #herobr #hero_cards_desktop .hero_card.recommended_shadow {
        box-shadow: 0 0 8px 0 rgba(0,0,0,.65);
        border-radius: 0 0 5px 5px;
    }



    #herobr #hero_cards_desktop .box_pdp {
        background: url("img/premium.webp") no-repeat;
        width: 200px;
        height: 45px;
        background-size: 200px 45px;
        margin: 0 auto 8px;
        position: relative;
    }

    #herobr #hero_cards_desktop .product_box {
        margin-bottom: 1rem;
    }

    #herobr #hero_cards_desktop .hero_card {
        position: relative;
    }

        #herobr #hero_cards_desktop .hero_card .buttons_area {
            margin-bottom: 2.3rem;
        }

            #herobr #hero_cards_desktop .hero_card .buttons_area .card_button {
                border-radius: 10px;
                display: block;
                background: #FFFFFF;
                border: 2px solid #FF9010;
                font-size: 1rem;
                line-height: 1.5rem;
                font-family: "IBMPlexRegularBold","IBMPlexRegular",sans-serif;
                color: #FF9010;
                text-align: center;
                padding: 8px 0;
                margin-bottom: 1rem;
            }

                #herobr #hero_cards_desktop .hero_card .buttons_area .card_button.pde, #herobr #hero_cards_desktop .hero_card .buttons_area .suscr_button.pde {
                    background: #FF9010;
                    color: #fff;
                }

            #herobr #hero_cards_desktop .hero_card .buttons_area .suscr_button {
                border-radius: 10px;
                display: none;
                background: #FFFFFF;
                border: 2px solid #FF9010;
                font-size: 1rem;
                line-height: 1.5rem;
                font-family: "IBMPlexRegularBold","IBMPlexRegular",sans-serif;
                color: #FF9010;
                text-align: center;
                padding: 8px 0;
                margin-bottom: 4px;
            }
    #herobr #hero_cards_desktop.anual .hero_card .buttons_area a, #herobr #hero_cards_desktop.mensual .prices .precio_mes, #herobr #hero_cards_desktop.anual .prices .precio_despues {
        display: block;
    }

    #herobr #hero_cards_desktop.mensual .hero_card .buttons_area a, #herobr .prices .precio_mes, #herobr #hero_cards_desktop.anual .prices .precio_mes, #herobr #hero_cards_desktop.mensual .prices .precio_despues {
        display: none;
    }
    #herobr #hero_cards_desktop.mensual .hero_card .buttons_area .suscr_button, #herobr #hero_cards_desktop.mensual .hero_card .buttons_area .freemonth {
        display: block;
    }
    #herobr #hero_cards_desktop.anual .hero_card .buttons_area .suscr_button, #herobr #hero_cards_desktop.anual .hero_card .buttons_area .freemonth {
        display: none;
    }
    
                #herobr p.freemonth, #herobr p.freemonth .precio_despues {
        font-size: 14px;
        line-height: 21px;
        text-align: center;
        font-weight: 400;
        display: none;
    }

    #herobr #hero_cards_desktop .hero_card .buttons_area .open_modal {
        cursor: pointer;
        font-size: 15px;
        line-height: 22px;
        font-family: "IBMPlexRegularBold","IBMPlexRegular",sans-serif;
        text-align: center;
        color: #FF9010;
        transition: .5s;
    }

    #herobr #hero_cards_desktop .hero_card .buttons_area .card_button.pde:hover, #herobr #hero_cards_desktop .hero_card .buttons_area .suscr_button.pde:hover {
        background: #FFC787;
        border-color: #FFC787;
    }

    #herobr #hero_cards_desktop .hero_card .buttons_area .open_modal:hover {
        color: #2F3343;
    }

    #herobr #hero_cards_desktop .hero_card .buttons_area .card_button:hover, #herobr #hero_cards_desktop .hero_card .buttons_area .suscr_button:hover {
        color: #FFFFFF;
        background-color: #FF9010;
    }

    #herobr #hero_cards_desktop .dev_reg_it {
        position: absolute;
        font-size: 14px;
        font-family: "IBMPlexRegularBold","IBMPlexRegular",sans-serif;
        right: -80px;
        top: 60px;
    }

    #herobr #hero_cards_desktop .features ul {
        padding: 0;
        text-align: left;
    }

    #herobr #hero_cards_desktop .features li {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        margin-bottom: 8px;
        list-style: none;
        display: grid;
        grid-column-gap: 6px;
        grid-template-columns: 16px auto;
    }

        #herobr #hero_cards_desktop .features li i {
            color: #38A977;
            margin-top: 5px;
        }

        #herobr #hero_cards_desktop .features li.bold span {
            font-family: "IBMPlexRegularBold",sans-serif;
        }

    #herobr #hero_cards_desktop .logo_vpn {
        background: url("https://www.pandasecurity.com/security-promotion/resources/dome2305/img/pandasecurity-dome-vpn.svg") no-repeat;
        width: 16px;
        height: 16px;
        margin-top: 5px;
    }

    #herobr #hero_cards_desktop .logo_passwords {
        background: url("https://www.pandasecurity.com/security-promotion/resources/dome2305/img/pandasecurity-dome-passwords.svg") no-repeat;
        width: 16px;
        height: 16px;
        margin-top: 5px;
    }

    #herobr #hero_cards_desktop .logo_cleanup {
        background: url("https://www.pandasecurity.com/security-promotion/resources/dome2305/img/pandasecurity-dome-clenaup.svg") no-repeat;
        width: 16px;
        height: 16px;
        margin-top: 5px;
    }

    #herobr #hero_cards_desktop .logo_ttc {
        background: url("https://www.pandasecurity.com/security-promotion/resources/dome2305/img/pandasecurity-dome-totalcare.svg") no-repeat;
        width: 16px;
        height: 16px;
        margin-top: 5px;
    }

    #herobr .line {
        background-color: #2C85D5;
        padding: 8px;
        width: 100%;
        border-radius: 10px 0;
        color: #fff;        
    }
    /* CONTENEDOR PRINCIPAL */
    #herobr .selector_area {
        width: 660px;
        margin: 32px auto 31px;
        display: flex;
        gap: 24px;
    }

    /* TARJETAS */
    #herobr .card {
        flex: 1;
        background: #ffffff;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 24px;
        text-align: center;
        transition: all 0.3s ease;
    }

        #herobr .card i {
            display: none;
        }

        #herobr .card .tit {
            margin-bottom: 24px;
            font-size: 25px;
        }

        /* TARJETA ACTIVA */
        #herobr .card.activa {
            border: 2px solid #2c85d5;
        }

            #herobr .card.activa i {
                display: inline-block;
                color: #02874D;
                margin-right: 6px;
            }

            #herobr .card.activa .tit {
                font-family: "IBMPlexRegularBold",sans-serif;
            }
        /* TÍTULO */
        #herobr .card h2 {
            margin: 0 0 10px;
            font-weight: bold;
            color: #333;
        }


        /* TEXTO */
        #herobr .card p {
            font-size: 18px;
            line-height: 27px;
        }
        /* HOVER */
        #herobr .card:hover {
            cursor: pointer;
            border-color: #2c85d5;
        }
@media screen and (max-width: 1399px) {
    #herobr p.max_protect {
        width: 70%;
    }
}
    @media screen and (max-width: 1199px) {      
            #herobr .line {
            width: 98%;
        }

        #herobr .contenedor {
            padding: 0;
        }

        #herobr .container_cards_desktop {
            padding: 0 15px;
        }

        #herobr p.max_protect {
            width: 50%;
        }

        #herobr #hero_cards_desktop, #herobr.mac #hero_cards_desktop {
            display: grid;
            grid-template-columns: 48% 48%;
            grid-row-gap: 16px;
            margin: 0 0 8px;
            justify-items: center;
            grid-column-gap: 60px;
            grid-row-gap: 40px;
        }


       

        #herobr #hero_cards_desktop .hero_card {
            width: 100%;
        }
    }
@media screen and (max-width: 768px) {
    #herobr .selector_area {
        flex-direction: column;
        width: auto;
        gap: 16px;
    }
    #herobr #hero_cards_desktop, #herobr.mac #hero_cards_desktop {
        grid-template-columns: 100%;
    }
}

    @media screen and (max-width: 500px) {
        #herobr .line {
            width: 96%;
        }

        #herobr .card {
            min-width: 88% !important;
        }
    }

    @media screen and (max-width: 400px) {
        #herobr .card {
            min-width: 86% !important;
        }
    }

    @media screen and (max-width: 375px) {
        #herobr .card {
            width: 80%;
        }
    }