/* Generado por scripts/build-css.cjs. Editar los CSS fuente. */
.hero.hero--reference { --hero-lime: #bcf653; --hero-teal: #006880; position: relative; isolation: isolate; display: flex; align-items: center; height: calc(100vh - var(--nav-height)); height: calc(100svh - var(--nav-height)); min-height: 0; container-type: size; padding: 0; overflow: hidden; background: #007d96; color: #fff; font-family: Arial, Helvetica, sans-serif; } .hero--reference::before, .hero--reference::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero--reference::before { background: url('../Ima/inicio-conecta-vital.webp') center 72% / cover no-repeat; background-image: image-set( url('../Ima/inicio-conecta-vital.avif') type('image/avif'), url('../Ima/inicio-conecta-vital.webp') type('image/webp') ); filter: saturate(1.38) contrast(1.04); } .hero--reference::after { background: linear-gradient( 90deg, rgba(0, 107, 131, 0.97) 0%, rgba(0, 101, 124, 0.92) 23%, rgba(0, 120, 145, 0.75) 37%, rgba(0, 147, 171, 0.33) 49%, rgba(0, 155, 179, 0.06) 62%, transparent 78% ); } .hero--reference .hero-copy { width: 100%; max-width: none; max-height: 100%; overflow-y: auto; padding: min(4cqh, 44px) 0 min(4cqh, 48px) 8.15%; } .hero--reference .eyebrow { position: relative; max-width: 44%; margin: 0 0 min(3cqh, 36px); color: #fff; font-size: clamp(14px, min(1vw, 2.8cqh), 22px); font-weight: 700; line-height: 1.4; letter-spacing: 0.19em; } .hero--reference .eyebrow::before { content: ''; position: absolute; right: calc(100% + 1.2vw); top: 50%; width: 4.1vw; height: 2px; background: var(--hero-lime); } .hero--reference h1 { max-width: 46%; margin: 0 0 min(5cqh, 42px); font: 900 min(4.3vw, 11cqh, 110px)/0.98 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -0.045em; text-transform: uppercase; } .hero--reference .hero-title-line { display: block; } .hero--reference .hero-title-accent { position: relative; width: fit-content; color: var(--hero-lime); font-size: 1.12em; } .hero--reference .hero-title-accent::after { content: ''; position: absolute; left: 0; bottom: -0.22em; width: 100%; height: 0.17em; background: var(--hero-lime); -webkit-mask: var(--hero-link-brush) center / 100% 100% no-repeat; mask: var(--hero-link-brush) center / 100% 100% no-repeat; transform: rotate(-1deg); } .hero--reference .hero-copy > p:not(.eyebrow) { width: 36vw; max-width: 760px; margin: 0; color: #fff; font-size: clamp(16px, min(1.25vw, 3.2cqh), 30px); line-height: 1.38; letter-spacing: -0.025em; } .hero--reference .hero-link { width: clamp(360px, 30.5vw, 760px); max-width: 45%; min-height: clamp(54px, 12cqh, 130px); margin-top: min(3cqh, 36px); margin-left: -0.5vw; padding: min(3cqh, 22px) clamp(28px, 2.9vw, 64px); gap: 12px; color: var(--hero-teal); font: 900 clamp(17px, 1.4vw, 34px)/1.15 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -0.045em; } .hero--reference .hero-link::before { background: var(--hero-lime); } @media (max-width: 1000px) { .hero.hero--reference { align-items: flex-start; } .hero--reference::before { top: auto; height: 65%; background-image: image-set( url('../Ima/inicio-conecta-vital-mobile.avif') 1x type('image/avif'), url('../Ima/inicio-conecta-vital.avif') 2x type('image/avif'), url('../Ima/inicio-conecta-vital.webp') type('image/webp') ); background-position: right bottom; } .hero--reference::after { background: linear-gradient(180deg, #006d84 0%, #006d84 54%, rgba(0, 109, 132, 0.82) 64%, transparent 82%); } .hero--reference .hero-copy { padding: min(3cqh, 28px) 7% min(14cqh, 120px); } .hero--reference .eyebrow { max-width: 100%; margin-bottom: min(2cqh, 20px); font-size: 14px; letter-spacing: 0.13em; } .hero--reference .eyebrow::before { display: none; } .hero--reference h1 { max-width: 100%; margin-bottom: min(4cqh, 30px); font-size: min(clamp(28px, 8.6vw, 68px), 9cqh); } .hero--reference .hero-copy > p:not(.eyebrow) { width: 100%; max-width: 580px; font-size: clamp(16px, 2.5cqh, 18px); line-height: 1.38; } .hero--reference .hero-link { width: 450px; max-width: 100%; min-height: clamp(54px, 10cqh, 82px); margin: min(2cqh, 20px) 0 0; padding-inline: 30px; font-size: clamp(16px, 2.8vw, 22px); } } @media (max-width: 380px) { .hero--reference .hero-copy { padding-inline: 6%; } .hero--reference .eyebrow { font-size: 14px; letter-spacing: 0.06em; } .hero--reference .hero-link { padding-inline: 24px; } } @media (min-width: 600px) and (max-width: 1000px) and (max-height: 600px) { .hero--reference::before { height: 100%; } .hero--reference::after { background: linear-gradient(90deg, #006d84 0%, rgba(0, 109, 132, 0.94) 42%, transparent 78%); } .hero--reference .hero-copy { padding: 3cqh 5%; } .hero--reference .eyebrow, .hero--reference h1, .hero--reference .hero-copy > p:not(.eyebrow), .hero--reference .hero-link { max-width: 60%; } .hero--reference h1 { font-size: min(4.3vw, 9cqh); } } .hero--knowledge::before { background-image: url('../Ima/conocimiento-aprendizaje.webp'); background-position: center center; filter: saturate(1.05) contrast(1.02); } @media (max-width: 1000px) { .hero--knowledge::before { height: 54%; background-image: url('../Ima/conocimiento-aprendizaje-mobile.webp'); background-position: right center; } .hero--knowledge::after { background: linear-gradient(180deg, #006d84 0%, #006d84 48%, rgba(0, 109, 132, 0.85) 53%, rgba(0, 109, 132, 0.15) 63%, transparent 72%); } } @media (min-width: 600px) and (max-width: 1000px) and (max-height: 600px) { .hero--knowledge::before { height: 100%; background-size: auto 100%; background-color: #006d84; } .hero--knowledge::after { background: linear-gradient(90deg, #006d84 0%, rgba(0, 109, 132, 0.94) 42%, transparent 78%); } } .section.home-resources { --resources-teal: #006880; --resources-lime: #bcf653; --resources-unit: min(1vw, calc((100svh - var(--nav-height)) / 65), 18px); display: flex; width: 100%; max-width: none; height: auto; min-height: calc(100svh - var(--nav-height)); margin: 0; padding: calc(var(--resources-unit) * 2) 3.5%; overflow: visible; background: radial-gradient(ellipse at 0 65%, #e1f7f8, transparent 45%), radial-gradient(ellipse at 100% 10%, #effbdd, transparent 42%), #fbfefd; color: var(--resources-teal); font-family: Arial, Helvetica, sans-serif; scroll-margin-top: -18px; } .home-resources__inner { width: 100%; max-width: 1440px; margin: auto; flex-shrink: 0; text-align: center; } .home-resources__heading { max-width: 1100px; margin-inline: auto; } .home-resources .home-resources__heading h2 { margin: 0 0 clamp(28px, calc(var(--resources-unit) * 2.8), 48px); font: 900 clamp(30px, calc(var(--resources-unit) * 3.8), 64px)/1.04 Arial, Helvetica, sans-serif; letter-spacing: -.045em; } .home-resources__heading h2 span { display: block; color: var(--resources-lime); } .home-resources__heading h2::after { content: ''; display: block; width: 74px; height: 4px; margin: calc(var(--resources-unit) * 1.1) auto 0; border-radius: 4px; background: var(--resources-lime); } .home-resources__heading p { margin: 0; color: #355d6b; font-size: clamp(14px, calc(var(--resources-unit) * 1.3), 20px); line-height: 1.45; text-wrap: pretty; } .home-resources__heading .home-resources__message { max-width: 820px; margin: calc(var(--resources-unit) * 1.1) auto 0; color: var(--resources-teal); text-wrap: balance; } .home-resources__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--resources-unit) * 2); max-width: 1200px; margin: calc(var(--resources-unit) * 1.8) auto 0; } .home-resources__guides { grid-column: 1 / -1; min-width: 0; } .home-resources__guides > h3 { margin: 0 0 16px; font: 750 clamp(20px, calc(var(--resources-unit) * 2), 28px)/1.2 Arial, Helvetica, sans-serif; letter-spacing: -.025em; text-wrap: balance; } .home-resources__guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--resources-unit) * 2); } .home-resources__guides-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 0; color: var(--resources-teal); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .home-resources__guides-link:focus-visible { outline: 3px solid var(--resources-teal); outline-offset: 5px; } .home-resources__card { display: block; min-width: 0; padding: calc(var(--resources-unit) * 1.5); border: 1px solid #cce8ec; border-radius: 20px; background: #f2fafb; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } a.home-resources__card:hover { transform: translateY(-3px); border-color: var(--resources-teal); box-shadow: 0 8px 24px rgb(0 104 128 / 12%); } a.home-resources__card:focus-visible { outline: 3px solid var(--resources-teal); outline-offset: 5px; } .home-resources__card--tools { border-color: #d4e8b3; background: #f4faeb; } .home-resources__card--pending { border-style: dashed; background: #f8fcfc; } .home-resources__status { display: block; margin-top: 8px; color: #355d6b; font-size: 14px; } .home-resources__visual { display: grid; place-items: center; width: min(100%, calc(var(--resources-unit) * 11), 190px); margin: 0 auto calc(var(--resources-unit) * 1.1); aspect-ratio: 200 / 170; } .home-resources__visual svg { display: block; width: 100%; height: 100%; } .home-resources__card :is(h3, h4) { margin: 0; font: 750 clamp(17px, calc(var(--resources-unit) * 1.65), 25px)/1.2 Arial, Helvetica, sans-serif; letter-spacing: -.025em; text-wrap: balance; } .home-resources__cta.hero-link { gap: 16px; width: clamp(320px, 30.5vw, 540px); min-height: 72px; max-width: 100%; margin-top: calc(var(--resources-unit) * 1.6); padding: 20px 32px; border-radius: 0; background: transparent; color: var(--resources-teal); font: 900 clamp(17px, 1.4vw, 26px)/1.15 'Arial Black', Arial, Helvetica, sans-serif; } .home-resources__cta.hero-link::before { background: var(--resources-lime); } .home-resources__cta span { font-size: 30px; line-height: 1; } .home-resources__cta:focus-visible { outline: 3px solid var(--resources-teal); outline-offset: 5px; } @media (max-width: 760px) { .section.home-resources { height: auto; min-height: calc(100svh - var(--nav-height)); padding: 20px; overflow: visible; scroll-margin-top: -14px; } .home-resources .home-resources__heading h2 { font-size: 30px; margin-bottom: 32px; } .home-resources__heading h2::after { margin-top: 12px; } .home-resources__heading p { font-size: 14px; line-height: 1.4; } .home-resources__heading .home-resources__message { margin-top: 12px; } .home-resources__grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 12px; margin-top: 18px; } .home-resources__guides-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .home-resources__card { padding: 12px 10px 16px; border-radius: 15px; } .home-resources__card :is(h3, h4) { font-size: 16px; } .home-resources__card h3 br { display: none; } .home-resources__visual { width: 84px; margin-bottom: 10px; } .home-resources__cta.hero-link { margin-top: 18px; min-height: 64px; font-size: 16px; padding: 16px 24px; gap: 12px; } } @media (max-width: 760px) and (max-height: 700px) { .section.home-resources { padding-block: 16px; } } @media (prefers-reduced-motion: reduce) { .home-resources__card { transition: none; } } .home-resources__photo { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto 16px; border-radius: 12px; }