@font-face{
    font-family: 'IBMPlexRegular';
    src: url('https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Regular.eot');
    src: url("https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Regular.woff") format("woff"),
         url("https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'IBMPlexBold';
    src: url('https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Bold.eot');
    src: url("https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Bold.woff") format("woff"),
         url("https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'IBMPlexLight';
    src: url('https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Light.eot');
    src: url("https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Light.woff") format("woff"),
         url("https://www.pandasecurity.com/security-promotion/resources/fonts/IBM/IBMPlexSans-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

*{margin: 0;padding: 0;}
body{font-family: "IBMPlexRegular", sans-serif;font-size: 16px;line-height: 24px;color: #2F3343;background: #FFFFFF;}
h1, h2, h3, h4, h5, h6, th{font-weight: normal;}
a{text-decoration: none;transition: .15s;outline: none;}
a:hover{opacity: .65;}
.contenedor, .contenedor_full{position: relative;margin: 0 auto;}
.grid{display: grid;}
.flex{display: flex;}
.precio_despues{font-family: "IBMPlexBold", sans-serif;font-size: 30px;line-height: 24px;}
.btn{font-family: "IBMPlexBold", sans-serif;text-align: center;color: #FFFFFF;background: #FF9010;border: 2px solid #FF9010;padding: 8px 24px;display: block;border-radius: 10px;}
.btn-secondary{background: #FFFFFF;color: #FF9010;}
.btn-secondary:hover{background: #FF9010;color: #FFFFFF;opacity: 1;}
.btn-offer{display: grid;grid-template-columns: max-content 0 auto;}
.btn-offer .rectangle{display: flex;font-family: "IBMPlexBold", sans-serif;color: #FFFFFF;background: #E02222;padding: 0 8px;align-items: center;border-radius: 10px 0 0 10px;z-index: 2;}
.btn-offer .triangle{border-top: 22px solid transparent;border-bottom: 22px solid transparent;border-left: 22px solid #E02222;}
.btn-offer .btn{width: auto;border-radius: 0 10px 10px 0;}

#hero{position:relative;background: linear-gradient(109deg, #662483 0%, #0041A3 100%);background-size: 120% 150%;animation: swapColors 5s infinite alternate;padding: 0 0 64px;}
#hero::before,
#hero::after{content: "";position: absolute;inset: 0;z-index: 0;}
#hero::before{background: linear-gradient(109deg, #662483, #0041A3);animation: fadeA 3s ease-out infinite;}
#hero::after{background: linear-gradient(109deg, #0041A3, #662483);animation: fadeB 3s ease-out infinite;}
#hero > *{position: relative;z-index: 1;}
#hero .image_left{position: absolute;left: 0;bottom: -4px;background: url("../img/hero_back_left.png") no-repeat;width: 351px;height: 350px;}
#hero .image_right{position: absolute;right: 0;bottom: 72px;background: url("../img/hero_back_right.png?v=1") no-repeat;width: 375px;height: 760px;}

#hero h1{font-family: "IBMPlexBold", sans-serif;font-size: 36px;line-height: 54px;color: #FFFFFF;text-align: center;margin-bottom: 16px;}
#hero h2{font-size: 30px;line-height: 45px;color: #FFFFFF;text-align: center;margin-bottom: 16px;}
#hero h3{font-size: 22px;line-height: 33px;color: #FFFFFF;text-align: center;margin-bottom: 64px;}

#hero .grid{display: grid;grid-template-columns: repeat(2, 1fr);justify-content: center;grid-column-gap: 28px;}
#hero .hero_card{position: relative;background: #FFFFFF;padding: 60px 80px 32px;border-radius: 10px;}
#hero .hero_card.pdc{box-shadow: 0 0 20px 0 #662483;}
#hero .hero_card.pdp{box-shadow: 0 0 20px 0 #0042F2;}
#hero .hero_card .product{display: flex;gap: 32px;justify-content: center;margin-bottom: 32px;}
#hero .hero_card .logo{width: 120px;height: 74px;}
#hero .hero_card.pdc .logo{background: url("../img/pandasecurity-logo-complete.png") no-repeat;}
#hero .hero_card.pdp .logo{background: url("../img/pandasecurity-logo-premium.png") no-repeat;}
#hero .hero_card .selector{align-self: center;}
#hero .selectortitle{margin-bottom: 10px;}
#hero .devices_number{border-radius: 8px;display: flex;}
#hero .devices_number button{background: #FFFFFF;border: 2px solid #000000;color: #000000;padding: 12px 19px;border-left: 0;cursor: pointer;}
#hero .devices_number button:first-child{border-radius: 8px 0 0 8px;border-left: 2px solid #000000;}
#hero .devices_number button:last-child{border-radius: 0 8px 8px 0;}
#hero .devices_number button.selected{background: #000000;color: #FFFFFF;}
#hero .prices{display: flex;gap: 16px;justify-content: center;margin-bottom: 32px;}
#hero .prices .yearly{display: flex;gap: 4px;justify-content: center;margin-bottom: 16px;}
#hero .yearly .year{font-family: "IBMPlexBold", sans-serif;font-size: 30px;line-height: 24px;}
#hero .yearly .year span{font-size: 18px;}
#hero .prices .monthly{display: flex;gap: 4px;justify-content: start;}
#hero .prices .monthly p{font-size: 18px;line-height: 23px;}
#hero .prices .btn{align-self: center;}
#hero .hero_card ul{margin-bottom: 32px;}
#hero .hero_card .compatible{text-align: center;}
#hero .hero_card .flag{position: absolute;width: max-content;background: #2F3343;border-radius: 10px 0;padding: 8px 32px;top: -1px;left: 0;}
#hero .hero_card .flag p{font-family: "IBMPlexBold", sans-serif;line-height: 21px;text-align: center;color: #FFFFFF;}

#trustpilot{padding: 100px 0;}
#trustpilot h3{font-family: "IBMPlexBold", sans-serif;font-size: 30px;line-height: 45px;text-align: center;margin-bottom: 32px;}

#cards{padding: 0 0 100px;}
#cards h3{font-size: 25px;line-height: 37px;text-align: center;margin-bottom: 32px;}
#cards #selector_area{display:flex;gap: 48px;justify-content: center;background: #FFFFFF;border-radius: 25px;text-align: center;padding: 16px 0;margin: 0 auto 1.5rem;box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);margin-bottom: 32px;}
#cards #selector_area .selector{display: flex;gap: 16px;}
#cards .selectortitle{font-family: "IBMPlexBold", sans-serif;text-align: center;align-self: center;}
#cards #devices_number_card, #cards #duration_number_card{border-radius: 12px;border: 0.5px solid #DBDBDB;box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);padding: 5px;height: 40px;}
#cards #devices_number_card .selected{padding: 0 15px;}
#cards #devices_number_card button{width: 40px;height: 40px;background: #FFFFFF;border: 0;outline: none;cursor: pointer;}
#cards #duration_number_card button{height: 40px;background: #FFFFFF;border: 0;outline: none;cursor: pointer;min-width: 70px;}
#cards #devices_number_card .selected, #cards #duration_number_card .selected{background: #2F3343;border-radius: 10px;border: 0;color: #FFFFFF;}
#cards .notice{background: #2F3343;border-radius: 10px 0;padding: 8px 0;margin-bottom: 72px;}
#cards .notice p{text-align: center;color: #FFFFFF;}

#cards .cards{display: grid;grid-template-columns: repeat(3, 324px);justify-content: space-between;}
#cards.allplans .cards{grid-template-columns: repeat(4, 1fr);justify-content: center;gap: 24px;}
#cards .card.pde{order: 3;}
#cards .card.pdc{order: 1;}
#cards .card.pdp{order: 2;}
#cards.allplans .card.pde{order: 1;}
#cards.allplans .card.pda{order: 2;}
#cards.allplans .card.pdc{order: 3;}
#cards.allplans .card.pdp{order: 4;}

#cards .card{background: #FFFFFF;box-shadow: 0 0 10px 0 rgba(204, 204, 204, 0.50);border-radius: 10px;padding: 32px 16px 24px;position: relative;}
#cards .card.pda, #cards .selector_mobile{display: none;}
#cards.allplans .card.pda{display: block;}
#cards .card.pdp{background: #F3F6FB;border-radius: 0 0 10px 10px;}
#cards .card .name{font-family: "IBMPlexBold", sans-serif;font-size: 20px;line-height: 30px;text-align: center;margin-bottom: 21px;}
#cards .popular{position: absolute;top: 0;left: 0;background: #E02222;padding: 4px 8px;border-radius: 10px 0;}
#cards .popular p{font-family: "IBMPlexBold", sans-serif;font-size: 15px;line-height: 20px;text-align: center;color: #FFFFFF;}
#cards .protection{position: absolute;width: 100%;top: -40px;left: 0;background: linear-gradient(225deg, #0B006A 0%, #2CACD1 50%, #35EB93 100%);padding: 9px 0;border-radius: 10px 10px 0 0;}
#cards .protection p{font-family: "IBMPlexBold", sans-serif;font-size: 18px;line-height: 22px;text-align: center;color: #FFFFFF;}
#cards .precio_despues{margin-bottom: 12px;text-align: center;}
#cards .monthly{display: flex;gap: 4px;justify-content: center;margin-bottom: 8px;}
#cards .monthly p{font-size: 18px;line-height: 23px;}
#cards .renew{font-family: "IBMPlexBold", sans-serif;text-align: center;margin-bottom: 8px;}
#cards .btn{margin-bottom: 32px;}
#cards ul{list-style-type: none;}
#cards li{display: flex;gap: 4px;margin-bottom: 8px;}
#cards li:last-child{margin-bottom: 0;}
#cards li i{color: #38A977;margin-top: 5px;}
#cards li .cleanup{background: url("../img/pandasecurity-dome-clenaup.svg") no-repeat;width: 16px;height: 16px;background-size: 16px 16px;margin-top: 5px;}
#cards li .passwords{background: url("../img/pandasecurity-dome-passwords.svg") no-repeat;width: 16px;height: 16px;background-size: 16px 16px;margin-top: 5px;}
#cards li .vpn{background: url("../img/pandasecurity-dome-vpn.svg") no-repeat;width: 22px;height: 16px;background-size: 16px 16px;margin-top: 5px;}
#cards li .totalcare{background: url("../img/pandasecurity-dome-totalcare.svg") no-repeat;width: 27px;height: 16px;background-size: 16px 16px;margin-top: 5px;}

#addons{background: #2C85D5;padding: 64px 0;margin-bottom: 140px;}
#addons h3{font-family: "IBMPlexBold", sans-serif;font-size: 25px;line-height: 37px;text-align: center;color: #FFFFFF;margin-bottom: 32px;}
#addons h4{font-size: 16px;line-height: 37px;text-align: center;color: #FFFFFF;margin-bottom: 32px;}
#addons .cards{display: grid;grid-template-columns: repeat(2, 672px);grid-column-gap: 16px;justify-content: center;}
#addons .card{background: #F2F9FD;padding: 32px;border-radius: 10px;}
#addons .grid{display: grid;grid-template-columns: auto max-content;grid-column-gap: 24px;justify-content: center;}
#addons .card.pwd .logo{background: url("../img/pandasecurity-logo-password-manager.png") no-repeat;width: 154px;height: 78px;margin: 0 auto 16px;}
#addons .card.vpn .logo{background: url("../img/pandasecurity-logo-vpn.png") no-repeat;width: 150px;height: 64px;margin: 0 auto 16px;}
#addons .card .name{font-family: "IBMPlexBold", sans-serif;text-align: center;margin-bottom: 16px;}
#addons .card ul{margin-left: 20px;margin-bottom: 16px;}
#addons .line{border-bottom: 1px solid #D8D8D8;width: 200px;margin: 0 auto 16px;}
#addons .compatible, #addons .so{font-size: 13px;line-height: 19px;text-align: center;}
#addons .addon_card{align-self: center;background: #FFFFFF;border-radius: 10px;box-shadow: 0 0 17px 0 rgba(204, 204, 204, 0.25);padding: 16px;}
#addons .addon_card .yearly{display: flex;gap: 4px;justify-content: center;margin-bottom: 10px;}
#addons .addon_card .precio_despues,
#addons .addon_card .year{font-size: 40px;line-height: 52px;}
#addons .addon_card .year{font-family: "IBMPlexBold", sans-serif;}
#addons .addon_card .year span{font-size: 21px;}

#faqs{padding: 0 0 124px;}
#faqs .contenedor{padding: 0 40px;}
#faqs h3{font-family: "IBMPlexBold", sans-serif;font-size: 35px;line-height: 45px;text-align: center;margin-bottom: 90px;}
#faqs .card{margin-bottom: 40px;padding-bottom: 24px;border-bottom: 1px solid #ECEEEF;}
#faqs .card .visible_zone{display: grid;grid-template-columns: auto 16px;grid-column-gap: 16px;}
#faqs .card:last-child{margin-bottom: 0;border-bottom: 0;}
#faqs .card .visible_zone h4{font-family: "IBMPlexBold", sans-serif;font-size: 25px;line-height: 30px;}
#faqs .card .visible_zone .open{font-size: 16px;color: #0086D6;align-self: center;cursor: pointer;}
#faqs .card .visible_zone .open.despl{transform: rotate(180deg);}
#faqs .card .no_visible{display: none;padding-top: 24px;}
#faqs .card .no_visible p{font-size: 18px;line-height: 27px;margin-bottom: 32px;}
#faqs .card .no_visible p:last-child{margin-bottom: 0;}
#faqs .card .no_visible ul{list-style-type: square;margin-left: 28px;}
#faqs .card .no_visible ul li{font-size: 18px;line-height: 27px;}
#faqs .card .no_visible ul li span{font-family: "IBMPlexBold", sans-serif;}
#faqs .card .no_visible ul li p{margin-bottom: 0;}

#divider{background: url("../img/pandasecurity-premium-divider-background.png") no-repeat center #0041A3;background-size: contain;padding: 124px 0;}
#divider h3{font-family: "IBMPlexBold", sans-serif;font-size: 22px;line-height: 33px;text-align: left;color: #FFFFFF;margin-bottom: 24px;}
#divider h4{text-align: left;color: #FFFFFF;margin-bottom: 32px;}
#divider .card{background: #F2F9FD;border-radius: 10px;box-shadow: 0 0 20px 0 rgba(21, 42, 53, 0.12);display: grid;grid-template-columns: 464px auto max-content;grid-column-gap: 32px;padding-right: 40px;}
#divider .card .image{background: url("../img/pandasecurity-image-divider-desktop.png") no-repeat;width: 464px;background-size: cover;}
#divider .card .info{align-self: center;padding: 24px 0;}
#divider .card .info .logo{background: url("../img/pandasecurity-logo-premium.png") no-repeat;width: 120px;height: 74px;margin: 0 auto 16px}
#divider .card .info .name{font-family: "IBMPlexBold", sans-serif;text-align: left;margin-bottom: 16px;}
#divider .card .info ul{margin-left: 10px;margin-bottom: 16px;}
#divider .card .divider_card{align-self: center;background: #FFFFFF;border-radius: 10px;box-shadow: 0 0 17px 0 rgba(204, 204, 204, 0.25);padding: 40px 16px;}
#divider .precio_despues{text-align: center;margin-bottom: 4px;}
#divider .devices{text-align: center;margin-bottom: 8px;}
#divider .line{border-bottom: 1px solid #D8D8D8;width: 200px;margin: 0 auto 16px;}
#divider .compatible, #divider .so{font-size: 13px;line-height: 19px;text-align: center;}

#anytech{padding: 100px 0;}
#anytech .card{background: #2F3343;border-radius: 18px;box-shadow: 8px 6px 16px 0 rgba(0, 0, 0, 0.15);padding: 24px 16px;}
#anytech .logo{background: url("../img/pandasecurity-logo-anytech.png") no-repeat;width: 251px;height: 36px;margin: 0 auto 8px;}
#anytech h3{font-family: "IBMPlexBold", sans-serif;font-size: 22px;line-height: 29px;text-align: center;color: #FFFFFF;margin-bottom: 8px;}
#anytech p{text-align: center;margin-bottom: 8px;color: #FFFFFF;}
#anytech p strong{font-family: "IBMPlexBold", sans-serif;}
#anytech a{display: block;font-family: "IBMPlexBold", sans-serif;font-size: 22px;line-height: 29px;text-align: center;color: #FF9010;}

@keyframes fadeA{
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeB{
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

@media screen and (min-width: 1200px){ /* Desktop XL */
	.contenedor{width: 1110px;}
    .contenedor_full{max-width: 95%;width: 95%;margin: 0 auto;}
}
@media screen and (min-width: 1024px) and (max-width: 1199px){ /* Desktop mini */
	.contenedor{width: 930px;}
    .contenedor_full{max-width: 95%;width: 95%;margin: 0 auto;}
}
@media screen and (max-width: 1199px){ /* Mobile-Tablet */
    #hero{background: linear-gradient(144deg, #0041A3 24.4%, #662483 80.22%);padding: 0 0 64px;}
    #hero::before,
    #hero::after{content: "";position: relative;inset: 0;z-index: 0;}
    #hero::before{background: none;}
    #hero::after{background: none;}
    #hero .image_left,
    #hero .image_right{display: none;}

    #hero .grid{grid-template-columns: 100%;grid-row-gap: 64px;}
    #hero .hero_card.pdp{order: 1;border-radius: 0 0 10px 10px;}
    #hero .hero_card.pdc{order: 2;}
    #hero .hero_card{padding: 16px 16px 32px;}
    #hero .hero_card .flag{width: 100%;top: -37px;border-radius: 10px 10px 0 0;padding: 8px 0;}
    #hero .hero_card .product, #hero .prices{flex-direction: column;}
    #hero .hero_card .logo{margin: 0 auto;}
    #hero .selectortitle{text-align: center;}
    #hero .prices .monthly{justify-content: center;}
    #hero .hero_card ul{margin-left: 18px;}
    #hero .prices .btn{width: 100%;padding: 8px 0;}

    #cards #selector_area,
    #cards .notice{display: none;}
    #cards h5{margin-bottom: 72px;}
    #cards .cards,
    #cards.allplans .cards{grid-template-columns: 100%;grid-row-gap: 64px;}
    #cards .card.pdp, #cards.allplans .card.pdp{order: 1;}
    #cards .card.pde, #cards.allplans .card.pde{order: 2;}
    #cards .card.pda, #cards.allplans .card.pda{order: 3;}
    #cards .card.pdc, #cards.allplans .card.pdc{order: 4;}
    #cards .selector_mobile{display: block;margin-bottom: 32px;}
    #cards .card select{display: block;width: 100%;height: 40px;border: 1px solid #2F3343;border-radius: 100px;font-size: 16px;line-height: 24px;padding-left: 16px;outline: none;background: url(../img/pandasecurity-icon-down.png) no-repeat 95% #fff !important;-moz-appearance: none;-webkit-appearance: none;appearance: none;margin-bottom: 16px;}
    #cards .card select:last-child{margin-bottom: 0;}
    #cards li{gap: 4px !important;}
    
    #addons .cards{grid-template-columns: 100%;grid-row-gap: 16px;}
    #addons .grid{grid-template-columns: 100%;grid-row-gap: 24px;}

    #divider{background: #0041A3;padding: 32px 0;}
    #divider .card{grid-template-columns: 100%;grid-row-gap: 32px;padding: 32px 0 0;}
    #divider .card .image{background: url("../img/pandasecurity-image-divider-mobile.png") no-repeat;width: 343px;height: 251px;order: 3;margin: 0 auto;}
    #divider .card .info{padding: 0 16px;}
    #divider .card .info .name{text-align: center;}
    #divider .card .info ul{margin-left: 24px;}
    #divider .line{width: 100%;}
    #divider .card .divider_card{margin: 0 16px;}
}
@media screen and (min-width: 701px) and (max-width: 1023px){ /* Tablet */
	.contenedor, .contenedor_full{padding: 0 36px;}
}
@media screen and (max-width: 700px){ /* Mobile */
	.contenedor, .contenedor_full{padding: 0 16px;}
}
@media screen and (min-width: 2000px) and (max-width: 2499px){
    .contenedor_full{max-width: 80%;width: 80%;margin: 0 auto;}
}
@media screen and (min-width: 2500px) and (max-width: 2999px){
    .contenedor_full{max-width: 70%;width: 70%;margin: 0 auto;}
}
@media screen and (min-width: 3000px) and (max-width: 3499px){
    .contenedor_full{max-width: 60%;width: 60%;margin: 0 auto;}
}
@media screen and (min-width: 3500px){
    .contenedor_full{max-width: 50%;width: 50%;margin: 0 auto;}
}
@media screen and (min-width: 1200px) and (max-width: 1366px){
    #addons .cards{grid-template-columns: repeat(2, 1fr);}
}