html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;list-style:none}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:inherit}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*,*::before,*::after{box-sizing:border-box;}img{border:0;max-width:100%}ul,ol,li,dl,dt,dd{list-style-type:none;margin:0;padding:0}a{text-decoration:none}a:hover{text-decoration:none;}h1,h2,h3,h4,h5,h6{padding:0;margin:0;font-weight:400}form,fieldset,label,input,figure,figcaption{padding:0;margin:0}fieldset{border:0}p{margin:0 0}

/* Main */


@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/efecto_santander/Raleway-Thin.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/efecto_santander/Raleway-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/efecto_santander/Raleway-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/efecto_santander/Raleway-SemiBold.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/efecto_santander/Raleway-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/efecto_santander/Raleway-ExtraBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/efecto_santander/Raleway-Raleway-Black.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}


body, html { margin: 0; padding: 0; width: 100%; max-width: 100%; font-family: "Raleway", sans-serif; color: #000; background-color: #fff; user-select: none; }

::selection { background-color: #F6121E; color: #fff; } 

.paginaHome section {position: relative;display: block;width: 100%;}
.wrapper {position:relative;display:block;margin:0 auto;width: 90%;max-width:1290px;}

.enter-y { transform: translateY(100px); opacity: 0; transition: opacity 1s, transform 1.2s cubic-bezier(.165, .84, .44, 1);}
.enter-y-r { transform: translateY(-100px); opacity: 0; transition: opacity 1s, transform 1.2s cubic-bezier(.165, .84, .44, 1) }
.enter-x { transform: translateX(-100px); opacity: 0; transition: opacity 1s, transform 1.2s cubic-bezier(.165, .84, .44, 1) }
.enter-x-r { transform: translateX(100px); opacity: 0; transition: opacity 1s, transform 1.2s cubic-bezier(.165, .84, .44, 1) }

#hero h3 {
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 50px;
    margin-top: 50px;
}

.loaded .is-inview .delay-1 { transition-delay: .2s !important }
.loaded .is-inview .delay-2 { transition-delay: .4s !important }
.loaded .is-inview .delay-3 { transition-delay: .6s !important }
.loaded .is-inview .delay-4 { transition-delay: .8s !important }
.loaded .is-inview .delay-5 { transition-delay: 1s !important }
.loaded .is-inview .delay-6 { transition-delay: 1.2s !important }
.loaded .is-inview .delay-7 { transition-delay: 1.4s !important }
.loaded .is-inview .delay-8 { transition-delay: 1.6s !important }
.loaded .is-inview .delay-9 { transition-delay: 1.8s !important }
.loaded .is-inview .delay-10 { transition-delay: 2s !important }
.loaded .is-inview .delay-11 { transition-delay: 2.2s !important }
.loaded .is-inview .delay-12 { transition-delay: 2.4s !important }
.loaded .is-inview .delay-13 { transition-delay: 2.6s !important }
.loaded .is-inview .delay-14 { transition-delay: 2.8s !important }
.loaded .is-inview .delay-15 { transition-delay: 3s !important }

.loaded .is-inview .enter-y, .loaded .is-inview .enter-x, .loaded .is-inview .enter-y-r, .loaded .is-inview .enter-x-r { opacity: 1; transform: translate(0) }

 /* Estilo para elementos enfocados */
 :focus {
	outline: 1px solid #007bff4b; /* Cambia el color y el grosor según tus necesidades */
	outline-offset: 1px;
}

/* Estilo específico para elementos enfocados con el teclado */
:focus-visible {
	outline: 1px solid #007bff4b; /* Cambia el color y el grosor según tus necesidades */
	outline-offset: 1px;
}

button {font-family: 'Raleway';}

.button{
    position: relative;
    font-weight: 600;
    background-color: #E00000;
    border-radius: 100px;
    padding: 12px 20px 12px 20px;
    cursor: pointer;
    color: #FFFFFF;
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    transition: .3s;
    border: 1px solid #E00000;
}

.button span{
    font-style: normal;
    font-weight: bold;
    font-size: 10px;
    color:#FFFFFF;
}

.button:hover {
    background: white;
    color: #E00000;
    border: 1px solid #E00000;
}

/*
.button:focus{
    text-decoration: underline white 2px;
}
*/

.logo{
    max-width: 220px;
    width: 220px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
}

/* Modificaciones 2025 */
.logo-footer img {
    height: 30px;
    width: auto;
    margin-bottom: 18px;
}


.white{
    background-color: #FFFFFF;
    color: black;
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid #FFFFFF;
}

.button.white:hover {
    border: 1px solid #FFFFFF;
}

.back-mobile{
    display: none;
}

.section-title{
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
    letter-spacing: 0.29em;
    color: #717171;
    margin-top: 0px !important;
    margin-bottom: 50px;
    justify-content: space-between;
    align-items: center;
    max-width: 256px;
    margin: 0 auto;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.section-title.--white {
    color: #fff;
}

.section-title-logo {
    height: 80px;
    width: auto;
    margin: 0 auto;
}

.section-title span:first-child {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    background: #717171;
}

.section-title span:first-child, .section-title span:last-child {
    opacity: 0;
}

.section-title span:last-child {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    background: #717171;
}

.section-title span:nth-child(2) {
    box-sizing: content-box;
}

.mobile{
    display: none;
}

.text-medium {
    display: block;
    font-size: 20px;
    margin-top: 6px;
}

/* Header */
/* Modificado 2025 */
header{
    background-color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

/* Modificado 2025 */
header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0px 18px 0px;
    height: 100%;
}

header.sticky .link-points {
    opacity: 0;
    height: 0px;
    visibility: hidden;
    margin: 0px;
}

header.sticky .link-featured {
    flex-direction: row;
}

header.sticky .link-featured img {
    height: 20px;
    margin: 0 5px 0 0px;
}


header.sticky .avatar {
    width: 32px;
    height: 32px;
}

header.sticky .header__bottom {
    animation: myAnim 0.5s ease 0s 1 normal none;
}

@keyframes myAnim {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.15;
	}

	100% {
		opacity: 1;
	}
}


.header__bottom {
    background-color: #fff;
    border-top: 1px solid #ddd;
    padding: 20px 0px 20px 0px;
    height: 100%;
    box-shadow: 0px 9px 10px 0px rgb(0 0 0 / 10%);
    -webkit-box-shadow: 0px 9px 10px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 9px 10px 0px rgb(0 0 0 / 10%);
    z-index: 99;
}

.header__bottom__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1290px;
    margin: 0 auto;
}

.header__bottom__points {
    display: flex;
    align-items: center;
}

.header__bottom__points .avatar {
    width: 50px;
    height: 50px;
    background-size: cover;
    border-radius: 999px;
    margin-right: 15px;
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease;
}

.header__bottom__points .link-points {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #E00000;
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease;
    margin-top: 8px;
}

.header__bottom__points .header__bottom__points__text .link-points svg {
    vertical-align: middle;
    height: 12px;
    margin-left: 5px;
}

.header__bottom__points__text {
    font-size: 20px;
    font-weight: 500;
}

.header__bottom__points .header__bottom__points__text p {
    font-size: 18.5px;
    line-height: 1;
}

.header__bottom__links {
    display: flex;
    align-items: baseline;
}

.header__bottom__links .link-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
}

.header__bottom__links .link-featured:last-child {
    padding-right: 0px;
}

.header__bottom__links .link-featured img {
    height: 28px;
    margin-bottom: 12px;
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease;
}

.header__bottom__links .link-featured span {
    font-size: 15px;
    font-weight: 500;
}

.logo{
    cursor:pointer;
}

.searchtoggle{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/*
#search-form {
    position: relative;
    width: 0;
    height: 30px; 
    transition: all .3s; */
   /* padding-right: 20px;
    margin-left: 15px;
    margin-right: 10px;
} */

/*
#search-form input {
    width: 100%;
    border: none;
    background: transparent;
    border-bottom: solid 1px #fff;
    color: #fff;
    font-family: 'Santander Text', sans-serif;
    transition: all .3s;
    padding: 6px 0;
}

#search-form input:focus-visible {
    outline-width: 0;
} */

#search-toggle {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 20px;
    height: 21px;
    cursor: pointer;
    transition: all .3s;
    transform: translate(-100%, 0px);
}
/*
#search-form.open, #search-form:focus-within {
    width: 200px;
}

#search-form.open input {
    padding: 6px;
    padding-left: 40px;
}

#search-form.open input::placeholder {
    color: rgba(255, 255, 255, 0.7);
} */

.open #search-toggle {
    left: 0;
    transform: translate(0%, 0px);
}


/* filtros del header */

.menu-header a {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.055em;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 12px 16px 12px 16px;
    border: 2px solid #E00000;
    border-radius: 100px;
}


.menu-header a.--featured {
    font-weight: 700;
    font-size: 14px;
}

.menu-header a.active.--featured {
    border-color: transparent;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 6px;
}

/* Modificado 2025 */
.links-header {
    display: flex;
    align-items: center;
    background-color: #fff;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    padding: 8px 12px;
    line-height: 1;
    height: 40px;
    position: relative;
    border-radius: 999px;
    border: 1px solid #888888;
}

.links-header svg {
    width: 19px;
    height: 19px;
    margin-right: 6px;
}

.links-header.--icon {
    border: none;
    padding: 8px 0px;
}

.links-header.--icon svg {
    width: 25px;
    height: 25px;
    margin-right: 0px;
}

.menu-header-dropdown {
    position: relative;
}

.menu-desktop {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    top: 100%;
    z-index: 99999;
    border-radius: 12px;
    transition: all 0.6s ease-in-out;
    left: 50%;
    transform: translate(-50%, 0px);
    min-width: 310px;
    max-height: 650px;
    overflow: hidden;
    margin-top: 8px;
    opacity: 0;
    padding: 15px;
    box-shadow: 0px 4px 15px rgb(0 0 0 / 14%);
    visibility: hidden;
}

.menu-desktop:before {
    content: "";
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 0.625rem;
    border-left-width: 0.625rem;
    border-bottom: 0.625rem solid #fff;
    transform: translate(-50%, -100%);
    top: 0%;
    left: 50%;
    position: absolute;
    display: block;
}


.menu-desktop.--active {
    margin-top: 15px;
    opacity: 1;
    max-height: 650px;
    overflow: visible;
    visibility: visible;
}

.menu-desktop__item {
    padding: 18px 12px;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.4s ease-in-out;
}

.menu-desktop__item:hover {
    background-color: #eeeeee;
}

.menu-desktop__item:last-child {
    border-bottom: none;
}

.menu-desktop__item a {
    padding: 0px;
    font-size: 15px;
    border: 0px;
    border-radius: 0px;
    color: #3a3a3a;
    letter-spacing: 0px;
    text-transform: none;
}


.menu-header a.active {
    border-color: #ffffff;
}

.points-header {
    background-color: #ad0000;
    padding: 8px 12px;
    border-radius: 6px 0px 0px 6px;
    line-height: 1.3;
    height: 40px;
}

/* Modificado 2025 */
.points-search {
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #000;
    font-weight: 500;
    padding: 8px 12px;
    line-height: 1;
    height: 40px;
    position: relative;
    border-radius: 999px;
    border: 1px solid #888888;
}

.points-search .points-search__container {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.points-search__icon {
    width: 19px;
    height: 19px;
    margin-right: 6px;
}

/* Modificado 2025 */
.header-pointsearch {
    display: flex;
    align-items: center;
    margin-right: 0px;
    gap: 10px;
}

/* Modificado 2025 */
.nav-search {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 60px;
    background-color: #fff;
    height: 60px;
    width: 1000px;
    border-radius: 999px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    margin-top: -5px;
    padding: 10px 0px;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: opacity 0.6s, margin 0.6s, visibility 0.6s;
}

.nav-search.--open {
    margin-top: 2px;
    opacity: 1;
    visibility: visible;
}   

.nav-search::before {
    content: "";
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 0.625rem;
    border-left-width: 0.625rem;
    border-bottom: 0.625rem solid #fff;
    transform: translate(0%, -100%);
    top: 0%;
    left: 93%;
    position: absolute;
    display: block;
}

.nav-search__overlay {
    visibility: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #00000042;
    z-index: 10;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
    backdrop-filter: blur(3px);
}

.nav-search__overlay.--active {
    visibility: visible;
    opacity: 1;
}

.nav-search__item {
    height: 100%;
    border-right: 1px solid #bfbfbf;
    padding: 0px 22px;
    position: relative;
}

.nav-search__item .twitter-typeahead {
    height: 100%;
    width: 100%;
}


.nav-search__item .twitter-typeahead .tt-menu {
    margin-top: 15px;
    background-color: #ffffff;
    color: #333333;
    font-weight: 400;
    display: none;
    padding: 10px 15px;
    right: 0px;
    border-radius: 8px;
}

.nav-search__item .twitter-typeahead .tt-suggestion.tt-selectable {
    padding: 5px 8px;
    border-radius: 8px;
}

.nav-search__item .twitter-typeahead .tt-suggestion.tt-selectable:hover {
    background-color: #fff2f2;
}

.nav-search__item:first-child {
    width: 40%;
}

.nav-search__item:nth-child(2) {
    width: 20%;
}

.nav-search__item:nth-child(3) {
    width: 30%;
    padding: 0px 0px 0px 22px;
    border-right: none;
}

.nav-search__item:last-child {
    border-right: none;
}

.nav-search__item__input {
    font-family: 'Raleway', sans-serif;
    border: 0px;
    font-size: 17px;
    height: 100%;
    width: 100%;
    font-weight: 500;
}

.nav-search__item__input:-webkit-autofill,
.nav-search__item__input:-webkit-autofill:hover, 
.nav-search__item__input:-webkit-autofill:focus, 
.nav-search__item__input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.nav-search__item__input:focus-visible {
    outline: none;
}


.nav-search__item__btn {
    font-size: 17px;
    color: #333;
    font-weight: 500;
    display: inline-flex;
    height: 100%;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: 100%;
}

.nav-search__item__btn::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #949494;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg);
    position: absolute;
    right: 0px;
    top: auto;
    margin-top: -5px;
}

.nav-search__item__btn.--open::after {
    transform: rotate(315deg);
    margin-top: 5px;
}

.nav-search__dropdown {
    background-color: #ffffff;
    top: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 10px;
    padding: 18px 15px;
    grid-gap: 15px;
    display: flex;
    flex-direction: column;
    max-height: 190px;
    overflow: auto;
    box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
    border-radius: 8px;
}

.nav-search__dropdown::-webkit-scrollbar, .select2-results__options::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
.nav-search__dropdown::-webkit-scrollbar-thumb, .nav-search__dropdown::-webkit-scrollbar-track, 
.select2-results__options::-webkit-scrollbar-thumb, .select2-results__options::-webkit-scrollbar-track {
    border-radius: 0.3125rem;
  }

.nav-search__dropdown::-webkit-scrollbar-thumb, .select2-results__options::-webkit-scrollbar-thumb {
    background: #6e6e6e;
    border-radius: 0.3125rem;
}

.nav-search__dropdown::-webkit-scrollbar-track, .select2-results__options::-webkit-scrollbar-track {
    background: #cccccc;
    border-radius: 0.3125rem;
}

.nav-search__dropdown.--open {
    opacity: 1;
    visibility: visible;
}

.nav-search__dropdown .inputs.radio {
    position: relative;
    font-size: 15px;
    padding-left: 28px;
    font-weight: 400;
    color: #141414;
}

.nav-search__dropdown .inputs.radio input {
    position: absolute;
    left: 0;
    z-index: 9;
    cursor: pointer;
    opacity: 0;
    margin: 0;
    vertical-align: middle;
}

.nav-search__dropdown .inputs.radio input+label {
    border-radius: 6px;
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #141414;
    position: absolute;
    left: 0px;
    bottom: -2px;
}

.nav-search__dropdown .inputs.radio input:checked+label:after {
    content: '';
    width: 12px;
    height: 7px;
    border: solid #ff0000;
    border-radius: 0;
    position: absolute;
    top: 3px;
    left: 3px;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    background: transparent;
}

.nav-search__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 90px;
    border-radius: 999px;
    background-color: #FF0505;
    border: none;
    cursor: pointer;
    transition: all 0.6s ease-in-out;
}

.nav-search__button:hover {
    background-color: #bb0000;
}

.nav-search__button span {
    display: none;
}

.nav-search__item .select2-container {
    width: 100% !important;
    padding: 0 22px;
}

.nav-search__item .select2-container--default .select2-selection--single {
    height: 100%;
    background-color: transparent;
    border: none;
}

.nav-search__item .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0px;
    font-size: 17px;
    line-height: 40px;
    color: #333;
    font-weight: 500;
}

.nav-search__item .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    top: 0;
    right: 22px;
}

.nav-search__item .select2-container--default .select2-selection--single .select2-selection__arrow b {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #949494;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg) translate(-50%, 0px);
    top: 50%;
    left: auto;
    right: 0;
    margin: 0px;
    margin-top: -3px;
}

.nav-search__item .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: #141414;
    transform: rotate(135deg) scale(-1);
    border-width: 2px 2px 0 0;
}

.select2-container--open .select2-dropdown {
    top: 0;
    right: 0;
    border: none;
    margin-top: 10px;
    box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #fdf0f0 !important;
    color: #333 !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ffdede !important;
    color: #333 !important;
}

.select2-results__option {
    color: #333 !important;
    padding: 12px 6px !important;
}

.select2-search--dropdown .select2-search__field {
    padding: 8px 4px !important;
}

.points-header p {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.points-header span {
    font-weight: 400;
    font-size: 13px;
    margin-left: 6px;
}

.points-header .usuarioPuntos {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.menu-header .--toggle:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border: solid #fff;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg) translateY(2px);
    margin-left: 10px;
} 

/* Menu */

#main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    display: flex;
    justify-content: flex-end;
    line-height: 1.25;
}

#main-menu nav {
    display: flex;
    flex-direction: column;
    opacity: 0;
    top: 0;
    left: 0;
    position: fixed;
    background-color: #FFFFFF;
    width: 440px;
    height: 100vh;
    box-shadow: 0px 4px 31px rgba(0, 0, 0, 0.08);
    transform: translateX(-100%);
    transition: all .5s;
    max-height: 100vh;
    z-index: 5;
}

.overlay {
    top: 0;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    background-color: #fff;
    opacity: 0;
    width: 100%;
    transition: all .5s;
    display: none;
}
#main-menu.active .overlay{
    opacity: .5;
    display: block;
}

#main-menu.active nav{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.category-menu {
    border-bottom: none;
    text-align: right;
    border-left: solid 5px transparent;
    cursor: pointer;
    transition: all .3s;
}

.category-menu:first-child {
    margin-top: 6px;
}

.category-menu-name.--featured .js-site-link {
    color: #FC0808;
    font-weight: 500;
}



.category-menu .category-menu-name {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border: none;
}

.category-menu-name{
    padding-left: 45px;
}

.category-menu-name:hover .js-site-link {
    padding-left: 3px;
    color: #E00000;
    opacity: .8;
}

/*
.category-menu-name:hover svg {
    transform: scale(1.3);
} */

.category-menu-name:hover svg path {
    stroke: #E00000;
    opacity: .8;
}

.js-site-link {
    text-align: right;
    font-style: normal;
    font-weight: normal;
    font-size: 21px;
    font-weight: 500;
    line-height: 70px;
    color: #141414;
    padding-right: 15px;
    transition: all .5s;
    cursor: pointer;
}

.subcategory-menu a {
    font-style: normal;
    font-weight: normal;
    font-size: 21px;
    line-height: 55px;
    text-align: left;
    color: #5c5c5c;
    display: block;
    transition: all .4s;

}

.toggle-target a:hover {
    color: black;
    padding-left: 3px;
}

.category-menu-name svg{
    transition: all .5s;
    width: 17px;
    height: 9px;
}

.category-menu-name svg path {
    stroke: #898989;
}

.subcategory-menu {
    /* display: none; */
    height: 0;
    overflow: hidden;
}

.toggle-target:not(.active) {
    border-bottom: none;
}

.toggle-target {
    transition: height 0.35s ease-in-out;
    overflow: hidden;
    text-align: right;
    height: 0;
}


.category-menu.open .subcategory-menu{
    display: flex;
    flex-direction: column;
    padding-right: 80px;
}
.category-menu.active {
    border-left-color: #E00000;
}

.category-menu-name.active {
    background-color: #F8F8F8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.category-menu-name.active .js-site-link{
    color: #E00000;
}

.category-menu-name.active svg{
    transform: rotate(-180deg);
    stroke: #E00000;
    transition: all .5s;
}

.category-menu-name.active svg path{
    stroke: #E00000;
}

#main-menu.active {
    pointer-events: auto
}

#main-menu nav a::after {
    display: none
}


header #main-menu nav a {
    font-size: 20px;
    text-transform: none;
    transition: .5s;
}

header #main-menu nav .subcategory-menu-link {
    transition: .5s;
    padding-left: 45px;
}

header #main-menu nav .subcategory-menu-link:hover {
    margin-left: 3px;
}

header #main-menu nav .subcategory-menu-link:first-child {
    padding-top: 20px;
}

header #main-menu nav .subcategory-menu-link:last-child {
    padding-bottom: 20px;
}

.subcategory-menu {
    border-bottom: 1px solid #ddd;
}

header #main-menu.active nav {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    /* padding-right: 5%; */
    /* padding-left: 5%; */
}

header #main-menu .nav-top {
    display: flex;
    align-items: center;
    padding: 45px 45px 35px 45px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

header #main-menu .nav-top__inner {
    flex: 1;
}

header #main-menu .nav-top p {
    font-size: 23px;
    margin-bottom: 6px;
}

header #main-menu .nav-top a {
    font-size: 18px;
    text-decoration: underline;
}

header #main-menu .nav-top .avatar {
    width: 62px;
    height: 62px;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-right: 18px;
}

header #main-menu .nav-top .avatar .avatar__button {
    position: absolute;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    bottom: -5px;
    right: -5px;
}

header #main-menu .nav-top .avatar .avatar__button:hover span {
    visibility: visible;
    opacity: 1;
}

header #main-menu .nav-top .avatar .avatar__button img {
    width: 16px;
    height: auto;
}

header #main-menu .nav-top .avatar .avatar__button span {
    display: block;
    visibility: hidden;
    position: absolute;
    font-size: .8125rem;
    width: max-content;
    background-color: #fff;
    color: #3a3a3a;
    text-align: center;
    padding: .375rem .625rem;
    border-radius: .375rem;
    z-index: 1;
    bottom: 125%;
    opacity: 0;
    transition: opacity .6s;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    transform: translate(-50%, 0%);
    left: 50%;
    max-width: 13.75rem;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
}

header #main-menu .nav-top .avatar .avatar__button span::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -.3125rem;
    border: .3125rem solid transparent;
    border-top-color: #fff;
}

header #main-menu .nav-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
    padding-bottom: 25px;
}

header #main-menu .nav-content::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

header #main-menu .nav-content::-webkit-scrollbar-thumb, header #main-menu .nav-content::-webkit-scrollbar-track {
    border-radius: 0.3125rem;
}

header #main-menu .nav-content::-webkit-scrollbar-thumb {
    background: #9c9c9c;
    border-radius: 0.3125rem;
}

header #main-menu .nav-content::-webkit-scrollbar-track {
    background: #d8d8d8;
    border-radius: 0.3125rem;
}

/* Toggle Nav */
/* Modificado 2025 */
header .toggle-nav {
    position: relative;
    display: flex;
    top: 0px;
    height: 40px;
    cursor: pointer;
    pointer-events: auto;
    background: none;
    border: none;
    padding-left: 0px !important;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #aaaaaa;
    padding: 0;
}

header .toggle-nav__inner {
    position: relative;
    top: -50%;
    transform: translate(12px, 50%);
    width: 26px;
    height: 100%;
}

.toggle-nav.menu-open{
    display: none;
}

header .toggle-nav::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
}

header .toggle-nav.active::before {
    /* opacity: 1; */
    transition: all .3s .5s;
}

/* Modificado 2025 */
.toggle-nav span {
    position: absolute;
    top: 11px;
    width: 22px;
    height: 2px;
    transition: all .3s;
    background: #E00000;
    left: 0;
} 

.toggle-nav span:nth-child(2) {
    top: 17px;
}

.toggle-nav span:nth-child(3) {
    top: 23px;
}



/* Modificado 2025 */
.toggle-nav p {
    font-size: 16px;
    font-weight: 500;
    padding-right: 12px;
    padding-left: 16px;
    line-height: 1;
}

/* Modificado 2025 */
.active.toggle-nav span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg)!important;
    -moz-transform: rotate(135deg)!important;
    -o-transform: rotate(135deg)!important;
    transform: rotate(135deg)!important;
    background:#000;
    /* left: -10px; */
}

.active.toggle-nav span:nth-child(2) {
    opacity: 0;
}

/* Modificado 2025 */
.active.toggle-nav span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg)!important;
    -moz-transform: rotate(-135deg)!important;
    -o-transform: rotate(-135deg)!important;
    transform: rotate(-135deg)!important;
    background: #000;
    /* right: 10px; */
}

/* toggle nav cuando se activa el menu */

#main-menu .toggle-nav.active {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 22px;
    border: 0px;
}



#main-menu.active .toggle-nav:hover span{
    background: #FF0505;
    height: 2px;
}


/* Flecha para subir */


.go-top {
    border-radius: 50%;
    background-color: #E00000;
    position: fixed;
    bottom: 20px;
    right: 35px;
    width: 50px;
    height: 50px;
    cursor: unset;
    opacity: 0;
    transition: all .6s;
    transform: translateY(100px);
    text-align: center;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.go-top.active {
    opacity: 1;
    transform: translateY(0);
    cursor: pointer;
    text-align: center;
}

.go-top.active svg {
    position: relative;
    transition: all .3s;
}
.go-top svg {
    position: relative;
    transition: all .3s;
}

.go-top.active:hover {
    background-color: #fff;
}

.go-top.active:hover svg path{
    stroke: #E00000;
}

/* Hero */

#hero {
    overflow: hidden;
    margin-top: 0px;
}

#hero h1 strong {
    display: contents;
}

h1{
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 50px;
}

h1:not(.red){
    margin-top: 50px;
}

h2{
    font-size: 30px;
    margin-bottom:15px;
}

.red{
    color:#E00000 !important;
}

/* Modificado 2025 */
h1.red {
    font-weight: 500;
}

.slider-conteiner{
    width: 65%;
    margin: 0 auto;
}

/* Modificado 2025 */
.hero-slide{
    display: flex;
    justify-content: space-between;
    margin-top: 65px;
    border-radius: 10px;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    min-height: 275px;
}

.hero-slider-pagination .swiper-pagination-bullet {
    background-color: #E00000;
}

.detail-options{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    width: 50%;
    background-color:#FFFFFF;
}

.detail-options h2{
    font-weight: 700;
    line-height: 35px;
}

.detail-options p,b {
    font-size: 14px;
    line-height: 20px;
}

.detail-options .button {
    padding: 12px 37px;
}

.text-options{
    padding-bottom: 30px;
    flex: 1;
}

.img-options{
    width: 50%;
    position: relative;
    overflow: hidden;
}

.img-options .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../img/efecto_santander/option.jpg);
    background-position: center;
    background-size: cover;
    transition: all .5s;
}

.hero-slide:hover .img-options .bg {
    transform: scale(1.10);
}

/* Pagination */

.swiper-pagination-bullets {
    margin: 0 auto;
    margin-top: 18px;
    margin-bottom: 55px;
    text-align: center;
    display: block;
}
.swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    margin: 0 9px;
}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active):focus {background: #000; opacity: .5;}
.swiper-pagination-bullet-active {
    background: #FF0505;
}
/* Background formas */

.background-hero{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.svg-background{
    position: absolute;
}

.oval {
    width: 10%;
    top: -20px;
    left:50px;
}

svg.oval-top {
    position: relative;
    left: 47px;
    margin-bottom:25px;
}

.triangle {
    width: 25%;
    display: flex;
    bottom: -90px;
    left: 155px;
}

.eclipse-top {
    right: 5%;
    display: flex;
    align-items: center;
    top: -12%;
}

.eclipse-down {right: 0;top: 55%;}

/* Modificado 2025 */
.hero-banner-home {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 380px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Propuestas puntos */

#proposal {
    box-shadow: 0px 4px 30px rgb(0 0 0 / 10%);
    z-index: 1;
    padding-top: 80px;
    padding-bottom: 120px;
}

#proposal h2 {
    line-height: 30px;
    font-size: 24px;
    margin-bottom: 45px;
    text-align: center;
}

.proposal-slide{
    width: 75%;
    cursor: pointer
}

/* Cartas */

.proposal-slide{
    background: #FFFFFF;
    border: 1.5px solid #00A963;
    box-sizing: border-box;
    border-radius: 9px;
    display: block;
    position: relative;
    width: 16%;
    margin-top:50px;
    transition: all .3s;
    height: 191px;
}

.cards-img{
    height: 50px;
    display: flex;
    align-items: center;
}

.cards-detail {
    padding: 25px 20px 20px 20px;
}

.proposal-slide .cards-detail {
    padding: 20px 70px 10px 20px;
}

.cards-title {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 15px;
}

.cards-text{
    font-family: 'Raleway';
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 16px;
    color: #686868;
    margin-top:12px;
}

.more-info {
    /* margin-top: 15px; */
    margin-left: 20px;
    margin-bottom: 15px;
    position: relative;
}

.cards-more {
    display: inline-block;
    cursor: pointer;
    padding: 12px 30px;
    border: 1px solid #686868;
    border-radius: 100px;
    position: relative;
    font-style: normal;
    font-weight: bold;
    font-size: 10px;
    text-align: center;
    color: #686868;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all .5s;
}


.cards-more.--home {
    padding: 6px 0px;
    border: none;
    font-size: 11px;
    border-radius: 0px;
    text-align: left;
}

.cards-more.--home:hover {
    border: none;
    padding: 6px 0px;
    color: #E00000;
}


.background-more {
    display: inline-block;
    color: white;
    padding: 12px 30px;
    border-radius: 100px;
    position: absolute;
    transition: all .4s;
    text-transform: uppercase;
    white-space: nowrap;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.discounts-slide:hover .background-more {
    opacity: 1;
}

.more-info:hover .background-more {
    opacity: 1;
    transform: scale(1);
}

.discounts-slide:hover .cards-more {
    border: 1px solid white;
}

.discounts-slide:hover .cards-more.--home {
    border: none;
}

.more-cross {
    left: 15px;
    top: 16px;
}

.more-circle{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: solid 1px #ccc;
    overflow: hidden;
    cursor: pointer;
    transition: all .5s;
    background-color: transparent;
}
.more-circle:focus {
    border: 2px solid #E00000;
}

.cards-more .more-circle div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0);
    transition: all .3s;
}

.proposal-slide:hover .more-circle div, .discounts-slide:hover .more-circle div {
    transform: scale(1);
}

.more-cross svg * {
    transition: all .3s;
}

.proposal-slide:hover .more-cross svg *{
    stroke: #fff;
}


/* Points */
#points{
    background-color: #F4F4F4;
    padding-top: 65px;
    padding-bottom: 65px;
    overflow: hidden;
}

.points-login{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 70px;
}

.accumulated-points{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 25px 40px 25px 40px;
    background: #FFFFFF;
    border-radius: 9px;
}

.accumulated-points__inner {
    display: flex;
    align-items: center;
}

.accumulated-points__inner h2 {
    font-weight: 600;
}

.accumulated-points__inner .p_ex-h2 {
    font-weight: 600;
    text-align: center;
    font-size: 30px;
    margin: 0px;
}

.accumulated-points p{
    font-size: 24px;
    flex: 1;
}

.accumulated-points h2 {
    margin: 0;
}

.enter-account{
    margin-left:30px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;

}

.enter-account span{
    font-weight: bold;
    font-size: 17px;
    line-height: 25px;
    text-transform: uppercase;
    color: #E00000;
    padding-right: 12px;
    transition: all .3s;
    letter-spacing: 0.095em;
}

.enter-account svg{
    transition: all .3s;
}

a.enter-account:hover span {
    opacity: .7;  
    transform: translateX(4px); 
}

a.enter-account:hover svg {
    transform: scale(1.4);
    opacity: .7;   
}

#points h2{
    justify-content: center;
    text-align: center;
}

#points h2.--subtitle {
    margin-bottom: 40px;
}

#points h2.--subtitle strong {
    color: #E00000;
}

.filter-container-home{
    display: none;
}
/*background-points */

.background-points{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.background-points svg:first-child {
    position: absolute;
    bottom: 0;
    width: 42%;
}

.ovalright{
position: absolute;
bottom: -50px;
right: 0;
}


/* filters points */
.filter-points{
    display: flex;
    justify-content: space-between;
    margin-top:25px;
}

.filter-points-mobile {
    display: none !important;
}

.filter span{
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    transition: all .3s;
    user-select: none;
    position: relative;
}

.filter img {
    width: auto;
    height: 28px;
    margin-bottom: 8px;
}

.filter:hover span {
    color: #E00000;
}

.filter.active span{
    color: #E00000;
}

.filter.active{
    border-color: #ffcccc;
    background-color: #fff9f9;
}

.filter-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 11.0857px;
    line-height: 16px;
    text-transform: uppercase;
    color: #FC0808;
    border: 1px solid #FC0808;
    border-radius: 30px;
    padding: 12px;
}

.filter {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 5px;
    cursor: pointer;
    text-align: center;
    padding: 15px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    min-width: 110px;
    background-color: #fff;
}


.filter-main * {
    padding: 1px;
}

/* opciones para gastar puntos */
.spend-points{
    margin-top:30px;
    margin-bottom: 25px;
    justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 15px;
}
.spend-card{
    display: flex;
    background: #FFFFFF;
    box-shadow: 4px 4px 14px rgb(0 0 0 / 6%);
    border-radius: 9px;
    transition: all .3s;
    flex-direction: column;
    cursor: pointer;
}

.spend-card:last-child{
    margin-right: 0px;
}

.spend-card-title-detail {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.rest-of-card {
    display: flex;
    flex-direction: column;
}

.img-spend {
    position: relative;
    height: 195px;
    overflow: hidden;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.img-spend .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../img/efecto_santander/option.jpg);
    background-position: center;
    background-size: cover;
    transition: all .5s;
}
.spend-card:hover .img-spend .bg {
    transform: scale(1.10);
}

#howard{
    background-image:url(../../img/efecto_santander/cenaHoward.jpg);
}

#casachic{
    background-image:url(../../img/efecto_santander/casachic.jpg);
}

#ramona{
    background-image:url(../../img/efecto_santander/bakehouse.jpg);
}

#gatonegro{
    background-image:url(../../img/efecto_santander/gatonegro.jpg);
}

#savoy{
    background-image:url(../../img/efecto_santander/savoy.jpg);
}

.category-stars {
    text-align: left;
}

.category {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    color: #707070;
}

.spend-card-detail {
    padding: 15px;
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* Modificado 2025 */
.description-spend {
    padding-right: 10px;
    margin-top: 5px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    color: #000000;
    margin-bottom: 6px;
}

.description-extra {
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 8px;
    color: #353535;
}

.ubication-spend {
    /* margin-top: 10px; */
    display: flex;
    align-items: center;
}

.ubication-spend path {
    fill: #656565;
}

.ubication-spend span {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    color: #656565;
}

.ubication-spend span {
    margin-left: 5px;
}

.points-for-spend {
    font-style: normal;
    font-weight: bold;
    font-size: 21px;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 5px;
}

.points-for-spend small {
    color: #656565;
    font-size: 14px;
    padding: 0 0 3px 0;
    font-weight: 500;
    flex: 100%;
}

.points-for-spend span {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    color: black;
    margin-left: 8px;
}

.view-more-spend {
    display: flex;
    justify-content: center;
    margin-top: 37px;
}

.view-more-spend .button {
    padding: 12px 40px;
}

.go-spend {
    position: absolute;
    right: 15px;
    bottom: 12px;
    border: 1px solid #aaaaaa;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.go-spend svg path {
    stroke:#656565;
}

.spend-card .go-spend svg {
    transform: translateX(-2px);
}

.spend-card:hover .go-spend {
    background-color: #E00000;
    border-color:#E00000;
}

.spend-card:hover .go-spend svg path{
    stroke:#fff;
}

/* discounts bonuses */
#discounts-bonuses{
    padding-top:80px;
    padding-bottom: 80px;
    background-color: #d82e2e;
}

#discounts-bonuses .section-title {
    max-width: 610px;
}

.discounts-conteiner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 25px;
}


.discounts-conteiner.w-33 {
    grid-gap: 25px;
    grid-template-columns: repeat(3, 1fr);
    width: 60%;
    margin: 0 auto;
}


.discounts-conteiner .discounts-slide {
    width: 100%;
}

.title-discounts {
    display: flex;
    justify-content: center;
}

.title-discounts p {
    width: 55%;
    text-align: center;
    line-height: 24px;
}

.title-discounts h4 {
    width: 60%;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
    margin-bottom: 0px;
    color: #fff;
}

.discounts-slide {
    background: #FFFFFF;
    border: 2px solid #FC0808;
    border-radius: 9px;
    width: 100%;
    cursor: pointer;
    transition: all .3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.discounts-slide.--benefits {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 18px;
}

.discounts-slide.--benefits:hover {
    opacity: 0.8;
    box-shadow: 0px 10px 12px 0px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0px 10px 12px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 10px 12px 0px rgba(0,0,0,0.15);
}

.discounts-slide.--home {
    align-items: center;
    text-align: left;
    border-radius: 999px;
    flex-direction: row;
    border: 2px solid #ffffff;
    justify-content: center;
    padding: 6px 10px;
    background: transparent;
}

.discounts-slide.--home:hover {
    background-color: #ffffff;
}

.discounts-slide.--home:hover .cards-title {
    color: #d82e2e;
}

.discounts-slide.--home:hover .icon-size-normal {
    filter: brightness(0) saturate(100%) invert(30%) sepia(84%) saturate(6510%) hue-rotate(353deg) brightness(96%) contrast(75%);
}

.discounts-slide.--home .cards-img, .discounts-slide.--home .icon-size-normal {
    display: block;
    justify-content: center;
    margin: 0;
}

.discounts-slide.--home .icon-size-normal {
    height: 30px;
    width: auto;
    margin-right: 12px;
}

.discounts-slide.--home .cards-title {
    margin: 0px;
    color: #fff;
    font-size: 15px;
}

.discounts-slide.--home .more-info {
    margin-top: 0px;
    margin-left: 0px;
}

.discounts-slide.--home .cards-detail {
    padding-bottom: 9px;
}

.discounts-slider-pagination{
    margin-bottom: 45px;
}

.go-spend:focus{
    background-color: #FC0808;
    border-color:#FC0808;
} 

.go-spend:focus svg path{
    stroke: #FFF;
}

/* footer */
/* Modificaciones 2025 */
footer{
    position:relative;
    background-color: #E00000;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}

/* Modificaciones 2025 */
footer .wrapper{
    display: grid;
    padding-top: 55px;
    padding-bottom: 55px;
    min-height: 240px;
    grid-template-columns: repeat(4, 1fr);
}

/* Modificaciones 2025 */
footer .footer__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Modificaciones 2025 */
footer .footer__item nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* Modificaciones 2025 */
footer .footer__item h4 {
    font-size: 19px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 18px;
    opacity: 0.9;
}

/* Modificaciones 2025 */
footer .footer__item nav a, footer .footer__copyright a {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    padding: 5px 0px;
}

.footer__copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 90%;
    max-width: 1290px;
    padding: 35px 0px 70px 0px;
    border-top: 1px solid #ffffff75;
}

.download-footer{
    display: flex;
}

.download-footer span {
    width: 115px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 17px;
    margin-right: 12px;
}

.qr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 196px;
}

.android, .iphone {
    display: block;
    text-align: center;
}

.android img, .iphone img {
    margin-bottom: 15px;
    width: 85px;
    height: auto;
}

.download-footer-image {
    width: 85px;
    height: auto; 
    display: flex;
}


.copyright{
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: rgb(255 255 255 / 70%);
}

.terms-faqs {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    margin-right: 10px;
}

.info-contact {
    display: flex;
    align-items: baseline;
}

span.division-footer {
    border: 1px solid #FFFFFF;
    height: 20px;
    margin-right: 5px;
    margin-left: 5px;
}

.terms-faqs a:focus{
    text-decoration: underline;
}

.contact-us:focus-within .button{
    text-decoration: underline black 2px;
}

/* background formas footer */
.background-footer{
    position:absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
}

.circle-footer {
    position: absolute;
    bottom: 0;
    width: 17%;
}
.eclipse-footer {
    position: absolute;
    bottom: 0;
    right: 420px;
    width: 10%;;
}

.eclipse-bottom-footer{
    position: absolute;
    bottom: 0;
    left: 95px;
}

/* overview de beneficios */

#benefit-screen {
    margin-top: 0px;
}

#benefit-screen ::selection{
    background-color: #00a963 ;
}
#benefit-screen .wrapper{
    /* top: 0; */
    /* position: absolute; */
    /* width: 100%; */
    display: flex;
}

#benefit-screen .back {
    margin-bottom: 35px;
    display: block;
}

.button-filter {
    border: 1.5px solid #000000;
    box-sizing: border-box;
    border-radius: 34px;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    cursor: pointer;
    align-items: center;
    background: transparent;
    width: 100%;
}

.button-filter:focus span{
    text-decoration: underline;
}

.filter-container {
    padding: 0px 80px 0px 15px;
    margin-bottom: 40px;
}

.button-filter svg:last-child {
    position: relative;
    transform: rotate(180deg);
}

.button-filter span {
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.095em;
    text-transform: uppercase;
    color: #000000;
    font-family: 'Santander Text';
}

.filter-container.active .button-filter span {
    color: #ff0606;
}

.button-filter.active svg:last-child {
    transform: rotate(360deg);
}

.filter-benefit-background{
    width: 20%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
}

/* modal de beneficios- cultura */

#modal, #modal-discounts {
    position: fixed;
    top: 89px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 89px);
    opacity: 0;
    z-index: -50;
    pointer-events: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*** Modal Home Anuncios ***/
/* Modificado 2025 */
.modal.--home {
    display: block;
    position: fixed;
    z-index: 999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    transition: 0.4s;
    background: #ffffffbd;
}


.modal-content {
    background-color: #fefefe;
    position: relative;
    margin: auto;
    padding: 20px;
    border: 1px solid #dbdbdb;
    width: 620px;
    height: 420px;
    border-radius: 12px;
    top: 10%;
    text-align: center;
}


.imgFondo {
    background-size: cover;
    background-position: left;
    background-color: #fefefe;
    overflow: hidden;
    margin: auto;
    padding: 0px;
    padding-top: 0px;
    border: 1px solid #888;
}

.modal-content .modal-content-inner {
    float: right;
    background-color: white;
    width: 290px;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 15px;
    display: flex;
    flex-direction: column;
}


.modal-content .contenido-Desktop img {
    width: 100%;
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.modal-content .destacado {
    width: 100%;
    max-width: 220px;
    font-size: 19px;
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 5px;
    border: 2px solid red;
    color: red;
    border-radius: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    text-transform: uppercase;
}



.modal-content .destacado span {
    font-weight: 800;
}


.modal-content .categoria {
    font-size: 29px;
    color: #5D5C60;
    font-weight: 800;
    margin-top: 0px;
    text-align: center;
}


.modal-content .Tex_Principal {
    text-align: center;
    color: red;
    font-weight: 600;
    font-size: 18px;
    margin: 15px auto 15px;
    padding: 8px 15px;
    border: 1px solid #ff0505;
    line-height: 1;
    border-radius: 12px;
    width: fit-content;
}

.modal-content .Tex_Principal p {
    font-size: 18px;
    line-height: 1;
}

.modal-content .Tex_Principal p b {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

.modal-content .Tex_Sec p {
    color: #808080;
    font-weight: 500;
    font-size: 22px;
    margin-top: 0px;
    margin-bottom: 18px;
    text-align: center;
}

.modal-content .Tex_Sec h1 {
    color: #808080;
    font-weight: 500;
    font-size: 28px;
    margin-top: 0px;
    margin-bottom: 18px;
    text-align: center;
}

.modal-content .Tex_Sec h2 {
    color: #808080;
    font-weight: 500;
    font-size: 26px;
    margin-top: 0px;
    margin-bottom: 18px;
    text-align: center;
}

.modal-content .Tex_Sec h3 {
    color: #808080;
    font-weight: 500;
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 18px;
    text-align: center;
}

.modal-content .Tex_Sec h4 {
    color: #808080;
    font-weight: 500;
    font-size: 22px;
    margin-top: 0px;
    margin-bottom: 18px;
    text-align: center;
}

.modal-content .Tex_Sec h5 {
    color: #808080;
    font-weight: 500;
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 18px;
    text-align: center;
}

.modal-content .Tex_Sec h6 {
    color: #808080;
    font-weight: 500;
    font-size: 18px;
    margin-top: 0px;
    margin-bottom: 18px;
    text-align: center;
}

.modal-content .Tex_Ter p {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.25;
}

.modal-content .Tex_Ter h1 {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.25;
}

.modal-content .Tex_Ter h2 {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.25;
}

.modal-content .Tex_Ter h3 {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.25;
}

.modal-content .Tex_Ter h4 {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.25;
}

.modal-content .Tex_Ter h5 {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.25;
}

.modal-content .Tex_Ter h6 {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.25;
}

.modal-content hr {
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
    color: red;
    background-color: gray;
    height: 1px;
    border: none;
    width: 550px;
}


.modal-content .popup-modal-link {
    width: 100%;
    max-width: 200px;
    max-height: auto;
    display: flex;
    font-size: 12px;
    padding: 15px 30px 15px 30px;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    border: 1px solid #ff0000;
    cursor: pointer;
    background-color: #FF0000;
    color: #FFF;
    transition: ease-out 0.3s;
}


.modal-content .ctaModalContenido {
    position: absolute;
    left: 0px;
    bottom: 20px;
    right: 0px;
}


.modal-content .popup-modal-link:hover {
    background-color: #fff;
    color: #FF0000;
    border-color: #FF0000;
}

.modal-content .popup-modal-link:focus {
    background-color: none;
    outline: none;
}

.tag-commingsoon {
    background-color: #e9e6ff;
    color: #4334c9;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
}

.tag-commingsoon.--big {
    padding: 8px 15px;
    font-size: 15px;
    width: fit-content;
    margin-bottom: 8px;
}

p.icon.--commingsoon {
    font-weight: 400;
    color: #4334c9;
}



@media only screen and (max-width: 481px) {

    .modal-content .popup-modal-link {
        margin-top: 10px;
        font-size: 12px;
        max-width: 170px;
        padding: 12px 12px 12px 12px;
    }


    .modal-content div .close {
        display: none;
    }


    .modal-content {
        width: 300px;
        height: 390px;
        border-radius: 12px;
        top: 10%;
    }

    .imgFondo {
        background-size: 120%;
        background-position: 10% -5%;
        width: 300px;
        height: 420px;

    }

    .modal-content .modal-content-inner {
        float: none;
        position: absolute;
        bottom: 0px;
        background-color: white;
        width: 100%;
        height: 65%;
    }

    .contenido-Desktop {
        top: 0px;
    }


    .modal-content .destacado {
        width: 100%;
        max-width: 170px;
        font-size: 14px;
        margin-top: 30px;
        margin-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
    }


    .modal-content .Tex_Principal {
        font-size: 14px;
        margin: 15px auto 15px;
        padding: 6px 10px;
        line-height: 1;
    }

    .modal-content .Tex_Principal p {
        font-size: 14px;
        line-height: 1;
    }

    .modal-content .Tex_Principal p b {
        font-size: 14px;
        line-height: 1;
    }

    .modal-content .Tex_Sec p {
        color: #808080;
        font-weight: 500;
        font-size: 18px;
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .modal-content .Tex_Sec h1 {
        color: #808080;
        font-weight: 500;
        font-size: 26px;
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-content .Tex_Sec h2 {
        color: #808080;
        font-weight: 500;
        font-size: 24px;
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-content .Tex_Sec h3 {
        color: #808080;
        font-weight: 500;
        font-size: 22px;
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-content .Tex_Sec h4 {
        color: #808080;
        font-weight: 500;
        font-size: 20px;
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-content .Tex_Sec h5 {
        color: #808080;
        font-weight: 500;
        font-size: 18px;
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-content .Tex_Sec h6 {
        color: #808080;
        font-weight: 500;
        font-size: 17px;
        margin-top: 0px;
        margin-bottom: 10px;
        text-align: center;
    }
    
        
    .modal-content .Tex_Ter p {
        font-size: 15px;
        color: #333;
    }

    .modal-content .Tex_Ter h1 {
        font-size: 15px;
        color: #333;
    }

    .modal-content .Tex_Ter h2 {
        font-size: 15px;
        color: #333;
    }

    .modal-content .Tex_Ter h3 {
        font-size: 15px;
        color: #333;
    }

    .modal-content .Tex_Ter h4 {
        font-size: 15px;
        color: #333;
    }

    .modal-content .Tex_Ter h5 {
        font-size: 15px;
        color: #333;
    }

    .modal-content .Tex_Ter h6 {
        font-size: 15px;
        color: #333;
    }

    .modal-content .contenido-Desktop img {
        width: 100%;
        max-width: 80px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .modal-content .categoria {
        font-size: 29px;
    }

    .tag-commingsoon {
        padding: 4px 10px;
        font-size: 12px;
    }

    .tag-commingsoon.--big {
        padding: 6px 12px;
        font-size: 14px;
        margin: 0 auto 0px auto;
    }
}




/***/

.modal-overlay {
    position: absolute;
    width: 100vw;
    height: 100vh;
    transition: 0.4s;
    background: #FFFFFF;
    opacity: 0;
    top: 0;
    left: 0;
}

#modal.is-inview .modal-overlay, #modal-discounts.is-inview .modal-overlay {
    opacity: .8;
}

#modal.is-inview, #modal-discounts.is-inview {
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: 0s;
}

.modal-container {
    position: relative;
    margin: 0 auto;
    right: 0;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 9px;
    padding: 37px 45px 30px 38px;
    overflow: hidden;
    border: 1px solid #00A963;
    width: 40%;
    overflow: auto;
    max-height: 90vh;
}


.modal-container h5{
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #141414;
    margin-bottom: 15px;
}

#modal p, #modal-discounts p{
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #717171;
    margin-bottom: 15px;
}

.modal-container .view-more-spend {
    justify-content: flex-start;
}

/* background de beneficios */ 

.bg-benefit{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bg-benefit .wrapper{
    position: absolute;
    height: 100%;
    right: 0;
    left: 0;
}

.overview-options-benefit-background{
    background-color: #fff;
    width: 80%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    box-shadow: 0px 4px 30px rgb(0 0 0 / 10%);
    right: 0;
}

.oval-benefit-top {
    position: absolute;
    right: 0%;
    width: 20%;
    top: 4%;
}

.oval-benefit-bottom {
    position: absolute;
    top: 25%;
    right: 0px;
}

.filter-benefit-background svg {
    position: relative;
    top: 800px;
    left: 100px;
}

.overview-filter-benefit {
    width: 20%;
    padding-top: 65px;
}

.overview-options-benefit {
    width: 80%;
    padding: 45px 30px 200px 50px;
    box-shadow: 0px 4px 30px rgb(0 0 0 / 10%);
    min-height: 650px;
}

.back span, .back-mobile span {
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #141414;
    opacity: 0.5;
    padding-left: 5px;
    transition: all .3s;
}

.back, .back-mobile{
    padding-right: 55px;
    padding-left: 15px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: all .5s;
}


.back:hover svg, .back-mobile:hover svg, .back:focus svg {transform: scale(1.3);}

.back:hover svg path, .back-mobile:hover svg path, .back:focus svg path {stroke: #F6121E;opacity: 1;}

.back:hover span, .back-mobile:hover span, .back:focus span{
    color: #F6121E;
    opacity: 1;
    font-size: 14px;
}

svg {
    transition: all .3s;
}

.category-benefit {
    padding: 20px 25px 20px 15px;
    display: flex;
    align-items: center;
    opacity: 0.75 !important;
    cursor: pointer;
    border: none;
    background: transparent;
}

.category-benefit.active{
    opacity: 1 !important;
}

.category-benefit::before {
    content: '';
    border: 5px solid #00a963;
    position: absolute;
    height: 65px;
    left: -20px;
    opacity: 0;
}

.category-benefit.--red::before {
    border-color:#E00000 !important;
}

.category-benefit.active::before{
    opacity: 1;
}

.category-benefit span {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #141414;
    margin-left: 24px;
    width: 120px;
    text-align: left;
}

.category-benefit:focus {
    text-decoration: underline black 2px;}

.overview-benefit-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.overview-benefit-title h1 {
    margin-left: 15px;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 58px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #00A963;
    margin-top: 0;
}

h5 {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 25px;
    color: rgba(20, 20, 20, 0.48);
}

.options-cards-benefits {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

.card-benefit {
    padding: 30px 10px 30px 25px;
    background: #FFFFFF;
    border: 2px solid #00A963;
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    /* transition: all .3s; */
    display: flex;
    flex-direction: column;
}

.card-benefit h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #141414;
}

.card-benefit p {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #717171;
    margin-top: 20px;
}

.card-benefit .more-info {
    margin-left: 0px;
    margin-bottom: 0px;
}

.detail-card-benefit {
    margin-bottom: 15px;
    flex: 1;
}

.card-benefit:hover .background-more.--red {
    opacity: 1;
    transform: scale(1);
    background-color: #E00000;
    color: #fff;
}

/* #benefit-screen .card-benefit:hover .cards-more {
    border: 1px solid #00A963;
} */

.category-benefit svg {
    width: 27px;
}

.oval-benefit-top svg:last-child {
    position: relative;
    top: -50px;
}

.overview-options-benefit .card-benefit:hover .go-spend {
    background: #ffffff;
    border-color: #ffffff;
}

.overview-options-benefit .card-benefit:hover .go-spend svg path {
    stroke: #00A963;
}
/* PANTALLA DE PUNTOS */

.category-points {
    padding: 20px 25px 20px 15px;
    display: flex;
    align-items: center;
    opacity: 0.3;
    cursor: pointer;
    border: none;
    background: transparent;
}

.category-points::before {
    content: '';
    border: 5px solid #F6121E;
    position: absolute;
    height: 51px;
    left: -65px;
    opacity: 0;
    transform: scaleY(0.1);
    transition: all .5s;
}

.category-points.active::before{
    opacity: 1;
    transform: scaleY(1);
}

.category-points span {
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #141414;
    margin-left: 24px;
    font-family: 'Santander Text';
}

.category-points.active{
    opacity: 1 !important;
}
.category-points.active span{
    color: #F6121E;
}

.category-points.active svg path{
    stroke: #F6121E;
}

.category-points:focus span{
    text-decoration: underline black 1px;  
}

.points-title {
    display: block;
    text-align: left;
    margin-bottom: 20px;
}

.options-cards-points {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 30px;
}

.options-cards-points .spend-card{
    margin-right: 0px;
}

.options-cards-points .ubication-spend {
    margin-top: 10px;
    width: 100%;
}

.options-cards-points .ubication-spend span {
    margin-left: 5px;
}

.filter-container.active {
    border: 1.5px solid #F6121E;
    box-sizing: border-box;
    border-radius: 9px;
    padding: 0px;
    width: 185px;
}

.filter-container.active .button-filter {
    border: none;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    color: #F6121E;
}

.especification-filter {
    border: none;
    padding: 12px 10px 12px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: none;
    width: 100%;
    background: transparent;
    font-family: 'Santander Text';
}
.filter-container.active .especification-filter{
    display: flex;
}

.filter-container.active .button-filter svg path {
    stroke: #F6121E;
}

.filter-container.active .button-filter svg circle {
    stroke: #F6121E;
}

.especification-filter:focus span{
    text-decoration: underline;
}


/* BACKGROUND DE DESCUENTOS */
.bg-discounts{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bg-discounts .wrapper{
    position: absolute;
    height: 100%;
    right: 0;
    left: 0;
}

.bg-discounts .oval-discounts-medium svg:first-child {
    margin-bottom: 35px;
}

.circle-bg-discounts {
    left: 9%;
    position: absolute;
    top: 60%;
}

.triangle-discounts {
    right: -4%;
    position: absolute;
    top: -14%;
    width: 35%;
}

.oval-discounts-top svg:last-child {
    position: absolute;
    top: 18%;
    }


/* Overview de descuentos */

#discounts-screen {
    padding-top: 95px;
    padding-bottom: 95px;
    min-height: 600px;
}

.grid-discounts {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 40px;
}

.grid-discounts-flex {
    margin-top: 45px;
    display: flex;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}


.grid-discounts-flex .discounts-slide {
    margin-top: 0px;
    flex: 0 0 calc(250px - 25px);
}

.grid-discounts-flex .discounts-slide.--home {
    flex: 0 0 calc(280px - 25px);
}

.overview-discounts-main p {
    text-align: center;
    width: 50%;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 25px;
}

.button-filter-container .button-filter {
    position: relative;
    width: 130px;
    left: 0px;
}

.button-filter-container {
    justify-content: end;
    display: flex;
    margin-top: 30px;
    position: relative;
    z-index: 90;
}

.oval-discounts-top {
    width: 15%;
    position: absolute;
    left: -6%;
    top: 9%;
}

.oval-discounts-medium {
    width: 14%;
    right: -6%;
    position: absolute;
    top: 26%;
}

/* filtro de descuentos */ 
/* activar el filtro, tiene que activar el IS INVIEW del options-filter-discounts */

.overview-discounts-main .button-filter.active{
    border: 1.5px solid #FC0808;
}

.overview-discounts-main .button-filter.active svg path {
    stroke: #F6121E;
}

.overview-discounts-main .button-filter.active svg circle {
    stroke: #F6121E;
}

.overview-discounts-main .button-filter.active span{
    color:#FC0808;
}

.filter-options-discounts.in-view {
    position: absolute;
    width: 100%;
    opacity: 1;
    border-bottom: 1px solid #FC0808;
    border-radius: 9px;
    z-index: 1000;
}

.filter-options-discounts.in-view .especification-filter {
    display: flex;
}

.overlay-filter-discounts {
    position: absolute;
    width: 100vw;
    height: 100%;
    transition: 0.4s;
    background-color: #FFFFFF;
    z-index: 0;
    opacity: 0;
    pointer-events: all;
    top:0;
}

.overlay-filter-discounts.is-inview {
    opacity: 0.8;
    z-index: 80;
}

.options-filter-estranged {
    position: absolute;
    border: 1px solid #FC0808;
    border-radius: 12px;
    right: 0;
    width: 18%;
    top: 160%;
    background-color: #FFFFFF;
    display: none;
}

.button-filter-container.active .especification-filter {
    display: flex;
    padding: 12px 10px;
}

.especification-filter .filter span {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    text-transform: capitalize;
    letter-spacing: 0.06em;
}

.especification-filter .filter span::before {
    border: none;
}

.especification-filter .filter {
    margin: 0 0px;
    padding: 0px;
    background-color: #fff;
    border: none;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    border-radius: 0px;
}

/* 2025 */
.especification-filter img {
    height: 19px;
    margin-bottom: 0px;
    margin-right: 9px;
}

.especification-filter .filter.active span {
    font-weight: 600;
}

.button-filter-container.active .options-filter-estranged {
    display: block;
}


/* Modal de descuentos - preguntas frecuentes */

.faqs-discounts .modal-container {
    position: absolute;
    width: 100%;
    max-width: 658px;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: 10%;
    background: #fff;
    border-radius: 9px;
    padding: 37px 45px 30px 38px;
    overflow-y: auto;
    border: 2px solid #FF0505;
    max-height: 450px
}

.faqs-discounts .modal-container::-webkit-scrollbar {
    width: 0.625rem;
    height: 0.5rem;
}

.faqs-discounts .modal-container::-webkit-scrollbar-thumb {
    background: #bbbbbb;
    border-radius: 0.3125rem;
}

.faqs-discounts .modal-container::-webkit-scrollbar-thumb, .faqs-discounts .modal-container::-webkit-scrollbar-track {
    border-radius: 0.3125rem;
}

.faqs-discounts .modal-container::-webkit-scrollbar-track {
    background:#ddd;
    border-radius: 0.3125rem;
}

.title-modal{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.subtitle-modal {
    color: rgba(20, 20, 20, 0.48) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-bottom: 30px !important;
}


.faqs-discounts .modal-container h5{
    color: #E00000;
    margin-left: 10px;
    margin-bottom: 0px;
}

#modal.faqs-discounts p{
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #717171;
    margin-bottom: 15px;

}

.detail-faq-modal{
    margin-bottom: 20px;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.modal-container .view-more-spend {
    justify-content: flex-start;
}

.title-faq {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.26);
    cursor: pointer;
}

.title-faq h6 {
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    line-height: 46px;
    color: #141414;
}

.faqs-discounts .view-more-spend {
    justify-content: center;
}

.title-faq svg path:first-child{
    transition: all .3s;
}

.title-faq.active svg path:first-child{
    opacity: 0;
}

.detail-faq {
    display: none;
}

.detail-faq.active {
    display: block;
}

/* Pantalla de descuentos de universidades */

/* Uso la .card-benefit pero le sumo la clase detail-user-discount para poder tener titulo con svg */

#discounts-university {
    margin-top: 89px;
    padding-top: 50px;
    padding-bottom: 200px;
    min-height: 650px;
}

.overview-discounts-university {
    width: 100%;
    height: 100%;
}

.overview-discounts-university .wrapper {
    display: flex;
    justify-content: space-between;
}

.back-to-overview {
    width: 20%;
    padding-top: 15px;
}

.options-university {
    width: 80%;
}

.grid-university {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 40px;
}

.title-detail-user-discount {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}


.subtitle-detail-user-discount p {
    color: rgba(20, 20, 20, 0.48);
    font-size: 16px;
    font-weight: 500;
    margin-top: 6px !important;
    margin-bottom: 0px !important;
}


.card-benefit.detail-descoints-user {
    padding: 20px 30px 30px 25px;
}

.title-detail-user-discount img {
    margin-right: 8px;
}

.detail-descoints-user p {
    margin-top: 25px;
    margin-bottom: 20px;
}

.detail-descoints-user:hover .cards-more {
    border: 1px solid #E00000;
}

.tags-container {
	display: flex;
    flex-wrap: wrap;
    grid-gap: 6px;
    position: absolute;
    top: 0%;
    transform: translate(0px, -55%);
}

.tags-container.--big {
    position: relative;
    top: auto;
    transform: translate(0px, 0%);
	padding-top: 25px;
}

.tag-general {
	display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
	color: #fff;
    font-size: 13px;
    font-weight: 500;
    width: fit-content;
    line-height: 1.25;
}

.tag-general.--big {
	padding: 8px 12px;
    font-size: 15px;
}

.tags-container-padding {
	padding: 0px;
	margin: 0px 0px 6px 0px;
	border: none;
}

.tag-general.--new {
	background-color: #FF0505;
}

.tag-general.--pickup {
	background-color: #006bff;
}

/* Focus */ 




/* Responsive */


@media screen and (max-width:1260px){
    .menu-header{
        display: none;
    }

    /*
    #search-form.open, #search-form:focus-within {
        width: 320px;
    } */

    .points-search {
        position: inherit;
    }

    .nav-search {
        width: 100%;
        top: 81px;
    }

    .nav-search::before {
        left: auto;
        right: 100px;
    }

    /* 2025 */
    .hero-banner-home {
        height: 340px;
    }
}

@media screen and (max-width:1100px){
    .filter-points .filter{
        padding: 0px;
        margin: 0px;
    }

    .triangle-discounts{
        width: 50%
    }

    .options-cards-points {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    }

    .discounts-conteiner {
        grid-template-columns: repeat(3, 1fr);
    }

    .discounts-conteiner.w-33 {
        width: 100%;
    }

    .grid-discounts-flex {
        display: grid;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        grid-template-columns: repeat(3, 1fr);
    }

    /* 2025 */
    .hero-banner-home {
        height: 300px;
    }
    

}

@media screen and (max-width: 900px){

    .terms-faqs{
        margin-right: 0px;
    }
    .oval{
        top: -75px;
    }

    #hero h1{
        text-align: center;
        font-size:35px;
     }

    #hero h3 {
        font-size: 35px;
        line-height: 45px;
    }

    #hero h1:not(.red) {
    margin-top: 50px;
     }

    .hero-slide{
        flex-wrap: wrap;
        min-height: 400px;
        flex-direction: column;
        margin-top: 40px;
    }

    .img-options{
        width: 100%;
        height: 271px;
    }

    .detail-options{
        width: 100%
    }

    .detail-options h2{
        font-size: 30px
    }

    .section-title{
        font-size: 22px;
        line-height: 26px;
    }

    .section-title-logo {
        height: 48px;
        width: auto;
    }

    h2{
        font-size: 25px;
    }

    .discounts-conteiner{
        margin-top: 40px;
    }

    .discounts-slide{
        width: 100%;
        margin-top: 0px
    }

    .points-login{
        display:flex;
        flex-direction: column;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .accumulated-points__inner h2 {
        font-size: 18px;
        font-weight: 600;
    }

    .accumulated-points__inner .p_ex-h2 {
        font-size: 18px;
    }

    .accumulated-points__inner .p_ex-h2 span {
        display: none;
    }

    .accumulated-points p {
        font-size: 20px;
    }

    .enter-account{
        margin-top: 15px
    }

    .filter-points{
        display: none;
    }

    .filter-points-mobile {
        display: flex !important;
    }

    .options-filter-estranged {
        width: 55%;
        right: auto;
    }

    #points{
        overflow: visible;
    }

    .filter-points-mobile .button-filter {
        width: 150px !important;
        padding: 6px 15px !important;
    }

    .mobile{
        display: flex;
    }

    .spend-points {
    margin-top: 30px;
    margin-bottom: 25px;
    justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;

    }


    .background-points svg:first-child{
    position: absolute;
    bottom: 0;
    width: 32%;
    height: 150px;
    }

    .filter-container-home{
        width: 100%;
        display: flex;
        justify-content: center
    }

    .button-filter{
        width: 30%
    }
    .ovalright{
        bottom: 120px;
    }

    .title-discounts{
        margin-bottom: 15px;
    }

    .title-discounts h4{
        width: 75%;
        line-height: 30px;
    }

    .title-discounts p{
        width: 70%;
    }


    footer .wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    footer .footer__item {
        align-items: center;
    }

    footer .footer__item nav {
        align-items: center;
    }
    .info-contact{
        flex-direction: column;
        align-items: center;
    }

    .contact-us{
        display: flex;
        justify-content: center;
    }

    .eclipse-footer{
        display: none;
    }

    #main-menu nav{
        width: 70%
    }

    /* Cultura */

    .back-mobile{
        display: block;
    }

    .overview-filter-benefit{
        display: none;
    }

    .filter-benefit-background{
        display: none;
    }

    .overview-options-benefit-background{
        width: 100%;
    }

    .overview-options-benefit{
        width:100%;
        min-height: auto;
    }

    .oval-benefit-top{
        width: 30%;
        top:-5%;
    }

    .back-mobile{
        padding-left: 0px;
    }

    .overview-options-benefit .filter-container-home{
        margin-top: 20px;
    }

    /*
    #search-form{
        display: none;
    } */

    .modal-container{
        width: 60%
    }

    /* Descuentos y bonificaciones */

    .triangle-discounts{
        display: none
    }

    .overview-discounts-main h1{
        margin-top: 20px;
        font-size: 38px
    }

    .overview-discounts-main p{
        width: 90%;
        line-height: 22px
    }

    .button-filter-container{
        justify-content: center
    }

    .button-filter-container .button-filter{
        width: 40%
    }

    .grid-discounts{
         grid-template-columns: repeat(3, 1fr);
         grid-column-gap: 20px;
         grid-row-gap: 20px
    }

    .cards-detail{
        padding: 20px
    }

    /* Universidades */


    .overview-discounts-university .wrapper{
        display: block;
    }

    .back-to-overview{
        width: 100%
    }

    .options-university{
        width: 100%;
        margin-top: 20px
    }

    .oval-discounts-top{
        top: 25%
    }

    #discounts-university{
        padding-bottom: 60px;
        min-height: auto;
    }

    /* 2025 */
    .points-search {
        padding: 6px 10px;
        height: auto;
        font-size: 14px;
        border-radius: 15px;
    }
    
    .points-search .points-search__container span {
        display: none;
    }
    
    .points-search__icon {
        width: auto;
        height: 17px;
        margin-right: 0px;
    }

    
    .header-pointsearch {
        margin-right: 0px;
        gap: 6px;
    }

    
    .links-header {
        padding: 6px 10px;
        height: auto;
        font-size: 14px;
        border-radius: 15px;
    }

    .links-header span {
        display: none;
    }

    .links-header svg {
        width: auto;
        height: 17px;
        margin-right: 0px;
    }

    .toggle-nav p {
        display: none;
    }

    header .wrapper {
        padding: 15px 12px 15px 12px;
        width: 100%;
    }

    header .toggle-nav {
        border: none;
    }

    header .toggle-nav__inner {
        transform: translate(0px, 50%);
    }

    .header__bottom__points {
        width: 100%;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ddd;
    }

    .header__bottom__points .avatar {
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }

    .header__bottom__points__text {
        font-size: 15px;
    }

    .header__bottom__points .header__bottom__points__text p {
        font-size: 15px;
    }

    .header__bottom__points .header__bottom__points__text p span {
        display: none;
    }

    .header__bottom__points .link-points {
        font-size: 13px;
        margin-top: 4px;
    }

    .header__bottom__points .header__bottom__points__text .link-points svg {
        height: 9px;
        margin-left: 0px;
    }

    .header__bottom__links {
        width: 100%;
        justify-content: space-between;
    }

    .header__bottom__links .link-featured {
        flex-direction: row;
        padding: 0px;
    }

    .header__bottom__links .link-featured.--desktop {
        display: none;
    }

    .header__bottom__links .link-featured img {
        height: 19px;
        margin-bottom: 0px;
        margin-right: 5px;
    }

    .header__bottom__links .link-featured span {
        font-size: 13px;
    }

    .header__bottom {
        padding: 15px 12px 15px 12px;
    }

    .header__bottom__wrapper {
        width: 100%;
        flex-direction: column;
    }

    header.sticky .header__bottom__points {
        margin-bottom: 0px;
        padding-bottom: 0px;
        border-bottom: none;
    }

    header.sticky .header__bottom__links {
        display: none;
    }

    header.sticky .link-points {
        opacity: 1;
        height: auto;
        visibility: visible;
        margin-top: 4px;
    }

    /* 2025 */
    .hero-banner-home {
    height: 260px;
    }

}

@media screen and (max-width: 650px){



    .discounts-conteiner {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
    }
    
    
    .discounts-conteiner.w-33 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
    }

    .grid-discounts-flex {
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-discounts-flex .discounts-slide {
        margin-top: 0px;
        flex: none;
    }

    .oval-benefit-top{
        right: 5%
    }

    .oval-benefit-top *{
        width: 45%;

    }

    .options-cards-benefits{
        grid-template-columns: repeat(1, 1fr)
    }

    .overview-benefit-title h1{
        font-size: 35px;
        line-height: 40px
    }

    h5{
        font-size: 16px
    }

    .filter-container-home .button-filter{
        width: 70%
    }

    .options-cards-benefits .card-benefit{
        padding: 25px 15px 20px 15px
    }

    /* descuentos y bonificaciones */

    .oval-discounts-top{
        display: none
    }

    .overview-discounts-main h1{
        text-align: center;
        font-size: 35px;
        line-height: 40px;
        width: 70%;
        margin: 0 auto;
        margin-top: 10px;
        letter-spacing: 1px;
        margin-bottom: 15px

    }

    .overview-discounts-main p{
        width: 70%;
        line-height: 20px
    }

    .button-filter-container .button-filter{
        width: 70%
    }

    .grid-discounts {
    margin-top: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}


    .options-filter-estranged{
        width: 55%;
        right: auto;
    }

    /* universidades */

    .options-university{

        margin-top: 15px
    }

    .oval-discounts-top{
        display: none
    }

    #discounts-university{
        padding-bottom: 50px
    }

    .grid-university {
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 20px;
    margin-top: 20px;
    }

    .card-benefit.detail-descoints-user{
        padding: 15px 20px 20px 15px
    }

    /*GASTRONOMIA */
    .points-title{
        margin-bottom: 10px
    }

    .overview-options-benefit{
        padding: 35px
    }


    .options-cards-points {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    }

    .tags-container {
		grid-gap: 4px;
	}

	.tags-container.--big {
		padding-top: 18px;
		padding-bottom: 6px;
	}

	.tag-general {
		padding: 2px 6px;
		border-radius: 4px;
		font-size: 11px;
	}

	.tag-general.--big {
		padding: 5px 10px;
		font-size: 12px;
	}

     /* 2025 */
     .hero-banner-home {
        height: 230px;
    }

}

@media screen and (max-width: 550px){

    #home .discounts-conteiner, #home .grid-discounts-flex {
        display: flex;
        overflow: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    
    #home .discounts-slide {
        width: 100%;
        min-width: 175px;
    }

    #home .grid-discounts-flex .discounts-slide {
        flex: 0 0 calc(270px - 25px) !important;
    }

    .discounts-slide.--home .cards-title {
        font-size: 14px;
    }

    .discounts-slide.--home .icon-size-normal {
        height: 25px;
        margin-right: 10px;
    }
    
    #home .overlay-discount {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 15%;
        background: linear-gradient(270deg, rgb(255 255 255) 0%, rgba(255,255,255,0) 100%);
        height: 100%;
        pointer-events: none;
    }

    #home .overlay-discount.--color {
        background: linear-gradient(270deg, #d82e2e 0%, rgba(255, 255, 255, 0) 100%);
    }
    
    #home .discounts-conteiner .discounts-slide:last-child, #home .grid-discounts-flex .discounts-slide:last-child {
        margin-right: 40px;
    }

    .text-medium {
        font-size: 18px;
    }

    .header .wrapper {
        height: 66px;
    }

    .points-header {
        margin-right: 0px;
        padding: 4px 8px;
        height: auto;
    }

    .points-header p {
        font-size: 15px;
    }
    
    .points-header span {
        font-size: 10px;
        margin-left: 0px;
    }

    .points-header span:last-child {
        margin-left: 3px;
    }

    .points-header .usuarioPuntos {
        font-size: 17px;
    }

     /* 2025 */
     .hero-banner-home {
        height: 155px;
     }

     .footer__copyright {
        flex-direction: column;
        gap: 15px;
    }

    .nav-search {
        flex-direction: column;
        position: fixed;
        height: auto;
        top: 63px;
        padding: 18px 0px;
        border-radius: 15px;
    }
    
    .nav-search::before {
        right: 95px;
    }

    .nav-search__item:first-child, .nav-search__item:nth-child(2), .nav-search__item:nth-child(3) {
        width: 100%;
    }

    /*
    .nav-search__item:nth-child(2) {
        padding: 0px 15px 20px 15px;
    }*/

    .nav-search__item {
        height: 100%;
        border-bottom: 1px solid #bfbfbf;
        padding: 0px 15px;
        position: relative;
        border-right: none;
    }

    .nav-search__item__btn, .nav-search__item__input, .nav-search__item .select2-container {
        height: 55px;
    }

    .nav-search__item:nth-child(3) {
        padding: 0px 15px;
    }

    .nav-search__item .twitter-typeahead .tt-menu {
        margin-top: 3px;
        font-size: 15px;
        background-color: #f3f3f3;
    }

    .nav-search__item .twitter-typeahead .tt-suggestion.tt-selectable {
        padding: 5px;
    }

    .nav-search__item:last-child {
        height: auto;
        border-bottom: none;
    }

    .nav-search__item .select2-container {
        padding: 0 15px;
    }

    .nav-search__dropdown {
        top: auto;
        position: relative;
        padding: 0px 0px;
        max-height: 200px;
        margin-top: 0px;
        height: 0px;
        box-shadow: none;
        transition: opacity 0.4s, visibility 0.4s;
    }

    .nav-search__dropdown.--open {
        padding: 6px 0px 10px 0px;
        height: auto;
        margin-bottom: 12px;
    }

    .nav-search__item .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 55px;
    }

    .nav-search__item .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 55px;
        right: 18px;
    }

    .nav-search__button {
        width: 180px;
        margin-top: 15px;
    }

    .nav-search__button svg {
        width: 17px;
        height: 18px;
    }

    .nav-search__button span {
        display: inline-block;
        color: #fff;
        font-size: 18px;
        margin-left: 6px;
    }

    .go-top{
        bottom: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
    }

    .qr {
        width: auto;
    }

    .android img, .iphone img {
        width: auto;
        height: auto;
    }

    .go-top svg{
        width: 15px;
        height: 20px;
    }

    /* 2025 */
    .logo{
        transform: translate(0px, 0px);
        position: relative;
        left: 0;
        flex: 1;
        width: auto;
        height: auto;
        padding-right: 30px;
        margin-left: 6px;
    }

    .oval{
        top: 0px;
        left: -95px
    }

    .eclipse-top{
        right:5%;
        width:20%

    }

    .triangle{
        left:5%;
        bottom: -45px;
    }

    #main-menu .toggle-nav.active{
        top: 10px;
        right: 10px;
    }

   
    .category-menu-name{
        padding-right: 9.5%;
        padding-left: 5%;
    }

    header #main-menu nav .subcategory-menu-link {
        padding-right: 9.5%;
        padding-left: 5%;
    }

    header #main-menu nav .subcategory-menu-link:first-child {
        padding-top: 15px;
    }
    
    header #main-menu nav .subcategory-menu-link:last-child {
        padding-bottom: 15px;
    }

    .js-site-link{
        line-height: 20px;
        font-size: 19px;
        padding-right: 20px;
        text-align: left;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    header #main-menu nav a{
        font-size: 17px;
    }



    .subcategory-menu a{
        /* text-align: left; */
        line-height: 45px;
    }

    header #main-menu .nav-top {
        padding-right: 9.5%;
        padding-left: 5%;
        padding-top: 35px;
        padding-bottom: 30px;
    }

    header #main-menu .nav-top .avatar {
        width: 55px;
        height: 55px;
        margin-right: 15px;
    }

    header #main-menu .nav-top .avatar .avatar__button {
        width: 26px;
        height: 26px;
    }
    
    
    header #main-menu .nav-top .avatar .avatar__button img {
        width: 14px;
    }

    header #main-menu .nav-top p {
        font-size: 22px;
        margin-bottom: 4px;
    }

    header #main-menu .nav-top a {
        font-size: 17px;
    }

    /* 2025 */
    #hero{
        margin-top: 0px;
    }

    #hero h1{
        text-align: center;
        font-size: 25px;
        line-height: 28px;
     }

     #hero h3 {
        font-size: 25px;
        line-height: 28px;
    }

     #hero h1 strong {
        display: none;
     }

    #hero h1:not(.red) {
        margin-top: 40px;
     }

    .slider-conteiner {
        width: 90%;
        margin: 0 auto;
    }

    /*
    #search-form{
        display:none;
    } */

    .hero-slide{
        flex-wrap: wrap-reverse;
        margin-top: 35px;
        min-height: 360px;
        height: auto !important;
    }

    .hero-slide .detail-options .button {
        margin-top: 12px;
        font-size: 11px;
        padding: 10px 25px;
    } 

    .hero-slide .detail-options .text-options {
        padding-bottom: 0px;
        flex: 1;
    }

    .detail-options{
        padding: 20px;
    }

    .img-options{
        width: 100%;
        height: 190px;
    }

    .eclipse-top {
        top: -18%;
    }

    .detail-options{
        width: 100%;
        flex: 1;
    }

    .detail-options h2{
        font-size: 25px;
        line-height: 25px;
        margin-bottom: 10px;
    }

    .swiper-pagination-bullets{
        margin-bottom: 30px;
    }

    .section-title{
        font-size: 20px;
        margin-bottom: 20px;
    }

    h2{
        font-size: 20px;

    }

    #proposal {
        padding-bottom: 70px;
        padding-top: 45px;
    }

    #proposal h2{
        font-size: 20px;
        line-height: 25px;
        text-align: center;
        margin-bottom: 40px;
    }

    #points {
        padding-top: 45px;
        padding-bottom: 45px;
    }


    .discounts-slide{
        width: 100%;
        margin-top: 0px
    }

    .cards-detail{
        padding: 12px
    }

    #points h2 {
        margin-left: auto;
        margin-right: auto;
        line-height: 1.3;
    }

    #points h2.--subtitle {
        width: 90%;
        margin-bottom: 18px;
    }

    .points-login{
        display:flex;
        flex-direction: column;
        margin-top: 30px;
        margin-bottom: 30px;
    }


    .accumulated-points {
        padding: 20px 15px 20px 15px;
        align-items: center;
    }

    .accumulated-points p {
        font-size: 17px;
    }

    .enter-account{
        margin-top: 6px;
        margin-left: 0px;
    }

    .filter-points{
        display: none;
    }

    .mobile{
        display: flex;
    }

    .spend-points {
    margin-top: 30px;
    margin-bottom: 25px;
    justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;

    }


    .background-points svg:first-child{
    position: absolute;
    bottom: -2%;
    width: 32%;
    height: 150px;
    }

    .filter-container-home{
        width: 100%;
        display: flex;
        justify-content: center
    }

    .button-filter{
        width: 40%
    }
    .ovalright{
        bottom: 260px;
        height: 400px
    }

    .title-discounts{
        margin-bottom: 15px;

    }

    .title-discounts h4{
        width: 75%;
        font-size: 20px;
        line-height: 25px;
    }

    .title-discounts p{
        width: 90%;
        line-height: 20px
    }

    #discounts-bonuses{
        padding-bottom: 45px;
        padding-top: 45px;
    }


    footer .wrapper{
        display: flex;
        flex-direction: column;
        align-items: center
    }


    /* 2025 */
    .contact-us{
        display: flex;
        justify-content: center;
        margin-top: 0px;
        margin-bottom: 0px
    }

    .eclipse-footer{
        display: none;
    }

    #main-menu nav{
        width: 100%
    }


    .terms-faqs{
        font-size: 12px;
    }
    /* Cultura */

    .oval-benefit-top{
        top: -90px
    }

    .overview-options-benefit{
        padding: 30px 20px;
    }

    #discounts-screen {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .overview-benefit-title h1{
        font-size: 30px;
        line-height: 35px
    }

    h5{
        font-size: 15px;
        line-height: 16px
    }

    .filter-container-home .button-filter{
        width: 90%
    }

    .options-cards-benefits .card-benefit{
        padding: 20px 12px 20px 12px
    }

     .card-benefit p {
        font-size: 14px;
        line-height: 18px;
    }

    .button-filter span{
        font-size: 11px;
    }

    .button-filter svg{
        height: 10px;
    }

    .modal-container{
        width: 70%
    }

    .android .--desktop, .iphone .--desktop {
        display: none;
    }

    .download-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .download-footer span {
        margin-bottom: 15px;
        margin-right: 0px;
    }

    .download-footer span .desktop {
        display: none;
    }

    .download-footer-image {
        width: 100%;
    }

    .download-footer-image img {
        margin: 0 6px;
    }

    /* 2025 */
    .detail-options p,b {
        font-size: 13px;
        line-height: 19px;
    }


}

@media screen and (max-width: 450px){

    #modal, #modal-discounts{
        height: calc(100vh - 65px);
        top: 65px;
    }
    .modal-container{
        width: 90%;
        padding: 20px 15px;
    }

    .modal-container h5{
        font-size: 18px;
        padding-right: 50px;
        margin-bottom: 20px;
    }

    .close-modal {
    top: 15px;
    }

    #modal p{
        font-size: 10px;
        line-height: 12px
    }

    .modal-container .view-more-spend{
        margin-top: 15px
    }
    .view-more-spend .button{
        /* padding: 12px 20px; */
        font-size: 13px;
    }

    .modal-container .view-more-spend .button {width: 100%;text-align: center;padding: 12px 0;}


    .spend-points {
        display: flex;
        overflow: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        grid-column-gap: 20px;
    }

    .spend-points .spend-card {
        flex: 0 0 calc(260px - 20px) !important;
    }

    .spend-points .spend-card:last-child {
        margin-right: 40px;
    }

    #filter-categories-content {
        position: relative;
    }

    #home #filter-categories-content .overlay-discount {
        width: 20%;
        background: linear-gradient(270deg, rgb(244 244 244) 0%, rgba(255,255,255,0) 100%);
        z-index: 10;
    }

    #home #points .ovalright {
        display: none;
        /*top: 360px;
        height: 360px;
        left: 0px;
        transform: rotate(180deg);
        bottom: auto;*/
    }

    #home #points .background-points svg:first-child {
        bottom: -5%;
        right: 0px;
        transform: scaleX(-1);
    }

    /*Descuentos y bonificaciones */

    .overview-discounts-main h1{
        text-align: center;
        font-size: 25px;
        line-height: 30px;
        width: 70%;
        margin: 0 auto;
        margin-top: 10px;
        letter-spacing: 1px;
        margin-bottom: 10px

    }

    .overview-discounts-main p{
        width: 100%;
        line-height: 18px;
        line-height: 1.4;
        margin: 20px 0;
    }


    .button-filter-container{
        margin-top: 15px
    }
    .button-filter-container .button-filter{
        width: 90%;

    }

    .grid-discounts {
    margin-top: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    }

    .more-info{
        margin-left: 10px;
    }

    #modal p, #modal-discounts p{
        line-height: 1.3;
        font-size: 14px;
        margin-bottom: 40px;
    }
    .detail-faq {
        margin-bottom: 0 !important;
        padding-bottom: 20px;
    }
    .faqs-discounts .modal-container{
        padding: 15px;
        width: 90%;
    }

    .title-faq h6{
        font-size: 16px;
        line-height: 25px;
        padding: 10px 0;
        line-height: 1.5;
        padding-right: 20px;
    }

    #discounts-screen{
        padding-top: 40px;
        padding-bottom: 40px;
        min-height: auto;
    }


    /* universidades */

    #discounts-university{
        padding-top: 20px
    }

    .detail-descoints-user p {
    margin-top: 10px;
    margin-bottom: 15px;
    }

/* GASTRONOMIA */


    #benefit-screen .options-cards-points{
        grid-template-columns: repeat(1, 1fr)

    }

    #benefit-screen .spend-card{
        display: flex;
        flex-direction: row
     }

     #benefit-screen .img-spend{
        width: 50%;
        height: 100%;
        border-bottom-left-radius: 9px;
        border-top-right-radius: 0px;
     }

     #benefit-screen .spend-card-detail{
         width: 50%
     }

     #benefit-screen .points-for-spend{
         font-size: 15px
     }

     #benefit-screen .description-spend{
         font-size: 12px
     }

    #benefit-screen .go-spend{
         right: 5px;
         bottom: 5px;
         width: 30px;
         height: 30px;
     }

     .points-for-spend small {
        font-size: 13px;
    }
}

    /* CUSTOM PUNTOS FLEX */

    .discounts-slide-capacitacion_y_feedback {
        border-color: #f7bd2d;
        background-color: #f7bd2d;
    }
    
    .discounts-slide-cultura {
        border-color: #bc538b;
        background-color: #bc538b;
    }

    .discounts-slide-behealthy {
        background-color: #e24340;
        border-color: #e24340;
    }

    .discounts-slide-extras_exclusivos {
        border-color: #36afce;
        background-color: #36afce;
    }

    .discounts-slide-descuentos_y_bonificaciones {
        border-color: #49ba60;
        background-color: #49ba60;
    }

    /* Boton de mas info en categoria */

    .discounts-slide-capacitacion_y_feedback .background-more {
        border-color: #f7bd2d;
        background-color: #f7bd2d;
        color: #fff;
    }

    .discounts-slide-cultura .background-more {
        border-color: #bc538b;
        background-color: #bc538b;
        color: #fff;
    }

    .discounts-slide-behealthy .background-more {
        border-color: #e24340;
        background-color: #e24340;
        color: #fff;
    }

    .discounts-slide-extras_exclusivos .background-more {
        border-color: #36afce;
        background-color: #36afce;
        color: #fff;
    }

    .discounts-slide-descuentos_y_bonificaciones .background-more {
        border-color: #49ba60;
        background-color: #49ba60;
        color: #fff;
    }

    /* Color de iconos en categoria */

    .discounts-slide-capacitacion_y_feedback .cards-img {
        stroke: #f7bd2d !important;
    }

    .discounts-slide-behealthy .cards-img {
        stroke: #e24340 !important;
    }

    .discounts-slide-extras_exclusivos .cards-img {
        stroke: #36afce !important;
    }

    .discounts-slide-descuentos_y_bonificaciones .cards-img {
        stroke: #49ba60 !important;
    }

    /* Background de listado de beneficios */

    .bg-color-capacitacion_y_feedback {
        fill: #f7bd2d;
        stroke: #f7bd2d;
    }
    
    .bg-color-cultura {
        fill: #bc538b;
        stroke: #bc538b;
    }

    .bg-color-behealthy {
        fill: #e24340;
        stroke: #e24340;
    }

    .bg-color-extras_exclusivos {
        fill: #36afce;
        stroke: #36afce;
    }

    .bg-color-descuentos_y_bonificaciones {
        fill: #49ba60;
        stroke: #49ba60;
    }

    /* Color de titulo H1 */

    .h1-color-capacitacion_y_feedback {
        color: #f7bd2d !important;
    }
    
    .h1-color-cultura {
        color: #bc538b !important;
    }

    .h1-color-behealthy {
        color: #e24340 !important;
    }

    .h1-color-extras_exclusivos {
        color: #36afce !important;
    }

    .h1-color-descuentos_y_bonificaciones {
        color: #49ba60 !important;
    }

    /* Card de beneficio */
    
    .card-benefit-capacitacion_y_feedback {
        border: 2px solid #f7bd2d !important;
    }
    
    .card-benefit-cultura {
        border: 2px solid #bc538b !important;
    }

    .card-benefit-behealthy {
        border: 2px solid #e24340 !important;
    }

    .card-benefit-extras_exclusivos {
        border: 2px solid #36afce !important;
    }

    .card-benefit-descuentos_y_bonificaciones {
        border: 2px solid #49ba60 !important;
    }

    /* Boton de mas info en card de beneficio */

    .card-benefit-capacitacion_y_feedback:hover .cards-more, .modal-container-capacitacion_y_feedback .button  {
        border: 1px solid #f7bd2d !important;
        background-color: #f7bd2d !important;
        color: #fff !important;
    }

    .card-benefit-cultura:hover .cards-more, .modal-container-cultura .button  {
        border: 1px solid #bc538b !important;
        background-color: #bc538b !important;
        color: #fff !important;
    }
    
    .card-benefit-behealthy:hover .cards-more, .modal-container-behealthy .button  {
        border: 1px solid #e24340 !important;
        background-color: #e24340 !important;
        color: #fff !important;
    }

    .card-benefit-extras_exclusivos:hover .cards-more, .modal-container-extras_exclusivos .button  {
        border: 1px solid #36afce !important;
        background-color: #36afce !important;
        color: #fff !important;
    }

    .card-benefit-descuentos_y_bonificaciones:hover .cards-more, .modal-container-descuentos_y_bonificaciones .button  {
        border: 1px solid #49ba60 !important;
        background-color: #49ba60 !important;
        color: #fff !important;
    }

    /* Modal del beneficio */

    .modal-container-capacitacion_y_feedback { 
        border-color: #f7bd2d !important;
    }

    .modal-container-cultura { 
        border-color: #bc538b !important;
    }

    .modal-container-behealthy { 
        border-color: #e24340 !important;
    }

    .modal-container-extras_exclusivos { 
        border-color: #36afce !important;
    }

    .modal-container-descuentos_y_bonificaciones { 
        border-color: #49ba60 !important;
    }

    /* Borde de beneficio seleccionado en menu */

    .category-benefit-capacitacion_y_feedback::before {
        border: 5px solid #f7bd2d !important;
    }

    .category-benefit-cultura::before {
        border: 5px solid #bc538b !important;
    }

    .category-benefit-behealthy::before {
        border: 5px solid #e24340 !important;
    }

    .category-benefit-extras_exclusivos::before {
        border: 5px solid #36afce !important;
    }

    .category-benefit-descuentos_y_bonificaciones::before {
        border: 5px solid #49ba60 !important;
    }

    /* Tamaños de iconos */

    .icon-size-normal {
        width: 50px;
        height: 50px;
    }

    .icon-size-medium {
        width: 37px;
        height: 37px;
    }

    .icon-size-mini {
        width: 26px;
        height: 26px;
    }

    .icon-default {
        stroke: red;
        fill: none;
    }

    /*POPUP DUDAS*/
#popDudas{
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;left: 0;
	background-color: rgba(255,255,255,.8);
	z-index: 9999;
	display: none;
}
#popDudas .content{
	position: absolute;
	top:50%;left: 50%;
	transform: translate(-50%,-50%);
	background-color: #FFF;
	padding:50px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	max-width: 650px;
	width: 100%;
}
#popDudas .content h3{
	font-size: 26px;
	color: #ff0000;
	font-weight: 700;
	margin:10px 0;
}
#popDudas .content p{
	font-size: 25px;
}
#popDudas .content .head{
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	display: flex;
	margin:40px 0;
    background-color: #fff;
    box-shadow: 0 0 12px rgb(0 0 0 / 20%);
    border-radius: 999px;
    display: flex;
    overflow: hidden;
}
#popDudas .content .head a{
    display: inline-block;
    font-size: 15px;
    color: #000000;
    font-weight: 600;
    text-transform: capitalize;
    flex: 1;
    padding: 16px;
    text-align: center;
}

#popDudas .content .head a.active{ color: #ff0000; border-bottom: 3px solid #ff0000;}

#popDudas .content form{
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap
}
#popDudas .content form textarea {
	width: 100%;
	height: 92px;
	resize: none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	padding-bottom: 0;
	border:none;
	outline: none;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	border-bottom: 1px solid #141414
}
#popDudas .content form button{
    width: auto;
    margin-top: 40px;
    position: relative;
    background-color: #FF0505;
    border-radius: 100px;
    padding: 10px 35px 10px 35px;
    cursor: pointer;
    color: #FFFFFF;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    transition: .3s;
    border: 1px solid #FF0505;
    line-height: normal;
}
#popDudas .content .close{
	position: absolute;
	right: 20px;
	top:20px;
	z-index: 1;
	cursor: pointer;
}

@media screen and (max-width: 450px){ 
    #popDudas .content .head a {
        font-size: 11px;
        padding: 8px;
    }

    #popDudas .content .head {
        align-items: center;
    }

    #popDudas .content {
        padding: 15px;
    }

    #popDudas .content h3{
        font-size: 20px;
    }

    #popDudas .content p {
        font-size: 17px;
    }

    #popDudas .content {
        width: 90%;
    }
}

.img-options img {
    height: 100%;
    width: auto;
}