/* Fonts @font-face { font-family: 'NunitoRegular'; src: url('https://cat-dev.directus.app/assets/6b39158a-b92c-45e7-9c88-88f48b518bb3.ttf') format('ttf'); } @font-face { font-family: 'NunitoBold'; src: url('https://cat-dev.directus.app/assets/93338199-dc3b-4cf2-bde4-cb2fcd9a0d5b.ttf') format('ttf'); } /* /Fonts */ body { font-family:'Nunito-Regular','Arial', sans-serif; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, strong { font-family: 'Nunito-Bold','Arial', sans-serif; } h1, h2, h3, h4, h5, h6, p { margin-block-start: 0em; margin-block-end: 0em; } /* Settings */ body { margin: 0; } body * { transition: background-color 0.3s ease; box-sizing: border-box; } ul, ol { margin: 0; padding-inline-start: 0px; } .just_desk {display: flex} .just_mob {display: none} /* /Settings */ /* Variables */ :root { --Blanco: #fff; --GrisClaro: #F4F7FA; --GrisMedioClaro: #ecf5fe; --GrisMedio: #B3CAE0; --GrisOscuro: #5B809B; --GrisMasOscuro: #334654; --Petroleo: #122E43; --PetroleoOscuro: #0B1D29; --Naranjo: #FD5B00; --CelesteClaro: #F6F9FC; --Celeste: #e7f1ff; --CelesteOscuro: #E3EDF7; --AzulClaro: #18a0fb; --Azul: #126eff; --altoNav: 50px; --maxWidth: 1280px; } /* html { color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --Blanco: #122E43; --GrisClaro: #0B1D29; --GrisOscuro: #5B809B; --Petroleo: #F4F7FA; --PetroleoOscuro: #fff; } } */ /* /Variables */ /* Solo para dekstop */ @media (min-width: 930px) { .no_scroll { overflow-y:scroll !important; } } /* Solo para desktop */ .no_scroll { overflow-y: hidden !important; } .si_scroll { overflow-y: scroll; } body { padding-top: 156px; background-color: var(--Blanco); color: var(--Petroleo); } .dark_mode body { background-color: var(--PetroleoOscuro); color: var(--Blanco); } section { max-width: var(--maxWidth); margin: auto; padding: 20px 20px 60px 20px; } .ctas { display: flex; gap: 20px; } .cta_primario, .cta_secundario { font-family: 'Nunito-Bold','Arial', sans-serif; transition: all 400ms; } .cta_primario { pointer-events: all; width: fit-content; color: #fff !important; text-align: center; font-size: 1.125rem; border-radius: 48px; border: 1px solid #EC4A04; background: #FD5B00; text-decoration: none; padding: 13px 40px; display: block; margin-top: 20px; position: relative; transition: all 400ms; } .cta_primario:hover { background: #d04b00; } .cta_secundario { pointer-events: all; width: fit-content; color: #122E43; text-align: center; font-size: 18px; border-radius: 8px; border: 1px solid #B3CAE0; background: linear-gradient(180deg, #F6F9FC 0%, #E3EDF7 100%); box-shadow: 0px -2px 0px 0px #FFF inset; text-decoration: none; padding: 16px 45px 16px 26px; display: block; margin-top: 20px; position: relative; } .cta_secundario:hover { border: 1px solid #B3CAE0; background: linear-gradient(0deg, #B3CAE0 0%, #D0E1F1 100%); box-shadow: 0px -2px 0px 0px #E3EDF7 inset; } @media (max-width: 930px) { .just_desk {display: none} .just_mob {display: flex} body { padding-top: 75px; } .cta_primario { font-size: 16px; padding: 10px 40px; } .cta_secundario { font-size: 16px; width: 100%; padding: 10px 40px 10px 16px; } .ctas { flex-direction: column; gap: 0px; } }