/*
Theme Name: CopecPay Theme
Theme URI: https://copecpay.cl
Description: Tema personalizado para CopecPay - Tu nueva forma de pagar de manera segura y rápida
Version: 2.0.0
Author: CopecPay Team
Author URI: https://copecpay.cl
Tags: CopecPay, Payment, Financial, Banking, Mobile

License: MIT
License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
MAIN
\*------------------------------------*/



@media (min-width: 576px) {
    .container-section {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-section {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-section {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-section {
        max-width: 1140px;
    }
}

/* Ajuste personalizado para pantallas más grandes */
@media (min-width: 1400px) {
    .container-section {
        max-width: 1185px; /* Ajuste personalizado */
		padding:0;
    }
}

/* Ajuste personalizado para pantallas más grandes */
@media (min-width: 1900px) {
    .container-section {
        max-width: 1665px; /* Ajuste personalizado */
		padding:0;
    }
}


#beneficios-submenu {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    margin: 0 0 0 17px;
    padding: 0;
  }

#breadcrumbs {
    top: 100px;
    left: 140px;
    position: absolute;
    font-size: 14px;
	color: #657085;
    font-family: "Outfit Medium";
	z-index: 2;
}

#breadcrumbs span + span:before {
    content: "";
    background-image: url(/wp-content/themes/chris/img/beneficios-copecpay/icon_flecha_bread.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 10px;
}

.has-hero-banner #breadcrumbs {
    color: #ffffff !important;
}

.has-hero-banner #breadcrumbs a {
    color: #ffffff !important;
}

.has-hero-banner #breadcrumbs span + span:before {
    filter: brightness(0) invert(1);
}


  #beneficios-submenu.show {
    max-height: 200px; /* Ajusta según el contenido */
    margin: 15px 0px 10px 17px;
  }
  
  .icon-rotate {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(90deg);
  }

a:hover {
    text-decoration: none;
	cursor:pointer;
}

.TTRegular p16 TextGrey{
	padding: 1%;
}

#bg-icn {
    text-align: center;
    background-color: #fff;
}
.titulo-princ {
    font-size: 30px;
    padding-bottom: 40px;
}
.height-text p {
    height: 9vh;
    max-height: 9vh;
    overflow: hidden;
}
.ValidezBene.pHeight {
    height: 3vh;
    max-height: 3vh;
    overflow: hidden;
}
span.DescriCortaIn {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    color: #000;
}

.ContainerLegal {
    padding: 30px;
}

.CondicionLegal {
    font-size: 16px;
    line-height: 25px;
    color: #777;
    margin-top: 20px;
	font-variant:none;
}


span.DescriCortaBene {
    font-size: 14px;
    line-height: 23px;
}

.pre-footer-qr {
  width: 140px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.qrText {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0px;
}


@media only screen and (min-width:320px) {
	.mobileTitle {margin-top: 100px; padding-bottom: 100px;}
    .ContentBeneInterior {
    padding: 70px 0px 40px 0px !important;
	margin-top: 0vh !important;
}

.portadaDesBen {
    min-height: 50px !important;
}

.display-Legal {font-size: 16px;}
}




.pum-theme-1790 .pum-container, .pum-theme-pop-up-comunicados .pum-container {
    padding: 18px;
    border-radius: 30px;
    border: 1px none #ffffff;
    box-shadow: 1px 1px 3px 0px rgba( 10, 10, 10, 0.23 );
    background-color: #0128ff;
}




/* global box-sizing */
*,
*:after,
*:before {
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
font-size:62.5%;
}
body {
font:300 11px/1.4 'Outfit Regular', Helvetica, Arial, sans-serif;
color:#444;
font-variant-ligatures: none;
}
/* clear */
.clear:before,
.clear:after {
content:' ';
display:table;
}

.clear:after {
clear:both;
}

img {
max-width:100%;
vertical-align:bottom;
}
a {
color:#657085;
text-decoration:none;
}
a:hover {
color:#657085;
}
a:focus {
outline:0;
}
a:hover,
a:active {
outline:0;

}
input:focus {
outline:0;
border:1px solid #04A4CC;
}

/*------------------------------------*\
STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {width:100%;margin:0 auto;position:relative;}

/*------------------------------------*\
PAGES
\*------------------------------------*/

.CopecPreloader{ width: 100%; height: 100%; position: fixed; background-color: #ffffff; z-index: 999999; top: 0px ; left: 0px; }


.menuMobileWrapp{position: fixed; top: 0px; left: 0px; padding:30px 20px; z-index: 99999; width: 100%; background: #ffffff; display:none}
.MenuMobile{background-color: #ffffff;position: fixed;z-index: 99;bottom: 0px;left: 0px;width: 100%;height: 100%;padding-top: 100px; overflow: scroll;}
.MenuMobileHead ul{padding: 10px 30px 20px; margin: 0px;}
.MenuMobileHead ul li{padding: 0px;margin-bottom: 10px;list-style: none;position: relative;}
.MenuMobileHead ul li a{font-family: "Outfit Medium";font-weight:500;text-decoration:none;display:block;padding:15px; /*border-radius: 18px !important;*/ width: 100%; text-align: left;/*background-color:rgba(255,255,255,0.1);*/ font-size: 16px; position: relative; color:#0C122D;}
.MenuMobileHead ul li a img{vertical-align: sub; margin-right: 5px;}
.MenuMobileHead ul li a i{font-size: 16px;position: absolute;top: 18%;right: 15px;color: #00FF7E; display:none;}

.MenuMobileFooter{background-color: #0062F7; -webkit-border-top-left-radius: 0px;-webkit-border-top-right-radius: 0px;-moz-border-radius-topleft: 0px;-moz-border-radius-topright: 0px;border-top-left-radius: 0px;border-top-right-radius: 0px;}
.MenuMobileFooter ul{padding: 30px; margin: 0px;}
.MenuMobileFooter ul li{padding: 0px;margin-bottom: 10px;list-style: none;position: relative;}
.MenuMobileFooter ul li a{font-weight:500;text-decoration:none;display:block;padding:15px; border-radius: 8px !important; width: 100%; text-align: left;background-color:#ffffff; font-size: 14px; position: relative; color:#0C122D;}
.MenuMobileFooter ul li a img{vertical-align: sub; margin-right: 5px;}
.MenuMobileFooter ul li a i{font-size: 24px;position: absolute;top: 18%;right: 15px;color: #657085;}
.MenuMobileFooter .DownloadAppMobile{padding: 30px; margin: 0px;}
.MenuMobileFooter .DownloadAppMobile p{font-family: "Outfit Regular";color: #ffffff; margin: 0px; font-size: 16px;}
.MenuMobileFooter .DownloadAppMobile span{font-family: "Outfit Medium";color: #ffffff; margin: 0px; font-size: 20px; line-height: 32px; font-weight: 700;}



.hamburger{padding: 10px 12px;background-color: #fff;border-radius: 50px;}
.hamburger .line{width: 25px;height: 2px;background-color: #0C122D;display: block;margin: 6px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.hamburger:hover{cursor: pointer;}
#hamburger-1.is-active .line:nth-child(2){opacity: 0;}
#hamburger-1.is-active .line:nth-child(1){-webkit-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg);-o-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
#hamburger-1.is-active .line:nth-child(3){-webkit-transform: translateY(-9px) rotate(-45deg);-ms-transform: translateY(-9px) rotate(-45deg);-o-transform: translateY(-9px) rotate(-45deg);transform: translateY(-9px) rotate(-45deg);}


.menuwrapp{ width: 100%; height:72px;padding: 8px 120px; position:fixed; z-index: 99999; left: 0px;}
.menuwrapp .WhiteLogo{ position: absolute;}
.menuwrapp #menu{margin-bottom: 0px; height: 49px;}
.menuwrapp a{color: #ffffff; font-size: 16px; font-family: 'Outfit Medium'; font-weight:400; padding: 15px 8px; text-decoration: none !important; display: inline-block; margin: 0 10px;-webkit-transition: color 200ms linear;-moz-transition: color 200ms linear;transition: color 200ms linear;}
.menuwrapp .BtnSub .BtnFB{padding-bottom: 30px;}
.menuwrapp .DownloadApp {background-color: #00FF7E;border-radius: 50px;}
.menuwrapp li{display: inline-block; list-style: none;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;transition: all 200ms linear; border-radius: 10px;}
/*.menuwrapp li.DownApp{ background-color: transparent !important;}*/
.menuwrapp li:hover, .activate{/*background-color: #ECF1FB !important;border-radius: 10px;*/color:#0062F7;}
.menuwrapp li:hover a, .activate a{color:#203391;}
.menuwrapp .BtnSub{border-radius: 10px 10px 0 0 !important;}
.menuwrapp .BtnSub:hover, .activate{/*background-color: #ECF1FB !important;*/color:#0062F7;}
.sub-menu{position:absolute;background:#ECF1FB;left:0;width:100%;z-index:1;display:none; text-align: center; margin-bottom: 0px;padding:20px;}
.sub-menu a{font-weight:bold;text-decoration:none;display:block;padding:10px; border-radius: 10px !important; width: 200px; text-align: left;background-color: rgba(0, 45, 249, 0.08); font-size: 12px; position: relative; color:#203391;margin-top: 5%;;}
.sub-menu a img{vertical-align: sub; margin-right: 5px;}
.sub-menu a i{font-size: 15px;position: absolute;top: 25%;right: 5px;}
.sub-menu li{display:inline-block; list-style: none;}


.sub-menu li a {font-weight: bold; text-decoration: none; display: block; border-radius: 10px !important; width: 200px; text-align: left; background-color: rgba(0, 45, 249, 0.08); font-size: 12px; position: relative; color: #203391; margin-top: 5%;}
.sub-menu a:hover{background-color: rgba(0, 45, 249, 0.08);}
.menuwrapp .DownApp.activate{background-color: transparent !important;}
.DownloadWrapper{display: flex !important;justify-content:center;color:#fff; font-weight:500 !important;width:149px;position:relative;margin:auto;overflow:hidden;display:inline-block; vertical-align: middle; background-color: #0362f7;border-radius: 50px;padding: 10px !important;}
li.DownApp a {color: #fff !important;}
li.DownApp {margin-left: 40px;}
/*.DownloadWrapper::after {width:150px;height:49px;content:"";position:absolute;}*/
.DownloadBox{width:150px;height:49px;position:absolute;line-height:50px;text-align:center;font-size:16px;font-family: 'Outfit Bold'; color:#203391}
.DownloadBoxes{position:relative;left:-150px;}


.menuwrapp.white a{color: #0C122D;}



/*.menustick{-webkit-box-shadow: 0px 5px 34px 0px rgba(0,0,0,0.15);-moz-box-shadow: 0px 5px 34px 0px rgba(0,0,0,0.15);box-shadow: 0px 5px 34px 0px rgba(0,0,0,0.15);}*/
.menustick a{color: #203391 !important;}


#WrapperCopec{position:relative; overflow: hidden;}
.ContainerEscena1, .ContainerEscena1 #Escena1{ z-index: 10;}
.ContainerEscena2, .ContainerEscena2 #Escena2{ z-index: 14;}
.ContainerEscena3, .ContainerEscena3 #Escena3{ z-index: 13;}
.ContainerEscena4, .ContainerEscena4 #Escena4{ z-index: 14;}
.ContainerEscena2, .ContainerEscena2 #Escena5-1{ z-index: 14;}

.FirstTitle h2{font-weight: 800;}

#Escena2{margin-top:-50px;}
#Escena2 .phone1{position:absolute; z-index: 10; transform-style: preserve-3d; width: 540px;}

#Escena5-1{margin-top:-50px;}
#Escena5-1 .Escena5-1phone1{position:absolute; z-index: 10; transform-style: preserve-3d; width: 540px;}

#Escena3{overflow: hidden;}
#Escena3 .GraphPromo{position:absolute;}
#Escena3 .Promo1{z-index: 10;}
#Escena3 .Promo2, #Escena3 .Promo3{z-index: 9;}
.ContainerEscena3{position:relative;}
.ContainerEscena3 .Escena3Graph{z-index: 10; position: fixed;}
#Escena3 .Escena3Carrousel{position: relative; width: 100%;}
#Escena3 .Escena3Carrousel .ImageCarrousel{padding: 20px; backface-visibility: hidden;}


#Escena4{overflow: hidden;position: relative;width: 100%;-webkit-border-top-left-radius: 50px;-webkit-border-top-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-topright: 50px;border-top-left-radius: 50px;border-top-right-radius: 50px;}
#Escena4 .CoverPhone{width: 300px;height: 585px;background-color: #ECF1FB;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 40px;position: absolute;padding: 15px 15px; overflow: hidden;}
#Escena4 .Escena4Info{position:relative;}
.ContainerEscena4{position:relative;}
.ContainerEscena4 .Escena4Graph{z-index: 10; position: fixed;}



#Escena5{overflow: hidden;position: relative;width: 100%;-webkit-border-top-left-radius: 50px;-webkit-border-top-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-topright: 50px;border-top-left-radius: 50px;border-top-right-radius: 50px;}
#Escena5 .Escena5CoverPhone{width: 280px;height: 546px;background-color: #ECF1FB;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;padding: 15px 15px; overflow: hidden;box-shadow: 0 0 90px 0 rgba(6,0,90,0.15);}
#Escena5 #Escena5AppsAsoc .Escena5AppsInfo{background: #ffffff;box-shadow: 0 8px 40px -6px rgba(0,19,106,0.2);padding: 14px;height: 65px;-webkit-border-top-right-radius: 15px;-webkit-border-bottom-right-radius: 15px;-moz-border-radius-topright: 15px;-moz-border-radius-bottomright: 15px;border-top-right-radius: 15px;border-bottom-right-radius: 15px;margin-left: -20px;padding-left: 45px; padding-right: 30px;}
#Escena5 #Escena5AppsAsoc img{position:relative;}
#Escena5 #Escena5AppsAsoc p{color: #203391;font-size: 14px;letter-spacing: -0.11px;line-height: 19px; margin: 0px;}
#Escena5 #Escena5AppsAsoc p strong{font-family: 'Outfit Bold';}
.GraphScroll{position:absolute; z-index: -1; pointer-events: none; width: 35px;}


#Escena6{overflow: hidden;position: relative;}
#Escena6 .Escena6Phone{position:relative; z-index: 10;}
#Escena6 .Escena6Phone #VideoControl{background-color: #FAFAFA;	box-shadow: 0 0 90px 0 rgba(6,0,90,0.15); -webkit-border-top-left-radius: 30.25px;-webkit-border-top-right-radius: 30.25px;-moz-border-radius-topleft: 30.25px;-moz-border-radius-topright: 30.25px;border-top-left-radius: 30.25px;border-top-right-radius: 30.25px; padding: 20px 20px 0px; backface-visibility: hidden; transform-style: preserve-3d; left: 0px;}
#Escena6 .Escena6Info{overflow: hidden; position: relative; z-index: 9;display: block;}


#Escena7{overflow: hidden;position: relative;width: 100%;background-color: #ECF1FB; z-index: 10;backface-visibility: hidden; transform-style: preserve-3d;}




#Escena8{overflow: hidden;position: relative;width: 100%; background-color:#002df8;z-index: 1; backface-visibility: hidden; transform-style: preserve-3d;}
#Escena8 #MiddleFooter{-webkit-border-top-left-radius: 50px;-webkit-border-top-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-topright: 50px;border-top-left-radius: 50px;border-top-right-radius: 50px; background-color: #1231ba; padding: 50px 0px 0px;}
#Escena8 #MiddleFooter ul{margin-bottom:20px;}
#Escena8 #MiddleFooter li{list-style:none; padding: 3px; font-family: 'Outfit Regular'; color: #ffffff; font-size: 14px;}
#Escena8 #MiddleFooter li a{ display:inline-block;font-family: 'Outfit Regular'; color: #ffffff; font-size: 14px; position: relative; text-decoration: none !important;}
#Escena8 #MiddleFooter li.firstLi{font-family: 'Outfit Bold'; margin: 0 0 20px 0; color: #ffffff; font-size: 16px;}
#Escena8 #MiddleFooter li a:hover{-webkit-transition: all .6s;-moz-transition: all .6s;transition: all .6s; color:rgba(255,255,255,0.40);}
#Escena8 #MiddleFooter #BottomFooter{-webkit-border-top-left-radius: 50px;-webkit-border-top-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-topright: 50px;border-top-left-radius: 50px;border-top-right-radius: 50px; background-color: #203390; padding: 50px 0px;}
#Escena8 #MiddleFooter #BottomFooter p{margin-bottom: 0px; font-size: 14px;}
#Escena8 #MiddleFooter #BottomFooter p a{text-decoration:underline; color: #ffffff;}
#Escena8 .DownloadAppFooter{ margin-bottom: 40px; display: inline-block;}




#Escena9{overflow: hidden;position: relative; top:0px; width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}




#Escena10{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
#Escena10 .Escena{padding: 100px 15px;}
#Escena10 .Escaner2Info{position:relative;}
#Escena10 .EstacionesRepeat .IntCombustible{margin: 60px 0px; position: relative;}
#Escena10 .Escaner2Info .IntCombustible{margin: 100px 0px; position: relative;}
#Escena10 .Escaner2Info .IntPronto{margin: 100px 0px; position: relative;}
#Escena10 #StickyWrapp{position:relative;}
#Escena10 #VideoSticky{width:100%;}
#Escena10 #VideoSticky .VideoWrapp{position: relative;}
#Escena10 #VideoSticky .VideoWrapp .VideoEscanner{position: absolute; top: -70px; left: 0px; zoom: 1;filter: alpha(opacity=0); opacity: 0;}



.ContainerEscena3{ width: 100%; position: relative;}
.ContainerEscena3 .WrappCarrousel{position: relative; width: 100%;}
.ContainerEscena3 .WrappCarrousel .CarrouselMenu{position: relative; width: 90%; margin: 0 auto;}
.ContainerEscena3 .WrappCarrousel .CarrouselMenu a{text-decoration: none !important;}
.ContainerEscena3 .WrappCarrousel .NavCarr{ width: 40px; height: 40px; background-color: #ffffff; border: 2px solid #00ff7e; position: absolute; top: 50%; margin-top: -20px; z-index: 10;border-radius: 10px;}
.ContainerEscena3 .WrappCarrousel .ArrowLeft{left:0px; padding: 1px 5px 5px 0px;}
.ContainerEscena3 .WrappCarrousel .ArrowRight{right:0px; padding: 1px 5px 5px 2px;}
.ContainerEscena3 .WrappCarrousel .NavCarr i{font-size: 25px; color: #253894;}
.ContainerEscena3 .CarrouselMenu .ItemLink .WrappItemLink{padding: 50px 20px; background-color: rgba(0, 45, 249, 0.05); margin: 0px 10px;	border-radius: 24px;}
.ContainerEscena3 .CarrouselMenu .ItemLink .WrappItemLin h2{font-family: 'Outfit Regular';}
.ContainerEscena3 .CarrouselMenu .ItemLink .WrappItemLin p{color: #000000; font-size: 12px;font-family: 'Outfit Regular';}




#Escena11{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}


#Escena12{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
#Escena12 .Escena{padding: 100px 15px;}
#Escena12 .GraphCuponPromo{position: relative;}
#Escena12 .GraphCuponPromo .CuponPromoImg{position:absolute; top: 0px; left: 0px; z-index: 10; zoom: 1;filter: alpha(opacity=0);opacity: 0;}
#Escena12 .GraphCuponPromo .CuponPromoMask{ position: relative; z-index: 11;}
#Escena12 .DescCupon{margin: 0px 0px 50px 0px; position: relative; cursor:pointer; zoom: 1;filter: alpha(opacity=40);opacity: 0.4;}
#Escena12 .DescPromo{margin: 0px 0px 50px 0px; position: relative; cursor:pointer; zoom: 1;filter: alpha(opacity=40);opacity: 0.4;}
#Escena12 .DescCupon.TextActive{zoom: 1;filter: alpha(opacity=100);opacity: 1;}
#Escena12 .DescPromo.TextActive{zoom: 1;filter: alpha(opacity=100);opacity: 1;}
#Escena12 .ShowGraph{cursor: pointer;}


#Escena13{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}


#Escena14{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
#Escena14 #Escena14Info .MainInfo p{ font-size: 16px; font-family: 'Outfit Regular'; color:#777777}
#Escena14 #Escena14Info a{ display: block; color:#002DF9; background-color:rgba(0, 45, 249, 0.05); padding: 10px; text-decoration: none; border-radius: 15px; font-size: 16px;font-family: 'Outfit Bold'; text-align: center;}
#Escena14 #Escena14Info a .playicon{display: inline-block;margin-right: 15px;width: 23px;height: 23px;background-color: #00FF7E;border-radius: 5px;padding: 0px 3px;vertical-align: middle;}
#Escena14 #Escena14Info a .playicon i{color: #203391; font-size: 13px;}

#Escena15{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
#Escena15 #Escena15Info .MainInfo p{ font-size: 16px; font-family: 'Outfit Regular'; color:#777777}
#Escena15 #Escena15Info a{ display: block; color:#002DF9; background-color:rgba(0, 45, 249, 0.05); padding: 10px; text-decoration: none; border-radius: 15px; font-size: 16px;font-family: 'Outfit Bold'; text-align: center;}
#Escena15 #Escena15Info a .playicon{display: inline-block;margin-right: 15px;width: 23px;height: 23px;background-color: #00FF7E;border-radius: 5px;padding: 0px 3px;vertical-align: middle;}
#Escena15 #Escena15Info a .playicon i{color: #203391; font-size: 13px;}


#Escena16{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
#Escena17{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
#Escena17 #VideoControl{transform-style: preserve-3d;left: 0px;width: 100%;margin: 0 auto;bottom: 0px;}


#EscenaIntPromo{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
#EscenaIntPromo .IntPromoBg{width: 100%;}
#EscenaIntPromo .ContentPromo{color: #002DF9; font-size: 18px; letter-spacing: 0.37px;font-family: 'Outfit Bold';}
#EscenaIntPromo .InfoLegalPromo p{color:#777777; font-size: 16px;}



#ArchivePromoHead{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d;}
/*#ArchivePromoHead .PromoDestacada{-webkit-border-bottom-left-radius: 25%;-moz-border-radius-bottomleft: 25%;border-bottom-left-radius: 25%;}*/
#ArchivePromoHead .PromoInfoDestacada{-webkit-border-top-right-radius: 50px;-webkit-border-bottom-right-radius: 50px;-moz-border-radius-topright: 50px;-moz-border-radius-bottomright: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px; background-color: #00FF7E; padding-right: 10px;padding-left: 0px;}
#ArchivePromoHead .PromoInfoDestacada .WrappPromoInfoDestacada{-webkit-border-top-right-radius: 50px;-webkit-border-bottom-right-radius: 50px;-moz-border-radius-topright: 50px;-moz-border-radius-bottomright: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px; background-color: 
#002DF9; padding: 30px;}
#ArchivePromoHead .PromoInfoDestacada .InfoPromoDestacada{color: #00FF7E;font-size: 12px;letter-spacing: 0.75px;font-family: 'Outfit Regular'; text-transform: uppercase;}
#ArchivePromoHead .PromoInfoDestacada .TituloPromoDestacada{color: #FFFFFF; font-family: 'Outfit Bold'; font-size: 38px;}
#ArchivePromoHead .PromoInfoDestacada .LinkPromoDestacada{color: #00FF7E;font-size: 16px; text-decoration: none; font-family: 'Outfit Bold';}
#ArchivePromoHead .PromoInfoDestacada .LinkPromoDestacada i{vertical-align: middle; color: #ffffff;}



#ArchivePromoProducts{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d; padding: 100px 0px;}
#ArchivePromoProducts .Promofilters{ width: 100%; padding: 0px; margin: 0px; text-align: left;}
#ArchivePromoProducts .Promofilters li{list-style: none; display: inline-block; margin-right: 10px; padding: 10px 20px; color:#1A42F9; border-radius: 24px; border: 1px solid #002DF9; font-size: 14px;font-family: 'Outfit Bold';-webkit-transition: all .2s;-moz-transition: all .2s;transition: all .2s;margin-bottom: 15px;}
#ArchivePromoProducts .Promofilters li.active, #ArchivePromoProducts .Promofilters li:hover{background-color: #002DF9; color: #00FF7E;}

#ArchivePromoProducts .AllPromos .ItemPromo{text-decoration: none !important; margin-bottom: 30px;}
#ArchivePromoProducts .AllPromos .ItemPromo .WrappImagePromo{-webkit-border-top-left-radius: 30px;-webkit-border-top-right-radius: 30px;-moz-border-radius-topleft: 30px;-moz-border-radius-topright: 30px;border-top-left-radius: 30px;border-top-right-radius: 30px; overflow: hidden; position: relative; z-index: 9;}
#ArchivePromoProducts .AllPromos .ItemPromo .WrappInfoPromo{background-color: #00FF7E; padding-top: 10px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; margin-top: -20px; z-index: 10; position: relative;}
#ArchivePromoProducts .AllPromos .ItemPromo .WrappInfoPromo .InfoPromo{background-color: #ffffff; padding: 40px 50px 20px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; z-index: 10; position: relative;}
#ArchivePromoProducts .AllPromos .ItemPromo .WrappInfoPromo .InfoPromo .TituloPromo{color: #203391; font-size: 18px; letter-spacing: 0.55px; font-family: 'Outfit Regular';}
#ArchivePromoProducts .AllPromos .ItemPromo .WrappInfoPromo .InfoPromo .PrecioPromo{color: #203391; font-size: 30px; letter-spacing: 0.55px; font-family: 'Outfit Bold';}
#ArchivePromoProducts .AllPromos .ItemPromo .WrappInfoPromo .InfoPromo .PrecioRef{color: rgba(32, 51, 145, 0.4); font-size: 14px; letter-spacing: 0.55px; font-family: 'Outfit Bold';}



/*BENEFICIOS STYLES

 .Benefilters li {
    list-style: none;
    display: block;
    margin-right: 10px;
    padding: 0px 30px;
    color: #203391;
    border-radius: 24px;
    font-size: 14px;
    font-family: 'Outfit Regular';
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    margin-bottom: 9px;
	cursor: pointer;
}

ul.Benefilters.filter-button-group {
    padding-left: 0px;
}
#ArchivePromoProducts .Benefilters li:hover {
    color: #203391;
    padding: 8px 30px;
    font-family: 'Outfit Bold';
}
.Benefilters li.active {background-color: #00FF7E; color: #203391; padding: 8px 30px;font-family: 'Outfit Bold';}


.InfoBene {
    background-color: #ffffff;
    padding: 40px 30px 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    z-index: 10;
    position: relative;
}

 .InfoBene .PrecioPromo {
    color: #203391;
    font-size: 30px;
    letter-spacing: 0.55px;
    font-family: 'Outfit Bold';
}

.WrappInfoBene {
    padding-top: 0px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin-top: -30px;
    z-index: 10;
    position: relative;
}


h6.MarcaBene {
    font-weight: bold;
    font-size: 12px;
    font-family: 'Outfit Regular';
    color: #a5a4a4;
    padding-bottom: 10px;
}

.ImgLogo{
    width: 15%;
    margin-bottom:10px;
}


img.ImgDestacada {
    width: 100%;
    height: auto;
    border-radius: 25px;
}



.display-Legal {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
        color: #203391;
}


.ContentBeneInterior {
    padding: 50px 0px 150px 0px;
	margin-top: 10vh;
}
*/

/* remove double scroll css */
body {
	overflow: hidden !important;
	overflow-x: hidden !important;
}
.dropdown-pay-content a img {
    margin-right: 15px;
    width: 17px;
}
.dropdown-pay-content a {
    padding: 10px 0 10px 5px;
    text-decoration: none;
    display: block;
    color: #0C122D;
    font-family: "Outfit Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin: 16px 0px;
}
.dropdown-pay-content.bene_pay {
    position: absolute;
    width: 250px;
    max-width: 250px;
    min-width: 250px;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    border-radius: 24px;
    display: none;
}

/*FIN BENEFICIOS STYLES*/

#Escena20{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d; padding: 100px 0px;}
#Escena21{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d; padding: 100px 0px;}
#Escena21 .EstacionesInfo .IntEstacionesInfo{margin: 100px 0px; position: relative;}

#Escena22{overflow: hidden;position: relative;width: 100%; z-index: 10; backface-visibility: hidden; transform-style: preserve-3d; padding: 100px 0px;}

.elementocenter{ display: flex; justify-content: center; align-items: center;}
.BtnVerMas{display: inline-block;padding: 14px 20px;width: 240px;background-color: rgba(0, 45, 249, 0.05);border-radius: 13px;text-align: center;color: #002DF9;font-size: 16px; text-decoration: none !important;}
.BtnDescarga{  padding: 14px 20px;width: 240px;background-color: #00FF7E;border-radius: 50px; font-weight: bold; text-align: center;color: #203391;font-size: 16px; text-decoration: none !important;}

.switch {position: relative;height: 40px;background-color:rgba(0, 46, 250, 0.03);border-radius: 50px;}
.switch-label {position: relative;z-index: 2;float: left;line-height: 40px;font-size: 16px;color: #002DF9;text-align: center;cursor: pointer;}
.switch-label img{vertical-align: middle;}
.switch-label-off {padding-left: 2px;}
.switch-label-on {padding-right: 2px;}
.switch-input {display: none;}
.switch-input:checked + .switch-label {color: #002DF9;}
.switch-selection {position: absolute;z-index: 1;top: 0px;left: 0px;display: block;height: 40px;border-radius: 50px;background-color: rgba(0, 45, 249, 0.15);-webkit-transition: left 0.15s ease-out;-moz-transition: left 0.15s ease-out;-ms-transition: left 0.15s ease-out;-o-transition: left 0.15s ease-out;transition: left 0.15s ease-out;}


.BorderRadiusTop{-webkit-border-top-left-radius: 50px;-webkit-border-top-right-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-topright: 50px;border-top-left-radius: 50px;border-top-right-radius: 50px;}


.fixTranslate3d{transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);}

.AppFooterOpen{margin-bottom: 10px; display: block; cursor:pointer;}


/*------------------------------------*\
TYPOGRAPHY
\*------------------------------------*/

@font-face {
font-family: 'Outfit Medium';
src: url('fonts/outfit/Outfit-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-variant: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit Regular';
src: url('fonts/outfit/Outfit-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-variant: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit Light';
src: url('fonts/outfit/Outfit-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-variant: normal;
font-display: swap;
}

@font-face {
font-family: 'Outfit Bold';
src: url('fonts/outfit/Outfit-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-variant: normal;
font-display: swap;
}

h1,h2,h3,h4,h5,h6,p,a,li,label{letter-spacing: 0.1px; font-variant: none;}

.TTMedium{font-family: 'Outfit Medium';}
.TTRegular{font-family: 'Outfit Regular';}
.TTLight{font-family: 'Outfit Light';}
.TTBold{font-family: 'Outfit Bold';}
.p12{font-size: 12px;}
.p16{font-size:16px;}
.p18{font-size:18px;}
.p20{font-size: 20px;}
.TextBlue{color:#203391} 
.TextGrey{color:#777777; padding: 5px 0px;}
.TextWhite{color:#ffffff}
.TextUpper{text-transform:uppercase}
.letSpac{letter-spacing: 1px;}
video {width: 100%;height: auto;}
.BgBlue{background-color:darkblue;}
.BgLightGrey{background-color:#f3f5ff;}
.BgWhite{background-color:#ffffff;}
.ImgInline{display: inline-block;vertical-align: middle;}
.MarginBottom{margin-bottom: 20px;}
.NoPad{padding-left: 0px; padding-right: 0px;}
/*------------------------------------*\
RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {
.NoPadLeft{padding-left: 0px;}
.PadRight{padding-right: 0px;}
#ArchivePromoHead .PromoInfoDestacada{margin-left: 0%;}
.menuwrapp{display: none;}
.menuMobileWrapp, .MenuMobile{display: block;}
.menuMobileWrapp{padding: 44px 20px 10px 20px;}
#Escena2 .phone1{position:relative; margin-top: 20%;}
#Escena5-1 .Escena5-1phone1{position:relative; margin-top: 0px;}
#Escena4{background-color:#eff3fd;}
#Escena5 .Escena5CoverPhone{ position: relative; margin: 0 auto;}
#Escena6 .Escena6Phone #VideoControl{position: relative;}
#Escena5 #Escena5AppsAsoc .Escena5AppsInfo{ margin-left: -20px; padding-left: 35px;padding-right: 20px;}
.ImgInline{width: 10%;}
.switch {width: 340px;}
.switch-label{ width: 170px;}
.switch-selection{ width: 170px;}
.switch-input:checked + .switch-label-on ~ .switch-selection {left: 170px;}
#Escena10, #Escena12, #Escena17, #Escena14, #ArchivePromoProducts{margin-top: -60px;}
#Escena17 #VideoControl{position: relative;}
.single-promociones{padding-top: 0px;}
.single-beneficios{padding-top: 0px;}
.ContainerEscena1 h2{ line-height: normal; margin: 0px;}
}
@media only screen and (min-width:480px) {
.NoPadLeft{padding-left: 0px;}
.PadRight{padding-right: 0px;}
#ArchivePromoHead .PromoInfoDestacada{margin-left: 0%;}
.menuwrapp{display: none;}
.menuMobileWrapp, .MenuMobile{display: block;}
#Escena2 .phone1{position:relative; margin-top: 0px;}
#Escena5-1 .Escena5-1phone1{position:relative; margin-top: 0px;}
#Escena4{background-color:#eff3fd;}
#Escena5 .Escena5CoverPhone{ position: relative; margin: 0 auto;}
#Escena6 .Escena6Phone #VideoControl{position: relative;}
#Escena5 #Escena5AppsAsoc .Escena5AppsInfo{ margin-left: -20px; padding-left: 35px;padding-right: 20px;}
.ImgInline{width: 10%;}
.switch {width: 340px;}
.switch-label{ width: 170px;}
.switch-selection{ width: 170px;}
.switch-input:checked + .switch-label-on ~ .switch-selection {left: 170px;}
#Escena10, #Escena12, #Escena17, #Escena14, #ArchivePromoProducts{margin-top: -60px;}
#Escena17 #VideoControl{position: relative;}
.single-promociones{padding-top: 0px;}
.single-beneficios{padding-top: 0px;}

.ContainerEscena1 h2{ line-height: normal; margin: 0px;}

@media only screen and (min-width:900px) {
	.ContentBeneInterior {
	margin-top: 10vh !important;
}
.NoPadLeft{padding-left: 0px;}
.PadRight{padding-right: 0px;}
#ArchivePromoHead .PromoInfoDestacada{margin-left: 0%;}
.menuwrapp{display: none;}
.menuMobileWrapp, .MenuMobile{display: block;}
#Escena2 .phone1{position:relative; margin-top: 0px;}
#Escena5-1 .Escena5-1phone1{position:relative; margin-top: 0px;}
#Escena4{background-color:#eff3fd;}
#Escena5 .Escena5CoverPhone{ position: relative; margin: 0 auto;}
#Escena6 .Escena6Phone #VideoControl{position: relative;}
#Escena5 #Escena5AppsAsoc .Escena5AppsInfo{ margin-left: -20px; padding-left: 35px;padding-right: 20px;}
.ImgInline{width: 10%;}
.switch {width: 340px;}
.switch-label{ width: 170px;}
.switch-selection{ width: 170px;}
.switch-input:checked + .switch-label-on ~ .switch-selection {left: 170px;}
#Escena10, #Escena12, #Escena17, #Escena14, #ArchivePromoProducts{margin-top: -60px;}
#Escena17 #VideoControl{position: relative;}
.single-promociones{padding-top: 0px;}
.single-beneficios{padding-top: 0px;}

.ContainerEscena1 h2{ line-height: normal; margin: 0px;}
	

}	
	
}
@media only screen and (min-width:1024px) {
	.ContentBeneInterior {
	margin-top: 10vh !important;
		
}
.NoPadLeft{padding-left: 0px;}
.PadRight{padding-right: 15px;}
#ArchivePromoHead .PromoInfoDestacada{margin-left: -20%;}
.menuwrapp{display: block;}
.menuMobileWrapp, .MenuMobile{display: none;}
#Escena2 .phone1{position:absolute; margin-top: 80px;}
#Escena5-1 .Escena5-1phone1{position:absolute; margin-top: 80px;}
#Escena4{background-color:transparent;}
#Escena5 .Escena5CoverPhone{ position: absolute; margin:inherit;}
#Escena6 .Escena6Phone #VideoControl{position: absolute;}
#Escena5 #Escena5AppsAsoc .Escena5AppsInfo{margin-left: -20px;padding-left: 45px;padding-right: 30px;}
.ImgInline{width: 7%;}
.switch {width: 360px;}
.switch-label{ width: 180px;}
.switch-selection{ width: 180px;}
.switch-input:checked + .switch-label-on ~ .switch-selection {left: 180px;}
#Escena10, #Escena12, #Escena17, #Escena14, #ArchivePromoProducts{margin-top:0px;}
#Escena17 #VideoControl{position: absolute;}
.single-promociones{padding-top: 99px;}
.single-beneficios{padding-top: 99px;}

.ContainerEscena1 h2{ line-height: normal; margin: 0px;}
}
@media only screen and (min-width:1140px) {
.NoPadLeft{padding-left: 0px;}
.PadRight{padding-right: 15px;}
#ArchivePromoHead .PromoInfoDestacada{margin-left: -20%;}
.menuwrapp{display: block;}
.menuMobileWrapp, .MenuMobile{display: none;}
#Escena2 .phone1{position:absolute; margin-top: 0px;}
#Escena5-1 .Escena5-1phone1{position:absolute; margin-top: 0px;}
#Escena4{background-color:transparent;}
#Escena5 .Escena5CoverPhone{ position: absolute; margin:inherit;}
#Escena6 .Escena6Phone #VideoControl{position: absolute;}
#Escena5 #Escena5AppsAsoc .Escena5AppsInfo{margin-left: -20px;padding-left: 45px;padding-right: 30px;}
.ImgInline{width: 7%;}
.switch {width: 360px;}
.switch-selection{ width: 180px;}
.switch-label{ width: 180px;}
.switch-input:checked + .switch-label-on ~ .switch-selection {left: 180px;}
#Escena10, #Escena12, #Escena17, #Escena14, #ArchivePromoProducts{margin-top: 0px;}
#Escena17 #VideoControl{position: absolute;}
.single-promociones{padding-top: 99px;}
.single-beneficios{padding-top: 99px;}

.ContainerEscena1 h2{ line-height: normal; margin: 0px;}
}
@media only screen and (min-width:1280px) {
	.ContentBeneInterior {
	margin-top: 10vh !important;
}
.NoPadLeft{padding-left: 0px;}
.PadRight{padding-right: 15px;}
#ArchivePromoHead .PromoInfoDestacada{margin-left: -20%;}
.menuwrapp{display: block;}
.menuMobileWrapp, .MenuMobile{display: none;}
#Escena2 .phone1{position:absolute; margin-top: 0px;}
#Escena5-1 .Escena5-1phone1{position:absolute; margin-top: 0px;}
#Escena4{background-color:transparent;}
#Escena5 .Escena5CoverPhone{ position: absolute; margin:inherit;}
#Escena6 .Escena6Phone #VideoControl{position: absolute;}
#Escena5 #Escena5AppsAsoc .Escena5AppsInfo{margin-left: -20px;padding-left: 45px;padding-right: 30px;}
.ImgInline{width: 7%;}
.switch {width: 360px;}
.switch-selection{ width: 180px;}
.switch-label{ width: 180px;}
.switch-input:checked + .switch-label-on ~ .switch-selection {left: 180px;}
#Escena10, #Escena12, #Escena17, #Escena14, #ArchivePromoProducts{margin-top: 0px;}
#Escena17 #VideoControl{position: absolute;}
.single-promociones{padding-top: 99px;}
.single-beneficios{padding-top: 99px;}

.ContainerEscena1 h2{ line-height: normal; margin: 0px;}
}

/*------------------------------------*\
MISC
\*------------------------------------*/

::selection {
background:#04A4CC;
color:#FFF;
text-shadow:none;
}
::-webkit-selection {
background:#04A4CC;
color:#FFF;
text-shadow:none;
}
::-moz-selection {
background:#04A4CC;
color:#FFF;
text-shadow:none;
}

/*------------------------------------*\
MISC
\*------------------------------------*/
::selection {background:#111111;color:#FFF;text-shadow:none;}
::-webkit-selection {background:#111111;color:#FFF;text-shadow:none;}
::-moz-selection {background:#111111;color:#FFF;text-shadow:none;}
.posAbsolute{position:absolute;}
.posRelative{position:relative;}
.container-no-gutter{padding-right: 0px; padding-left: 0px;}
.item-no-gutter{padding-right: 0px; padding-left: 0px;}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clear2{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:40px;}
.clear3{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:30px;}
.clear4{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:10px;}
.cont-center{-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%); position:absolute; top: 50%; left: 50%;}
.cont-centerFix{-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%); position:fixed;}
.cont-center-bottom{-webkit-transform: translate(-50%,-0%);-ms-transform: translate(-50%,-0%);transform: translate(-50%,-0%);left:50%;bottom:0%; position:absolute;}
.cont-center-top{-webkit-transform: translate(-50%,-0%);-ms-transform: translate(-50%,-0%);transform: translate(-50%,-0%);left:50%;top:0%; position:absolute;}
.col-center{ float:none; margin:0 auto !important;}
.ElementAnim{outline: 0;-webkit-transition: all .2s;-moz-transition: all .2s;transition: all .2s;}
/*------------------------------------*\
WORDPRESS CORE
\*------------------------------------*/

.alignnone {
margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display:block;
margin:5px auto 5px auto;
}
.alignright {
float:right;
margin:5px 0 20px 20px;
}
.alignleft {
float:left;
margin:5px 20px 20px 0;
}
a img.alignright {
float:right;
margin:5px 0 20px 20px;
}
a img.alignnone {
margin:5px 20px 20px 0;
}
a img.alignleft {
float:left;
margin:5px 20px 20px 0;
}
a img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
.wp-caption {
background:#FFF;
border:1px solid #F0F0F0;
max-width:96%;
padding:5px 3px 10px;
text-align:center;
}
.wp-caption.alignnone {
margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
margin:5px 20px 20px 0;
}
.wp-caption.alignright {
margin:5px 0 20px 20px;
}
.wp-caption img {
border:0 none;
height:auto;
margin:0;
max-width:98.5%;
padding:0;
width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

/*------------------------------------*\
PRINT
\*------------------------------------*/

@media print {
* {
background:transparent !important;
color:#000 !important;
box-shadow:none !important;
text-shadow:none !important;
}
a,
a:visited {
text-decoration:underline;
}
a[href]:after {
content:" (" attr(href) ")";
}
abbr[title]:after {
content:" (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content:"";
}
pre,blockquote {
border:1px solid #999;
page-break-inside:avoid;
}
thead {
display:table-header-group;
}
tr,img {
page-break-inside:avoid;
}
img {
max-width:100% !important;
}
@page {
margin:0.5cm;
}
p,
h2,
h3 {
orphans:3;
widows:3;
}
h2,
h3 {
page-break-after:avoid;
}

@viewport{
    zoom: 1.0;
    width: device-width;
}
	

	.title{
	color: #203391;
    font-family: 'Outfit Bold';
    font-size: 40px;

}
}




















.app-win .confe::before {
	content: " ";
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
	background-image: url("../img/referidos/app-win/bg1.png");
	transform: rotate(-185.93deg);
	width: 90px;
	height: 70px;
	display: block;
	position: absolute;
	left: -20px;
	top: 0;
	z-index: -1;
}

.app-win .confe2::before {
	content: " ";
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../img/referidos/app-win/bg2.png");
  transform: rotate(-3.93deg);
  width: 97px;
  height: 105px;
  display: block;
  position: absolute;
  left: -35px;
  top: -40px;
  z-index: -1;
}
.home-content .sectionCodes {
    margin: 0 10%;
    z-index: 100;
    position: relative;
}
.app-win p{
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  font-feature-settings: 'liga' off;
  color: #657085;	 
  padding: 5px;
}

.app-win .win-subtitle{
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  font-feature-settings: 'liga' off;
  color: black;
}

.app-win .win-blue{
  color: #203391;
}


.home-content {
  z-index: 101;
  margin-top: 100vh;
  position: relative;
}

.home-content .sectionCode{
    background-color: white;
    border-radius: 121px;
    align-items:center;
    margin: 0 5% 0 5%;
}

.home-content .sectionCode .space{
	padding: 15% 5%;
}

.home-content .sectionCode a{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #002DF9;
}

.home-content .sectionCupon{
	background-color: white;
	border-radius: 121px;
	margin: 0 5% 0 5%;
	background-size: cover;
  background-color: #002df9;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../img/cupon/bg.png");
}

.home-content .sectionCupon .pronto{
	display: inline-block;
	background: #FFFFFF;
	box-shadow: 0px 0px 18px rgba(1, 63, 157, 0.15);
	border-radius: 200px;
	padding: 12px 32px;
}

.home-content .sectionCupon .btn-cupon{
	padding: 12px 32px;
	background: #00FF7E;
	border-radius: 16px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;

	/* identical to box height, or 150% */
	text-align: center;
	font-feature-settings: 'liga' off;

	/* Primary/500 default */
	color: #002DF9;
}

.home-content .sectionCupon .space{
	padding: 5% 20% 5% 5%;
}

.home-content .sectionCupon h3{
	color: #fff;
}

.home-content .sectionCupon p{
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;

	/* or 150% */
	font-feature-settings: 'liga' off;
	color: #FFFFFF;
}

.home-content .sectionCupon .bgCube{
    background-size: 120%;
    background-repeat: no-repeat;
    background-image: url("../img/cupon/cube.png");
	align-items: center;
	display: flex;
	justify-content: center;
	overflow: hidden;
border-top-right-radius: 115px;
border-bottom-right-radius: 115px;
}

@media only screen and (max-width:480px) {
	.home-content .sectionCupon{
        border-radius: 60px;
    }
	.home-content .sectionCupon .space{
		padding: 15% 10% 5% 10%;
	}
	.home-content .sectionCupon .bgCube{
		background-size: 110%;
		border-bottom-right-radius: 55px;
		border-bottom-left-radius: 55px;
		border-top-right-radius: 0;
		background-position: -35px 10px;
	}
	
	.home-content .sectionCupon .pronto{
		padding: 8px 16px;
	}
	
	.home-content .sectionCupon .pronto img{
		width: 60px;
	}
}

/*
 * APP INFO
 */
 

.app-info {
  border-radius: 55px 55px 0px 0px;
  margin-bottom: -70px;
  padding: 10% 0%;
  background-color: #F3F5FA;
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  background-image: url("../img/cupon/texture.png");
}

@media only screen and (max-width:480px) {
    .app-info {
        padding: 10% 0% 30% 0%;
      background-size: 300%;
      background-position: initial;
    }
    .home-content .sectionCode{
		border-radius: 48px;
		border-bottom-right-radius: 100px;
		border-bottom-left-radius: 100px;
    }
	
	.home-content .sectionCode .space{
		padding: 15% 10% 10% 10%;
	}
}

/*Slider Home*/

/*Tamaño Slider Desktop*/
div#n2-ss-1 .n2-ss-slide-backgrounds {
    z-index: 10;
    width: 100%;
    height: 700px;
}

/*Tamaño Slider Mobile*/
div#n2-ss-2 .n2-ss-slide-backgrounds {
    z-index: 10;
    height: 354px;
}

.pum-container.pum-responsive.pum-responsive-small {
    margin-left: -20%;
    width: 40%;
    border-radius: 10px;
}

.pum-theme-2428 .pum-container, .pum-theme-copecpay .pum-container {
    padding: 18px;
    border-radius: 0px;
    border: 4px none #000000;
    box-shadow: 1px 1px 3px 0px rgba( 2, 2, 2, 0.23 );
    background-color: rgba( 0, 45, 249, 1.00 );
    border-radius: 10px;
}

/* ---------- ESTILOS HOME NUEVO 2024 ------------ */

/*Hero Home*/

	.home-page-intro {
    display: flex;
    background-color: #0163f8;
    height: 720px;
    align-items: center;
		margin-top:8rem;
}

	h2.titleIntro {
color: #0C122D;
font-family: "Outfit Bold";
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 56px; 
		margin:12px 0;
}
	
	
	p.subIntro{
color: #657085;
font-family: "Outfit Medium";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px; 
		margin-top:8px;
	}

	h1.title-hero-intro {
color: #FFF;
font-family: "Outfit Bold";
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: 72px;
margin:16px 0;
}
	
	p.subtext-hero-intro {
color: #FFF;
font-family: "Outfit Medium";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; 
margin-bottom:32px;
}

	ul.iconos-apps img {
    margin-right: 16px;
}

	.home-hero-video{
/*background: #0057F7;*/
background: #0C122D;
max-height: 768px;
  width: 100%;
  object-fit: cover;
  position: relative;
  left: 0;
  top:80px;
  right: 0;
  z-index: 0;
	}

video#video-homepage {
    display: block !important;
    top: 0;
}

.content-hero-video {
    display: block;
    position: absolute;
    z-index: 1;
    top: 20%;
    width: 440px;
	    margin: 0 120px;
}	


/*What App*/

	.section-whats-app {
    display: flex;
    background-color: #0C122D;
   padding:54px 0 ;
    align-items: center;
		height:100%;
		min-height:1021px;
		/*position:relative;*/
}



.nav-pills .nav-link {
    border-radius: 8px 8px 0 0;
}

	  
	      .nav-link {
			  display: flex;
      position: relative;
	margin-bottom:14px;
	padding:16px 16px 24px 16px;
			  width:100%;
			  max-width: 488px;
			  
    }


.icon-tab {
    margin-right: 16px;
	flex: none;
}

	      .nav-link h3 {
font-family: "Outfit Medium";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 24px;
    }



.tex-tab{
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
}


	.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #0F1738;
	padding:16px 16px 16px 16px;
	border-bottom: 2px solid #1C2B69;
} 



    .progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background-color: #0062F7;
      width: 0%;
    }



    .nav-link.active .progress-bar {
      width: 100%;
    }
	  
    .progress-bar-animation {
      animation: progressBar 10s linear forwards;
    }



    @keyframes progressBar {
      from {
        width: 0%;
      }
      to {
        width: 100%;
      }
    }



/*Funciones*/

.functions{		
		background-color: #fff;
		padding:96px 0;		
	}
	
	.card-functions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20px;
}
		
.card-one .content-card {
    display: block;
    position: absolute;
	width: 250px;
    top: 220px;
    left: 16px;
}
	
.card-one .footer-btn {
    display: block;
    position: absolute;
    bottom: 170px;
    right: 16px;
}
	
.card-cuatro .content-card {
    display: block;
    position: absolute;
	width: 250px;
    top: 20px;
    left: 16px;
	z-index:1;
}	


.overlay-card {
  background: rgba(0, 0, 0, 0.30);
    width: 100%;
    height: 403px;
  position: fixed;
  top: 0;
	border-radius: 20px;
}
	
	
 .content-card h3 {
 color: #FFF;
font-family: "Outfit Medium";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 40px;

}

.content-cards h3 {
color: #FFF;
font-family: "Outfit Medium";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 40px;

}

.content-card p {
color:  #FFF;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
	
.content-cards p {
color:  #FFF;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
width: 100%;
max-width: 272px;
}
	

video.video-card-one {
    width: 1435px;
    object-fit: cover;
    overflow: hidden;
}
	
.card-one {
    width: 100%;
    height: 517px;
}
	
.card-dos .content-card {
	display: block;
    position: absolute;
	width: 250px;
    top: 150px;
    left: 16px;

}
	
.card-dos .footer-btn {
    display: block;
    position: absolute;
    top: 397px;
    right: 16px;
}
	

.card-tres .content-cards {
    display: block;
    position: absolute;
    bottom: 230px;
    left: 16px;
}
	
	
.card-tres .footer-btn {
    display: block;
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.card-functions.card-cinco {
   border-radius: 26px;
background: linear-gradient(328deg, #002DF9 0%, #203391 97.89%);
    width: 100%;
    max-width: 293px;
}
	
/*Beneficios*/

.beneficios{	
	   display: flex;
    align-items: center;
		 background-color: #F3F5FA;
		padding:96px 0;	
		
	}
	
img.logo-fullcopec {
    margin-bottom: 8px;
}



.card-beneficio-uno .content-bene {
    display: block;
    position: absolute;
    top: 5px;
    margin: 15px;
    padding: 1rem;
    width: 450px;
}


	
		.card-beneficio-dos .content-bene {
    display: block;
    position: absolute;
    top: 5px;
    margin: 15px;
    padding: 1rem;
    width: 310px;
}
	
			.card-beneficio-tres .content-bene {
    display: block;
    position: absolute;
	bottom: 2px;
    margin: 15px;
    padding: 1rem;
    width: 300px;
}


.card-beneficio-tres {
	margin-top:32px;
}
	
	.content-bene h3{
color:  #FFF;
font-family: "Outfit Medium";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; 
	}	
	
		.content-bene p{
color:  #FFF;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
	}
	
	
		video.video-card-cuatro {
    width: 100%;
			height:403px;
    object-fit: cover;
    overflow: hidden;
}
	
	
.card-cuatro .footer-btn {
    display: block;
    position: absolute;
    right: 16px;
    top: 346px;
	z-index:1;
}
	
.card-cinco .content-cards {
    display: block;
    position: absolute;
    bottom: 260px;
    left: 16px;
}
	
.card-cinco .footer-btn {
    display: block;
    position: absolute;
    right: 100px;
    bottom: 55px;
}
	
	.card-functions.card-cinco img {
    border-radius: 26px;
}
	
	.card-functions.card-one {
    margin-top: 70px;
}
	.card-functions.card-dos {
    margin-top: 130px;
		border-radius: 26px;
background: linear-gradient(143deg, #2D5CD3 1.72%, #1D9CC5 133.02%);
}
	

		/*Ponto*/
.section-pronto{		
		background-color: #F3F5FA;
		padding:5rem 0;
		
	}

.backImagenProductos {
    display: block;
    position: relative;
    background-image: url(/wp-content/themes/chris/img/homepage/pronto-productos_op.png);
    height: 730px;
    background-position: center;
    background-size: cover;
    left: 140px;
    transform: scale(1.3);
    z-index: 1;
	top:80px;
}

p.displayIntro {
color: #0C122D;
font-family: "Outfit Bold";
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 32px; 
	margin-bottom:0;
	margin-top:32px;
}

ul.list-funciones-pronto {
    margin-top: 32px;
    margin-bottom: 32px;
}

ul.list-funciones-pronto li {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
	margin-bottom: 20px;
}

ul.list-funciones-pronto p {
color:  #657085;
font-family: "Outfit Regular";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px; 
	margin: 0;
}


.ver-mas{
	height:40px;
	color: #FFF;
	font-size: 16px;
border-radius: 100px;
background: #0062F7;
padding: 8px 24px;
	justify-content: center;
	cursor:pointer;
}


.btn-action-principal{
	display:inline-block !important;
	height:40px;
border-radius: 100px;
background: #0062F7;
padding: 8px 24px;
	justify-content: center;
	cursor:pointer;
}

a.btn-action-principal{
color: #FFF;
text-align: center;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
text-decoration:none;
	cursor:pointer;
	
}

a.btn-action-principal 	h2{
color: #FFF;
text-align: center;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
text-decoration:none;
cursor:pointer;
}

a.btn-action-principal 	h5{
color: #FFF;
text-align: center;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
text-decoration:none;
cursor:pointer;
}



.btn-action-secundario{
	display:inline-block !important;
	height:40px;
border-radius: 100px;
background: #ffffff;
padding: 8px 24px;
	cursor:pointer;
}

a.btn-action-secundario{
color: #0432FD;
text-align: center;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
text-decoration:none;
cursor:pointer;
}

/*Seccion Copec pay */
.section-pay{	
	   display: flex;
    align-items: center;
		 background: linear-gradient(184deg, #002DF9 2.93%, #001FA9 84.93%);
	padding: 0rem;
	overflow:hidden;
	height:800px;

	}

h2.titleIntro span {
    color: #07FA76;
}


img.img-pay {
    position: relative;
    display: block;
    transform: scale(1.6);
    left: 30%;
}
/*
.backImagenCopecpay {
    display: block;
    position: relative;
    background-image: url(http://ec2-52-90-91-91.compute-1.amazonaws.com:8081/wp-content/themes/chris/img/homepage/Copec-Pay-section.png);
    height: 640px;
    background-position: center;
    background-size: contain;
	background-repeat: no-repeat;
    left: 370px;
}

*/

.inline-icons {
    margin: 30px 0 40px 0;
}

.inline-icons img {
    margin-right: 30px;
}

/* Section Descarga APP*/

.section-descargar-app{
		   display: flex;
    align-items: center;
		padding: 147px 0 109px 0;
	
}

.container.banner-app {
    width: 1080px;
    height: 392px;
    border-radius: 24px;
    background: #0062F7;
  
}

.contentAppBanner {
	width:380px;
    margin: 0px 80px;
}

.contentAppBanner h2 {
color: #FFF;
font-family: "Outfit Bold";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 40px;
	margin-top:10px !important;
	margin-bottom:5px;
}

.contentAppBanner p {
color:#FFF;
font-family: "Outfit Medium";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px; 
}


.section-huella-carbono {
    display: flex;
    background: #003800;
    height: 108px;
    align-items: center;
	padding: 0 290px;
}

h6.titleHuella {
color: #F1FBE8;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}

p.subHuella {
color: #F1FBE8;
font-family: "Outfit Regular";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

h6.titleHuella span {
    color: #A9FF5D;;
}

a.btn-lineal-huella {
	    color: #fff;
    text-align: center;
    font-family: "Outfit Regular";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    text-decoration: none;
}

.btn-lineal-huella {
    display: flex;
    align-items: center;
    width: 108px;
    height: 32px;
    border-radius: 100px;
    border: 1px solid #fff;
    padding: 8px 24px;
	margin: 0 auto;
}


.menu-tabs {
    width: 100%;
    padding: 0px 120px;
    border-bottom: 1px solid #ececec;
    height: 32px;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 99999;
    background: #fff;
}

.active-nav {
    border-bottom: 2px solid red;
}

/*ESTILOS RESPONSIVOS NUEVO HOME*/



@media (min-width: 320px) and (max-width: 600px) {
.home-page-intro {
    align-items: flex-end;
	height:100%;
}	
	
h1.title-hero-intro {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
}	
	
	img.icon-appcopec {
    width: 155px;
}
	


.content-hero-video {
    top: 0px;
	width: auto;
	margin: 0 auto;
	padding: 70px 24px;
}	
	
p.subtext-hero-intro {
    font-size: 19px;
	line-height: 30px;

}	
	
	
video#video-homepage {
    display: none !important;
  /*  position: absolute;
    bottom: 56px;
    right: 32%;
    transform: scale(1.5);
	height:auto;*/
}	
	
	.home-hero-video {
   min-height: 768px;
}
	
	
video#video-homepage-mobile {
    display: block;
    position: absolute;
    top: 0px;
}		
	
	
h2.titleIntro {
    font-size: 32px;
	text-align:center;
    font-weight: 700;
    line-height: 40px;
}	
	
	.card-functions.card-dos {margin-top: 30px;}	
	.card-functions.card-dos img { width: 100%;}
	.card-functions.card-tres img {width: 100%;}
	.card-functions.card-cinco img {width: 100%;}
	.card-functions.card-cuatro {margin-top: 30px;}
	
	.card-one .footer-btn { bottom: 16px;}	
	.card-dos .content-card {top: 45px;left: 16px;}
	.card-dos .footer-btn {top: 393px;right: 16px;width: 40px;}	
	.card-tres .content-cards {bottom: 302px;left: 16px;width: 240px;}
	.card-tres .footer-btn {right: 16px;bottom: 16px;width: 40px;}
	.card-cuatro .content-card {top: 45px;}
	.card-cuatro .footer-btn {right: 16px;top: 346px;}
	.card-cinco .content-cards {bottom: 290px;left: 16px;}
	.card-cinco .footer-btn {right: 16px;bottom: 16px;width: 40px;}
	
	
	.card-beneficio-uno {
    height: 497px;
		border-radius:20px;
		overflow: hidden;
}

	.card-beneficio-uno .content-bene {
    width: 300px;
}
	
		.card-beneficio-dos {
    height: 415px;
		border-radius:20px;
		overflow: hidden;
			        background-color: #0091e4;
			margin-top:32px;
}
	
	.card-beneficio-dos .content-bene{
		top:32px;
	}
	

	

	
			.card-beneficio-tres {
    height: 419px;
		border-radius:20px;
		overflow: hidden;
}
	
	
	
	.card-functions.card-cinco {
    max-width: 100%;
}
	
	
	.overlay-card {
margin-top:30px;
}
	
	
	.section-pronto {
    padding: 2rem 0rem;
}
	

	
	.section-pay {
    height: 100%;
}
	
	
	.content-copecpay {
      padding: 4rem 3rem 0;
		z-index:1;
}
	
	.section-descargar-app {padding: 5rem 3rem;}
	
	

	

	
	
	
	.container.banner-app {
    width: 100%;
    height: 420px;
	background-image: url('https://www.appcopec.cl/wp-content/themes/chris/img/back-banner-descarga-la-app.png') !important;
		background-position:center;
		background-size:cover;
/*background: linear-gradient(180deg, #0062F7 0%, #0012B5 100%);*/

}
	
	.contentAppBanner h2 {
    font-size: 24px;
    line-height: 32px;
		margin: 16px 0 8px;
}
	.contentAppBanner p {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
		margin-bottom: 16px;
}
	
	.contentAppBanner {
		margin: 16px 0 0 0;
    width:280px;
}
	.contentAppBanner .iconos-apps img {
    width: 130px;
		margin-bottom:0;
}
	
	
	.faqs h2.titleIntro {
    text-align: left;
}
	.faqs p.subIntro{
		text-align: left !important;
		padding: 0;
	}
	
	
	    .section-huella-carbono {
        padding: 10px;
        height: 150px;
    }
	
	.img-icon-huella {
    flex: none;
    width: 40px;
}
	

	
}


.menu-tabs-mobile {
    width: 100%;
    padding: 0px 120px;
    border-bottom: 1px solid #ececec;
    height: 32px;
    position: relative;
}

img.copecpay-nav {
    margin-top: 5px;
    padding-bottom: 2px;
}

li.LiMob.item-title {
color: #0C122D;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
}


.dropdown-content.beneficios_app {
    width: 250px;
    max-width: 250px;
    min-width: 250px;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    border-radius: 24px;
    display: none;
    padding: 32px;
}
.dropdown-content a img {
    margin-right: 15px;
    width: 17px;
}

/*---Seccion Tabs Desktop -----*/	
section.section-laps-tabs {
    padding: 3rem 0;
}

.section-laps-tabs .nav-pills .nav-link {
background-color: transparent;
padding: 0px 16px 0px 0px;
border-radius: 16px;
border: 0.705px solid #F3F5FA;
overflow:hidden;
opacity:0.4;
height:132px;
width:480px;
}	
	
.section-laps-tabs .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #0C122D;
background-color: #fff;
padding: 0px 16px 0px 0px;
border-bottom: none;
box-shadow: 0px 25.106px 66.949px 0px rgba(45, 48, 58, 0.06);
border-radius: 16px;
border: 0.705px solid #F3F5FA;
overflow:hidden;
} 	

.section-laps-tabs .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
opacity:1;
}
	

.item-tab-portada{
    width: 132px;
    height: auto;
    flex: none;
}
	
	
.item-tab {
    display: flex;
    align-items: center;
}

.item-tab-content {
    padding: 0px 16px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    width: 100%;
    height: auto;
    max-width: 300px;
}

.item-tab-content h3  {
color: #0C122D;
font-family: "Outfit Medium";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px;
	margin-bottom:0;
}

.content-tab-desktop h4{
color: #0C122D;
font-family: "Outfit Medium";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 40px;
}

ul.list-tab-desktop {
	list-style: none;
	padding-left: 0;
	margin: 3rem 0px;
	list-style-position: inside;
}

ul.list-tab-desktop li  {
display:flex;
color: #657085;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 16px;
	gap:10px;
}

ul.list-tab-desktop li::before {
    display: flex;
    content: '\f00c';
    font-family: 'FontAwesome';
    float: left;
    margin: 0 10px 10px 0px;
    color: #ffffff;
    background: #002DF9;
    border-radius: 50px;
    font-size: 10px;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
	flex:none;
}


/*Fin Seccion Tabs Desktop */
	

.card-todo-mobile-tarjeta {
    	margin-bottom: 24px;
    	border-radius: 24px;
        border: 1px solid var(--Basic-600, #E7EDF8);
        background: var(--White, #FFF);
        padding-bottom: 32px;
        text-align: start;
    }
    
   .card-todo-mobile-tarjeta h5 {
    	color: #0C122D;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 24px;
    }

   .card-todo-mobile-tarjeta p {
color:#657085;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
    }
    
    .card-todo-mobile-tarjeta .card-todo-tarjeta-mobile__image {
        display: flex;
        width: 100%;
        height: 166px;
        align-items: end;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 24px 24px 0px 0px;
		background: #F3F5FA;
		overflow: hidden;
    }
    
   .card-todo-mobile-tarjeta .card-todo-tarjeta-mobile__image.first {
       align-items: center;
    }
    
   .card-todo-mobile-tarjeta .card-todo-tarjeta-mobile__description {
    	padding: 24px 24px 0px 24px;
    }

    .card-todo-mobile-tarjeta h3 {
        color: #0C122D;
		font-family: "Outfit Medium";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 24px;
    }

.list-container .list-item {
    display: flex;
    align-items: start;
    gap: 12px;
}

	
/*css tab menu mobile */
#tabs-nabvar-mobile{
			display:flex !important;
			 transition: 0.3s all;
			height: 32px;
		}

#tabs-nabvar-mobile a {
	display: flex;
	align-items: center;
	/*border-bottom: 2px solid transparent;*/
}

.tab {
	position:fixed;
	width:100%;
  overflow: hidden;
  border-bottom: 1px solid #F3F5FA;
  background-color: #ffffff;
z-index:999999;
	height:20px;
	margin:0 120px;
}


.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0px;
	margin-left:12px;
  font-size: 10px;
	height: 31px;
  filter: opacity(0.2);
}
.tab button.active {
	border-bottom: 2px solid red;
	filter: opacity(1);
	height: 31px;
}

.tabcontent {
  display: none;
  padding: 0;
  border-top: none;
}

.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

/*fin css tab menu mobile */


	.icon-nav-sub{
		opacity:0;
	}
	
.dropdown-content.show {
    display: block;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

body.overlay-active .overlay {
    display: block;
}
	
	
	
.dropbtn {
  color: #0C122D;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
	
}

.dropdown {
  position: relative;
  display: inline-block;
}
	


.dropdown-content {
   display: none;
    position: fixed;
    top: 110px; /* Ajusta esto según la altura de tu botón */
    left: 0;
	right:0;
	margin:0 auto;
    width: 100%;
	max-width: calc(100vw - 70px); 
    max-height: calc(100vh - 70px); /* Para que el contenido no se salga de la pantalla */
    overflow-y: auto; /* Añade scroll si el contenido es demasiado alto */
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1001;
	border-radius:24px;
	padding: 32px 64px;
}

.dropdown-content a {
    padding: 10px;
    margin: 16px 0px;
  	text-decoration: none;
  	display: block;
  	position: relative;
	color: #0C122D;
	font-family: "Outfit Medium";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; 
}
	
.dropdown-content img {
    margin-right: 5px;
}	
	
.dropdown-content span {
    color: #0C122D;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
}	

.dropdown-content a:hover {
    color: #0C122D;
    background: #F9FAFD;
    border-radius: 10px;
    animation-name: example;
    animation-duration: 0.2s;
    width: 100%;
}
	
@keyframes example {
  from { width: 90%;}
  to { width: 100%;}
}

.DownApp a {
    color: #fff !important;
    margin: 0;
}
	
	
.dropdown-content a i {
    font-family: fontello;
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    color: #b5b5b5;
}		

.dropdown-content a [class*="icon-"]:before,
.dropdown-content a [class^="icon-"]:before {
    font-family: fontello !important;
}	
	ul.list-nav-tabs li a {
    height: 30px !important;
}

a.btn-hero h2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}



/*Arrow Slider custom*/

          .swiper-button-prev {
           background-image: url("https://www.appcopec.cl/wp-content/themes/chris/img/icons/arrow-prev.svg") !important;
			background-repeat: no-repeat !important;
    background-position: center !important;
          }

          .swiper-button-next {
            background-image: url("https://www.appcopec.cl/wp-content/themes/chris/img/icons/arrow-next.svg") !important;
			background-repeat: no-repeat !important;
    background-position: center !important;
          }

          .swiper-button-next::after,
          .swiper-button-prev::after {
            content: "" !important;
          }	


	
/*Seccion Descarga Copec Pay*/	

	
	.section-descargar-copecpay {
		padding: 5rem 0 5rem 0;
	}
	
.banner-descarga-app {
    display: flex;
    border-radius: 24px;
	background-image: url("https://www.appcopec.cl/wp-content/themes/chris/img/billetera/home/banner-descarga-app.jpg");
    /*background: #0532F9;*/
	background-size: cover;
	background-repeat: no-repeat;
    background-position-x: center;
    margin-top: 0;
    height: 392px;
    align-items: center;
}
	

.content-app {
    width: 100%;
    max-width: 380px;
    margin: 0 0 0 64px;
}
	
	.content-imagen {
    width: 692px;
}
	
.banner-descarga-app h2 {
color: #FFF;
font-family: "Outfit Bold";
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px;
	margin-top:10px;
	margin-bottom:0px;
}
	
		
.banner-descarga-app p {
color: #FFF;
font-family: "Outfit Regular";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
	margin: 8px 0 24px 0;

}
.logos-descarga {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    margin-top: 2rem;
}
	
ul.iconos-apps-pay img {
    margin-right: 16px;

}
	
	
@media (min-width: 320px) and (max-width: 600px) {
                
            .tab {
                margin:0 20px;
            }
                
                
            .banner-descarga-app h2 {
                font-size: 20px;
                line-height: 28px;
                margin-top: 4px;
            }
                
                .banner-descarga-app p {
                font-size: 12px;
                line-height: 16px;
                    margin: 8px 0 12px 0;
            }
                    
            .banner-descarga-app {
                background-image: url(https://www.appcopec.cl/wp-content/themes/chris/img/billetera/home/banner-descarga-app-mobile.jpg);
                background-size: cover;
                height: 327px;
                align-items: flex-start;
                padding-top: 16px;
            }		
                    
                
            .section-whats-app {
                min-height: 700px;
                position:relative;
            }	
                
                    
            .banner-descarga-app {
                width: 100%;
                padding-right: 15px;
                padding-left: 15px;
                margin-right: auto;
                margin-left: auto;
            }
            .content-app {
                width: 100%;
                max-width: 220px;
                margin: 0 0 0 16px;
            }
                    
                    ul.iconos-apps-pay img {
                margin-right: 8px;
                width: 100px;
            }


            .functions, .beneficios {
                padding: 50px 0;
            }
            
            .functions .container.container-section, 
            .beneficios .container.container-section {
                padding-right: 24px;
                padding-left: 24px;
            }
            
            .card-functions.card-one {margin-top: 32px;}
            .backImagenProductos {
                display: block;
                position: relative;
                background-image: url(https://www.appcopec.cl/wp-content/themes/chris/img/homepage/te-dio-hambre.png);
                top: 0px;
                height: 500px;
                left: 0;
                background-position: center;
                background-size: 100%;
                transform: scale(1);
                background-repeat: no-repeat;
            }
            	
            img.img-pay {
                position: relative;
                display: block;
                transform: scale(1.1);
                left: 0%;
                z-index: 0;
                width: 100%;
                margin-top: -200px;
            }	
            .section-pronto .p-24 {
                padding: 0px 24px 64px 24px;
            }
            .section-pay .p-24, 
            .section-descargar-app {
                padding: 0;
				margin: 50px 24px;
				
            }
            .faqs {padding-top: 0px !important; padding-bottom: 0px !important; margin-bottom: 64px !important;}
            .faqs .container {padding-left: 24px !important; padding-right: 24px !important;}
            .faqs .p-24 {padding: 0px 16px !important;}
            .faqs-tabs {padding: 16px;}
			h2.titleFaqs {text-align: left;}
			.content-bene img {padding-bottom: 16px;}
            .card-beneficio-tres .content-bene {bottom: 190px;}

		
}	




	
	
/*Fin Seccion Descarga Copec Pay*/	
	

.fade {
    transition: none !important;
	animation: fadeInn 0.8s !important;
}


@keyframes fadeInn {
  0% { opacity: 0; 
	    transform: translateY(80px);
	
	}
  100% { opacity: 1;
	 transform: translateY(0px);
	}
}




/*Estilos Componente Pasos */	

	.seccion-pasos-componente{
		padding:5rem 0 3rem 0;
	}	
	
	
section.seccion-pasos-componente .title-section span {
    color: #2E54FF;
}	
	

	.card-pasos-container {
    display: flex;
    flex-direction: column;
	width: 100%;
}

.card-pasos-container h3{
color:#0C122D;
font-family: "Outfit Medium";
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 32px;
	text-align:center;
	}
	
.card-pasos-container p{	
color: #657085;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
	text-align:center;
}


.card-pasos-container li{	
color: #657085;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
	text-align:center;
}

	
.card-pasos-container.second-card {
    margin-top: 10rem;
}
	
	.card-pasos-container.third-card {
    margin-top: 20rem;
}
	
	img.img-fluid.second-card-arrow {
    margin-top: 10rem;
}
	
@media only screen and (max-width: 600px) {
	.card-pasos-container {
    padding: 0 5rem;
}
	
	img.first-card-arrow {
    position: absolute;
    width: 90px;
    top: 9rem;
}
	
	img.second-card-arrow {
    position: absolute;
    width: 100px;
    right: 0;
	top:-10rem;
		
}
			
	.card-pasos-container.second-card {
    margin-top: 5rem;
}
	
	.card-pasos-container.third-card {
    margin-top: 5rem;
}
	
	.card-pasos-container h3 {
    text-align: center;
}
	
		.card-pasos-container p {
    text-align: center;
}
	

			
		
	}	
	
	
/*Fin Estilos componente pasos*/