:root {
    --grisComafi: #414141;
    --grisComafi2: #505050;
    --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: 1246px; margin: 0 auto; padding: 0 15px;}
.desktop {display: block;}
.tablet {display: none;}
.mobile {display: none;}
@media screen and (max-width: 960px) {
    .desktop {display: none;}
    .tablet {display: block;}    
}
@media screen and (max-width: 767px) {
    .desktop {display: none;}
    .tablet {display: none;}
    .mobile {display: block;}
}

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

/*HERO*/
.hero {position: relative;}
.hero__image { position: absolute; left: 0; top: 0; height: 358px; width: 100%; overflow: hidden; z-index: -1;}
.hero__image img {width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0 0 24px 24px;}
.hero__content {padding-top: 30px; color: #fff; height: 358px;}
.hero__logo {margin-bottom: 30px;}
.hero__title {font-size: 34px; font-weight: 400; line-height: 1.17; margin-bottom: 15px; max-width: 554px;}
.hero__text {font-size: 22px; line-height: 1.5;}
@media screen and (max-width: 960px) {
    .hero__image { position: static; height: auto; z-index: 1;}
    .hero__image img {height: 248px;}
    .hero__content {padding-top: 15px; padding-bottom: 20px; color: var(--grisComafi); height: auto; text-align: center;}
    .hero__logo {display: none;}
    .hero__title {font-size: 26px; line-height: 1.19; margin: 0 auto 10px auto; max-width: 704px; font-weight: 700;}
    .hero__text {font-size: 17px; line-height: 1.23;}
}
@media screen and (max-width: 767px) {
    .hero__content {padding-bottom: 15px;}
    .hero__image img {height: 255px;}
    .hero__title {font-size: 19px; line-height: 1.21; max-width: 320px;}
    .hero__text {font-size: 14px; line-height: 1.5;}
}

/*VIAJA CON COMAFI*/
.viaja {padding: 43px 0 47px 0; background: rgba(237, 237, 237, 0.50); overflow: hidden;}
.viaja__title {text-align: center; font-size: 41px; font-weight: 700; line-height: 1.3; margin: 0 auto 46px auto; max-width: 840px;}
.viaja__sorteo {display: flex; justify-content: center; width: 100%; max-width: 904px; margin: 0 auto 41px auto;}
.viaja__imagen {margin-right: -50px;}
.viaja__content {padding-top: 16px;}
.viaja__content-title {font-size: 37px; font-weight: 700; line-height: 1.16; color: var(--verdeComafi); margin-bottom: 15px;}
.viaja__content-text {font-size: 20px; line-height: 1.36;}
@media screen and (max-width: 960px) {
    .viaja {padding: 27px 0 36px 0;}
    .viaja__title {font-size: 21px; font-weight: 500; line-height: 1.4; margin: 0 auto 31px auto;}
    .viaja__sorteo {max-width: 595px; margin: 0 auto 31px auto;}
    .viaja__imagen {margin-right: -22px;}
    .viaja__imagen img {width: 238px; height: auto;}
    .viaja__content {padding-top: 0;}
    .viaja__content-title {font-size: 30px;}
    .viaja__content-text {font-size: 16px; line-height: 1.16;}
}
@media screen and (max-width: 767px) {
    .viaja {padding: 30px 0;}
    .viaja__title {font-size: 20px; line-height: 1.31; margin: 0 auto 16px auto;}
    .viaja__sorteo {flex-direction: column; text-align: center;}
    .viaja__imagen {margin-right: 0; margin-bottom: 22px;}
    .viaja__imagen img {width: 223px;}
    .viaja__content-title {font-size: 25px; line-height: 1.05;}
    .viaja__content-text {font-size: 14px; line-height: 1.25;}
}
.viaja__premios-title {text-align: center; font-size: 38px; font-weight: 700; line-height: 1.6; margin-bottom: 15px;}
.viaja__premios-grid {display: flex; justify-content: center; gap: 20px;}
.viaja__premios-area {width: 100%; max-width: 430px; position: relative;}
.viaja__premios-card {border-radius: 12px; background: #fff; box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.20); padding: 26px 0 60px 28px; display: flex; position: relative;}
.viaja__premios-card-content {width: 100%; max-width: 258px;}
.viaja__premios-card-toptext {color: var(--grisComafi2); font-size: 18px; line-height: 1.35; margin-bottom: 6px;}
.viaja__premios-card-title {font-size: 41px; font-weight: 500; line-height: 1.35; color: var(--grisComafi2); margin-bottom: 7px;}
.card-02 .viaja__premios-card-title {font-size: 34px; line-height: 1;}
.viaja__premios-card-text {color: var(--grisComafi2); font-size: 12px; line-height: 1.33;}
.viaja__premios-card-image {position: absolute; top: 26px; right: -10px;}
.viaja__content-text-leyend {position: absolute; left: 28px; bottom: 30px; width: 100%; padding-right: 35px; font-family: "Open Sans"; font-size: 9px; line-height: 1.47; max-width: 288px;}
.card-02 .viaja__content-text-leyend {bottom: 20px; max-width: 100%;}
@media screen and (max-width: 960px) {
    .viaja__premios-title {font-size: 24px; font-weight: 500; margin-bottom: 20px;}
    .viaja__premios-grid {gap: 16px}
    .viaja__premios-area {max-width: 344px;}
    .viaja__premios-card {padding: 18px 0 20px 22px;}
    .viaja__premios-card-content {max-width: 227px;}
    .viaja__premios-card-toptext {font-size: 15px; line-height: 1.35; margin-bottom: 0;}
    .viaja__premios-card-title {font-size: 43px; margin-bottom: 10px;}
    .card-02 .viaja__premios-card-title {font-size: 30px; margin-top: 11px; margin-bottom: 10px;}
    .viaja__premios-card-text {font-size: 10px; line-height: 1.4;}
    .viaja__premios-card-image {position: absolute; top: 18px; right: -30px;}
    .viaja__premios-card-image img {width: 156px; height: auto;}
    .card-02 .viaja__premios-card-image img {width: 181px; height: auto;}
    .viaja__content-text-leyend {position: static; width: 100%; padding-right: 0; font-size: 8px; line-height: 1.47; max-width: 100%; padding-top: 10px;}
}
@media screen and (max-width: 767px) {
    .viaja__premios-title {font-size: 20px; margin-bottom: 16px;}
    .viaja__premios-grid {gap: 32px; flex-direction: column; align-items: center;}
    .viaja__premios-area {max-width: 315px;}
    .viaja__premios-card {padding: 22px 0 22px 16px;}
    .viaja__premios-card-content {max-width: 214px;}
    .viaja__premios-card-title {font-size: 36px; margin-bottom: 15px;}
    .card-02 .viaja__premios-card-title {font-size: 28px;}
    .viaja__premios-card-text {line-height: 1.3;}
    .viaja__premios-card-image {right: -20px;}
    .card-02 .viaja__premios-card-image {right: -40px;}
    .viaja__premios-card-image img {width: 137px;}
    .viaja__content-text-leyend {text-align: center; padding-top: 6px;}
}

/*CORTESIA DE VISA*/
.cortesia {padding-top: 53px; padding-bottom: 80px;}
.cortesia__title {text-align: center; max-width: 994px; font-size: 34px; font-weight: 500; line-height: 1.4; margin:0 auto 43px auto;}
.cortesia__cards {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; margin-bottom: 54px;}
.cortesia__cards li {border-radius: 17px; background: #E2E2E2; box-shadow: 4px 4px 12.7px 0 rgba(0, 0, 0, 0.25);}
.cortesia__head {display: flex; justify-content: center; align-items: center; height: 74px; background: var(--verdeComafi); border-radius: 17px;}
.cortesia__head-title {color: #fff; font-size: 28px; font-weight: 700; line-height: 1.16;}
.cortesia__content {height: 87px; display: flex; justify-content: center; align-items: center;}
.cortesia__text {text-align: center; font-size: 20px; font-family: "Open Sans"; font-weight: 600; line-height: 1.15; max-width: 280px;}
.cortesia__big {border-radius: 17px; background: #E2E2E2; box-shadow: 4px 4px 12.6px 0 rgba(0, 0, 0, 0.25);}
.cortesia__big-head {height: 74px; display: flex; justify-content: center; align-items: center; background: #323232; border-radius: 17px;}
.cortesia__big-title {color: #fff; font-size: 36px; line-height: 1.16;}
.cortesia__big-content {height: 68px; display: flex; justify-content: center; align-items: center;}
.cortesia__big-text {color: #505050; text-align: center; font-size: 23px; font-weight: 500; line-height: 1;}
@media screen and (max-width: 960px) {
    .cortesia {padding-top: 20px; padding-bottom: 30px;}
    .cortesia__title {font-size: 22px; margin: 0 auto 33px auto;}
    .cortesia__cards {column-gap: 14px; margin-bottom: 24px;}
    .cortesia__cards li {border-radius: 9px; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);}
    .cortesia__head {height: 42px; border-radius: 9px;}
    .cortesia__head-title {font-size: 20px;}
    .cortesia__content {height: 50px;}
    .cortesia__text {font-size: 13px;}
    .cortesia__big {border-radius: 10px; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);}
    .cortesia__big-head {height: 42px; border-radius: 10px;}
    .cortesia__big-title {font-size: 22px;}
    .cortesia__big-content {height: 42px;}
    .cortesia__big-text {font-size: 14px; line-height: 1.64;}
}
@media screen and (max-width: 767px) {
    .cortesia {padding-top: 23px; padding-bottom: 32px;}
    .cortesia__title {font-size: 19px; margin: 0 auto 35px auto;}
    .cortesia__cards {grid-template-columns: 1fr; row-gap: 23px; margin-bottom: 23px;}
    .cortesia__cards li {border-radius: 17px; box-shadow: 4px 4px 12.7px 0 rgba(0, 0, 0, 0.25);}
    .cortesia__head {height: 58px; border-radius: 17px;}
    .cortesia__head-title {font-size: 22px;}
    .cortesia__content {height: 68px;}
    .cortesia__text {font-size: 16px; max-width: 200px;}
    .cortesia__big {border-radius: 17px; box-shadow: 4px 4px 12.6px 0 rgba(0, 0, 0, 0.25);}
    .cortesia__big-head {height: 58px; border-radius: 17px;}
    .cortesia__big-title {font-size: 22px;}
    .cortesia__big-content {height: 68px;}
    .cortesia__big-text {font-size: 16px; line-height: 1.18;}
}

/*2 CARDS*/
.card-boxes {background: rgba(237, 237, 237, 0.50); padding-top: 54px; padding-bottom: 68px;}
.card-boxes__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin: 0 auto;}
.card-box {width: 100%; max-width: 598px; border-radius: 17px; background: #fff; box-shadow: 4px 4px 12.7px 0 rgba(0, 0, 0, 0.25); padding: 54px 68px 30px 68px; text-align: center;}
.card-box__image {margin-bottom: 24px;}
.card-box__title {color: var(--verdeComafi); font-size: 33px; line-height: 1.19; margin-bottom: 23px;}
.card-box__btn {display: inline-flex; width: 100%; max-width: 228px; height: 32px; justify-content: center; align-items: center; border-radius: 37px; background: var(--grisComafi); color: #fff; font-size: 17px; font-weight: 500; line-height: 1.16;}
@media screen and (max-width: 960px) {
    .card-boxes {padding-top: 31px; padding-bottom: 50px;}
    .card-boxes__grid {gap: 14px;}
    .card-box {padding: 16px 38px 20px 38px;}
    .card-box__image {margin-bottom: 10px;}
    .card-box__image img {width: 48px; height: auto;}
    .card-box__title {font-size: 17px; line-height: 1.16; margin-bottom: 10px;}
    .card-box__btn {max-width: 130px; height: 19px; font-size: 10px;}
}
@media screen and (max-width: 767px) {
    .card-boxes {padding-top: 43px; padding-bottom: 70px;}
    .card-boxes__grid {grid-template-columns: 1fr; gap: 15px;}
    .card-box {padding: 22px 14px; display: flex; gap: 10px;}
    .card-box__image {margin-bottom: 0; flex-shrink: 0;}
    .card-box__image img {width: 52px; height: auto;}
    .card-box__content {text-align: left;}
    .card-box__title {font-size: 16px; line-height: 1.19; margin-bottom: 15px;}
    .card-box__btn {max-width: 162px; height: 22px; font-size: 12px;}
}

/*LEGALES*/
.legales {padding: 46px 0;}
.legales__text {color: var(--grisOscuro); text-align: justify; font-size: 13px; line-height: 1.46;}
.legales__text a {color: var(--grisOscuro);}
.legales__content {display: none; padding-top: 15px;}
.legales__content p {color: var(--grisOscuro); text-align: justify; font-size: 13px; line-height: 1.46;}
.legales__content a {color: var(--grisOscuro);}

/*CONTAS CTA*/
.contas {padding: 37px 0; text-align: center; border-top: 1px solid #DADADA;}
.otros-sitios__btn {display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 0 28px; border-radius: 20px 30px 30px 0px; background: #42A905; font-size: 32px; color: #fff; line-height: 1.3;}
.otros-sitios__btn:hover {color: #fff; background: #007300;}

/*FOOTER*/
.footer {border-top: 1px solid #DADADA; padding: 44px 0;}
.footer__text {color: #777; font-size: 13px; line-height: 1.46; margin-bottom: 15px;}
.copyright__text {color: #777; font-size: 13px; line-height: 1.46;}
.agency { margin: 0; font-weight: 400; font-size: 12px; line-height: 1.41; padding: 0;}
.agency a { color: #777; text-decoration: underline;}
@media screen and (max-width: 767px) {
    .footer__text {font-size: 12px;}
    .copyright__text {font-size: 12px;}
}