body.skin-comercial .institutional-commercial-page {
overflow: clip;
background: var(--jomo-bg);
}
body.skin-comercial .institutional-commercial-page > section + section {
border-top: 1px solid var(--jomo-line-soft);
} body.skin-comercial .institutional-hero {
--commercial-hero-grid-content: minmax(390px, 0.92fr);
--commercial-hero-grid-media: minmax(0, 1.08fr);
--commercial-hero-gap: clamp(48px, 6.5vw, 104px);
--commercial-hero-content-max: 690px;
--commercial-hero-title-size: var(--jomo-hero-title-size);
--commercial-hero-title-size-mobile: var(--jomo-hero-title-size-mobile);
--commercial-hero-title-measure: 18ch;
--commercial-hero-media-ratio: 16 / 9;
--commercial-hero-media-height: clamp(360px, 31vw, 500px);
}
body.skin-comercial .institutional-hero__media {
object-position: center;
}
body.skin-comercial .institutional-about,
body.skin-comercial .institutional-why,
body.skin-comercial .institutional-process,
body.skin-comercial .institutional-timeline {
padding-block: var(--jomo-space-section);
}
body.skin-comercial .institutional-about > .commercial-shell,
body.skin-comercial .institutional-why > .commercial-shell,
body.skin-comercial .institutional-process > .commercial-shell {
--commercial-shell-max: var(--jomo-shell-content);
--commercial-shell-inline-space: 60px;
} body.skin-comercial .institutional-about__grid,
body.skin-comercial .institutional-why__intro,
body.skin-comercial .institutional-process__head,
body.skin-comercial .institutional-timeline__head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
gap: clamp(38px, 5vw, 78px);
align-items: start;
}
body.skin-comercial .institutional-about__grid {
grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.74fr);
gap: clamp(38px, 4.4vw, 68px);
}
body.skin-comercial .institutional-about__title,
body.skin-comercial .institutional-why__title,
body.skin-comercial .institutional-process__title,
body.skin-comercial .institutional-timeline__title {
--commercial-title-measure: var(--jomo-title-measure-wide);
font-size: var(--jomo-type-section);
line-height: 0.96;
letter-spacing: -0.048em;
}
body.skin-comercial .institutional-about__text,
body.skin-comercial .institutional-why__text,
body.skin-comercial .institutional-process__text,
body.skin-comercial .institutional-timeline__text {
max-width: 60ch;
margin: 0;
color: var(--jomo-text-soft);
font-size: var(--jomo-type-body);
line-height: 1.68;
}
body.skin-comercial .institutional-about__content,
body.skin-comercial .institutional-process__titleBlock {
min-width: 0;
} @media (min-width: 992px) {
body.skin-comercial .institutional-about__content {
display: contents;
}
body.skin-comercial .institutional-about__intro {
grid-column: 1;
grid-row: 1;
}
body.skin-comercial .institutional-about__text {
grid-column: 2;
grid-row: 1;
align-self: start;
}
body.skin-comercial .institutional-about__cards {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
} body.skin-comercial .institutional-about__cards,
body.skin-comercial .institutional-why__grid,
body.skin-comercial .institutional-process__grid {
display: grid;
margin-top: var(--jomo-space-component);
border-top: 1px solid var(--jomo-line);
border-left: 1px solid var(--jomo-line);
}
body.skin-comercial .institutional-about__cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .institutional-why__grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
body.skin-comercial .institutional-process__grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: var(--jomo-space-component);
}
body.skin-comercial .institutional-about-card,
body.skin-comercial .institutional-why__card,
body.skin-comercial .institutional-process__item {
display: flex;
min-width: 0;
min-height: 224px;
flex-direction: column;
padding: clamp(20px, 1.65vw, 26px);
border-right: 1px solid var(--jomo-line);
border-bottom: 1px solid var(--jomo-line);
background: rgba(255, 252, 247, 0.45);
}
body.skin-comercial .institutional-process .institutional-process__item {
min-height: 250px;
}
body.skin-comercial .institutional-about-card:nth-child(even),
body.skin-comercial .institutional-why__card:nth-child(even),
body.skin-comercial .institutional-process__item:nth-child(even) {
background: rgba(231, 221, 209, 0.5);
}
body.skin-comercial .institutional-about-card__number,
body.skin-comercial .institutional-why__number,
body.skin-comercial .institutional-process__number {
color: var(--jomo-text-faint);
font-family: var(--jomo-font-ui);
font-size: 9px;
font-weight: 850;
line-height: 1;
letter-spacing: 0.14em;
}
body.skin-comercial .institutional-about-card__title,
body.skin-comercial .institutional-why__card-title,
body.skin-comercial .institutional-process__itemTitle {
margin: auto 0 12px;
padding-top: 34px;
font-family: var(--jomo-font-serif);
font-size: clamp(21px, 1.35vw, 26px);
font-weight: 400;
line-height: 1.04;
letter-spacing: -0.035em;
}
body.skin-comercial .institutional-about-card__text,
body.skin-comercial .institutional-about-card__text p,
body.skin-comercial .institutional-why__card-text,
body.skin-comercial .institutional-why__card-text p,
body.skin-comercial .institutional-process__itemText {
margin: 0;
color: var(--jomo-text-soft);
font-size: 12px;
line-height: 1.6;
} body.skin-comercial .institutional-areas .commercial-segments__grid,
body.skin-comercial .institutional-areas .commercial-segments__grid--shared {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .institutional-areas .commercial-segments__item {
min-width: 0;
}
body.skin-comercial .institutional-areas .commercial-segments__link {
height: 100%;
}
body.skin-comercial #institutional_clients .clogos__title {
--commercial-title-measure: var(--jomo-title-measure-max);
max-inline-size: min(var(--commercial-title-measure), 100%);
}
body.skin-comercial .institutional-commercial-page .commercial-clients__grid,
body.skin-comercial .institutional-clients__grid,
body.skin-comercial .institutional-logos__grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
body.skin-comercial .institutional-commercial-page .commercial-clients__item,
body.skin-comercial .institutional-clients__item,
body.skin-comercial .institutional-logo {
min-height: 102px;
}
body.skin-comercial .institutional-commercial-page .commercial-clients__item img,
body.skin-comercial .institutional-clients__item img,
body.skin-comercial .institutional-logo img {
width: auto;
max-width: 82%;
max-height: 44px;
object-fit: contain;
filter: grayscale(1);
opacity: 0.84;
}
body.skin-comercial .institutional-certifications .commercial-certifications__title {
--commercial-title-measure: var(--jomo-title-measure-wide);
}
body.skin-comercial .institutional-certifications .commercial-certifications__metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .institutional-certifications .commercial-certifications__highlights {
grid-template-columns: repeat(4, minmax(0, 1fr));
} body.skin-comercial .institutional-timeline__head {
align-items: end;
}
body.skin-comercial .institutional-timeline__carousel {
min-width: 0;
margin-top: var(--jomo-space-component);
}
body.skin-comercial .institutional-timeline__nav-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
margin-bottom: 18px;
}
body.skin-comercial .institutional-timeline__years {
display: flex;
min-width: 0;
gap: 8px;
padding: 2px 2px 7px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
}
body.skin-comercial .institutional-timeline__years::-webkit-scrollbar {
display: none;
}
body.skin-comercial .institutional-timeline__year-tab {
flex: 0 0 auto;
min-width: 62px;
min-height: 44px;
padding-inline: 13px;
border: 1px solid var(--jomo-line);
border-radius: var(--jomo-radius-sm);
background: transparent;
color: var(--jomo-text-soft);
font-family: var(--jomo-font-ui);
font-size: 10px;
font-weight: 820;
line-height: 1;
letter-spacing: 0.08em;
scroll-snap-align: center;
transition:
background-color var(--jomo-transition-fast),
border-color var(--jomo-transition-fast),
color var(--jomo-transition-fast);
}
body.skin-comercial .institutional-timeline__year-tab:hover,
body.skin-comercial .institutional-timeline__year-tab.is-active,
body.skin-comercial .institutional-timeline__year-tab[aria-selected="true"] {
border-color: var(--jomo-brand);
background: var(--jomo-brand);
color: var(--jomo-white);
}
body.skin-comercial .institutional-timeline__arrows {
display: flex;
gap: 8px;
}
body.skin-comercial .institutional-timeline__arrow {
width: 44px;
min-width: 44px;
height: 44px;
border: 1px solid var(--jomo-line-strong);
border-radius: var(--jomo-radius-sm);
background: transparent;
color: var(--jomo-text);
}
body.skin-comercial .institutional-timeline__arrow:hover:not(:disabled) {
border-color: var(--jomo-cta);
background: var(--jomo-cta);
color: var(--jomo-white);
}
body.skin-comercial .institutional-timeline__arrow:disabled,
body.skin-comercial .institutional-timeline__arrow[aria-disabled="true"] {
cursor: default;
opacity: 0.34;
}
body.skin-comercial .institutional-timeline__viewport {
min-width: 0;
overflow: hidden;
border: 1px solid var(--jomo-line);
background: var(--jomo-surface);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .institutional-timeline__track {
min-width: 0;
}
body.skin-comercial .institutional-timeline__slide {
display: grid;
grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
min-height: 430px;
background: var(--jomo-surface-strong);
}
body.skin-comercial .institutional-timeline__slide[hidden],
body.skin-comercial .institutional-timeline__slide[aria-hidden="true"] {
display: none;
}
body.skin-comercial .institutional-timeline__year {
grid-column: 1 / -1;
grid-row: 1;
display: flex;
align-items: center;
min-height: 92px;
padding: 20px clamp(24px, 3vw, 40px);
border-bottom: 1px solid var(--jomo-line);
color: var(--jomo-brand);
font-family: var(--jomo-font-serif);
font-size: clamp(44px, 4vw, 64px);
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.055em;
writing-mode: horizontal-tb;
transform: none;
}
body.skin-comercial .institutional-timeline__media {
grid-column: 1;
grid-row: 2;
min-width: 0;
min-height: 0;
margin: 0;
overflow: hidden;
border-right: 1px solid var(--jomo-line);
background: var(--jomo-panel-soft);
}
body.skin-comercial .institutional-timeline__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body.skin-comercial .institutional-timeline__body {
grid-column: 2;
grid-row: 2;
align-self: center;
padding: clamp(32px, 5vw, 72px);
}
body.skin-comercial .institutional-timeline__item-title {
max-width: 20ch;
margin: 0 0 18px;
font-family: var(--jomo-font-serif);
font-size: clamp(30px, 2.6vw, 44px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.04em;
}
body.skin-comercial .institutional-timeline__item-text {
max-width: 56ch;
margin: 0;
color: var(--jomo-text-soft);
font-size: var(--jomo-type-body);
line-height: 1.68;
} @media (min-width: 1180px) and (max-width: 1399px) {
body.skin-comercial .institutional-why__grid,
body.skin-comercial .institutional-process__grid {
grid-auto-rows: 1fr;
}
body.skin-comercial .institutional-why__card,
body.skin-comercial .institutional-process__item {
min-height: 238px;
padding: 20px 15px;
}
body.skin-comercial .institutional-why__card-title,
body.skin-comercial .institutional-process__itemTitle {
padding-top: 22px;
font-size: 20px;
overflow-wrap: normal;
hyphens: manual;
}
body.skin-comercial .institutional-why__card-text,
body.skin-comercial .institutional-why__card-text p,
body.skin-comercial .institutional-process__itemText {
font-size: 12px;
line-height: 1.58;
}
body.skin-comercial .institutional-certifications .commercial-certifications__highlight {
padding: 22px 20px;
}
body.skin-comercial .institutional-certifications .commercial-certifications__highlight-title {
font-size: 14.5px;
}
body.skin-comercial .institutional-certifications .commercial-certifications__highlight-text {
font-size: 12px;
line-height: 1.52;
}
}
@media (max-width: 1179px) {
body.skin-comercial .institutional-about__grid,
body.skin-comercial .institutional-why__intro,
body.skin-comercial .institutional-process__head,
body.skin-comercial .institutional-timeline__head {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
gap: 42px;
}
body.skin-comercial .institutional-why__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-comercial .institutional-process__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .institutional-areas .commercial-segments__grid,
body.skin-comercial .institutional-areas .commercial-segments__grid--shared {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-comercial .institutional-timeline__slide {
grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1fr);
min-height: 390px;
}
}
@media (max-width: 767px) {
body.skin-comercial .institutional-about,
body.skin-comercial .institutional-why,
body.skin-comercial .institutional-process,
body.skin-comercial .institutional-timeline {
padding-block: var(--jomo-space-section-compact);
}
body.skin-comercial .institutional-about__grid,
body.skin-comercial .institutional-why__intro,
body.skin-comercial .institutional-process__head,
body.skin-comercial .institutional-timeline__head {
grid-template-columns: 1fr;
gap: 22px;
}
body.skin-comercial .institutional-about__title,
body.skin-comercial .institutional-why__title,
body.skin-comercial .institutional-process__title,
body.skin-comercial .institutional-timeline__title {
--commercial-title-measure: 100%;
font-size: clamp(34px, 10.6vw, 44px);
}
body.skin-comercial .institutional-about__cards,
body.skin-comercial .institutional-why__grid,
body.skin-comercial .institutional-process__grid,
body.skin-comercial .institutional-areas .commercial-segments__grid,
body.skin-comercial .institutional-areas .commercial-segments__grid--shared {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: min(84vw, 320px);
gap: var(--jomo-rail-gap);
margin-inline: calc(var(--jomo-gutter) * -1);
padding: 0 var(--jomo-gutter) 12px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
border: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
body.skin-comercial .institutional-about__cards::-webkit-scrollbar,
body.skin-comercial .institutional-why__grid::-webkit-scrollbar,
body.skin-comercial .institutional-process__grid::-webkit-scrollbar,
body.skin-comercial .institutional-areas .commercial-segments__grid::-webkit-scrollbar,
body.skin-comercial .institutional-areas .commercial-segments__grid--shared::-webkit-scrollbar,
body.skin-comercial .institutional-certifications .commercial-certifications__highlights::-webkit-scrollbar {
display: none;
}
body.skin-comercial .institutional-about-card,
body.skin-comercial .institutional-why__card,
body.skin-comercial .institutional-process__item,
body.skin-comercial .institutional-areas .commercial-segments__item {
min-height: 210px;
border: 1px solid var(--jomo-line);
scroll-snap-align: start;
}
body.skin-comercial .institutional-about-card__title,
body.skin-comercial .institutional-why__card-title,
body.skin-comercial .institutional-process__itemTitle {
font-size: 25px;
}
body.skin-comercial .institutional-commercial-page .commercial-clients__grid,
body.skin-comercial .institutional-clients__grid,
body.skin-comercial .institutional-logos__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .institutional-commercial-page .commercial-clients__item,
body.skin-comercial .institutional-clients__item,
body.skin-comercial .institutional-logo {
min-height: 72px;
padding: 9px;
}
body.skin-comercial .institutional-commercial-page .commercial-clients__item img,
body.skin-comercial .institutional-clients__item img,
body.skin-comercial .institutional-logo img {
max-width: 90%;
max-height: 30px;
}
body.skin-comercial .institutional-certifications .commercial-certifications__highlights {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: min(82vw, 310px);
gap: var(--jomo-rail-gap);
padding-bottom: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
border: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
body.skin-comercial .institutional-certifications .commercial-certifications__highlight {
border: 1px solid var(--jomo-line);
scroll-snap-align: start;
}
body.skin-comercial .institutional-certifications .commercial-certifications__metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .institutional-timeline__carousel {
margin-top: var(--jomo-space-component-compact);
}
body.skin-comercial .institutional-timeline__nav-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
margin-bottom: 12px;
}
body.skin-comercial .institutional-timeline__year-tab {
min-width: 58px;
min-height: 44px;
}
body.skin-comercial .institutional-timeline__arrows {
gap: 6px;
}
body.skin-comercial .institutional-timeline__arrow {
width: 42px;
min-width: 42px;
height: 42px;
}
body.skin-comercial .institutional-timeline__slide {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
min-height: 0;
}
body.skin-comercial .institutional-timeline__year {
grid-column: 1;
grid-row: 1;
min-height: 76px;
padding: 18px 20px;
font-size: 46px;
}
body.skin-comercial .institutional-timeline__media {
grid-column: 1;
grid-row: 2;
aspect-ratio: 16 / 10;
border-right: 0;
border-bottom: 1px solid var(--jomo-line);
}
body.skin-comercial .institutional-timeline__body {
grid-column: 1;
grid-row: 3;
padding: 24px 22px 28px;
}
body.skin-comercial .institutional-timeline__item-title {
margin-bottom: 12px;
font-size: clamp(30px, 9.5vw, 38px);
}
}
@media (max-width: 359px) {
body.skin-comercial .institutional-commercial-page .commercial-clients__grid,
body.skin-comercial .institutional-clients__grid,
body.skin-comercial .institutional-logos__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-comercial .institutional-timeline__nav-row {
grid-template-columns: 1fr;
}
body.skin-comercial .institutional-timeline__arrows {
justify-content: flex-end;
}
}
@media (prefers-reduced-motion: reduce) {
body.skin-comercial .institutional-commercial-page *,
body.skin-comercial .institutional-commercial-page *::before,
body.skin-comercial .institutional-commercial-page *::after {
scroll-behavior: auto;
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
}