:root {
    --grisComafi: #414141;
    --verdeComafi: #42A905;
    --grisNeutral: #F6F5F5;
    --grisOscuro: #777777;
}

/*PUBLILAND FRAMEWORK 2023 */
* {margin: 0; padding: 0; border: none; outline: 0; font-size: 100%; vertical-align: baseline; box-sizing: border-box; text-decoration: none;}
html {box-sizing: border-box; height: -webkit-fill-available; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {font: 62.5% "Ubuntu", Arial, Helvetica, serif; color: var(--grisComafi); background: #fff; line-height: 1; overflow-x: hidden; font-weight: 400;}
h1, h2, h3, h4, h5, h6 {font-weight: 400; font-size: 100%; display: block}
table {border-collapse: collapse; border-spacing: 0;}
th {text-align: left;}
td, td {empty-cells: show}
input, select, textarea, button { font: 1em "Ubuntu", Arial, Helvetica, serif; color: var(--grisComafi); background: #FFF; border: 1px solid #ccc;}
input:focus, textarea:focus, button:focus { outline: none;}
input, select, button { vertical-align: middle}
input[type="radio"], input[type="checkbox"] {border: none; height: auto !important; width: auto !important; background: none;}
input[type="submit"], input[type="reset"], input[type="button"], button {cursor: pointer; -webkit-appearance:none;}
textarea {overflow:auto; -webkit-appearance:none; resize: none}
input::-moz-focus-inner, button::-moz-focus-inner {border: 0; padding: 0;}
::-webkit-input-placeholder {color: var(--grisComafi);}
:-moz-placeholder {color: var(--grisComafi); opacity: 1}
::-moz-placeholder {color: var(--grisComafi); opacity: 1}  
:-ms-input-placeholder { color: var(--grisComafi);}
ul, ol, li {list-style: none;}
img { vertical-align: top; max-width: 100%; height: auto}
a {text-decoration: none; cursor:pointer; background: transparent;}
a:active, a:hover { outline: 0;}
strong { font-weight: 700;}
em { font-style: italic;}
/*FIN FRAMEWORK*/

/*GLOBAL*/
.container {width: 100%; max-width: 1258px; margin: 0 auto; padding: 0 15px;}

/*HEADER*/
.header {display: flex; align-items: center; justify-content: center; height: 120px;}
@media screen and (max-width: 1100px) {
    .header {height: 88px;}
    .header__logo-img {width: 230px; height: auto;}
}

/*HERO*/
.hero {position: relative; min-height: 407px; color: #fff; margin-bottom: 50px;}
.hero__image {background: var(--grisOscuro); position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; border-radius: 0 0 20px 20px; overflow: hidden;}
.hero__image img {height: 100%; width: 100%; object-fit: cover; border-radius: 0 0 20px 20px;}
.hero__image img.mobile {display: none;}
.hero__data {max-width: 756px; padding-top: 30px;}
.hero__brand {margin-bottom: 20px;}
.hero__text {font-size: 29px; margin-bottom: 5px;}
.hero__title {font-size: 60px; line-height: 1.2;}
@media screen and (max-width: 1100px) {
    .hero__image img {object-position: 60%;}
}
@media screen and (max-width: 960px) {
    .hero__text {font-size: 22px;}
    .hero__title {font-size: 43px;}
    .hero__data {max-width: 560px;}
    .hero__image img {object-position: 75%;}
}
@media screen and (max-width: 767px) {
    .hero {min-height: 410px; margin-bottom: 30px;}
    .hero__image:before {content: ""; background: linear-gradient(180deg, #030303 0%, rgba(3, 3, 3, 0.00) 50.14%); position: absolute; left: 0; top: 0; height: 100%; z-index: 1; width: 100%;}
    .hero__image img.desktop {display: none;}
    .hero__image img.mobile {display: block; object-position: center;}
    .hero__data {max-width: 100%; padding-top: 20px; text-align: center;}
    .hero__brand {margin-bottom: 14px;}
    .hero__brand img {width: 170px; height: auto;}
    .hero__text {font-size: 16px;}
    .hero__title {font-size: 27px;}
}
@media screen and (max-width: 360px) {
    .hero {min-height: 470px;}
}

/*GANA*/
.gana {margin-bottom: 40px;}
.gana__container {margin: 0 auto; max-width: 812px;}
.gana__title {text-align: center; font-size: 29px; line-height: 1.3; margin-bottom: 34px;}
.gana__list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px;}
.gana__list li {display: flex; align-items: center; padding: 31px 25px; gap: 20px; color: #fff; border-radius: 20px; background: linear-gradient(180deg, #030303 0%, #555 100%); box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.20);}
.gana__list li:nth-child(1) {border-bottom-right-radius: 0;}
.gana__list li:nth-child(2) {border-bottom-left-radius: 0;}
.gana__list li:nth-child(3) {border-top-right-radius: 0;}
.gana__list li:nth-child(4) {border-top-left-radius: 0;}
.gana__list-title {font-weight: 500; font-size: 22px; margin-bottom: 4px;}
.gana__list-text {font-size: 18px; line-height: 1.3;}
.gana__subtitle {font-weight: 700; font-size: 22px; line-height: 1.3; margin-bottom: 25px; text-align: center;}
.gana__text {font-size: 22px; line-height: 1.4; text-align: center;}
@media screen and (max-width: 767px) {
    .gana {margin-bottom: 30px;}
    .gana__title {font-size: 25px; margin-bottom: 20px;}
    .gana__list {grid-template-columns: 1fr; margin-bottom: 40px;}
    .gana__list li {padding: 20px 25px;}
    .gana__list-title {font-size: 20px;}
    .gana__list-text {font-size: 16px;}
    .gana__subtitle {margin-bottom: 29px; font-size: 18px;}
    .gana__text {font-size: 20px;}
}

/*SUMA*/
.suma {margin-bottom: 18px; padding-left: 15px; padding-right: 15px;}
.suma__box {width: 100%; max-width: 1308px; border: 1px solid var(--verdeComafi); border-radius: 20px; margin: 0 auto; padding: 30px 40px 43px 40px;}
.suma__title {font-size: 29px; line-height: 1.3; text-align: center; margin-bottom: 20px;}
.suma__list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.suma__list li {background: var(--grisNeutral); border-radius: 20px; overflow: hidden; padding-bottom: 20px; margin-bottom: 41px;}
.suma__list-title {background: var(--verdeComafi); color: #fff; font-weight: 700; font-size: 22px; text-align: center; border-radius: 20px; padding: 25px; margin-bottom: 20px;}
.suma__list-text {text-align: center; font-size: 20px; line-height: 1.3; padding: 0 20px;}
.suma__text {font-size: 22px; text-align: center; line-height: 1.4;}
@media screen and (max-width: 1100px) {
    .suma__box {padding: 30px 0 43px 0;}
}
@media screen and (max-width: 767px) {
    .suma__box {padding: 30px 0 28px 0;}
    .suma__title {font-size: 25px;}
    .suma__list {grid-template-columns: 1fr;}
    .suma__list li {margin-bottom: 0;}
    .suma__list-title {padding: 20px 14px; font-size: 20px;}
    .suma__list-text {padding: 0 14px; font-size: 18px;}
    .suma__text {font-size: 20px;}
}

/*CARDS*/
.card { background: var(--grisComafi); box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.15); padding: 50px 0 30px 0; margin-bottom: 8px;}
.card__list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 41px;}
.card__list li {border-radius: 20px; background: #fff; padding: 42px 53px 40px 53px; text-align: center;}
.card__icon {margin-bottom: 5px;}
.card__title {font-size: 31px; line-height: 1.3; text-align: center; color: var(--verdeComafi); margin: 0 auto 29px auto;}
.card__list li:first-child .card__title {max-width: 440px;}
.card .btn {display: inline-flex; width: 187px; justify-content: center; align-items: center; height: 36px; border-radius: 20px; color: #fff; background: var(--grisComafi); font-weight: 500; font-size: 16px;}
.card__leyend {text-align: center; color: #fff; font-size: 20px; line-height: 1.5; opacity: 0.7;}
@media screen and (max-width: 960px) {
    .card__list li {padding: 42px 20px 40px 20px;}
}
@media screen and (max-width: 767px) {
    .card {padding-top: 54px; padding-bottom: 44px;}
    .card__list {grid-template-columns: 1fr; gap: 26px; margin-bottom: 36px;}
    .card__list li {padding: 22px 57px 37px 57px;}
    .card__icon {margin-bottom: 10px;}
    .card__icon img {width: 52px; height: auto;}
    .card__title {font-size: 25px; margin-bottom: 56px;}
    .card__leyend {}
}

/*PROMOS*/
.promo {background: rgba(237, 237, 237, 0.50); box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.20); padding-top: 44px; padding-bottom: 26px;}
.promo__title {font-weight: 700; font-size: 29px; line-height: 1.4; text-align: center; margin: 0 auto 20px auto; max-width: 600px;}
.promo__container {position: relative;}
.promo__slider {overflow: hidden; width: 100%;}
.promo__card {width: 292px; min-height: 273px; border-radius: 20px; border: 1px solid var(--verdeComafi); padding: 40px 15px; text-align: center; background: #fff;}
.promo__card-img {margin-bottom: 20px;}
.promo__card-img img {border-radius: 46px; border: 1px solid var(--verdeComafi);}
.promo__card-title {margin-bottom: 4px; font-size: 63px; font-weight: 700;}
.promo__card-title small {font-size: 32px;}
.promo__card-text {font-size: 20px; line-height: 1.4;}
.promo__button-prev {width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; top: 50%; left: -68px; position: absolute; z-index: 10; transform: translateY(-50%); cursor: pointer}
.promo__button-prev:before {content: ""; display: block; background: url("../images/slider-arrow.svg") no-repeat; width: 13px; height: 19px; transform: rotate(180deg);}
.promo__button-next {width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; top: 50%; right: -68px; position: absolute; z-index: 10; transform: translateY(-50%); cursor: pointer}
.promo__button-next:before {content: ""; display: block; background: url("../images/slider-arrow.svg") no-repeat; width: 13px; height: 19px;}
.promo__pagination {padding-top: 14px; text-align: center; display: none;}
.swiper-pagination-bullet {width: 10px; height: 10px; background: var(--verdeComafi); opacity: 0.3; margin: 0 5px !important;}
.swiper-pagination-bullet-active {opacity: 1;}
@media screen and (max-width: 1360px) {
    .promo__container {padding-left: 33px; padding-right: 33px;}
    .promo__button-prev {left: -15px;}
    .promo__button-next {right: -15px;}
}
@media screen and (max-width: 1100px) {
    .promo__container {padding-left: 0; padding-right: 0;}
    .promo__pagination {display: block;}
    .promo__arrows {display: none;}
}
@media screen and (max-width: 767px) {
    .promo {background: rgba(237, 237, 237, 0.50); box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.15); padding-top: 40px; padding-bottom: 35px;}
    .promo__title {font-size: 25px; line-height: 1.3;}
    .promo__card {width: 234px; padding: 20px 10px; min-height: 187px;}
    .promo__card-img {margin-bottom: 5px;}
    .promo__card-img img {width: 132px; height: auto;}
    .promo__card-title {font-size: 42px; line-height: 1.4;}
    .promo__card-title small {font-size: 31px;}
    .promo__card-text {font-size: 17px; line-height: 1.3;}
}

/*LEGAGES*/
.linklegal a { color: #42A905 !important; text-decoration: underline !important;}
.legales {padding-top: 60px; padding-bottom: 118px;}
.legales__content {color: var(--grisOscuro);}
.legales__content p {font-size: 13px; line-height: 1.46;}
.legalest__title {display: none;}
@media screen and (max-width: 767px) {
    .legales {padding-top: 60px; padding-bottom: 60px;}
    .legalest__title {display: flex; align-items: center; justify-content: space-between; font-size: 16px; line-height: 1.3; padding-bottom: 20px; border-bottom: 1px solid var(--grisOscuro); margin-bottom: 20px; cursor: pointer;}
    .legalest__title:after {content: ""; display: block; width: 24px; height: 24px; background: url("../images/open-legal.svg") no-repeat; transition: all .3s ease;}
    .legalest__title.open:after {transform: rotate(180deg)}
    .legales__content {display: none;}
}

/*CONTAS*/
.main-cta {text-align: center; border-top: 1px solid #DADADA; border-bottom: 1px solid #DADADA; padding-top: 37px; padding-bottom: 39px;}
.main-cta__btn {display: inline-flex; justify-content: center; align-items: center; width: 331px; height: 62px; background: var(--verdeComafi); border-radius: 20px 30px 30px 0; color: #fff; font-size: 32px; line-height: 1.3; margin: 0 auto;}
@media screen and (max-width: 767px) {
    .main-cta {padding: 32px;}
    .main-cta__btn {width: 246px; height: 49px; font-size: 22px;}
}

/*FOOTER*/
.footer {padding-top: 43px; padding-bottom: 77px;}
.footer__text {color: var(--grisOscuro); font-size: 13px; line-height: 1.46; margin-bottom: 20px;}
.footer__copy {color: var(--grisOscuro); font-size: 13px; line-height: 1.46; }
.footer__copy a {color: var(--grisOscuro); text-decoration: underline;}
@media screen and (max-width: 767px) {
    .footer {padding-top: 40px; padding-bottom: 40px;}
    .footer__text {margin-bottom: 40px;}
}