*{
	font-variant-ligatures: none;
}



.loader-beneficios {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
}

.loader-beneficios .spinner {
  width: 40px;
  height: 40px;
  border: 5px solid rgba(0,0,0,0.1);
  border-top-color: #0056FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}



#WrapperCopec {
    background: #FDFDFD;
}
section.wrapper-head {
    margin-top: 104px;
}

.IntPromoBg.portadaDesBen {
    height: 416px;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}
.single-beneficio{
	padding:10rem 0 5rem 0 ;
    transform-style: preserve-3d;
}
ul#breadcrumb {
    display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
	align-items: center;
    text-decoration: none;
    list-style: none;
    padding: 0;
    gap: 10px;
	margin: 3rem 0;
}
.swiper.SliderRecomendados {
    padding: 0px 2px;
}
	ul#breadcrumb li {
    color: #657085;
    font-family: "Outfit Medium";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
span.contenido-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

img.ImgDestacada {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
ul#breadcrumb a {
    color: #657085;
    font-family: "Outfit Medium";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

img.breadcrumb-separator {
    display: inline-block;
    width: 6px;
    height: auto;
    margin: 0 8px;
    vertical-align: middle;
}

span.label_descuento {
    background: var(--Semantic-success-500-default, #15CC96);
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    font-size: 12px;
    color: var(--Other-light, #FFF);
    font-family: 'Outfit Medium';
    justify-content: center;
}
a.card-full-link {
    display: none;
}
.card-beneficio .card-head .main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.container.p5-dkp {
    padding: 3rem 0 2rem;
}
.scroll-legal {
	  max-height: 140px;
	  overflow-y: auto;
	  margin-top: 35px;
}
.scroll-legal::-webkit-scrollbar {
  width: 4px;
}

.scroll-legal::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.scroll-legal::-webkit-scrollbar-track {
  background: transparent;
}
span.label_tipo_descuento{text-transform: capitalize;}
span.label_tipo_descuento, span.label_dias {
    background: var(--Semantic-info-5, #F5F7FF);
    display: flex;
    padding: 2px 4px;
    font-size: 12px;
    font-family: 'Outfit Medium';
    color: var(--Semantic-info-500-default, #2E54FF);
    border-radius: 4px;
    justify-content: center;
	gap: 4px;
}
.card-body-beneficio {
    display: flex !important;
    width: auto;
    padding: 16px 24px 24px 24px;
    flex-direction: column;
    gap: 8px;
}
.footer-card-beneficio {
    display: flex;
    height: 48px;
    padding: 12px 32px;
    justify-content: center;
    align-items: center;
}
.label_elements {
    display: flex;
    gap: 5px;
    font-variant-ligatures: none;
	align-items: center;
}
.swiper-slide {margin: 0px !important;}
.swiper-wrapper {gap: 20px;}

/*TABS CATEGORIAS*/
#tabs-nav-categories {
    display: flex;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
span.tipo-descuento {
    padding: 2px 4px;
    border-radius: 4px;
    background: #F5F7FF;
    color: #2E54FF;
	line-height: 16px;
    text-transform: capitalize;
    font-family: 'Outfit Medium';
	font-size: 12px;
}
.contenedor-span {
    display: flex;
    gap: 10px;
}
.hero-image-banner {
    display: flex;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    align-items: center;
}

.content-legal p {
    color: #657085;
	font-family: "Outfit Regular";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}
span.content-condiciones, p.content-condiciones {
    font-size: 12px;
    color: var(--Grey-400, #657085);
	padding: 2px 0px;
}
span.no-app {
    font-size: 12px;
    color: var(--Grey-400, #657085);
    font-family: 'Outfit Medium';
}
span.content-condiciones.expirado {
    background: #f8d7da;
    color: #721C24;
    border-radius: 4px;
    display: inline;
    font-family: 'Outfit Medium';
    padding: 2px 8px;
}
.swiper-slide {
    flex-shrink: 0;
    width: 275px !important;
    height: 100%;
    position: relative;
    transition-property: transform;
}
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: 220px;
    justify-content: space-around;
}

.IntPromoBg.portadaDesBen.expirada {
    filter: grayscale(1);
    transition: filter 0.3s ease;
}
span.bold_text {
    font-family: 'Outfit Bold';
    color: #000;
}
.qr-y-botones .botones {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.qr img {
    border: 2px solid var(--Grey-300, #A7B7CE);
    padding: 5px;
    border-radius: 10px;
}
.buscarBeneficio {
    height: 48px;
    padding: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--Grey-400, #657085) !important;
    border: 1px solid var(--Basic-700, #D8E0F0) !important;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 32px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.promoContainer {
    gap: 20px 12px;
}
.promoContainer .no-results-content {
    width: 100%;
}
.no-results-content p {
    font-size: 14px;
}
.no-results-content h2 {
    font-weight: bold;
}
a.btn-beneficio {
    border-radius: 83.333px;
    background: white;
    padding: 10px 33.333px;
    color: #0962f7;
    text-align: center;
    font-family: 'Outfit Medium';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin: 2rem 0;
}







#tabs-nav-categories a {
   /* padding: 12px 0px;*/
    border: none;
    background: #FDFDFD;
    cursor: pointer;
    border-radius: 0px;
	font-size: 14px;
    font-weight: bold;
    color: var(--Grey-400, #657085);
}

#tabs-nav-categories a.active .tab_title{
    background: #fdfdfd;
    color: #0163F6;
	border-bottom: 2px solid #0163F6;
	 padding-bottom: 12px;

}


#tabs-nav-categories a.active img {
	filter: none;
}
.dias-taxonomia, .dias-labels {
	display: inline-block;
    position: relative;
	font-family: 'Outfit Medium';
    border-radius: 5px;
	font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.3rem 0.6rem;
}
.dias-taxonomia {
    top: 132px;
    left: 24px;
}
.dias-labels{
    left: 24px;
    bottom: 39px;
}

#tabs-nav-categories a:focus {
    outline: 0px;
}

#tabs-nav-categories a img {
    display: block;
    pointer-events: none;
    margin: 8px auto;
	filter: grayscale(80%);
}

h1.title_beneficios_alianzas {
    font-size: 32px;
    font-family: 'Outfit Bold';
    color: var(--Grey-500-default, #0C122D);
    line-height: 40px;
    margin: 20px 0px;
}

/*CARD BENEFICIO*/
.card-beneficio {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
	height: 391px;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
	box-shadow: 0px 12px 20px 0px rgba(45, 48, 58, 0.06);
    border-radius: 12px;
	padding:0px;
	overflow:hidden;
	flex: 0 0 calc(24% - 0px);
}

.card-beneficios-portada {
    height: 171px;
    overflow: hidden;
}
.card-beneficio-body {
    padding: 16px 24px 24px 24px;
	gap: 24px;
	display: flex;
    flex-direction: column;
    justify-content: space-around;
	height: 220px;
}

h2.title-beneficio {
color:#0C122D;
font-family: "Outfit Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
margin-bottom: 0px;
}

p.content-beneficio {
	color:#657085;
font-family: "Outfit Regular";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
margin-bottom: 0px;
	
}


.card-beneficio:hover a.btn-beneficio {
    background-color: rgba(0, 45, 249, 0.03); /* El color que desees */
}


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

.card-beneficio.animate-in {
    animation: fadeInUp 0.5s ease forwards;
}


.expirada .card-beneficios-portada {
    filter: grayscale(1);
}


.line-clamp-4 {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
	
span.discount {
display: flex;
padding: 2px 4px;
align-items: center;
gap: 4px;
border-radius: 4px;
background:#15CC96;
width:max-content;
color: #FFF;
text-align: center;
font-family: "Outfit Medium";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px;
}	
span.discount.expirado {
	background:#E7EDF8;
	color:#A7B7CE;
}	
	
	
	.logo-comercio {
    position: absolute;
    top: 0px;
    margin: 16px;
    border-radius: 12px;
}

.beneficio-destacado-copecpay {
    padding: 12rem 0 0;
}
	
.hero-image {
    display: flex;
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(https://www.appcopec.cl/wp-content/uploads/2024/12/cambio.png);
    height: 360px;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    align-items: center;
	border: 1px solid #E9E9E9;
}
	

.hero-text {
  padding: 5rem;
}
	
.hero-text img {
    border-radius: 13px;
    overflow: hidden;
	    margin-bottom: 20px;
}	
	
	.hero-text h2{
color: #000;
font-family: "Outfit Bold";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 40px; 
		
	}	
	
		.hero-text p{
color: #657085;
font-family: "Outfit Regular";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
			margin-bottom:20px;
		
	}

a.btn-destacado {
    border-radius: 83.333px;
    background: #0962f7;
    padding: 10px 33.333px;
    color: #ffffff;
    text-align: center;
    font-family: "Outfit Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin: 2rem 0;
}
.section-alianzas-copecpay {
    padding: 67px 0 3rem;
}	
	
h1.title-beneficios {
	color: #0C122D;
	font-family: "Outfit Medium";
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 40px; 
}	


h2.tab_title {
    font-size: 14px;
    font-weight: bold;
}
	

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1200px;
  }
}

@media only screen and (max-width: 600px) {
	.hero-image {
		background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgb(255 255 255)), url(https://www.appcopec.cl/wp-content/uploads/2024/12/cambio-mobile.png);
		background-position: center;
		height: 450px;
	}
	div#contador-promo {
		padding: 5px 10px 20px;
		font-size: 14px;
		color: var(--Grey-400, #657085);
		display: none !important;
	}
	.dias-taxonomia {
		top: 85px;
		left: 12px;
	}
	.qr-y-botones .botones {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.container.related-posts {
		padding-left: 24px;
	}
	.single-beneficio{
		padding: 8rem 0 0rem 0 ;
		transform-style: preserve-3d;
	}
	.section-beneficios-relacionados {
		padding: 4.5rem 0 2rem !important;
	}
	h2.textList {
		font-size: 20px;
		font-family: 'Outfit Regular' !important;
		color: #000;
	}
	.mob-p {
  	   padding: 0px 24px !important;
	}
	ol.listadoPasos {
    	padding: 10px 24px !important;
	}
	.container.pt-5.condiciones-legales-wrapper {
		padding: 0px;
	}
	h2.title-related-posts{width: 330px !important;}
	.IntPromoBg.portadaDesBen {
		height: 200px;
	}
	h1.title_beneficios_alianzas {
		margin: 20px 24px;
	}
	.card-beneficio-footer, .footer-card-beneficio {
		display: none !important;
	  }
	 .card-beneficio {
                position: relative;
            }
            .card-beneficio a.card-full-link {
                position: absolute;
                inset: 0;
                z-index: 10;
                text-indent: -9999px;
				display: block;
            }
	.container.p5-dkp {
        padding: 0.5rem 0 2rem;
    }
	.card-beneficio {
        flex: initial !important;
        width: 48% !important;
        height: auto;
        border: 1px solid var(--Basic-600, #E7EDF8);
        box-shadow: none;
    }
	.swiper-slide .card-beneficio {
        width: 100% !important;
    }
	.line-clamp{
		height: 175px;
	}
	.swiper {
		overflow: scroll !important;
		scrollbar-width: none;       /* Firefox */
		-ms-overflow-style: none;    /* IE 10+ */
	}
	.full-width-scroll {
		margin-left: 10px;
	}
	.card-beneficios-portada {
		width: auto;
		height: 120px;
		overflow: hidden;
	}
	#tabs-nav-categories a{
		display: inline-block;
		width: max-content;
		margin-right: 24px;
	}
	#tabs-nav-categories::-webkit-scrollbar, .swiper::-webkit-scrollbar  {
		display: none; /* Chrome, Safari, Opera */
	}
	#tabs-nav-categories {
		overflow-x: scroll;
		scrollbar-width: none;       /* Firefox */
		-ms-overflow-style: none;    /* IE 10+ */
		margin-bottom: 10px;
		gap: 0px;
	}
	p.content-beneficio, h2.title-beneficio{font-size: 14px; line-height: 20px; margin-bottom: 0px;}
	a.btn-beneficio{font-size: 14px;}
	.card-beneficio-body {padding: 16px 12px 24px 12px; height: auto;}
	.promoContainer {
		gap: 14px 12px;
        justify-content: space-between;
        padding: 0px 20px;
	}
	.logo-comercio {
		margin: 10px;
		width: 50px;
		height: 50px;
	}
	.hero-text img {
		display:none;
	}
	.qr {
		display: none;
	}
	ul#breadcrumb {
		flex-wrap: wrap;
		 margin: 3rem 0 0.5rem;
		display: none;
	}
	.hero-text h2{
		margin-bottom:30px;
	}	
	.hero-text.col-12.col-md-6.text-md-left.text-center {
		bottom: 0 !important;
		position: absolute;
    }
}