/* Generado por scripts/build-css.cjs. Editar los CSS fuente. */
.section.intro.intro--reference { --intro-teal: #008fa5; --intro-lime: #9fe32b; --intro-ink: #075176; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr); align-items: end; gap: clamp(28px, 2.85vw, 64px); width: 100%; max-width: none; min-height: 0; margin: 0; padding: clamp(40px, 2.2vw, 56px) 2.85% clamp(64px, 6.4vw, 140px); background: #fff; color: var(--intro-ink); font-family: Arial, Helvetica, sans-serif; } .intro.intro--reference::after { content: none; } .intro--reference .intro-photo { width: 100%; max-width: none; height: auto; aspect-ratio: 1.125; margin: 0; border-radius: 5% 12% 5% 16%; isolation: isolate; } .intro--reference .intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; } .intro--reference .intro-photo::after { inset: 48% 0 0; background: linear-gradient(transparent, rgba(0, 58, 86, 0.84)); pointer-events: none; } .intro--reference figcaption { position: absolute; z-index: 1; right: 6%; bottom: 5%; max-width: 88%; color: #fff; font: 900 clamp(18px, 1.65vw, 38px)/1.12 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -0.045em; text-align: right; } .intro--reference figcaption span { position: relative; display: inline-block; color: var(--intro-lime); } .intro--reference figcaption span::after { content: ''; position: absolute; inset: auto 0 -0.2em; height: 0.12em; background: currentColor; -webkit-mask: var(--hero-link-brush) center / 100% 100% no-repeat; mask: var(--hero-link-brush) center / 100% 100% no-repeat; } .intro--reference .intro-copy { min-width: 0; } .intro--reference .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 1vw, 24px); color: var(--intro-teal); font-size: clamp(0.875rem, 1.1vw, 1.4375rem); font-weight: 700; line-height: 1.4; letter-spacing: 0.16em; } .intro--reference .eyebrow::before { content: ''; width: clamp(40px, 4.2vw, 88px); height: 4px; flex: 0 0 auto; background: var(--intro-lime); } .intro--reference .intro-copy h2 { margin: 0 0 clamp(24px, 1.5vw, 36px); color: var(--intro-teal); font: 900 clamp(32px, 4.2vw, 88px)/1.06 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -0.045em; text-transform: none; } .intro--reference .intro-title-line, .intro--reference .intro-title-accent { display: block; } .intro--reference .intro-title-accent { color: #659500; } .intro--reference .intro-copy > p:not(.eyebrow) { max-width: none; margin: 0; color: var(--intro-ink); font-size: clamp(1.125rem, 1.25vw, 1.625rem); line-height: 1.5; letter-spacing: normal; } .intro--reference .intro-copy > p + p { margin-top: clamp(22px, 1.6vw, 36px); } .intro--reference .intro-copy strong { color: #006980; font-weight: 700; } @media (max-width: 1000px) { .section.intro.intro--reference { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; padding: 48px 5% 64px; align-items: center; } .intro--reference .intro-photo { aspect-ratio: 0.8; } .intro--reference .intro-title-line { display: inline; } .intro--reference .intro-copy h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.08; } } @media (max-width: 700px) { .section.intro.intro--reference { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 6% 56px; } .intro--reference .intro-photo { aspect-ratio: 1.125; max-width: 520px; justify-self: center; } .intro--reference figcaption { font-size: clamp(20px, 4.4vw, 30px); } .intro--reference .intro-copy h2 { font-size: clamp(30px, 7.2vw, 48px); } .intro--reference .intro-copy > p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.55; } } .page-hero.programs-hero { --hero-unit: min(.81vw, calc((100svh - var(--nav-height)) / 48)); --diamond-size: calc(var(--hero-unit) * 14.5); --diamond-step: calc(var(--diamond-size) * .8); --diamond-column: 63%; --program-blue: #005477; --program-cyan: #05b8d9; --program-green: #83d43d; position: relative; isolation: isolate; height: auto; min-height: calc(100svh - var(--nav-height)); display: flex; align-items: center; padding: 24px 3.5vw; overflow: hidden; background: #e9faff; color: var(--program-blue); font-family: Arial, Helvetica, sans-serif; } .programs-hero__landscape { position: absolute; z-index: -3; inset: 0 0 0 auto; width: 73%; height: 100%; object-fit: cover; object-position: right center; } .programs-hero::before, .programs-hero::after { content: ''; position: absolute; pointer-events: none; } .programs-hero::before { z-index: -2; inset: 0; background: linear-gradient(115deg, #f3fcfe 0%, #fff 42%, #fff 100%); clip-path: polygon(0 0, 57% 0, 36.5% 51%, 55.5% 100%, 0 100%); } .programs-hero::after { content: none; } .programs-hero__copy { position: relative; width: 44%; } .programs-hero__eyebrow { margin: 0 0 calc(var(--hero-unit) * .55); font-size: calc(var(--hero-unit) * 1.5); line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; } .programs-hero__eyebrow::before, .programs-hero__title::after, .programs-hero__purpose::after { content: ''; display: block; width: calc(var(--hero-unit) * 5.2); height: calc(var(--hero-unit) * .36); min-height: 4px; border-radius: 8px; background: var(--program-cyan); } .programs-hero__eyebrow::before { margin-bottom: calc(var(--hero-unit) * 1); } .programs-hero .programs-hero__title { max-width: none; margin: 0 0 calc(var(--hero-unit) * 1.1); font: 900 calc(var(--hero-unit) * 5.05)/.98 'Arial Black', Arial, sans-serif; letter-spacing: -.045em; text-transform: uppercase; } .programs-hero__title span { display: block; white-space: nowrap; } .programs-hero__title .programs-hero__accent { color: var(--program-green); font-size: calc(var(--hero-unit) * 4.12); margin-top: calc(var(--hero-unit) * .2); } .programs-hero__title::after { margin-top: calc(var(--hero-unit) * 1); } .programs-hero__description, .programs-hero__purpose { max-width: min(calc(var(--hero-unit) * 34.5), 31vw); margin: 0 0 calc(var(--hero-unit) * 1.25); font-size: calc(var(--hero-unit) * 1.39); line-height: 1.24; letter-spacing: -.025em; } .programs-hero__purpose strong { display: block; font-weight: 800; } .programs-hero__purpose strong span { text-decoration: none; } .programs-hero__purpose::after { margin-top: calc(var(--hero-unit) * .65); background: #96e44b; } .programs-hero__values { display: flex; align-items: center; gap: calc(var(--hero-unit) * 1.25); width: calc(var(--hero-unit) * 39); margin: calc(var(--hero-unit) * 2.4) 0 0; padding: 0; list-style: none; } .programs-hero__values li { display: flex; align-items: center; gap: calc(var(--hero-unit) * .7); font-size: calc(var(--hero-unit) * 1.04); line-height: 1.25; } .programs-hero__values li + li { border-left: 1px solid var(--program-green); padding-left: calc(var(--hero-unit) * 1.25); } .programs-hero__values svg { width: calc(var(--hero-unit) * 3.2); height: calc(var(--hero-unit) * 3.2); flex-shrink: 0; fill: #007d9f; } .programs-hero__values .programs-hero__heart { fill: var(--program-green); } .programs-hero__signature { position: absolute; isolation: isolate; right: 2.6%; bottom: 5%; margin: 0; color: var(--program-green); font: 700 calc(var(--hero-unit) * 2.05)/1.15 'Segoe Script', 'Brush Script MT', cursive; text-align: center; transform: rotate(-9deg); text-shadow: 0 2px 6px #fff, 0 3px 16px #fff, 0 4px 24px #fff; } .programs-hero__signature::before { --signature-brush: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20112%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cdefs%3E%20%3Cmask%20id%3D%22dry-brush%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M25%2022%2061%2016%2047%2013%20137%2011%20127%208%20263%208%20280%205%20365%206%20352%2010%20440%208%20433%2014%20458%2014%20451%2021%20467%2024%20459%2030%20468%2035%20461%2043%20470%2046%20460%2050%20466%2058%20460%2064%20468%2068%20456%2072%20464%2079%20448%2080%20455%2087%20421%2090%20435%2093%20340%2097%20359%20100%20226%20101%20217%20105%20116%20103%20125%20100%2043%20104%2049%2099%2015%2099%2022%2091%2012%2088%2019%2081%2013%2074%2019%2068%209%2062%2020%2057%2015%2051%2024%2047%2018%2042%2025%2036%2019%2032%2032%2028Z%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20stroke-width%3D%223%22%20d%3D%22m22%2025%2040-4m-47%2019%2020-2m-23%2025%2019-3m-13%2033%2047-4m-29%2012%2055-5m324-75%2045-2m-22%2011%2037-2m-27%2042%2029-3m-51%2017%2038-3M119%2013l34-1m174-2%2036%201m-164%2090%2038-1%22%2F%3E%20%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22m26%2033%2022-3m-30%2044%2023-2m-17%2015%2014-1m401-60%2017%201m-7%2016%2016-1m-18%2032%2013-2M71%2017l23-1m211-4%2019%201M80%2098l34-2m245-3%2038-2%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fmask%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22%2349b7aa%22%3E%20%3Cpath%20mask%3D%22url(%23dry-brush)%22%20d%3D%22M0%200h480v112H0z%22%2F%3E%20%3Cpath%20opacity%3D%22.65%22%20d%3D%22m40%2011%2091-5-40%205-42%203Zm120-5%20112-3-28%203Zm207-1%2073-3-12%203ZM18%20103l88-1-38%204-54%201Zm289-1%20121-8-17%205-67%205Z%22%2F%3E%20%3Cpath%20opacity%3D%22.4%22%20d%3D%22m6%2052%2013-2-3%203-12%202Zm451-36%2017-1-2%203-13%201ZM8%2092l14-2-1%203-16%202Zm421%209%2034-5-8%204-27%204Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); content: ''; position: absolute; z-index: -1; inset: -10% -7% -5%; background: rgba(255, 255, 255, .95); -webkit-mask: var(--signature-brush) center / 100% 100% no-repeat; mask: var(--signature-brush) center / 100% 100% no-repeat; pointer-events: none; } .programs-hero__signature::after { content: ''; display: block; height: calc(var(--hero-unit) * .4); background: #a2ec51; border-radius: 100% 0; margin-top: calc(var(--hero-unit) * .25); } .program-diamond { position: absolute; width: var(--diamond-size); left: calc(var(--diamond-column) - var(--diamond-size) * .5); top: calc(50% - var(--diamond-size) * .5); aspect-ratio: 1; transform: rotate(45deg); border: calc(var(--hero-unit) * .55) solid white; border-radius: calc(var(--hero-unit) * 1.8); background: linear-gradient(135deg, #02c5e3, #a3e747); box-shadow: calc(var(--hero-unit) * .4) calc(var(--hero-unit) * .4) calc(var(--hero-unit) * 1.5) #00547724; transition: scale .2s ease, box-shadow .2s ease; } .program-diamond:hover { scale: 1.04; box-shadow: calc(var(--hero-unit) * .4) calc(var(--hero-unit) * .4) calc(var(--hero-unit) * 2) #00547755; } .program-diamond:focus-visible { outline: 4px solid #005477; outline-offset: 5px; } .program-diamond--brain { top: calc(50% - var(--diamond-step) - var(--diamond-size) * .5); background: #00b8d9; } .program-diamond--neuro { left: calc(var(--diamond-column) - var(--diamond-step) - var(--diamond-size) * .5); } .program-diamond--family { top: calc(50% + var(--diamond-step) - var(--diamond-size) * .5); } .program-diamond__window { position: absolute; inset: calc(var(--hero-unit) * .7); border-radius: calc(var(--hero-unit) * 1); overflow: hidden; background: #fff; } .program-diamond__content { position: absolute; width: 141.42%; height: 141.42%; top: -20.71%; left: -20.71%; transform: rotate(-45deg); background: #fff; } .program-diamond__content img { width: 100%; height: 76%; object-fit: cover; display: block; } .program-diamond__content::before { content: ''; position: absolute; z-index: 1; inset: 38% 0 0; background: linear-gradient(180deg, #ffffff00, #fffffff5 34%, #fff 53%); pointer-events: none; } .program-diamond--brain .program-diamond__content { background: radial-gradient(ellipse at 50% 28%, #fff 12%, #e1f8ff 58%, #fff 90%); } .program-diamond--brain .program-diamond__content::before { content: none; } .program-diamond--brain img { position: absolute; width: 44%; height: 37%; left: 28%; top: 9%; object-fit: contain; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse, #000 58%, transparent 74%); mask-image: radial-gradient(ellipse, #000 58%, transparent 74%); } .program-diamond--neuro img { height: 100%; object-fit: cover; object-position: center top; } .program-diamond--neuro .program-diamond__content::before { inset: 47% 0 0; background: linear-gradient(180deg, #ffffff00, #fffffff5 30%, #fff 52%); } .program-diamond--family img { object-position: center 38%; } .program-diamond__label { position: absolute; z-index: 2; inset: 56% 0 auto; padding: 0 3%; text-align: center; font-size: calc(var(--hero-unit) * 1.15); line-height: 1.04; font-weight: 900; letter-spacing: -.035em; text-transform: uppercase; } .program-diamond--family .program-diamond__label { top: 55%; } .program-diamond--brain .program-diamond__label { top: 49%; } .program-diamond--neuro .program-diamond__label { top: 61%; font-size: calc(var(--hero-unit) * 1.02); line-height: 1.08; } @media (min-width: 761px) and (max-width: 1100px) { .page-hero.programs-hero { --hero-unit: min(1.1vw, calc((100svh - var(--nav-height)) / 48)); --diamond-column: 73%; } .programs-hero__copy { width: 49%; } .programs-hero__description, .programs-hero__purpose { max-width: 42vw; font-size: max(15px, calc(var(--hero-unit) * 1.39)); } .programs-hero::before { clip-path: polygon(0 0, 64% 0, 48% 51%, 64% 100%, 0 100%); } .programs-hero__values { width: 46vw; gap: 10px; flex-wrap: wrap; } .programs-hero__values li { font-size: 12px; } } @media (max-width: 760px) { .page-hero.programs-hero { --hero-unit: 1vw; --diamond-size: 36vw; --diamond-column: 58%; display: block; height: auto; padding: 35px 22px 0; min-height: 0; } .programs-hero::before { clip-path: none; background: linear-gradient(145deg, #e9faff, #fff 50%, #e4faff); } .programs-hero::after { display: none; } .programs-hero__copy { width: 100%; } .programs-hero__eyebrow { font-size: clamp(12px, 3.3vw, 20px); letter-spacing: .2em; margin-bottom: 9px; } .programs-hero__eyebrow::before, .programs-hero__title::after, .programs-hero__purpose::after { width: 58px; height: 4px; margin-block: 12px; } .programs-hero .programs-hero__title { font-size: 10.5vw; margin-bottom: 17px; } .programs-hero__title .programs-hero__accent { font-size: 8.3vw; } .programs-hero__description, .programs-hero__purpose { max-width: none; font-size: 17px; line-height: 1.45; } .programs-hero__values { width: 100%; gap: 12px; margin: 22px 0 28px; } .programs-hero__values li { flex: 1; gap: 6px; font-size: 11px; } .programs-hero__values li + li { padding-left: 8px; } .programs-hero__values svg { width: 25px; height: 30px; } .programs-hero__landscape { top: auto; bottom: 0; height: 140vw; width: 100%; object-position: 78% center; z-index: 0; } .programs-hero__visual { position: relative; height: 140vw; margin-inline: -22px; } .programs-hero__signature { bottom: 4%; right: 6%; font-size: 5vw; } .programs-hero__signature::after { height: 3px; } .program-diamond { border-width: 5px; border-radius: 18px; } .program-diamond__window { inset: 5px; border-radius: 10px; } .program-diamond__label { font-size: max(11px, 3vw); } .program-diamond--neuro .program-diamond__content::before { inset: 42% 0 0; } .program-diamond--neuro .program-diamond__label { top: 53%; font-size: max(9px, 2.6vw); } } @media (prefers-reduced-motion: reduce) { .program-diamond { transition: none; } } :is(.program-services, .program-other-services).neuro60 { --n-teal: #006880; --n-cyan: #00b5d9; --n-lime: #bcf653; position: relative; isolation: isolate; width: 100%; max-width: none; min-height: calc(100svh - var(--nav-height)); margin: 0; padding: clamp(130px, 11vw, 200px) 2.7% clamp(48px, 5.3vw, 96px); background: #fff; color: var(--n-teal); font-family: Arial, Helvetica, sans-serif; scroll-margin-top: 0; } .neuro60::before { content: none; position: absolute; z-index: -1; inset: 0 0 auto; height: clamp(260px, 30vw, 540px); background: linear-gradient(180deg, #00688012, #00688075 38%, #006880 100%), url('../Ima/inicio-conecta-vital.webp') center 43% / cover no-repeat; pointer-events: none; } .neuro60__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: end; gap: 4.2%; max-width: 1800px; margin-inline: auto; } .neuro60__copy { min-width: 0; } .neuro60__copy::before { content: ''; display: block; width: 74px; height: 4px; margin-bottom: 24px; border-radius: 4px; background: var(--n-lime); } .neuro60 .neuro60__title { margin: 0 0 18px; color: var(--n-teal); font: 900 clamp(30px, 2.85vw, 54px)/1.06 Arial, Helvetica, sans-serif; letter-spacing: -.045em; text-transform: uppercase; } .neuro60__title span { color: #bcf653; display: block; margin-top: 3px; font-size: 1.58em; letter-spacing: -.055em; } .neuro60__description { margin: 0 0 16px; font-size: clamp(17px, 1.42vw, 27px); line-height: 1.36; text-wrap: pretty; } .neuro60__description strong { font-weight: 750; } .neuro60__cta { display: inline-flex; align-items: center; justify-content: center; gap: clamp(16px, 1.3vw, 26px); width: 100%; min-height: 64px; margin-top: 12px; padding: 17px 22px; border: 1px solid var(--n-lime); border-radius: 100px; background: var(--n-lime); color: var(--n-teal); font-size: clamp(17px, 1.5vw, 28px); font-weight: 750; line-height: 1.15; text-transform: uppercase; transition: background .2s ease, box-shadow .2s ease; } .neuro60__cta:hover { background: #d0ff83; box-shadow: 0 8px 24px #00435740; } .neuro60__cta:focus-visible { outline: 3px solid var(--n-teal); outline-offset: 5px; } .neuro60__pillars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1vw, 20px); min-width: 0; } .neuro60__pillar { position: relative; isolation: isolate; grid-column: span 3; display: flex; align-items: flex-end; justify-content: center; min-width: 0; min-height: clamp(255px, 18.2vw, 350px); overflow: hidden; border: 1px solid #ffffff85; border-radius: 15px; background: var(--n-teal); text-align: center; } .neuro60__pillar:nth-child(n + 5) { grid-column: span 4; min-height: clamp(235px, 16.5vw, 315px); } .neuro60__pillar img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .neuro60__pillar::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 32%, #00485d40 48%, #00485ded 78%, #00485d 100%); } .neuro60__pillar h3 { width: 100%; margin: 0; padding: 55px 12px 13px; color: #fff; font: 700 clamp(16px, 1.2vw, 23px)/1.14 Arial, Helvetica, sans-serif; letter-spacing: 0; text-wrap: balance; } .neuro60__pillar h3::after { content: ''; display: block; width: 44px; height: 3px; margin: 12px auto 0; border-radius: 4px; background: var(--n-lime); } @media (max-width: 1100px) { .neuro60__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 3%; align-items: center; } .neuro60 .neuro60__title { font-size: clamp(27px, 3.18vw, 35px); } .neuro60__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .neuro60__pillar, .neuro60__pillar:nth-child(n + 5) { grid-column: auto; min-height: 215px; } .neuro60__pillar:last-child { grid-column: 1 / -1; } } @media (max-width: 900px) { :is(.program-services, .program-other-services).neuro60 { padding: 115px 22px 44px; } .neuro60::before { height: 280px; background-position: center, 35% center; } .neuro60__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .neuro60 .neuro60__title { font-size: clamp(27px, 6.9vw, 48px); } .neuro60__description { font-size: 18px; line-height: 1.5; } .neuro60__cta { width: min(100%, 440px); font-size: 18px; } .neuro60__pillar, .neuro60__pillar:nth-child(n + 5) { min-height: clamp(225px, 46vw, 330px); } .neuro60__pillar:last-child { min-height: 260px; } .neuro60__pillar h3 { font-size: 17px; } } @media (max-width: 360px) { :is(.program-services, .program-other-services).neuro60 { padding-inline: 16px; } .neuro60__pillars { grid-template-columns: minmax(0, 1fr); } .neuro60__pillar, .neuro60__pillar:nth-child(n + 5) { min-height: 290px; } .neuro60__cta { padding-inline: 15px; gap: 12px; font-size: 16px; } } @media (min-width: 901px) { :is(.program-services, .program-other-services).neuro60 { --n-unit: min(1vw, calc((100svh - var(--nav-height)) / 54), 18px); display: grid; align-content: center; min-height: calc(100svh - var(--nav-height)); padding: calc(var(--n-unit) * 9) 2.7% calc(var(--n-unit) * 4); scroll-margin-top: -18px; } .neuro60::before { height: 55%; } .neuro60__layout { width: calc(var(--n-unit) * 94.6); max-width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 4.2%; align-items: end; } .program-services.neuro60 .neuro60__layout { width: 100%; max-width: 1800px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr); gap: 3%; } .neuro60__copy::before { width: calc(var(--n-unit) * 4.35); height: 3px; margin-bottom: calc(var(--n-unit) * 1.4); } .neuro60 .neuro60__title { margin-bottom: calc(var(--n-unit) * 1.05); font-size: calc(var(--n-unit) * 2.85); } .program-services.neuro60 .neuro60__title { font-size: calc(var(--n-unit) * 4.275); } .neuro60__description { margin-bottom: calc(var(--n-unit) * .94); font-size: max(14px, calc(var(--n-unit) * 1.42)); line-height: 1.36; } .neuro60__cta { min-height: 44px; margin-top: calc(var(--n-unit) * .7); padding: calc(var(--n-unit) * 1) calc(var(--n-unit) * 1.3); gap: calc(var(--n-unit) * 1.3); font-size: max(14px, calc(var(--n-unit) * 1.5)); } .neuro60__pillars { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--n-unit); } .neuro60__pillar { grid-column: span 3; min-height: calc(var(--n-unit) * 18.2); border-radius: calc(var(--n-unit) * .88); } .neuro60__pillar:nth-child(n + 5) { grid-column: span 4; min-height: calc(var(--n-unit) * 16.5); } .neuro60__pillar h3 { padding: calc(var(--n-unit) * 3.2) calc(var(--n-unit) * .7) calc(var(--n-unit) * .76); font-size: max(13px, calc(var(--n-unit) * 1.2)); } .neuro60__pillar h3::after { width: calc(var(--n-unit) * 2.58); margin-top: calc(var(--n-unit) * .7); } } @media (prefers-reduced-motion: reduce) { .neuro60__cta { transition: none; } } :is(.program-services-more, .program-additional-services).home-care { --care-teal: #006880; --care-cyan: #00b5d9; --care-lime: #bcf653; width: 100%; max-width: none; margin: 0; padding: clamp(48px, 4.5vw, 80px) 5% clamp(48px, 4vw, 72px); background: radial-gradient(ellipse at 0 65%, #e1f7f8, transparent 45%), radial-gradient(ellipse at 100% 10%, #effbdd, transparent 42%), #fbfefd; color: var(--care-teal); font-family: Arial, Helvetica, sans-serif; } .home-care__inner { max-width: 1380px; margin-inline: auto; text-align: center; } .home-care__heading { max-width: 900px; margin: 0 auto; } .home-care .home-care__heading h2 { margin: 0; color: var(--care-teal); font: 800 clamp(38px, 4.5vw, 70px)/.98 Arial, Helvetica, sans-serif; letter-spacing: -.045em; text-transform: uppercase; } .home-care__heading h2 span { display: block; color: #bcf653; margin-top: 6px; } .home-care__heading h2 span::after { content: ''; display: block; width: 74px; height: 5px; margin: 19px auto 0; border-radius: 5px; background: var(--care-lime); } .home-care__heading p { max-width: 850px; margin: 20px auto 0; color: #355d6b; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; text-wrap: pretty; } .home-care__services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 5vw, 88px); margin-top: 42px; } .home-care__service { min-width: 0; display: flex; flex-direction: column; align-items: center; } .home-care__visual { position: relative; width: min(84%, 300px); margin: 0 auto 41px; isolation: isolate; } .home-care__photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 15px; outline: 2px solid var(--care-cyan); outline-offset: 7px; background: #e1f3ee; } .home-care__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .home-care__badge { position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%); display: grid; place-items: center; width: 43%; aspect-ratio: 1; border: 5px solid #fbfefd; border-radius: 50%; background: var(--care-lime); color: var(--care-teal); box-shadow: 0 5px 14px #00688012; } .home-care__badge svg { width: 58%; height: 58%; } .home-care .home-care__service h3 { display: grid; place-items: center; width: 100%; min-height: 73px; margin: 14px 0 16px; padding: 12px 18px; border-radius: 40px; background: #e6f4f1; color: var(--care-teal); font: 750 clamp(23px, 2vw, 31px)/1.12 Arial, Helvetica, sans-serif; letter-spacing: -.035em; text-wrap: balance; } .home-care__service p { margin: 0; color: #355d6b; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; text-wrap: pretty; } .home-care__service::after { content: ''; width: 70px; height: 3px; margin-top: 22px; background: var(--care-cyan); border-radius: 3px; } .home-care__cta { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 54px; margin-top: 38px; padding: 14px 26px; border-radius: 40px; background: var(--care-teal); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.3; } .home-care__cta:hover { background: #004e65; } .home-care__cta:focus-visible { outline: 3px solid var(--care-teal); outline-offset: 5px; } @media (max-width: 760px) { :is(.program-services-more, .program-additional-services).home-care { padding: 42px 24px 48px; } .home-care__services { grid-template-columns: minmax(0, 1fr); gap: 42px; margin-top: 38px; } .home-care__service { width: 100%; max-width: 400px; margin-inline: auto; } .home-care__visual { width: min(80%, 280px); } .home-care .home-care__service h3 { min-height: 62px; font-size: 27px; } .home-care__service p { max-width: 360px; font-size: 18px; } .home-care__cta { gap: 16px; padding-inline: 20px; font-size: 16px; } } :is(.program-services-more, .program-additional-services).home-care { --care-unit: min(1vw, calc((100svh - var(--nav-height)) / 70), 18px); height: calc(100svh - var(--nav-height)); min-height: 0; display: flex; padding: calc(var(--care-unit) * 2) 5%; overflow-y: auto; scroll-margin-top: -18px; } .home-care__inner { width: 100%; margin-block: auto; flex-shrink: 0; } .home-care .home-care__heading h2 { font-size: calc(var(--care-unit) * 4); } .home-care__heading h2 span { margin-top: calc(var(--care-unit) * .3); } .home-care__heading h2 span::after { height: 3px; margin-top: var(--care-unit); } .home-care__heading p { margin-top: var(--care-unit); font-size: max(14px, calc(var(--care-unit) * 1.3)); line-height: 1.4; } .home-care__services { margin-top: calc(var(--care-unit) * 2); gap: 5%; } .home-care__visual { width: min(80%, calc(var(--care-unit) * 18)); margin-bottom: calc(var(--care-unit) * 2.6); } .home-care__photo { outline-offset: 5px; } .home-care__badge { border-width: 3px; } .home-care .home-care__service h3 { min-height: calc(var(--care-unit) * 4); margin: calc(var(--care-unit) * .7) 0 var(--care-unit); padding: calc(var(--care-unit) * .65) 12px; font-size: max(18px, calc(var(--care-unit) * 1.9)); } .home-care__service p { max-width: 360px; font-size: max(14px, calc(var(--care-unit) * 1.25)); line-height: 1.4; } .home-care__service::after { margin-top: calc(var(--care-unit) * 1.2); } .home-care__cta { min-height: 44px; margin-top: calc(var(--care-unit) * 1.8); padding: calc(var(--care-unit) * .8) 24px; font-size: max(14px, calc(var(--care-unit) * 1.1)); } @media (max-width: 760px) { :is(.program-services-more, .program-additional-services).home-care { --care-mobile-unit: min(1vw, calc((100svh - var(--nav-height)) / 160)); padding: 16px 22px; scroll-margin-top: -14px; } .home-care__heading { max-width: 500px; } .home-care .home-care__heading h2 { font-size: clamp(27px, calc(var(--care-mobile-unit) * 9), 38px); } .home-care__heading h2 span { display: inline; margin: 0; } .home-care__heading h2 span::after { width: 54px; margin-top: 8px; } .home-care__heading p { margin-top: 10px; font-size: clamp(14px, calc(var(--care-mobile-unit) * 4), 16px); line-height: 1.35; } .home-care__services { margin-top: 20px; gap: 18px; } .home-care__service { display: grid; grid-template-columns: clamp(68px, 22vw, 105px) minmax(0, 1fr); column-gap: 18px; align-items: center; max-width: 500px; text-align: left; } .home-care__visual { grid-row: 1 / 3; width: 100%; margin: 0 0 12px; } .home-care__photo { outline-width: 1px; outline-offset: 3px; } .home-care__badge { border-width: 2px; } .home-care .home-care__service h3 { display: block; min-height: 0; margin: 0 0 5px; padding: 0; border-radius: 0; background: transparent; font-size: 18px; text-wrap: initial; } .home-care__service p { font-size: 14px; line-height: 1.35; text-wrap: initial; } .home-care__service::after { display: none; } .home-care__cta { margin-top: 20px; font-size: 14px; padding: 10px 20px; } } @media (max-width: 760px) and (max-height: 700px) { :is(.program-services-more, .program-additional-services).home-care { padding: 12px 16px; } .home-care .home-care__heading h2 { font-size: 27px; } .home-care__heading p { font-size: 14px; line-height: 1.3; } .home-care__services { margin-top: 16px; gap: 12px; } .home-care__service { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; } .home-care .home-care__service h3 { font-size: 17px; } .home-care__service p { font-size: 14px; line-height: 1.3; } .home-care__cta { margin-top: 14px; } } @media (max-width: 360px) and (max-height: 600px) { :is(.program-services-more, .program-additional-services).home-care { padding: 10px 14px; } .home-care .home-care__heading h2 { font-size: 24px; } .home-care__heading p { margin-top: 8px; font-size: 13px; } .home-care__services { margin-top: 12px; gap: 10px; } .home-care__service { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; } .home-care .home-care__service h3 { font-size: 16px; } .home-care__service p { font-size: 13px; } .home-care__cta { margin-top: 12px; } } .training.section.intro--reference { min-height: calc(100svh - var(--nav-height)); align-content: center; padding-block: clamp(32px, 4vw, 64px); } .training__contact { display: inline-block; margin-top: 24px; color: #006980; } .training__contact:focus-visible { outline: 3px solid #006980; outline-offset: 5px; } @media (max-width: 700px) { .training.intro--reference .intro-photo { max-height: 280px; } } .family-care .home-care__service h3 { min-height: 2.9em; } @media (max-width: 760px) { .family-care .home-care__service h3 { grid-row: 1 / 3; min-height: 0; margin: 0; align-self: center; } } .program-other-services.neurofunctional { --n-unit: min(1vw, calc((100svh - var(--nav-height)) / 60), 18px); display: flex; height: calc(100svh - var(--nav-height)); min-height: 0; padding: calc(var(--n-unit) * 4) 2.7%; overflow-y: auto; } .neurofunctional::before { background-image: linear-gradient(180deg, #006880a8, #006880c9 38%, #006880 100%), url('../Ima/inicio-conecta-vital.webp'); } .neurofunctional .neuro60__layout { width: 100%; margin-block: auto; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.35fr); gap: 4.2%; align-items: center; } .neurofunctional .neuro60__copy { grid-column: 2; grid-row: 1; } .neurofunctional .neuro60__pillars { grid-column: 1; grid-row: 1; } .neurofunctional .neuro60__title { font-size: clamp(25px, calc(var(--n-unit) * 2.7), 48px); } .neurofunctional .neuro60__title span { font-size: 1em; letter-spacing: -.045em; } .neurofunctional .neuro60__description { font-size: max(14px, calc(var(--n-unit) * 1.2)); } .neurofunctional__message { color: var(--n-teal); font-weight: 700; } @media (max-width: 900px) { .program-other-services.neurofunctional { padding: 32px 22px; scroll-margin-top: -14px; } .neurofunctional .neuro60__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .neurofunctional .neuro60__copy, .neurofunctional .neuro60__pillars { grid-column: 1; grid-row: auto; } .neurofunctional .neuro60__title { font-size: clamp(25px, 5.5vw, 42px); } .neurofunctional .neuro60__description { font-size: 16px; line-height: 1.4; } .neurofunctional .neuro60__cta { font-size: 16px; min-height: 48px; padding: 12px 16px; } .neurofunctional .neuro60__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .neurofunctional .neuro60__pillar, .neurofunctional .neuro60__pillar:nth-child(n + 5) { grid-column: auto; min-height: 180px; } .neurofunctional .neuro60__pillar:last-child { grid-column: 1 / -1; } .neurofunctional .neuro60__pillar h3 { font-size: 14px; padding-inline: 8px; } } .integral-screening { --screening-teal: #006880; --screening-lime: #bcf653; --screening-unit: min(1vw, calc((100svh - var(--nav-height)) / 62), 18px); display: flex; align-items: center; min-height: calc(100svh - var(--nav-height)); padding: calc(var(--screening-unit) * 2.5) 3.5%; background: #fff; color: var(--screening-teal); font-family: Arial, Helvetica, sans-serif; scroll-margin-top: -18px; } .integral-screening__inner { width: 100%; max-width: 1720px; margin-inline: auto; } .integral-screening__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5%; align-items: center; } .integral-screening__copy, .integral-screening__includes { min-width: 0; } .integral-screening__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: max(11px, calc(var(--screening-unit) * .85)); line-height: 1.4; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; } .integral-screening__eyebrow::before { content: ''; flex: 0 0 40px; height: 3px; background: var(--screening-lime); } .integral-screening h2 { margin: 0 0 calc(var(--screening-unit) * 1.2); font: 900 clamp(30px, calc(var(--screening-unit) * 3.3), 56px)/1.05 Arial, Helvetica, sans-serif; letter-spacing: -.045em; } .integral-screening h2 span { display: block; color: #bcf653; } .integral-screening__copy > p:not(.integral-screening__eyebrow) { margin: 0 0 calc(var(--screening-unit) * 1.05); font-size: max(14px, calc(var(--screening-unit) * 1.2)); line-height: 1.42; text-wrap: pretty; } .integral-screening__cta { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 46px; margin-top: 6px; padding: 12px 24px; border-radius: 40px; background: var(--screening-lime); color: var(--screening-teal); font-size: max(15px, calc(var(--screening-unit) * 1.1)); font-weight: 750; line-height: 1.25; } .integral-screening__cta:hover { background: #d0ff83; } .integral-screening__cta:focus-visible { outline: 3px solid var(--screening-teal); outline-offset: 5px; } .integral-screening__includes > h3 { margin: 0 0 16px; font-size: max(22px, calc(var(--screening-unit) * 1.8)); letter-spacing: -.025em; } .integral-screening__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--screening-unit) * 1.1); } .integral-screening__card { padding: calc(var(--screening-unit) * 1.4); border: 1px solid #cce8ec; border-radius: 15px; background: #f2fafb; } .integral-screening__icon { display: grid; place-items: center; width: max(32px, calc(var(--screening-unit) * 3)); height: max(32px, calc(var(--screening-unit) * 3)); margin-bottom: 10px; border-radius: 12px; background: #fff; color: var(--screening-teal); } .integral-screening__icon svg { width: 75%; height: 75%; } .integral-screening__card h4 { margin: 0 0 7px; font-size: max(16px, calc(var(--screening-unit) * 1.3)); line-height: 1.2; letter-spacing: -.025em; } .integral-screening__card p { margin: 0; color: #355d6b; font-size: max(14px, calc(var(--screening-unit) * 1.05)); line-height: 1.4; text-wrap: pretty; } .integral-screening__card--report { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; background: #f0f9e3; border-color: #d4e8b3; } .integral-screening__card--report .integral-screening__icon { grid-row: 1 / 3; margin: 0; background: var(--screening-lime); } .integral-screening__closing { max-width: 1100px; margin: calc(var(--screening-unit) * 2) auto 0; padding: calc(var(--screening-unit) * 1.2) 24px 0; border-top: 1px solid #cce8ec; font-size: max(15px, calc(var(--screening-unit) * 1.25)); line-height: 1.4; text-align: center; text-wrap: balance; } @media (max-width: 900px) { .integral-screening { padding: 40px 24px; scroll-margin-top: -14px; } .integral-screening__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .integral-screening h2 { font-size: clamp(32px, 6vw, 44px); margin-bottom: 20px; } .integral-screening__copy > p:not(.integral-screening__eyebrow) { font-size: 16px; line-height: 1.5; margin-bottom: 16px; } .integral-screening__eyebrow { font-size: 11px; } .integral-screening__cards { gap: 14px; } .integral-screening__card { padding: 18px; } .integral-screening__card h4 { font-size: 18px; } .integral-screening__icon { width: 40px; height: 40px; } .integral-screening__closing { margin-top: 28px; padding: 22px 0 0; font-size: 16px; } } @media (max-width: 540px) { .integral-screening { padding-inline: 20px; } .integral-screening__cards { grid-template-columns: minmax(0, 1fr); } .integral-screening__card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; } .integral-screening__icon { grid-row: 1 / 3; margin: 0; } .integral-screening__card h4 { font-size: 17px; } .integral-screening__card p { font-size: 15px; } .integral-screening__cta { width: 100%; } } .hero-link.program-whatsapp { display: inline-flex; width: clamp(280px, 30.5vw, 760px); max-width: 100%; min-height: 54px; padding: 16px clamp(24px, 2.5vw, 48px); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #006880; font: 900 clamp(17px, 1.4vw, 34px)/1.15 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -.045em; text-transform: uppercase; text-decoration: none; } .hero-link.program-whatsapp::before { background-color: #bcf653; } .hero-link.program-whatsapp:hover { background: transparent; box-shadow: none; } .hero-link.program-whatsapp:focus-visible { outline: 3px solid #006880; outline-offset: 5px; } @media (max-width: 760px) { .hero-link.program-whatsapp { width: 450px; padding: 14px 24px; font-size: 16px; } } @media (max-height: 700px) { .hero-link.program-whatsapp { min-height: 48px; padding-block: 12px; } } .program-services-more.home-care { --care-teal: #006880; --care-lime: #a9da54; --care-paper: #fdfcf7; --care-ink: #164c62; --care-unit: min(1vw, calc((100svh - var(--nav-height)) / 48), 20px); --care-card-radius: clamp(28px, calc(var(--care-unit) * 3.8), 76px); position: relative; isolation: isolate; display: grid; align-items: center; height: auto; min-height: calc(100svh - var(--nav-height)); padding: calc(var(--care-unit) * 2) 2.5%; overflow: visible; background: #fff; } .program-services-more .home-care__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr); align-items: center; gap: clamp(80px, 4vw, 80px); width: min(100%, calc(var(--care-unit) * 95)); max-width: 2000px; margin: 0 auto; } .program-services-more .home-care__heading { width: 100%; max-width: none; margin: 0; padding-top: calc(var(--care-unit) * 2); } .program-services-more .home-care__heading h2 { font: 900 clamp(32px, calc(var(--care-unit) * 4.3), 86px)/.98 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -.055em; } .program-services-more .home-care__heading h2 span { display: block; margin-top: .05em; color: var(--care-lime); } .program-services-more .home-care__heading h2 span::after { width: 20%; height: clamp(3px, calc(var(--care-unit) * .38), 8px); margin: var(--care-unit) auto 0; background: var(--care-lime); } .program-services-more .home-care__heading p { max-width: 78%; margin: var(--care-unit) auto 0; color: var(--care-ink); font-size: clamp(16px, calc(var(--care-unit) * 1.3), 26px); line-height: 1.23; letter-spacing: -.025em; text-align: left; text-wrap: pretty; } .program-services-more .home-care__cta { width: 100%; min-height: 48px; margin-top: calc(var(--care-unit) * 1.45); margin-inline: auto; padding: clamp(8px, calc(var(--care-unit) * .9), 18px) 16px; } .program-services-more .home-care__services { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(10px, calc(var(--care-unit) * .85), 18px); margin: 0; } .program-services-more .home-care__service { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: none; min-height: calc(var(--care-unit) * 33.5); margin: 0; overflow: hidden; border: 2px solid var(--care-teal); border-radius: var(--care-card-radius); background: var(--care-paper); box-shadow: 0 12px 18px #61542b16; text-align: center; } .program-services-more .home-care__service::after { content: none; } .program-services-more .home-care__visual { flex: 0 0 auto; width: 100%; margin: 0; } .program-services-more .home-care__photo { aspect-ratio: 1.12; outline: 0; border-radius: 0 0 30% 0 / 0 0 16% 0; } .program-services-more .home-care__photo img { object-position: center 38%; } .program-services-more .home-care__details { position: relative; flex: 1; margin-top: calc(var(--care-unit) * -1.8); padding: calc(var(--care-unit) * 1.7) max(12px, calc(var(--care-unit) * 1.25)) calc(var(--care-unit) * 2.7); border-top-left-radius: 30% 42px; background: var(--care-paper); } .program-services-more .home-care__service h3 { display: block; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: transparent; font: 900 clamp(20px, calc(var(--care-unit) * 1.95), 39px)/1.05 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -.045em; text-wrap: balance; } .program-services-more .home-care__service h3::after { content: ''; display: block; width: 24%; height: clamp(3px, calc(var(--care-unit) * .35), 7px); margin: calc(var(--care-unit) * 1.1) auto calc(var(--care-unit) * 1.3); border-radius: 8px; background: var(--care-lime); } .program-services-more .home-care__service p { max-width: none; margin: 0; color: var(--care-ink); font-size: clamp(16px, calc(var(--care-unit) * 1.28), 25.6px); line-height: 1.25; letter-spacing: -.025em; text-wrap: pretty; } @media (max-width: 1100px) { .program-services-more.home-care { padding: clamp(16px, 3svh, 28px) 4%; } .program-services-more .home-care__inner { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 40px; } .program-services-more .home-care__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 14px 28px; max-width: 880px; margin-inline: auto; padding: 0; } .program-services-more .home-care__heading h2 { grid-row: 1 / 3; font-size: clamp(36px, 4.8vw, 52px); } .program-services-more .home-care__heading p { max-width: none; margin: 0; font-size: 16px; line-height: 1.3; } .program-services-more .home-care__cta { max-width: 330px; margin-top: 0; padding-block: 8px; } .program-services-more .home-care__service { min-height: 0; } .program-services-more .home-care__photo { height: min(26vw, 28svh); aspect-ratio: auto; } .program-services-more .home-care__details { padding: 20px 14px 24px; } .program-services-more .home-care__service h3 { font-size: clamp(20px, 2.5vw, 27px); } .program-services-more .home-care__service p { font-size: 16px; line-height: 1.3; } } @media (max-width: 760px) { :is(.program-services-more, .program-additional-services).home-care { --care-lime: #bcf653; display: block; height: auto; min-height: calc(100svh - var(--nav-height)); padding: 115px 22px 44px; overflow: visible; background: #fff; scroll-margin-top: 0; } :is(.program-services-more, .family-care) .home-care__inner { display: block; width: 100%; max-width: 1800px; margin: 0 auto; text-align: left; } :is(.program-services-more, .family-care) .home-care__heading { display: block; width: 100%; max-width: none; margin: 0; padding: 0; } :is(.program-services-more, .family-care) .home-care__heading::before { content: ''; display: block; width: 74px; height: 4px; margin-bottom: 24px; border-radius: 4px; background: var(--care-lime); } :is(.program-services-more, .family-care) .home-care__heading h2 { margin: 0 0 18px; font: 900 clamp(27px, 6.9vw, 48px)/1.06 Arial, Helvetica, sans-serif; letter-spacing: -.045em; text-align: left; } :is(.program-services-more, .family-care) .home-care__heading h2 span { display: block; margin-top: 3px; color: var(--care-lime); font-size: 1.58em; letter-spacing: -.055em; overflow-wrap: anywhere; } :is(.program-services-more, .family-care) .home-care__heading h2 span::after { content: none; } :is(.program-services-more, .family-care) .home-care__heading p { max-width: none; margin: 0 0 16px; color: var(--care-teal); font-size: 18px; line-height: 1.5; letter-spacing: normal; text-align: left; text-wrap: pretty; } :is(.program-services-more, .family-care) .home-care__cta { width: 450px; max-width: 100%; min-height: 54px; margin: 12px 0 0; padding: 14px 24px; font-size: 16px; } :is(.program-services-more, .family-care) .home-care__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 32px 0 0; } .program-services-more .home-care__services { margin-top: 48px; } :is(.program-services-more, .family-care) .home-care__service { position: relative; isolation: isolate; grid-column: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; width: 100%; max-width: none; min-height: clamp(225px, 46vw, 330px); margin: 0; overflow: hidden; border: 2px solid var(--care-teal); border-radius: 15px; background: var(--care-teal); box-shadow: none; text-align: center; } :is(.program-services-more, .family-care) .home-care__service:last-child { grid-column: 1 / -1; min-height: 260px; } :is(.program-services-more, .family-care) .home-care__service::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 32%, #00485d40 48%, #00485ded 78%, #00485d 100%); pointer-events: none; } :is(.program-services-more, .family-care) .home-care__service::after { content: none; } :is(.program-services-more, .family-care) .home-care__visual { position: absolute; z-index: 0; inset: 0; grid-row: auto; width: 100%; height: 100%; margin: 0; } :is(.program-services-more, .family-care) .home-care__photo { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 0; outline: none; } :is(.program-services-more, .family-care) .home-care__photo img { object-position: center 30%; } :is(.program-services-more, .family-care) .home-care__badge { display: none; } :is(.program-services-more, .family-care) .home-care__details { position: relative; z-index: 2; flex: 0 0 auto; margin: 0; padding: 55px 12px 13px; border-radius: 0; background: transparent; } :is(.program-services-more, .family-care) .home-care__service h3 { position: relative; z-index: 2; display: block; align-self: stretch; width: 100%; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: transparent; color: #fff; font: 700 17px/1.14 Arial, Helvetica, sans-serif; letter-spacing: normal; text-wrap: balance; } .family-care .home-care__service > h3 { padding: 55px 12px 13px; } :is(.program-services-more, .family-care) .home-care__service h3 br { display: none; } :is(.program-services-more, .family-care) .home-care__service h3::after { content: ''; display: block; width: 44px; height: 3px; margin: 12px auto 0; border-radius: 4px; background: var(--care-lime); } .program-services-more .home-care__service { min-height: 320px; } .program-services-more .home-care__details { background: linear-gradient(180deg, transparent, #00485de6 55px); } .program-services-more .home-care__service p { max-width: none; margin: 12px 0 0; color: #fff; font-size: 14px; line-height: 1.4; letter-spacing: normal; } .program-services-more .home-care__service::before { background: linear-gradient(180deg, transparent 15%, #00485d75 34%, #00485df2 56%, #00485d 100%); } .program-services-more .home-care__service--cognitive { justify-content: flex-start; } .program-services-more .home-care__service--cognitive::before { content: none; } .program-services-more .home-care__service--cognitive .home-care__visual, .program-services-more .home-care__service--cognitive .home-care__photo { position: relative; inset: auto; height: auto; } .program-services-more .home-care__service--cognitive .home-care__photo { aspect-ratio: 1; } .program-services-more .home-care__service--cognitive picture { display: block; } .program-services-more .home-care__service--cognitive img { height: auto; } .program-services-more .home-care__service--cognitive .home-care__details { flex: 1; padding-top: 16px; background: var(--care-teal); } } @media (max-width: 760px) and (max-height: 700px) { :is(.program-services-more, .family-care) .home-care__cta { min-height: 48px; padding-block: 12px; } } @media (max-width: 360px) { :is(.program-services-more, .program-additional-services).home-care { padding-inline: 16px; } :is(.program-services-more, .family-care) .home-care__services { grid-template-columns: minmax(0, 1fr); } :is(.program-services-more, .family-care) .home-care__service, :is(.program-services-more, .family-care) .home-care__service:last-child { grid-column: auto; min-height: 290px; } } @media (min-width: 761px) { .family-care .home-care__inner { display: flex; flex-direction: column; } .family-care .home-care__heading { width: 100%; } .family-care .home-care__services { order: 1; width: 100%; } .family-care .home-care__cta { order: 2; align-self: center; } } @media (min-width: 761px) and (max-width: 1100px) and (max-height: 700px) { .program-services-more.home-care { padding: 16px 3%; } .program-services-more .home-care__inner { gap: 32px; } .program-services-more .home-care__heading { gap: 10px 20px; } .program-services-more .home-care__heading h2 { font-size: clamp(32px, 4.2vw, 44px); } .program-services-more .home-care__heading p { font-size: 14px; } .program-services-more .home-care__photo { height: min(24vw, 22svh); } .program-services-more .home-care__details { padding: 16px 12px 18px; } .program-services-more .home-care__service h3 { font-size: clamp(18px, 2.3vw, 24px); } .program-services-more .home-care__service p { font-size: 14px; } } @media (min-width: 1101px) and (max-height: 700px) { .program-services-more .home-care__heading p { max-width: 90%; } } @media (prefers-reduced-motion: reduce) { .program-services-more .home-care__cta { transition: none; } } .program-additional-services.home-care.family-care { --care-teal: #006880; --care-lime: #bcf653; --family-ink: #164c62; --family-unit: min(1vw, calc((100svh - var(--nav-height) - 18px) / 60), 18px); position: relative; display: grid; align-items: center; height: auto; min-height: calc(100svh - var(--nav-height) - 18px); padding: max(18px, calc(var(--family-unit) * 2)) 4.2%; overflow: visible; background: radial-gradient(ellipse at 0 70%, #e7f8fa, transparent 55%), radial-gradient(ellipse at 100% 20%, #e7f8fa80, transparent 50%), #fff; scroll-margin-top: 0; } .family-care .home-care__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(36px, 4vw, 80px); width: 100%; max-width: 1800px; margin: 0 auto; text-align: left; } .family-care__intro { min-width: 0; } .family-care .home-care__heading { display: block; width: 100%; max-width: none; margin: 0; padding: 0; } .family-care .home-care__heading::before { content: none; } .family-care .home-care__heading h2 { margin: 0 0 clamp(16px, calc(var(--family-unit) * 1.7), 28px); color: var(--care-teal); font: 900 clamp(42px, calc(var(--family-unit) * 6.8), 104px)/.98 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -.055em; text-transform: uppercase; text-align: left; } .family-care .home-care__heading h2 span { display: block; max-width: 100%; margin: 5px 0 0; padding: 0; background: transparent; color: #a9da54; font-size: .7em; letter-spacing: -.045em; overflow-wrap: normal; } .family-care .home-care__heading h2 span::after { content: none; } .family-care .home-care__heading p { max-width: 38ch; margin: 0; color: var(--family-ink); line-height: 1.38; letter-spacing: -.015em; text-wrap: pretty; } .family-care .home-care__heading strong { font-weight: 800; } .family-care .home-care__cta { display: inline-flex; order: initial; width: min(100%, calc(var(--family-unit) * 44)); max-width: 100%; min-height: 52px; gap: 14px; margin: clamp(20px, calc(var(--family-unit) * 2.5), 40px) 0 0; padding: 12px 22px; font-size: clamp(16px, calc(var(--family-unit) * 1.75), 26px); } .family-care .home-care__cta .family-care__cta-icon { display: grid; place-items: center; flex: 0 0 auto; width: clamp(30px, calc(var(--family-unit) * 3), 44px); height: clamp(30px, calc(var(--family-unit) * 3), 44px); border-radius: 50%; background: var(--care-teal); color: var(--care-lime); } .family-care__cta-icon svg { width: 60%; height: 60%; } .family-care .home-care__services { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; align-items: stretch; order: initial; gap: clamp(10px, calc(var(--family-unit) * 1.2), 20px); width: 100%; margin: 0; } .family-care__card { --family-card-bg: #006880; --family-card-text: #fff; --family-card-line: #bcf65390; position: relative; isolation: isolate; display: flex; min-width: 0; min-height: clamp(140px, calc(var(--family-unit) * 16.3), 240px); overflow: hidden; border: 1px solid #00b5d94d; border-radius: clamp(28px, calc(var(--family-unit) * 3.5), 58px); background: var(--family-card-bg); color: var(--family-card-text); } .family-care__card:nth-child(2) { --family-card-bg: #dff5fa; --family-card-text: #164c62; --family-card-line: #00688080; } .family-care__card-image { position: absolute; inset: 0 0 0 auto; width: 37%; height: 100%; object-fit: cover; object-position: 54% center; } .family-care__card-content { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(12px, calc(var(--family-unit) * 1.3), 22px); width: 74%; padding: clamp(14px, calc(var(--family-unit) * 1.5), 26px) clamp(42px, calc(var(--family-unit) * 5), 80px) clamp(14px, calc(var(--family-unit) * 1.5), 26px) clamp(16px, calc(var(--family-unit) * 1.7), 28px); border-top-right-radius: clamp(48px, calc(var(--family-unit) * 7), 112px) 100%; background: var(--family-card-bg); } .family-care__badge { display: grid; place-items: center; width: clamp(48px, calc(var(--family-unit) * 5.2), 84px); aspect-ratio: 1; border-radius: 50%; background: var(--care-lime); color: var(--family-ink); } .family-care__badge svg { width: 61%; height: 61%; } .family-care__card-copy { min-width: 0; padding-left: clamp(12px, calc(var(--family-unit) * 1.6), 26px); border-left: 1px solid var(--family-card-line); } .family-care__card h3 { margin: 0 0 9px; color: var(--family-card-text); font: 800 clamp(20px, calc(var(--family-unit) * 2.2), 34px)/1.08 Arial, Helvetica, sans-serif; letter-spacing: -.03em; text-wrap: pretty; } .family-care__card p { max-width: 27ch; margin: 0; color: var(--family-card-text); line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty; } @media (min-width: 1101px) and (max-height: 700px) { .program-additional-services.home-care.family-care { --paragraph-size: clamp(16px, 2.6svh, 18px); padding-block: 12px; } .family-care .home-care__cta { margin-top: 18px; min-height: 48px; padding-block: 9px; } } @media (max-width: 1100px) { .program-additional-services.home-care.family-care { padding: 36px 5%; } .family-care .home-care__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 800px; } .family-care .home-care__heading h2 { font-size: clamp(44px, 8vw, 72px); } .family-care .home-care__heading p { max-width: 60ch; } .family-care .home-care__cta { width: 430px; } .family-care .home-care__services { gap: 16px; } .family-care__card { min-height: 185px; } .family-care__card-content { padding-block: 20px; } .family-care__card h3 { font-size: 24px; } } @media (max-width: 600px) { .program-additional-services.home-care.family-care { padding: 32px 20px; } .family-care .home-care__heading h2 { font-size: clamp(40px, 10.8vw, 58px); } .family-care .home-care__heading h2 span { font-size: .68em; } .family-care .home-care__heading p { line-height: 1.4; } .family-care .home-care__cta { gap: 10px; padding-inline: 16px; font-size: 16px; } .family-care__card { --paragraph-size: 16px; flex-direction: column; min-height: 0; border-radius: 26px; } .family-care__card-image { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: center 30%; } .family-care__card-content { grid-template-columns: auto minmax(0, 1fr); align-content: center; justify-items: start; gap: 10px; width: 100%; padding: 18px; border-top-right-radius: 0; } .family-care__badge { width: 40px; } .family-care__card-copy { padding-left: 10px; } .family-care__card h3 { font-size: 20px; margin-bottom: 8px; } .family-care__card h3 br { display: none; } } @media (max-width: 360px) { .program-additional-services.home-care.family-care { padding-inline: 16px; } .family-care .home-care__cta { padding-inline: 12px; font-size: 15px; } .family-care .home-care__cta .family-care__cta-icon { width: 26px; height: 26px; } .family-care__card-content { padding-left: 14px; padding-right: 24px; } .family-care__card h3 { font-size: 19px; } }