/* Generado por scripts/build-css.cjs. Editar los CSS fuente. */
.page-hero.about-hero { --about-unit: min(1vw, calc((100svh - var(--nav-height)) / 65), 18px); height: auto; min-height: calc(100svh - var(--nav-height)); display: flex; align-items: flex-start; padding: clamp(16px, calc(var(--about-unit) * 1.8), 28px) max(14px, 3%); overflow: visible; background: radial-gradient(ellipse at 100% 0, #edfbdc, transparent 48%), radial-gradient(ellipse at 0 80%, #def4f7, transparent 52%), #fbfefd; color: #006880; font-family: Arial, Helvetica, sans-serif; } .about-hero__inner { width: 100%; max-width: 1800px; margin: 0 auto; flex-shrink: 0; } .about-hero__heading { text-align: center; } .about-hero .eyebrow { --paragraph-size: 13px; margin: 0 0 clamp(8px, calc(var(--about-unit) * 1.1), 16px); color: #006880; font-size: 13px; font-weight: 700; letter-spacing: .18em; line-height: 1.4; } .about-hero h1 { max-width: 1100px; margin: 0 auto clamp(16px, calc(var(--about-unit) * 1.6), 24px); font: 900 clamp(30px, calc(var(--about-unit) * 4), 66px)/1.02 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -.045em; text-transform: uppercase; } .about-hero h1 span { display: block; color: #bcf653; } .about-hero h1 span::after { content: ''; display: block; width: 100px; height: 5px; margin: clamp(10px, calc(var(--about-unit) * 1.1), 18px) auto 0; border-radius: 4px; background: #bcf653; } .about-hero__description { --paragraph-size: clamp(16px, 1.25vw, 19px); max-width: 1130px; margin: 0 auto; color: #355d6b; } .about-hero__description p { margin: 0 0 10px; line-height: 1.5; } .about-hero__description p:last-child { margin-bottom: 0; } .about-hero__description strong { color: #006880; } .about-team { --team-gap: clamp(10px, 1.15vw, 18px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--team-gap); width: 100%; margin: clamp(16px, calc(var(--about-unit) * 1.6), 24px) auto 0; padding: 0; list-style: none; } .about-team__card { display: flex; flex-direction: column; min-width: 0; text-align: center; } .about-team__portrait { display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid #cde6eb; border-radius: 18px 18px 0 0; background: linear-gradient(145deg, #e1f3f7, #edf7fa); } .about-team__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .about-team__role { display: flex; align-items: center; justify-content: center; flex: 1; margin: 0; padding: 11px 8px; border-radius: 0 0 10px 10px; background: #006880; color: #fff; font: 700 clamp(14px, 1.05vw, 17px)/1.35 Arial, Helvetica, sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; } @media (max-width: 1199px) { .about-team { grid-template-columns: repeat(4, minmax(0, 1fr)); } .about-team__portrait { aspect-ratio: 1; } .about-team__portrait img { object-position: center 30%; } } @media (min-width: 1200px) and (max-height: 700px) { .page-hero.about-hero { padding-block: 16px; } .about-hero .eyebrow { margin-bottom: 8px; } .about-hero h1 { margin-bottom: 14px; } .about-hero h1 span::after { margin-top: 8px; height: 4px; } .about-hero__description p { line-height: 1.4; } .about-team__portrait { aspect-ratio: 1; } .about-team__portrait img { object-position: center 30%; } .about-team__role { padding-block: 8px; } } @media (max-width: 760px) { .about-hero .eyebrow { --paragraph-size: 12px; letter-spacing: .1em; } .about-hero h1 { font-size: clamp(28px, 6vw, 40px); margin-bottom: 18px; } .about-hero__description p { line-height: 1.45; } .about-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-team__role { padding: 9px 6px; } .about-team__card:last-child { grid-column: 1 / -1; width: calc((100% - var(--team-gap)) / 2); justify-self: center; } } @media (min-width: 541px) and (max-width: 760px) { .about-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-team__card:last-child { grid-column: 2; width: 100%; } }