.above { padding-top: 37px; background: url(../img/headermobile.png); background-size: cover; height: 860px; margin-bottom: -55px; position: relative; z-index: 1; background-position-y: bottom; } @media screen and (max-width: 650px) { .above { height: 750px; } } .above__info { padding-top: 48px; } .above__info p { text-align: center; } .tc__cta, .close__terms, .frm__cta { border: none; background-color: transparent; &:hover { cursor: pointer; } } .beneficios__info h4 { font-size: 1.2rem; font-weight: 700; height: 4rem; } .beneficios { background: linear-gradient(176deg, #ffffff 0%, #f5f5f5 100%); padding: 60px 0px 60px 0px; } .beneficios__header { max-width: 711px; margin: auto auto auto; } .beneficios__list { display: flex; flex-wrap: wrap; justify-content: center; } .beneficios__front, .beneficios__back { width: 294px; height: 442px; margin: 0px 13px 20px 13px; box-shadow: 1px 3px 4px #434343; border: 1px solid #c1c1c1; border-radius: 8px; } .beneficios__front { background-color: #ffffff; display: flex; flex-direction: column; justify-content: space-between; } .beneficios__item { padding-top: 50px; margin-bottom: -50px; } .beneficios__cover { border-radius: 8px 8px 0px 0px; } .beneficios__cta { display: flex; justify-content: center; } .beneficios__cta img { width: 46px; margin: 0px 5px 0px 5px; } .beneficios__info { height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 5px 37px; gap: 0; align-items: center; } .beneficios__back { display: none; } .beneficios__back.active { display: flex; } .beneficios__back { background: radial-gradient( closest-side at 50% 50%, var(--green-color) 10%, var(--green-bold-color) 80% ); align-items: center; } .beneficios__back__info { height: 100%; padding: 0; display: flex; flex-direction: column; justify-content: space-between; } .beneficios__back__info p { margin-top: 2rem; text-align: center; font-size: 1.6rem; line-height: 1.3; } .beneficios__back__info > div:nth-child(3) { margin-top: 6rem; } .beneficios__back__cta { display: flex; justify-content: center; align-items: center; padding: 6px 8px; color: var(--green-bold-color); font-size: 1.4rem; font-weight: 800; background-color: #ffffff; border-radius: 34px; width: 236px; height: 31px; margin: auto auto 12px auto; } .beneficios__back__info .beneficios__back__cta img { width: 11%; } .beneficios__back__cta img { font-size: 2rem; margin-right: 8px; } .beneficios__front a:first-child img { transform: scaleX(-1); } .beneficios__back a:nth-child(2) img { transform: scaleX(-1); } .beneficios__back__info img { width: 22px; } .beneficios__back__cta .img__videocall { width: 26px; } .ul-square { list-style-type: square; line-height: 120%; margin-left: 1rem; } ul li { margin-bottom: 1rem; } .logos-fixed { position: fixed; bottom: 40%; left: auto; top: auto; right: 0; z-index: 99999; display: grid; transition: opacity 0.3s ease-in-out; } .logos-fixed .logos { margin: 0.9rem; -webkit-transition: all 0.9s ease; /* Safari y Chrome */ -moz-transition: all 0.9s ease; /* Firefox */ -o-transition: all 0.9s ease; /* IE 9 */ -ms-transition: all 0.9s ease; /* Opera */ } .logos-fixed .logos:hover { margin: 0.9rem; -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } .logos-fixed a:nth-child(1) img { transform: scaleX(-1); } .logos-fixed .logos .logos-img { width: 2rem; } #requisitos-para-tu-cita { padding-top: 4rem; } .seccion { padding-top: 2rem; padding-bottom: 2rem; } .seccion img { width: 75%; object-fit: cover; } .seccion h2 { margin-top: 12px; } .seccion p { font-size: 18px; } ol li { padding: 1rem; } #protocolo-medico { background-color: #f5f5f5; padding-top: 4rem; } .experiencia { background-color: #f5f5f5; padding: 60px 0; } .experiencia__cover { width: 300px; height: 324px; object-fit: cover; object-position: 17%; margin: 0px auto 50px auto; display: block; } .msg__error { display: none; color: var(--red-color); font-size: 14px; text-align: left; margin: 8px 0px; } .experiencia__ty, .experiencia__error { display: none; } .experiencia__show__error { width: 20px; height: 20px; border-radius: 20px; background-color: var(--red-color); margin-left: 10px; display: inline-block; } .experiencia__ctas { display: flex; justify-content: center; align-items: center; margin-top: 35px; } .frm__lbl { display: block; font-size: 18px; font-weight: 600; color: var(--text-color-light); text-align: left; margin-bottom: 6px; } .input { border: 1px solid #6d6d6d; border-radius: 10px; width: -moz-available; width: -webkit-fill-available; width: fill-available; padding: 8px 12px; color: var(--text-color-light); margin: auto; display: block; margin-bottom: 8px; font-size: 18px; line-height: 1.3; outline: 0; background-color: #f3f3f3; font-family: "Avenir"; } textarea.input { font-family: "Avenir"; } .input.error { border: 1px solid var(--red-color); } .frm__cta { width: 130px; height: 43px; background-color: var(--green-color); color: var(--text-color-negative); font-size: 14px; display: flex; justify-content: center; align-items: center; border-radius: 34px; } .faq__item { margin-bottom: 10px; } .faq__less { display: none; margin-bottom: 6px; } .faq__item .answer { display: none; padding: 30px 15px 15px 15px; background-color: #ffffff; border-radius: 0px 0px 4px 4px; border: 1px solid #d8d8d8; font-size: 18px; margin: -15px 0px 0px 0px; position: relative; z-index: 0; animation-name: faq; animation-timing-function: ease-in; animation-duration: 0.3s; top: 0px; } @keyframes faq { from { top: -105px; } to { top: 0px; } } .faq__item .question { padding: 16px 16px 16px 20px; background-color: var(--green-bold-color); color: var(--text-color-negative); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; position: relative; z-index: 1; } .faq__item .question p { font-size: 18px; color: var(--text-color-negative); } .question img { width: 21px; margin-left: 8px; } .faqs { max-width: 1021px; margin: auto; padding-top: 85px; } .faqs__content { background: linear-gradient(360deg, #ffffff 0%, #f5f5f5 100%); } .faqs__pattern { background: url(../img/icons/pattern.png) 100% 100%; height: 422px; margin-top: -75px; background-repeat: repeat-x; } .blur { backdrop-filter: blur(6px); } .checkup__col__info p { font-size: 18px; color: var(--text-color-light); text-align: center; margin: 20px 0px 14px 0px; } .checkup__cover.desktop { display: none; } .checkup__cover { border-radius: 8px 8px 0px 0px; } .checkup__col__info { padding-top: 20px; } .chk__item { display: flex; margin-bottom: 5px; } .input__chk { accent-color: #75787b; width: 28px; height: 28px; margin-right: 10px; } .chk__lbl { color: var(--text-color-light); font-size: 14px; line-height: 1.3; } .checkup__ctas { margin-top: 30px; display: flex; align-items: center; flex-direction: column; } .checkup__cta { height: 36px; padding: 3px 20px; background-color: var(--green-color); color: var(--text-color-negative); font-size: 14px; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; border-radius: 34px; } .checkup__cta.cancel { background-color: #75787b; } .input.date { background: #f3f3f3 url(../img/icons/calendar.svg) no-repeat; background-size: 25px 20px; background-position: 95% 10px; } select.input { background: #f3f3f3 url(../img/icons/arrow_down.svg) no-repeat; background-size: 22px 18px; background-position: 95% 11px; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .checkup__close img { width: 19px; } .checkup__close { position: absolute; top: 16px; right: 20px; } .checkup { width: 97.5%; max-width: 400px; background-color: #ffffff; margin: auto; position: relative; box-shadow: 0px 3px 12px #00000029; border: 1px solid #c1c1c1; border-radius: 8px; } .checkup__wrapper { width: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; z-index: 20; overflow-y: auto; padding: 6px 0px 20px 0px; display: none; } .checkup__frm { padding: 0px 7px 20px 7px; } .frm__col.double { display: flex; } .frm__col.double .frm__small__col:nth-child(1) { width: 41%; margin-right: 3%; } .frm__col.double .frm__small__col:nth-child(2) { width: 56%; } .checkup__frm .frm__lbl { font-size: 17px; } .frm__lbl__aviso { font-size: 16px; font-weight: bold; padding-top: 10px; } .checkup__frm .input { font-size: 16px; } .checkup__ty { display: none; } .checkup__ty__content { margin-top: 140px !important; width: 90%; max-width: 650px; background-color: #ffffff; margin: auto; position: relative; box-shadow: 0px 3px 12px #00000029; border: 1px solid #c1c1c1; border-radius: 8px; padding: 25px 7px; text-align: center; } .checkup__ty__content .check__ty__img { width: 78px; } .checkup__ty__content h3 { line-height: 1.2 !important; font-size: 26px !important; margin-top: 30px; max-width: 530px; } .terms__wrapper { width: 100%; position: fixed; height: 100%; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; z-index: 21; display: none; } .terms { padding: 50px 2px 30px 2px; width: 90%; border: 1px solid #c1c1c1; border-radius: 8px; box-shadow: 0px 3px 12px #00000029; margin: 5% auto; background-color: #ffffff; position: relative; max-width: 1000px; } .terms object { width: 98%; height: 400px; border: 1px solid #c1c1c1; border-radius: 8px; box-shadow: 0px 3px 12px #00000029; margin: auto; } .close__terms { position: absolute; top: 15px; right: 20px; } .close__terms img { width: 19px; } .terms__cta { height: 36px; padding: 3px 5px; max-width: 370px; background-color: var(--green-color); color: var(--text-color-negative); font-size: 14px; display: flex; justify-content: center; align-items: center; margin: 15px auto 0px auto; border-radius: 34px; } .terms__cta img { display: none; } @media screen and (min-width: 375px) { .beneficios { padding-top: 100px; } .checkup__frm .frm__lbl { font-size: 18px; } .checkup__frm .input { font-size: 18px; } } @media screen and (min-width: 768px) { #protocolo-medico { padding-top: 3rem; } #requisitos-para-tu-cita { padding-top: 6rem; } .seccion img { width: 100%; } .seccion { padding-top: 5rem; padding-bottom: 5rem; } .above { background: url(../img/headerdesktop.png) center no-repeat; background-size: cover; height: 620px; display: flex; align-items: center; } .above__info { padding-top: 0px; width: 100%; padding-bottom: 60px; } .above__info h1, .above__info p { text-align: left; } .above__info p { width: 36%; max-width: 570px; } @keyframes faq { from { top: -55px; } to { top: 0px; } } .beneficios { padding-top: 130px; } .experiencia__row { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .experiencia__cover { width: 50%; height: 600px; object-position: 30%; margin: 0; } .experiencia__col { width: 45%; } .experiencia__col h2, .experiencia__col h3 { text-align: left; } .frm__cta { margin-left: 0; } .experiencia__ctas { justify-content: left; } .checkup { max-width: 750px; } .frm__row { display: flex; justify-content: space-between; } .frm__col { width: 48%; } .frm__col__aviso { margin-top: 40px; width: 48%; } .checkup__frm { padding: 10px 15px 30px 15px; } .checkup__ctas { flex-direction: row-reverse; } .checkup__cta:nth-child(1) { margin-left: 15px; } .terms__cta img { display: block; width: 18px; margin-right: 16px; } .terms object { height: 500px; } .terms { margin: 2% auto; padding: 50px 20px 30px 20px; } } @media screen and (min-width: 1100px) { .seccion img { object-fit: contain; } .above { height: 800px; } .beneficios__item:hover > .beneficios__back { display: flex; justify-content: center; transition: display ease-in 200ms; } .beneficios__item:hover > .beneficios__front { display: none; transition: display ease-in 200ms; } .faq__item .question { padding: 30px 40px 30px 60px; font-size: 26px; } .faq__item .question p { font-size: 26px; } .faq__item .answer { padding: 50px 40px 20px 40px; font-size: 26px; } .question img { width: 27px; margin-left: 20px; } .faq__item { margin-bottom: 28px; } .faqs { padding-top: 130px; } .faqs__pattern { height: 700px; margin-top: -420px; } .checkup__cover.mobile { display: none; } .checkup__cover.desktop { display: block; width: 30%; object-fit: cover; object-position: right; } .checkup__col { width: 68%; } .checkup { display: flex; max-width: 1425px; justify-content: space-between; } .checkup__wrapper { padding: 30px 0px 20px 0px; } .checkup__col__info { padding: 50px 15px 0px 15px; } .checkup__col__info h2, .checkup__col__info h3, .checkup__col__info p { text-align: left; } .checkup__col__info p { max-width: 684px; } .checkup__col__info h3 { margin-bottom: 20px; } .checkup__ty__content .check__ty__img { width: 108px; } .checkup__ty__content { margin-top: 180px !important; } } @media screen and (min-width: 1280px) { .above { height: 913px; } .above__info { padding-bottom: 150px; } .beneficios__front, .beneficios__back { width: 324px; height: 560px; margin: 1.4rem 1rem; } .beneficios__info h4 { display: flex; align-items: flex-end; justify-content: center; height: auto; gap: 2rem; } .beneficios__list { max-width: 1467px; margin: auto; } .beneficios { padding: 109px 0px 120px 0px; } .beneficios__back__info { padding: 2rem; } .beneficios__back__info p { font-size: 1.6rem; } .beneficios__item { padding-top: 60px; margin-bottom: -60px; } .beneficios__back__cta img { margin-right: 12px; } .beneficios__back__cta .img__videocall { width: 28px; } .beneficios__header { max-width: 911px; margin: auto auto auto auto; } .beneficios__back__cta { width: 261px; height: 46px; font-size: 1.4rem; font-weight: 700; } .beneficios__front.selected { border: 2px solid var(--green-color); } .frm__lbl, .checkup__frm .frm__lbl { font-size: 22px; } .input, .checkup__frm .input { margin-bottom: 15px; font-size: 22px; } .experiencia__cover { width: 52%; max-width: 765; height: 698px; object-position: 15%; margin: 0px 0px 0px auto; } .experiencia__col { width: 37%; } .experiencia { padding: 100px 0px; } .experiencia__ctas { margin-top: 25px; } .frm__cta { width: 300px; height: 65px; font-size: 22px; } .msg__error { font-size: 18px; } .checkup__col__info p { font-size: 24px; } .checkup__wrapper { padding: 20px 0px 20px 0px; } .chk__lbl { font-size: 18px; } .input__chk { accent-color: #75787b; width: 30px; height: 30px; margin-right: 12px; } .chk__item { margin-bottom: 8px; } select.input { background-position: 96% 15px; } .checkup__cta { font-size: 22px; height: 59px; padding: 3px 35px; } .checkup__ctas { margin-top: 45px; } .checkup__errors { text-align: right; } .checkup__cover.desktop { width: 32%; } .checkup__col { width: 66%; } .checkup__close img { width: 24px; } .checkup__close { top: 25px; right: 30px; } .terms object { height: 546px; } .terms__cta { height: 58px; font-size: 22px; max-width: 500px; margin-top: 30px; } .close__terms img { width: 24px; } .beneficios__info h4 { height: auto; } } @media screen and (min-width: 1465px) { .beneficios__list { justify-content: left; } .checkup__cover.desktop { width: 39%; } .checkup__col { width: 61%; } .checkup__col { padding: 0px 30px; } } /* Quitar flechas en Chrome, Safari, Edge, Opera */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Quitar flechas en Firefox */ input[type="number"] { -moz-appearance: textfield; } .beneficios__cta a { width: auto; height: 100%; justify-content: flex-end; background-color: transparent; margin: 0; padding: 0; } .beneficios__cta a:last-child { justify-content: start; } .experiencia__subtitle { font-size: 1.6rem; font-weight: 400; } .opacity-1 { opacity: 1; } .opacity-0 { opacity: 0; } .beneficios__item:nth-child(1) p, .beneficios__item:nth-child(2) p, .beneficios__item:nth-child(4) p { margin-top: 7rem; }