:root {
--jomo-font-serif: "Instrument Serif", Georgia, serif;
--jomo-font-ui: "Manrope", Arial, sans-serif;
--jomo-font-body: "Manrope", Arial, sans-serif; --commercial-font-title: var(--jomo-font-serif);
--commercial-font-ui: var(--jomo-font-ui);
--commercial-font-body: var(--jomo-font-body);
--jomo-bg: #f3eee7;
--jomo-bg-alt: #ece4da;
--jomo-panel: #e7ddd1;
--jomo-panel-soft: #f7f2eb;
--jomo-surface: rgba(255, 252, 247, 0.68);
--jomo-surface-strong: #fffaf4;
--jomo-product-media-bg: #fff;
--jomo-text: #171411;
--jomo-muted: #544d46;
--jomo-muted-soft: #5a524a;
--jomo-brand: #006b3f;
--jomo-cta: #44524c;
--jomo-cta-hover: #35423d;
--jomo-focus: #006b3f;
--jomo-white: #fff;
--jomo-line: rgba(23, 20, 17, 0.12);
--jomo-line-soft: rgba(23, 20, 17, 0.08);
--jomo-line-strong: rgba(23, 20, 17, 0.22); --jomo-shell-wide: 1680px;
--jomo-shell-content: 1540px;
--jomo-shell-readable: 1180px; --jomo-type-hero: clamp(48px, 4vw, 64px);
--jomo-type-section: clamp(34px, 2.8vw, 48px);
--jomo-type-body: clamp(14px, 0.82vw, 16px);
--jomo-type-lead: clamp(16px, 0.95vw, 18px);
--jomo-type-card-title: clamp(15px, 0.9vw, 18px);
--jomo-type-card-body: 13px; --jomo-title-measure-display: 16ch;
--jomo-title-measure-compact: 19ch;
--jomo-title-measure-default: 24ch;
--jomo-title-measure-wide: 30ch;
--jomo-title-measure-max: 34ch;
--jomo-measure-hero: 19ch;
--jomo-social-icon-size: 16px; --jomo-hero-grid-content: minmax(360px, 0.9fr);
--jomo-hero-grid-media: minmax(0, 1.1fr);
--jomo-hero-gap: clamp(48px, 6.5vw, 104px);
--jomo-hero-content-max: 680px;
--jomo-hero-title-size: clamp(46px, 3.55vw, 60px);
--jomo-hero-title-size-mobile: clamp(36px, 9.8vw, 44px);
--jomo-hero-title-measure: 17ch;
--jomo-hero-media-ratio: 16 / 10;
--jomo-hero-media-height: clamp(360px, 31vw, 500px);
--jomo-gutter: clamp(20px, 3vw, 48px);
--jomo-gutter-double: clamp(40px, 6vw, 96px);
--jomo-space-section: clamp(68px, 6vw, 104px);
--jomo-space-section-compact: clamp(52px, 4.5vw, 76px);
--jomo-space-section-tight: clamp(40px, 3.5vw, 60px);
--jomo-space-intro: clamp(34px, 4vw, 62px);
--jomo-space-component: clamp(30px, 3vw, 40px);
--jomo-space-component-compact: clamp(22px, 2.25vw, 30px);
--jomo-radius-sm: 2px;
--jomo-touch-target: 44px;
--jomo-rail-gap: 12px;
--jomo-rail-card-mobile: minmax(272px, 84vw);
--jomo-shadow-sm: 0 14px 36px rgba(23, 20, 17, 0.05);
--jomo-shadow-md: 0 24px 62px rgba(23, 20, 17, 0.075); --jomo-action: var(--jomo-cta);
--jomo-action-hover: var(--jomo-cta-hover);
--jomo-action-active: #29332f;
--jomo-action-text: var(--jomo-white);
--jomo-green: var(--jomo-brand);
--jomo-text-soft: var(--jomo-muted);
--jomo-text-faint: var(--jomo-muted-soft);
--jomo-panel-strong: var(--jomo-panel);
--jomo-section-space: var(--jomo-space-section);
--jomo-shell-gutter: var(--jomo-gutter);
--jomo-shell-product: var(--jomo-shell-content);
--jomo-shadow-xs: 0 8px 24px rgba(23, 20, 17, 0.045);
--jomo-transition-fast: 150ms ease;
--jomo-transition-base: 220ms ease;
--jomo-focus-ring: rgba(0, 107, 63, 0.28);
--jomo-error: #8f2b23;
--jomo-success: #006b45;
--jomo-variant-swatch: 44px;
--swatch: var(--jomo-variant-swatch);
--jomo-admin-bar-height: 0px; --jomo-commercial-header-layout-height: 122px;
--jomo-commercial-header-height: var(--jomo-commercial-header-layout-height);
--jomo-sticky-offset: calc(
var(--jomo-commercial-header-layout-height) + var(--jomo-admin-bar-height)
); --commercial-color-bg: var(--jomo-bg);
}
body.admin-bar {
--jomo-admin-bar-height: 32px;
}
@media (max-width: 782px) {
body.admin-bar {
--jomo-admin-bar-height: 46px;
}
} html,
body.skin-comercial {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--jomo-commercial-header-layout-height) + 20px);
}
body.skin-comercial {
margin: 0;
padding-top: var(--jomo-commercial-header-layout-height);
background: var(--jomo-bg);
color: var(--jomo-text);
font-family: var(--jomo-font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-synthesis: none;
}
body.skin-comercial *,
body.skin-comercial *::before,
body.skin-comercial *::after {
box-sizing: border-box;
}
body.skin-comercial img,
body.skin-comercial picture,
body.skin-comercial video,
body.skin-comercial svg {
max-width: 100%;
}
body.skin-comercial img,
body.skin-comercial video {
height: auto;
}
body.skin-comercial a,
body.skin-comercial a:visited {
color: inherit;
text-decoration: none;
}
body.skin-comercial button,
body.skin-comercial input,
body.skin-comercial select,
body.skin-comercial textarea {
font: inherit;
}
body.skin-comercial button {
cursor: pointer;
}
body.skin-comercial [hidden] {
display: none;
}
body.skin-comercial :focus-visible {
outline: 3px solid var(--jomo-focus);
outline-offset: 3px;
}
body.skin-comercial ::selection {
background: rgba(0, 107, 63, 0.18);
color: var(--jomo-text);
}
body.skin-comercial .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.skin-comercial .skip-link:focus {
position: fixed;
top: calc(var(--jomo-admin-bar-height) + 8px);
left: 8px;
z-index: 100100;
width: auto;
height: auto;
padding: 12px 16px;
clip: auto;
background: var(--jomo-white);
color: var(--jomo-text);
} body.skin-comercial .d-none,
body.skin-comercial .d-lg-grid {
display: none;
}
body.skin-comercial .d-lg-none {
display: block;
}
body.skin-comercial .commercial-shell {
--commercial-shell-max: var(--jomo-shell-wide);
--commercial-shell-inline-space: 48px;
width: min(
calc(100% - var(--commercial-shell-inline-space)),
var(--commercial-shell-max)
);
margin-inline: auto;
}
body.skin-comercial .commercial-shell--content,
body.skin-comercial .commercial-shell--editorial {
--commercial-shell-max: var(--jomo-shell-content);
--commercial-shell-inline-space: 60px;
}
body.skin-comercial .commercial-shell--readable {
--commercial-shell-max: var(--jomo-shell-readable);
--commercial-shell-inline-space: 60px;
}
body.skin-comercial .commercial-layout {
min-width: 0;
}
body.skin-comercial .commercial-stack-lg {
gap: clamp(28px, 4vw, 56px);
}
body.skin-comercial .commercial-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
}
body.skin-comercial .commercial-section,
body.skin-comercial .commercial-defer-render,
body.skin-comercial .jomo-newsletter,
body.skin-comercial .commercial-prefooter,
body.skin-comercial .commercial-footer {
min-width: 0;
background: var(--jomo-bg);
}
@supports (content-visibility: auto) {
body.skin-comercial .commercial-defer-render {
content-visibility: auto;
contain: layout style;
contain-intrinsic-size: auto 900px;
}
}
body.skin-comercial .commercial-section--spaced,
body.skin-comercial .commercial-section--mobile-spaced {
padding-block: var(--jomo-space-section);
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-section--compact {
padding-block: var(--jomo-space-section-compact);
}
body.skin-comercial .commercial-section--tight {
padding-block: var(--jomo-space-section-tight);
}
body.skin-comercial .commercial-grid-two-mobile,
body.skin-comercial .commercial-grid-two-tablet {
min-width: 0;
} body.skin-comercial .commercial-eyebrow,
body.skin-comercial .commercial-kicker {
display: block;
margin: 0 0 15px;
color: var(--jomo-muted);
font-family: var(--jomo-font-ui);
font-size: 10px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.2em;
text-transform: uppercase;
}
body.skin-comercial .commercial-title,
body.skin-comercial .commercial-title--section,
body.skin-comercial .commercial-title--hero {
max-inline-size: min(var(--commercial-title-measure, 100%), 100%);
margin: 0;
color: var(--jomo-text);
font-family: var(--jomo-font-serif);
font-weight: 400;
text-wrap: balance;
}
body.skin-comercial .commercial-title--measure-display {
--commercial-title-measure: var(--jomo-title-measure-display);
}
body.skin-comercial .commercial-title--measure-compact {
--commercial-title-measure: var(--jomo-title-measure-compact);
}
body.skin-comercial .commercial-title--measure-default {
--commercial-title-measure: var(--jomo-title-measure-default);
}
body.skin-comercial .commercial-title--measure-wide {
--commercial-title-measure: var(--jomo-title-measure-wide);
}
body.skin-comercial .commercial-title--measure-max {
--commercial-title-measure: var(--jomo-title-measure-max);
}
body.skin-comercial .commercial-title--section {
--commercial-title-measure: var(--jomo-title-measure-default);
font-size: var(--jomo-type-section);
line-height: 0.94;
letter-spacing: -0.052em;
}
body.skin-comercial .commercial-hero__title,
body.skin-comercial .commercial-title--hero {
width: 100%;
max-width: min(var(--commercial-hero-title-measure, var(--jomo-hero-title-measure)), 100%);
font-size: var(--commercial-hero-title-size, var(--jomo-hero-title-size));
line-height: 0.92;
letter-spacing: -0.058em;
}
body.skin-comercial .commercial-copy {
color: var(--jomo-muted);
font-family: var(--jomo-font-body);
font-size: var(--jomo-type-body);
font-weight: 500;
line-height: 1.72;
letter-spacing: -0.006em;
}
body.skin-comercial .commercial-copy--lead {
font-size: var(--jomo-type-lead);
line-height: 1.68;
}
body.skin-comercial .commercial-copy--small {
font-size: 13px;
}
body.skin-comercial .commercial-copy--medium,
body.skin-comercial .commercial-copy--narrow {
max-width: 54ch;
}
body.skin-comercial .commercial-copy p,
body.skin-comercial .commercial-copy ul,
body.skin-comercial .commercial-copy ol {
margin-top: 0;
}
body.skin-comercial .commercial-copy p:last-child,
body.skin-comercial .commercial-copy ul:last-child,
body.skin-comercial .commercial-copy ol:last-child {
margin-bottom: 0;
}
body.skin-comercial .commercial-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
}
body.skin-comercial .commercial-intro--compact-mobile {
display: grid;
grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.72fr);
gap: clamp(44px, 7vw, 112px);
align-items: end;
margin-bottom: var(--jomo-space-intro);
}
body.skin-comercial .commercial-intro--compact-mobile > * {
min-width: 0;
} body.skin-comercial .commercial-button,
body.skin-comercial .commercial-link,
body.skin-comercial .commercial-header__cta,
body.skin-comercial .commercial-mobile-menu__cta,
body.skin-comercial .commercial-footer__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 46px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: var(--jomo-radius-sm);
font-family: var(--jomo-font-ui);
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.145em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
body.skin-comercial .commercial-button--primary,
body.skin-comercial .commercial-link--primary,
body.skin-comercial .commercial-header__cta,
body.skin-comercial .commercial-mobile-menu__cta,
body.skin-comercial .commercial-footer__cta,
body.skin-comercial .commercial-link--segments-cta {
border-color: var(--jomo-cta);
background: var(--jomo-cta);
color: var(--jomo-white);
box-shadow: 0 9px 24px rgba(68, 82, 76, 0.13);
}
body.skin-comercial .commercial-button--primary:hover,
body.skin-comercial .commercial-link--primary:hover,
body.skin-comercial .commercial-header__cta:hover,
body.skin-comercial .commercial-mobile-menu__cta:hover,
body.skin-comercial .commercial-footer__cta:hover,
body.skin-comercial .commercial-link--segments-cta:hover {
border-color: var(--jomo-cta-hover);
background: var(--jomo-cta-hover);
color: var(--jomo-white);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(68, 82, 76, 0.17);
}
body.skin-comercial a.commercial-button--primary:visited,
body.skin-comercial a.commercial-header__cta:visited,
body.skin-comercial a.commercial-mobile-menu__cta:visited,
body.skin-comercial a.commercial-footer__cta:visited,
body.skin-comercial a.commercial-link--segments-cta:visited {
color: var(--jomo-white);
}
body.skin-comercial .commercial-button--secondary {
border-color: var(--jomo-line-strong);
background: transparent;
color: var(--jomo-text);
}
body.skin-comercial .commercial-button--secondary:hover {
border-color: var(--jomo-cta);
color: var(--jomo-cta);
}
body.skin-comercial .commercial-text-link,
body.skin-comercial .commercial-link--inline,
body.skin-comercial .commercial-link--featured-inline,
body.skin-comercial .commercial-link--trust,
body.skin-comercial .commercial-link--process,
body.skin-comercial .commercial-link--video,
body.skin-comercial .commercial-link--segments,
body.skin-comercial .commercial-link--featured-products,
body.skin-comercial .commercial-link--prefooter,
body.skin-comercial .commercial-header__reference-cta,
body.skin-comercial .commercial-mobile-menu__reference-cta {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 28px;
padding: 0 0 3px;
border: 0;
border-bottom: 1px solid rgba(23, 20, 17, 0.34);
background: transparent;
color: var(--jomo-text);
font-family: var(--jomo-font-ui);
font-size: 9px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.15em;
text-transform: uppercase;
transition:
border-color 0.2s ease,
color 0.2s ease;
}
body.skin-comercial .commercial-text-link:hover,
body.skin-comercial .commercial-link--inline:hover,
body.skin-comercial .commercial-link--featured-inline:hover,
body.skin-comercial .commercial-link--trust:hover,
body.skin-comercial .commercial-link--process:hover,
body.skin-comercial .commercial-link--video:hover,
body.skin-comercial .commercial-link--segments:hover,
body.skin-comercial .commercial-link--featured-products:hover,
body.skin-comercial .commercial-link--prefooter:hover,
body.skin-comercial .commercial-header__reference-cta:hover,
body.skin-comercial .commercial-mobile-menu__reference-cta:hover {
border-bottom-color: var(--jomo-cta);
color: var(--jomo-cta);
}
body.skin-comercial .commercial-icon-button,
body.skin-comercial .jomo-quote-icon-btn {
position: relative;
display: inline-grid;
place-items: center;
width: var(--jomo-touch-target);
height: var(--jomo-touch-target);
padding: 0;
border: 1px solid var(--jomo-line);
border-radius: 0;
background: rgba(255, 252, 247, 0.7);
color: var(--jomo-text);
}
body.skin-comercial .commercial-icon-button:hover,
body.skin-comercial .jomo-quote-icon-btn:hover {
border-color: var(--jomo-cta);
color: var(--jomo-cta);
}
body.skin-comercial .jomo-quote-badge {
position: absolute;
top: -5px;
right: -5px;
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--jomo-brand);
color: var(--jomo-white);
font-size: 9px;
font-weight: 800;
box-shadow: 0 0 0 3px var(--jomo-bg);
} body.skin-comercial input[type="text"],
body.skin-comercial input[type="search"],
body.skin-comercial input[type="email"],
body.skin-comercial input[type="tel"],
body.skin-comercial input[type="url"],
body.skin-comercial input[type="password"],
body.skin-comercial select,
body.skin-comercial textarea {
width: 100%;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--jomo-line);
border-radius: 0;
background: rgba(255, 255, 255, 0.76);
color: var(--jomo-text);
font-family: var(--jomo-font-ui);
font-size: 13px;
line-height: 1.25;
box-shadow: none;
}
body.skin-comercial textarea {
min-height: 124px;
padding-block: 12px;
resize: vertical;
}
body.skin-comercial input::placeholder,
body.skin-comercial textarea::placeholder {
color: var(--jomo-muted);
}
body.skin-comercial input:focus,
body.skin-comercial select:focus,
body.skin-comercial textarea:focus {
border-color: rgba(68, 82, 76, 0.66);
} body.skin-comercial .header,
body.skin-comercial .header--commercial,
body.skin-comercial #site-header.header--commercial {
height: auto;
min-height: 0;
max-height: none;
}
body.skin-comercial .header--commercial,
body.skin-comercial #site-header.header--commercial {
position: fixed;
top: var(--jomo-admin-bar-height);
right: 0;
left: 0;
z-index: 99990;
width: 100%;
overflow: visible;
border-bottom: 1px solid var(--jomo-line);
background: rgba(243, 238, 231, 0.97);
backdrop-filter: blur(16px);
transform: none;
}
body.skin-comercial .header--commercial.is-hidden,
body.skin-comercial .header--commercial.is-scrolled,
body.skin-comercial .header--commercial.is-fixed {
transform: none;
}
body.skin-comercial .commercial-header,
body.skin-comercial .commercial-header__main {
position: relative;
overflow: visible;
}
body.skin-comercial .commercial-header__main {
min-height: var(--jomo-commercial-header-layout-height);
padding-block: 12px;
}
body.skin-comercial .commercial-header__desktop {
display: none;
}
body.skin-comercial .commercial-header__row--mobile {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
width: 100%;
}
body.skin-comercial .commercial-header__mobile-brand,
body.skin-comercial .commercial-header__logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
}
body.skin-comercial
.commercial-header__mobile-brand
.commercial-header__logo-link {
justify-content: flex-start;
}
body.skin-comercial .commercial-header__logo-img {
display: block;
width: auto;
height: auto;
max-height: 44px;
}
body.skin-comercial .commercial-header__logo-text {
color: var(--jomo-brand);
font-family: var(--jomo-font-ui);
font-size: 38px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
}
body.skin-comercial .header__mobile-actions {
display: flex;
align-items: center;
gap: 8px;
}
body.skin-comercial .header__button-menu {
position: relative;
}
body.skin-comercial .header__button-menu > span {
position: relative;
display: block;
width: 18px;
height: 1px;
background: currentColor;
transition: background-color 0.18s ease;
}
body.skin-comercial .header__button-menu > span::before,
body.skin-comercial .header__button-menu > span::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 18px;
height: 1px;
background: currentColor;
content: "";
transition: transform 0.18s ease;
}
body.skin-comercial .header__button-menu > span::before {
transform: translateY(-6px);
}
body.skin-comercial .header__button-menu > span::after {
transform: translateY(6px);
}
body.skin-comercial .header__button-menu.is-active > span {
background: transparent;
}
body.skin-comercial .header__button-menu.is-active > span::before {
transform: rotate(45deg);
}
body.skin-comercial .header__button-menu.is-active > span::after {
transform: rotate(-45deg);
}
body.skin-comercial #header-mobile-search[hidden],
body.skin-comercial.has-commercial-menu-open #header-mobile-search,
body.has-commercial-menu-open #header-mobile-search {
display: none;
}
body.skin-comercial #header-mobile-search {
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 40;
width: 100%;
padding: 12px var(--jomo-gutter) 14px;
border-bottom: 1px solid var(--jomo-line);
background: var(--jomo-bg);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .jomo-search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
min-width: 0;
overflow: hidden;
border: 1px solid var(--jomo-line-strong);
background: rgba(255, 255, 255, 0.76);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.skin-comercial .jomo-search-form:focus-within {
border-color: var(--jomo-cta);
box-shadow: inset 0 0 0 1px var(--jomo-cta);
}
body.skin-comercial .jomo-search-form input[type="search"],
body.skin-comercial .jomo-search-form input[type="text"] {
min-width: 0;
height: 44px;
min-height: 44px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: 0;
}
body.skin-comercial .jomo-search-form input[type="search"]:focus-visible,
body.skin-comercial .jomo-search-form input[type="text"]:focus-visible,
body.skin-comercial .jomo-search-form button:focus-visible {
outline: 0;
}
body.skin-comercial .jomo-search-form button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 44px;
padding: 0 14px;
border: 0;
border-left: 1px solid var(--jomo-cta);
border-radius: 0;
background: var(--jomo-cta);
color: var(--jomo-white);
font-family: var(--jomo-font-ui);
font-size: 9px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.13em;
text-transform: uppercase;
}
body.skin-comercial .jomo-search-form button:hover {
background: var(--jomo-cta-hover);
}
body.skin-comercial #commercial-mobile-menu {
position: absolute;
top: 100%;
right: 0;
bottom: auto;
left: 0;
z-index: 99980;
display: none;
width: 100%;
min-height: 0;
height: calc(
100dvh - var(--jomo-admin-bar-height) - var(--jomo-commercial-header-layout-height)
);
max-height: calc(
100dvh - var(--jomo-admin-bar-height) - var(--jomo-commercial-header-layout-height)
);
overflow: hidden;
overscroll-behavior: none;
border-top: 1px solid var(--jomo-line);
background: var(--jomo-bg);
box-shadow: 0 24px 60px rgba(23, 20, 17, 0.12);
opacity: 0;
visibility: hidden;
pointer-events: none;
isolation: isolate;
transform: translateY(-6px);
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
}
body.skin-comercial #commercial-mobile-menu[hidden],
body.skin-comercial .commercial-mobile-menu__section-panel[hidden],
body.skin-comercial .commercial-footer__nav-panel[hidden] {
display: none;
}
body.skin-comercial #commercial-mobile-menu.is-open:not([hidden]) {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
body.skin-comercial #commercial-mobile-menu.has-expanded-section {
height: calc(
100dvh - var(--jomo-admin-bar-height) - var(--jomo-commercial-header-layout-height)
);
}
body.skin-comercial .commercial-mobile-menu__inner {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 12px;
width: min(100%, 680px);
height: 100%;
min-height: 0;
max-height: none;
margin-inline: auto;
padding:
18px
max(var(--jomo-gutter), env(safe-area-inset-right))
0
max(var(--jomo-gutter), env(safe-area-inset-left));
overflow: hidden;
overscroll-behavior: none;
background: var(--jomo-bg);
}
body.skin-comercial .commercial-mobile-menu__inner::-webkit-scrollbar {
display: none;
}
body.skin-comercial .commercial-mobile-menu__navigation {
grid-row: 3;
min-height: 0;
max-height: none;
padding-bottom: 8px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
body.skin-comercial .commercial-mobile-menu__navigation::-webkit-scrollbar {
display: none;
}
body.skin-comercial .commercial-mobile-menu__actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
body.skin-comercial .commercial-mobile-menu__reference-cta {
justify-content: center;
min-height: 46px;
padding-inline: 16px;
border: 1px solid var(--jomo-line-strong);
border-radius: var(--jomo-radius-sm);
}
body.skin-comercial .commercial-mobile-menu__reference-cta:hover {
border-color: var(--jomo-cta);
}
body.skin-comercial .commercial-mobile-menu__langs {
display: flex;
align-items: center;
gap: 10px;
padding-block: 10px;
border-block: 1px solid var(--jomo-line);
font-family: var(--jomo-font-ui);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.09em;
}
body.skin-comercial .commercial-mobile-menu__lang-current {
color: var(--jomo-brand);
}
body.skin-comercial .commercial-mobile-menu__lang-options {
display: flex;
gap: 8px;
}
body.skin-comercial .commercial-mobile-menu__lang-options a {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
border: 1px solid var(--jomo-line);
background: var(--jomo-surface-strong);
}
body.skin-comercial .commercial-mobile-menu__list,
body.skin-comercial .commercial-header__institutional-list,
body.skin-comercial .commercial-header__segments-list,
body.skin-comercial .commercial-header__lang-list {
margin: 0;
padding: 0;
list-style: none;
}
body.skin-comercial .commercial-mobile-menu__section {
border-bottom: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-mobile-menu__section-title {
margin: 0;
}
body.skin-comercial .commercial-mobile-menu__section-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 48px;
padding: 0;
border: 0;
background: transparent;
color: var(--jomo-text);
font-family: var(--jomo-font-ui);
font-size: 11px;
font-weight: 850;
line-height: 1.2;
letter-spacing: 0.14em;
text-align: left;
text-transform: uppercase;
}
body.skin-comercial .commercial-mobile-menu__section-icon {
position: relative;
flex: 0 0 14px;
width: 14px;
height: 14px;
}
body.skin-comercial .commercial-mobile-menu__section-icon::before,
body.skin-comercial .commercial-mobile-menu__section-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 1px;
background: currentColor;
content: "";
transform: translate(-50%, -50%);
}
body.skin-comercial
.commercial-mobile-menu__section-toggle[aria-expanded="false"]
.commercial-mobile-menu__section-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
body.skin-comercial .commercial-mobile-menu__section-panel {
padding-bottom: 14px;
}
body.skin-comercial .commercial-mobile-menu__list {
display: grid;
gap: 0;
}
body.skin-comercial .commercial-mobile-menu__list a {
position: relative;
display: flex;
align-items: center;
min-height: 46px;
padding: 10px 18px 10px 0;
border-bottom: 1px solid var(--jomo-line-soft);
font-family: var(--jomo-font-ui);
font-size: 14px;
font-weight: 650;
line-height: 1.35;
}
body.skin-comercial .commercial-mobile-menu__list a[aria-current="page"] {
color: var(--jomo-brand);
font-weight: 820;
}
body.skin-comercial .commercial-mobile-menu__list a[aria-current="page"]::after {
position: absolute;
top: 50%;
right: 2px;
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--jomo-brand);
content: "";
transform: translateY(-50%);
}
body.skin-comercial .commercial-mobile-menu__list--segments a {
font-weight: 780;
}
body.skin-comercial .commercial-mobile-menu__footer,
body.skin-comercial .commercial-header__social,
body.skin-comercial .commercial-footer__social {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
body.skin-comercial .commercial-mobile-menu__footer {
grid-row: 4;
position: relative;
z-index: 2;
flex: 0 0 auto;
flex-wrap: nowrap;
justify-content: center;
min-height: 62px;
margin-top: 0;
padding-block: 8px max(12px, env(safe-area-inset-bottom));
border-top: 1px solid var(--jomo-line);
background: var(--jomo-bg);
}
body.skin-comercial .commercial-mobile-menu__footer a,
body.skin-comercial .commercial-header__social a,
body.skin-comercial .commercial-footer__social a {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid transparent;
opacity: 0.76;
transition:
opacity 0.2s ease,
border-color 0.2s ease;
}
body.skin-comercial .commercial-mobile-menu__footer a {
width: var(--jomo-touch-target);
height: var(--jomo-touch-target);
}
body.skin-comercial .commercial-mobile-menu__footer a:hover,
body.skin-comercial .commercial-header__social a:hover,
body.skin-comercial .commercial-footer__social a:hover {
border-color: var(--jomo-line);
opacity: 1;
}
body.skin-comercial .commercial-mobile-menu__footer img,
body.skin-comercial .commercial-header__social img,
body.skin-comercial .commercial-footer__social img {
display: block;
width: var(--jomo-social-icon-size);
height: var(--jomo-social-icon-size);
object-fit: contain;
}
html.has-commercial-menu-open,
body.has-commercial-menu-open {
overscroll-behavior: none;
}
body.has-commercial-menu-open > .is-commercial-menu-background {
visibility: hidden;
}
@media (min-width: 1180px) {
body.skin-comercial .d-lg-grid {
display: grid;
}
body.skin-comercial .d-lg-none {
display: none;
}
body.skin-comercial .commercial-header__desktop {
display: grid;
grid-template-columns: minmax(390px, 0.96fr) minmax(166px, 190px) minmax(500px, 1.04fr);
gap: clamp(34px, 3vw, 52px);
align-items: center;
width: 100%;
}
body.skin-comercial .commercial-header__row--mobile {
display: none;
}
body.skin-comercial .commercial-header__left,
body.skin-comercial .commercial-header__right {
display: grid;
min-width: 0;
}
body.skin-comercial .commercial-header__left {
gap: 9px;
justify-self: start;
}
body.skin-comercial .commercial-header__right {
gap: 8px;
justify-self: end;
width: 100%;
max-width: 610px;
}
body.skin-comercial .commercial-header__left-top {
padding-bottom: 8px;
border-bottom: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-header__center,
body.skin-comercial .commercial-header__brand {
display: flex;
align-items: center;
justify-content: center;
}
body.skin-comercial .commercial-header__brand,
body.skin-comercial .commercial-header__logo-link {
min-width: 166px;
}
body.skin-comercial .commercial-header__logo-img {
max-height: 48px;
}
body.skin-comercial .commercial-header__institutional-list {
display: flex;
align-items: center;
gap: 18px;
}
body.skin-comercial .commercial-header__segments-list {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 8px 22px;
}
body.skin-comercial .commercial-header__institutional-list a,
body.skin-comercial .commercial-header__segments-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 24px;
font-family: var(--jomo-font-ui);
line-height: 1.25;
text-transform: uppercase;
white-space: nowrap;
}
body.skin-comercial .commercial-header__institutional-list a {
color: rgba(23, 20, 17, 0.72);
font-size: 10px;
font-weight: 680;
letter-spacing: 0.105em;
}
body.skin-comercial .commercial-header__segments-link {
color: rgba(23, 20, 17, 0.92);
font-size: 10px;
font-weight: 820;
letter-spacing: 0.085em;
}
body.skin-comercial .commercial-header__institutional-list a::after,
body.skin-comercial .commercial-header__segments-link::after {
position: absolute;
right: 0;
bottom: -2px;
left: 0;
height: 1px;
background: var(--jomo-cta);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
body.skin-comercial .commercial-header__institutional-list a:hover::after,
body.skin-comercial .commercial-header__segments-link:hover::after,
body.skin-comercial .commercial-header__institutional-list a[aria-current="page"]::after,
body.skin-comercial .commercial-header__segments-link[aria-current="page"]::after {
transform: scaleX(1);
}
body.skin-comercial .commercial-header__institutional-list a[aria-current="page"],
body.skin-comercial .commercial-header__segments-link[aria-current="page"] {
color: var(--jomo-brand);
}
body.skin-comercial .commercial-header__right-top,
body.skin-comercial .commercial-header__right-bottom {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
body.skin-comercial .commercial-header__right-top {
gap: 10px;
}
body.skin-comercial .commercial-header__right-bottom {
display: grid;
grid-template-columns: minmax(184px, 236px) auto auto auto;
justify-content: end;
gap: 11px;
}
body.skin-comercial .commercial-header__lang {
position: relative;
}
body.skin-comercial .commercial-header__lang-summary {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 0 6px;
color: rgba(23, 20, 17, 0.84);
font-family: var(--jomo-font-ui);
font-size: 12px;
font-weight: 820;
line-height: 1;
letter-spacing: 0.09em;
list-style: none;
cursor: pointer;
}
body.skin-comercial .commercial-header__lang-summary::-webkit-details-marker {
display: none;
}
body.skin-comercial .commercial-header__lang-list {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 80;
min-width: 100px;
padding: 6px;
border: 1px solid var(--jomo-line);
background: var(--jomo-surface-strong);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .commercial-header__lang-list a {
display: flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 9px;
font-size: 12px;
font-weight: 800;
}
body.skin-comercial .commercial-header__lang-list a:hover {
background: var(--jomo-bg-alt);
}
body.skin-comercial .commercial-header__social {
gap: 2px;
}
body.skin-comercial .commercial-header__social a {
width: 27px;
height: 27px;
}
body.skin-comercial .commercial-header__search {
min-width: 0;
}
body.skin-comercial .commercial-header__search .jomo-search-form input {
height: 40px;
min-height: 40px;
padding-inline: 12px;
font-size: 11px;
}
body.skin-comercial .commercial-header__search .jomo-search-form button {
min-width: 70px;
min-height: 40px;
}
body.skin-comercial .commercial-header__reference-cta {
min-width: max-content;
font-size: 8.5px;
}
body.skin-comercial .commercial-header__quote .jomo-quote-icon-btn {
width: 40px;
height: 40px;
}
body.skin-comercial .commercial-header__cta {
min-width: 178px;
min-height: 40px;
padding-inline: 14px;
font-size: 8.5px;
}
}
@media (min-width: 1360px) {
:root {
--jomo-commercial-header-layout-height: 128px;
}
body.skin-comercial .commercial-header__desktop {
grid-template-columns: minmax(500px, 1fr) minmax(178px, 200px) minmax(560px, 1fr);
gap: clamp(38px, 3vw, 56px);
}
body.skin-comercial .commercial-header__segments-list {
grid-template-columns: repeat(3, max-content);
gap-inline: 26px;
}
body.skin-comercial .commercial-header__brand,
body.skin-comercial .commercial-header__logo-link {
min-width: 190px;
}
body.skin-comercial .commercial-header__logo-img {
max-height: 52px;
}
} body.skin-comercial .commercial-hero {
--commercial-hero-grid-content: var(--jomo-hero-grid-content);
--commercial-hero-grid-media: var(--jomo-hero-grid-media);
--commercial-hero-gap: var(--jomo-hero-gap);
--commercial-hero-content-max: var(--jomo-hero-content-max);
--commercial-hero-title-size: var(--jomo-hero-title-size);
--commercial-hero-title-size-mobile: var(--jomo-hero-title-size-mobile);
--commercial-hero-title-measure: var(--jomo-hero-title-measure);
--commercial-hero-media-ratio: var(--jomo-hero-media-ratio);
--commercial-hero-media-height: var(--jomo-hero-media-height);
padding-block: clamp(56px, 5.4vw, 88px) var(--jomo-space-section);
}
body.skin-comercial .commercial-hero__grid {
display: grid;
grid-template-columns:
var(--commercial-hero-grid-content)
var(--commercial-hero-grid-media);
gap: var(--commercial-hero-gap);
align-items: center;
}
body.skin-comercial .commercial-hero__content,
body.skin-comercial .commercial-hero__visual {
min-width: 0;
}
body.skin-comercial .commercial-hero__content {
width: 100%;
max-width: var(--commercial-hero-content-max);
}
body.skin-comercial .commercial-hero__text {
max-width: 56ch;
margin-top: 24px;
}
body.skin-comercial .commercial-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-top: 28px;
}
body.skin-comercial .commercial-hero__visual {
width: 100%;
max-width: 100%;
min-height: 0;
height: var(--commercial-hero-media-height);
overflow: hidden;
aspect-ratio: var(--commercial-hero-media-ratio);
background: var(--jomo-panel);
box-shadow: var(--jomo-shadow-md);
}
body.skin-comercial .commercial-hero__visual img,
body.skin-comercial .commercial-hero__visual video,
body.skin-comercial .commercial-hero__media {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} body.skin-comercial .commercial-segments {
padding-block: var(--jomo-space-section);
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-segments__intro {
display: grid;
grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.72fr);
gap: clamp(44px, 7vw, 112px);
align-items: end;
margin-bottom: var(--jomo-space-intro);
}
body.skin-comercial .commercial-segments__intro > * {
min-width: 0;
}
body.skin-comercial .commercial-segments__title {
max-width: 22ch;
}
body.skin-comercial .commercial-segments__text {
max-width: 54ch;
margin: 0;
}
body.skin-comercial .commercial-segments__layout {
width: 100%;
}
body.skin-comercial .commercial-segments__feature {
display: none;
}
body.skin-comercial .commercial-segments__footer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px 40px;
align-items: center;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-segments__footer-text {
max-width: 62ch;
margin: 0;
}
body.skin-comercial .commercial-segments__actions {
display: flex;
justify-content: flex-end;
}
body.skin-comercial .commercial-segments__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr;
align-items: stretch;
gap: 1px;
width: 100%;
margin: 0;
padding: 1px;
list-style: none;
background: var(--jomo-line);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .commercial-segments__item {
min-width: 0;
height: 100%;
margin: 0;
overflow: hidden;
background: var(--jomo-surface);
}
body.skin-comercial .commercial-segments__item:nth-child(even) {
background: rgba(236, 228, 218, 0.74);
}
body.skin-comercial .commercial-segments__link {
display: grid;
grid-template-rows: 294px minmax(0, 1fr);
height: 100%;
min-height: 100%;
color: inherit;
background: transparent;
}
body.skin-comercial .commercial-segments__media {
display: grid;
place-items: center;
min-width: 0;
height: 294px;
padding: clamp(14px, 1.5vw, 22px);
overflow: hidden;
border-bottom: 1px solid var(--jomo-line-soft);
background: rgba(255, 252, 247, 0.72);
}
body.skin-comercial .commercial-segments__image,
body.skin-comercial .commercial-segments__media img {
display: block;
width: 100%;
height: 100%;
max-width: 94%;
max-height: 260px;
margin: auto;
object-fit: contain;
object-position: center;
mix-blend-mode: multiply;
transition: transform 0.26s ease;
}
body.skin-comercial
.commercial-segments__link:hover
.commercial-segments__image,
body.skin-comercial
.commercial-segments__link:hover
.commercial-segments__media
img {
transform: scale(1.025);
}
body.skin-comercial .commercial-segments__body {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 280px;
padding: clamp(24px, 2.5vw, 36px);
}
body.skin-comercial .commercial-segments__index {
display: block;
margin: 0 0 32px;
color: var(--jomo-muted);
font-family: var(--jomo-font-ui);
font-size: 9px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.17em;
}
body.skin-comercial .commercial-segments__item-title {
max-width: 28ch;
margin: 0 0 12px;
color: var(--jomo-text);
font-family: var(--jomo-font-ui);
font-size: clamp(16px, 1.15vw, 20px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.022em;
}
body.skin-comercial .commercial-segments__item-text {
max-width: 46ch;
margin: 0;
color: var(--jomo-muted-soft);
font-size: 13px;
font-weight: 500;
line-height: 1.58;
}
body.skin-comercial .commercial-segments__action {
margin-top: auto;
padding-top: 22px;
} body.skin-comercial .clogos,
body.skin-comercial .commercial-clients {
padding-block: var(--jomo-space-section);
border-top: 1px solid var(--jomo-line);
background: var(--jomo-bg);
}
body.skin-comercial .clogos > .container,
body.skin-comercial .clogos > .commercial-shell,
body.skin-comercial .commercial-clients > .container,
body.skin-comercial .commercial-clients > .commercial-shell {
width: min(calc(100% - var(--jomo-gutter-double)), var(--jomo-shell-content));
margin-inline: auto;
}
body.skin-comercial .clogos__head,
body.skin-comercial .commercial-clients__head {
display: grid;
grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.72fr);
grid-template-areas:
"eyebrow text"
"title text";
gap: 0 clamp(44px, 7vw, 112px);
align-items: end;
margin-bottom: var(--jomo-space-intro);
}
body.skin-comercial .clogos__eyebrow,
body.skin-comercial .commercial-clients__eyebrow {
grid-area: eyebrow;
}
body.skin-comercial .clogos__title,
body.skin-comercial .commercial-clients__title {
--commercial-title-measure: var(--jomo-title-measure-wide);
grid-area: title;
max-inline-size: min(var(--commercial-title-measure), 100%);
font-size: var(--jomo-type-section);
line-height: 0.94;
letter-spacing: -0.052em;
}
body.skin-comercial .clogos__text,
body.skin-comercial .commercial-clients__text {
grid-area: text;
max-width: 54ch;
margin: 0;
}
body.skin-comercial .clogos__grid,
body.skin-comercial .commercial-clients__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1px;
width: 100%;
margin: 0;
padding: 1px;
list-style: none;
background: var(--jomo-line);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .clogos-card,
body.skin-comercial .commercial-clients__item {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 104px;
padding: 20px 18px;
overflow: hidden;
background: rgba(255, 252, 247, 0.72);
}
body.skin-comercial .clogos-card__link,
body.skin-comercial .commercial-clients__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 62px;
}
body.skin-comercial .clogos-card__img,
body.skin-comercial .commercial-clients__image {
display: block;
width: auto;
height: auto;
max-width: 132px;
max-height: 42px;
object-fit: contain;
filter: grayscale(1) contrast(0.98);
mix-blend-mode: multiply;
opacity: 0.78;
transition:
opacity 0.2s ease,
filter 0.2s ease,
transform 0.2s ease;
}
body.skin-comercial .clogos-card:hover .clogos-card__img,
body.skin-comercial .clogos-card__link:hover .clogos-card__img,
body.skin-comercial .commercial-clients__item:hover .commercial-clients__image,
body.skin-comercial .commercial-clients__link:hover .commercial-clients__image {
filter: grayscale(1) contrast(1.04);
opacity: 0.98;
transform: translateY(-1px);
} body.skin-comercial .commercial-faq {
padding-block: var(--jomo-space-section);
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-faq__title {
--commercial-title-measure: var(--jomo-title-measure-default);
}
body.skin-comercial .commercial-faq__text {
max-width: 54ch;
margin: 0;
}
body.skin-comercial .commercial-faq__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px;
align-items: start;
}
body.skin-comercial .commercial-faq__item {
min-width: 0;
overflow: clip;
border: 1px solid var(--jomo-line-soft);
background: rgba(255, 252, 247, 0.58);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .commercial-faq__question {
position: relative;
display: flex;
align-items: center;
min-height: 76px;
padding: 20px 54px 20px 22px;
color: var(--jomo-text);
font-family: var(--jomo-font-ui);
font-size: clamp(15px, 1.05vw, 18px);
font-weight: 750;
line-height: 1.35;
list-style: none;
cursor: pointer;
}
body.skin-comercial .commercial-faq__question::-webkit-details-marker {
display: none;
}
body.skin-comercial .commercial-faq__question::before,
body.skin-comercial .commercial-faq__question::after {
position: absolute;
top: 50%;
right: 22px;
width: 16px;
height: 1px;
background: currentColor;
content: "";
transform: translateY(-50%);
}
body.skin-comercial .commercial-faq__question::after {
transform: translateY(-50%) rotate(90deg);
transition: transform 0.2s ease;
}
body.skin-comercial
.commercial-faq__item[open]
.commercial-faq__question::after {
transform: translateY(-50%) rotate(0);
}
body.skin-comercial .commercial-faq__answer {
max-width: 78ch;
padding: 0 54px 22px 22px;
color: var(--jomo-muted);
font-size: 14px;
line-height: 1.7;
}
body.skin-comercial .commercial-faq__answer p {
margin: 0;
} body.skin-comercial .commercial-certifications {
padding-block: var(--jomo-space-section);
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-certifications__panel {
display: grid;
grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
gap: clamp(42px, 6vw, 92px);
align-items: center;
padding: clamp(38px, 4.5vw, 68px);
border: 1px solid var(--jomo-line-soft);
background: rgba(255, 252, 247, 0.58);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .commercial-certifications__content {
min-width: 0;
max-width: 650px;
}
body.skin-comercial .commercial-certifications__title {
--commercial-title-measure: var(--jomo-title-measure-default);
}
body.skin-comercial .commercial-certifications__text {
max-width: 52ch;
margin: 20px 0 0;
}
body.skin-comercial .commercial-certifications__actions {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 24px;
}
body.skin-comercial .commercial-certifications__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(8px, 0.9vw, 14px);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
body.skin-comercial .commercial-certifications__item {
display: grid;
grid-template-rows: minmax(82px, 1fr) auto;
align-items: center;
justify-items: center;
min-width: 0;
min-height: 142px;
padding: 14px 10px;
text-align: center;
border: 1px solid var(--jomo-line-soft);
background: rgba(255, 255, 255, 0.7);
}
body.skin-comercial .commercial-certifications__logo {
display: grid;
place-items: center;
width: 100%;
min-width: 0;
min-height: 76px;
aspect-ratio: 4 / 3;
}
body.skin-comercial .commercial-certifications__logo img {
display: block;
width: auto;
height: auto;
max-width: min(88%, 116px);
max-height: 68px;
margin: auto;
object-fit: contain;
object-position: center;
}
body.skin-comercial .commercial-certifications__label {
min-height: 2.5em;
margin: 8px 0 0;
color: rgba(23, 20, 17, 0.76);
font-family: var(--jomo-font-ui);
font-size: 8px;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.07em;
text-align: center;
text-transform: uppercase;
}
body.skin-comercial .commercial-certifications__metrics,
body.skin-comercial .commercial-certifications__highlights {
grid-column: 1 / -1;
width: 100%;
}
body.skin-comercial .commercial-certifications__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: clamp(30px, 4vw, 48px);
border-block: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-certifications__metric {
min-width: 0;
padding: clamp(24px, 2.5vw, 36px);
border-right: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-certifications__metric:last-child {
border-right: 0;
}
body.skin-comercial .commercial-certifications__metric-value {
display: block;
margin-bottom: 10px;
color: var(--jomo-brand);
font-family: var(--jomo-font-serif);
font-size: clamp(48px, 4.7vw, 72px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.065em;
}
body.skin-comercial .commercial-certifications__metric-title {
margin: 0;
font-family: var(--jomo-font-ui);
font-size: 11px;
font-weight: 850;
line-height: 1.25;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.skin-comercial .commercial-certifications__metric-text {
max-width: 36ch;
margin: 9px 0 0;
color: var(--jomo-muted-soft);
font-size: 12.5px;
line-height: 1.55;
}
body.skin-comercial .commercial-certifications__highlights {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 28px;
border: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-certifications__highlight {
min-width: 0;
min-height: 168px;
padding: clamp(22px, 2.3vw, 32px);
border-right: 1px solid var(--jomo-line);
background: rgba(255, 255, 255, 0.34);
}
body.skin-comercial .commercial-certifications__highlight:nth-child(even) {
background: rgba(236, 228, 218, 0.48);
}
body.skin-comercial .commercial-certifications__highlight:last-child {
border-right: 0;
}
body.skin-comercial .commercial-certifications__highlight-index {
display: block;
margin-bottom: 30px;
color: var(--jomo-muted);
font-size: 9px;
font-weight: 850;
letter-spacing: 0.16em;
}
body.skin-comercial .commercial-certifications__highlight-title {
margin: 0;
font-family: var(--jomo-font-ui);
font-size: 15px;
font-weight: 850;
line-height: 1.2;
letter-spacing: -0.018em;
}
body.skin-comercial .commercial-certifications__highlight-text {
margin: 10px 0 0;
color: var(--jomo-muted-soft);
font-size: 12.5px;
line-height: 1.55;
} body.skin-comercial .commercial-prefooter {
padding-block: var(--jomo-space-section);
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-prefooter__panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
max-width: var(--jomo-shell-content);
margin-inline: auto;
overflow: hidden;
border: 1px solid var(--jomo-line-soft);
background: rgba(255, 252, 247, 0.6);
box-shadow: var(--jomo-shadow-sm);
}
body.skin-comercial .commercial-prefooter__media {
min-width: 0;
min-height: 420px;
overflow: hidden;
background: var(--jomo-panel);
}
body.skin-comercial .commercial-prefooter__media img {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
}
body.skin-comercial .commercial-prefooter__content {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: clamp(38px, 4.5vw, 68px);
}
body.skin-comercial .commercial-prefooter__title {
max-width: 14ch;
}
body.skin-comercial .commercial-prefooter__text {
max-width: 48ch;
margin-top: 20px;
}
body.skin-comercial .commercial-prefooter__actions {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 26px;
} body.skin-comercial .commercial-footer {
padding: var(--jomo-space-section-compact) 0 24px;
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-footer__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
gap: clamp(58px, 8vw, 126px);
align-items: start;
}
body.skin-comercial .commercial-footer__brand-column {
max-width: 620px;
}
body.skin-comercial .commercial-footer__title {
--commercial-title-measure: 26ch;
max-inline-size: min(var(--commercial-title-measure), 100%);
margin: 0;
color: var(--jomo-text);
font-family: var(--jomo-font-serif);
font-size: clamp(34px, 2.7vw, 48px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.048em;
text-wrap: balance;
}
body.skin-comercial .commercial-footer__text {
max-width: 52ch;
margin-top: 20px;
}
body.skin-comercial .commercial-footer__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
body.skin-comercial .commercial-footer__nav-column {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(28px, 4vw, 64px);
}
body.skin-comercial .commercial-footer__nav-heading {
margin: 0 0 18px;
}
body.skin-comercial .commercial-footer__nav-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 24px;
padding: 0;
border: 0;
background: transparent;
color: rgba(23, 20, 17, 0.76);
font-family: var(--jomo-font-ui);
font-size: 9px;
font-weight: 850;
line-height: 1.2;
letter-spacing: 0.16em;
text-align: left;
text-transform: uppercase;
pointer-events: none;
}
body.skin-comercial .commercial-footer__nav-icon {
display: none;
}
body.skin-comercial .commercial-footer__nav-list {
display: grid;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
body.skin-comercial .commercial-footer__nav-list a {
display: inline-flex;
min-height: 24px;
color: var(--jomo-muted);
font-size: 12px;
line-height: 1.5;
}
body.skin-comercial .commercial-footer__nav-list a:hover {
color: var(--jomo-cta);
}
body.skin-comercial .commercial-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: clamp(54px, 7vw, 92px);
padding-top: 20px;
border-top: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-footer__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
color: var(--jomo-muted);
font-size: 10px;
line-height: 1.5;
}
body.skin-comercial .commercial-footer__meta a:hover {
color: var(--jomo-cta);
} @media (min-width: 1440px) {
body.skin-comercial .commercial-header__institutional-list a {
font-size: 10px;
}
body.skin-comercial .commercial-header__segments-link {
color: rgba(23, 20, 17, 0.96);
font-size: 11px;
}
body.skin-comercial .commercial-header__lang-summary,
body.skin-comercial .commercial-header__lang-list a {
font-size: 13px;
}
}
@media (max-width: 1179px) {
:root {
--jomo-commercial-header-layout-height: 66px;
}
body.skin-comercial .commercial-header__main {
display: flex;
align-items: center;
min-height: var(--jomo-commercial-header-layout-height);
padding-block: 0;
}
body.skin-comercial .commercial-header__desktop {
display: none;
}
body.skin-comercial .commercial-header__row--mobile {
display: flex;
}
body.skin-comercial .d-lg-none:not([hidden]) {
display: block;
}
body.skin-comercial .commercial-header__row--mobile.d-lg-none:not([hidden]) {
display: flex;
}
body.skin-comercial .commercial-segments__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-comercial .clogos__grid,
body.skin-comercial .commercial-clients__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.skin-comercial .commercial-certifications__panel {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-certifications__grid {
max-width: 760px;
}
body.skin-comercial .commercial-certifications__highlights {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-comercial .commercial-certifications__highlight:nth-child(2n) {
border-right: 0;
}
body.skin-comercial .commercial-certifications__highlight:nth-child(n + 3) {
border-top: 1px solid var(--jomo-line);
}
}
@media (max-width: 991px) {
body.skin-comercial .commercial-intro--compact-mobile,
body.skin-comercial .commercial-segments__intro,
body.skin-comercial .clogos__head,
body.skin-comercial .commercial-clients__head {
grid-template-columns: 1fr;
grid-template-areas:
"eyebrow"
"title"
"text";
gap: 20px;
}
body.skin-comercial .clogos__grid,
body.skin-comercial .commercial-clients__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .commercial-faq__list {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-segments__footer {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-segments__actions {
justify-content: flex-start;
}
body.skin-comercial .commercial-footer__top {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-prefooter__panel {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-prefooter__media,
body.skin-comercial .commercial-prefooter__media img {
min-height: 360px;
}
}
@media (max-width: 991px) {
body.skin-comercial .commercial-hero {
--commercial-hero-media-ratio: 16 / 9;
--commercial-hero-media-height: auto;
}
body.skin-comercial .commercial-hero__grid {
grid-template-columns: 1fr;
gap: clamp(28px, 5vw, 44px);
align-items: start;
}
body.skin-comercial .commercial-hero__content {
max-width: 48rem;
}
}
@media (max-width: 767px) {
:root {
--jomo-gutter: 16px;
--jomo-gutter-double: 32px;
--jomo-space-section: 56px;
--jomo-space-section-compact: 48px;
--jomo-space-section-tight: 40px;
--jomo-space-intro: 30px;
}
html {
scroll-padding-top: calc(var(--jomo-commercial-header-layout-height) + 12px);
}
body.skin-comercial .commercial-shell,
body.skin-comercial .commercial-shell--content,
body.skin-comercial .commercial-shell--editorial,
body.skin-comercial .commercial-shell--readable {
width: calc(100% - 32px);
}
body.skin-comercial .commercial-title--section {
--commercial-title-measure: 100%;
font-size: clamp(32px, 9.4vw, 40px);
line-height: 0.98;
letter-spacing: -0.048em;
}
body.skin-comercial .commercial-hero__title,
body.skin-comercial .commercial-title--hero {
max-width: min(var(--commercial-hero-title-measure, var(--jomo-hero-title-measure)), 100%);
font-size: var(--commercial-hero-title-size-mobile, var(--jomo-hero-title-size-mobile));
line-height: 0.96;
letter-spacing: -0.05em;
}
body.skin-comercial .commercial-eyebrow,
body.skin-comercial .commercial-kicker {
margin-bottom: 12px;
font-size: 9px;
letter-spacing: 0.18em;
}
body.skin-comercial .commercial-copy,
body.skin-comercial .commercial-copy--lead {
font-size: 14px;
line-height: 1.65;
}
body.skin-comercial .commercial-button,
body.skin-comercial .commercial-link,
body.skin-comercial .commercial-header__cta,
body.skin-comercial .commercial-mobile-menu__cta,
body.skin-comercial .commercial-footer__cta {
min-height: 48px;
padding-inline: 18px;
}
body.skin-comercial .commercial-section-head {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-hero {
--commercial-hero-media-ratio: 4 / 3;
--commercial-hero-media-height: auto;
padding-block: 42px 58px;
}
body.skin-comercial .commercial-hero__grid {
grid-template-columns: 1fr;
gap: 28px;
align-items: start;
}
body.skin-comercial .commercial-hero__content {
max-width: 42rem;
}
body.skin-comercial .commercial-hero__text {
margin-top: 18px;
}
body.skin-comercial .commercial-hero__actions {
margin-top: 22px;
}
body.skin-comercial .commercial-segments {
padding-block: 58px;
}
body.skin-comercial .commercial-segments__grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(272px, 84vw);
grid-auto-rows: 1fr;
gap: 10px;
width: auto;
margin-inline: calc(var(--jomo-gutter) * -1);
padding: 1px var(--jomo-gutter) 12px;
overflow-x: auto;
overflow-y: hidden;
background: transparent;
box-shadow: none;
scroll-padding-inline: var(--jomo-gutter);
scroll-snap-type: inline mandatory;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
body.skin-comercial .commercial-segments__item {
border: 1px solid var(--jomo-line);
scroll-snap-align: start;
scroll-snap-stop: normal;
}
body.skin-comercial .commercial-segments__link {
grid-template-rows: 224px minmax(0, 1fr);
}
body.skin-comercial .commercial-segments__media {
height: 224px;
min-height: 224px;
padding: 20px;
}
body.skin-comercial .commercial-segments__image,
body.skin-comercial .commercial-segments__media img {
max-height: 186px;
}
body.skin-comercial .commercial-segments__body {
min-height: 248px;
padding: 24px;
}
body.skin-comercial .commercial-segments__grid:focus-visible {
outline: 2px solid var(--jomo-focus);
outline-offset: 4px;
}
body.skin-comercial .clogos,
body.skin-comercial .commercial-clients,
body.skin-comercial .commercial-faq {
padding-block: 58px;
}
body.skin-comercial .clogos__grid,
body.skin-comercial .commercial-clients__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .clogos-card,
body.skin-comercial .commercial-clients__item {
min-height: 72px;
padding: 14px 10px;
}
body.skin-comercial .clogos-card__img,
body.skin-comercial .commercial-clients__image {
max-width: 84px;
max-height: 28px;
}
body.skin-comercial .commercial-faq__question {
min-height: 64px;
padding: 17px 46px 17px 18px;
font-size: 14px;
}
body.skin-comercial .commercial-faq__question::before,
body.skin-comercial .commercial-faq__question::after {
right: 18px;
}
body.skin-comercial .commercial-faq__answer {
padding: 0 46px 20px 18px;
font-size: 13px;
}
body.skin-comercial .commercial-segments__index {
margin-bottom: 24px;
padding-bottom: 0;
}
body.skin-comercial .commercial-segments__item-title {
font-size: 17px;
}
body.skin-comercial .commercial-segments__item-text {
font-size: 13px;
}
body.skin-comercial .commercial-certifications {
padding-block: 58px;
}
body.skin-comercial .commercial-certifications__panel {
gap: 28px;
padding: 26px 20px;
}
body.skin-comercial .commercial-certifications__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
max-width: none;
}
body.skin-comercial .commercial-certifications__item {
grid-template-rows: 68px auto;
min-height: 122px;
padding: 12px 8px;
}
body.skin-comercial .commercial-certifications__logo {
min-height: 62px;
}
body.skin-comercial .commercial-certifications__logo img {
max-height: 54px;
}
body.skin-comercial .commercial-certifications__label {
font-size: 7.5px;
}
body.skin-comercial .commercial-certifications__metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.skin-comercial .commercial-certifications__highlights {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-certifications__metric {
padding: 20px 10px;
border-right: 1px solid var(--jomo-line);
border-bottom: 0;
}
body.skin-comercial .commercial-certifications__metric:last-child {
border-right: 0;
}
body.skin-comercial .commercial-certifications__metric-value {
margin-bottom: 8px;
font-size: clamp(36px, 10vw, 48px);
}
body.skin-comercial .commercial-certifications__metric-title {
font-size: 9px;
letter-spacing: 0.055em;
}
body.skin-comercial .commercial-certifications__metric-text {
margin-top: 7px;
font-size: 10.5px;
line-height: 1.45;
}
body.skin-comercial .commercial-certifications__highlight,
body.skin-comercial .commercial-certifications__highlight:nth-child(2n) {
min-height: 0;
border-right: 0;
border-bottom: 1px solid var(--jomo-line);
border-top: 0;
}
body.skin-comercial .commercial-certifications__highlight:last-child {
border-bottom: 0;
}
body.skin-comercial .commercial-prefooter__media,
body.skin-comercial .commercial-prefooter__media img {
min-height: 280px;
}
body.skin-comercial .commercial-prefooter__content {
padding: 30px 22px;
}
body.skin-comercial .commercial-header__social a,
body.skin-comercial .commercial-footer__social a {
width: var(--jomo-touch-target);
height: var(--jomo-touch-target);
}
body.skin-comercial .commercial-footer__nav-column {
grid-template-columns: 1fr;
gap: 0;
}
body.skin-comercial .commercial-footer__nav-group {
border-bottom: 1px solid var(--jomo-line);
}
body.skin-comercial .commercial-footer__nav-heading {
margin: 0;
}
body.skin-comercial .commercial-footer__nav-toggle {
min-height: 52px;
color: var(--jomo-text);
font-size: 11px;
letter-spacing: 0.14em;
pointer-events: auto;
}
body.skin-comercial .commercial-footer__nav-icon {
position: relative;
display: block;
flex: 0 0 14px;
width: 14px;
height: 14px;
}
body.skin-comercial .commercial-footer__nav-icon::before,
body.skin-comercial .commercial-footer__nav-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 1px;
background: currentColor;
content: "";
transform: translate(-50%, -50%);
}
body.skin-comercial
.commercial-footer__nav-toggle[aria-expanded="false"]
.commercial-footer__nav-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
body.skin-comercial .commercial-footer__nav-panel {
overflow: hidden;
padding-bottom: 18px;
}
body.skin-comercial .commercial-footer__nav-panel[hidden] {
display: none;
}
body.skin-comercial .commercial-footer__nav-list a {
min-height: 44px;
align-items: center;
}
body.skin-comercial .commercial-footer__bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 380px) {
:root {
--jomo-gutter: 12px;
--jomo-gutter-double: 24px;
}
body.skin-comercial .commercial-shell,
body.skin-comercial .commercial-shell--content,
body.skin-comercial .commercial-shell--editorial,
body.skin-comercial .commercial-shell--readable {
width: calc(100% - 24px);
}
body.skin-comercial .commercial-certifications__grid {
grid-template-columns: 1fr 1fr;
}
body.skin-comercial .clogos__grid,
body.skin-comercial .commercial-clients__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1179px) and (max-height: 520px) {
body.skin-comercial .commercial-mobile-menu__inner {
gap: 8px;
padding-top: 10px;
padding-bottom: 0;
}
body.skin-comercial .commercial-mobile-menu__langs {
padding-block: 4px;
}
body.skin-comercial .commercial-mobile-menu__navigation {
min-height: 0;
max-height: none;
}
body.skin-comercial .commercial-mobile-menu__footer {
min-height: 50px;
padding-block: 4px max(8px, env(safe-area-inset-bottom));
}
} body.skin-comercial .jomo-quote-overlay,
body.skin-comercial [data-quote-overlay] {
z-index: 100000;
}
body.skin-comercial .jomo-quote-drawer,
body.skin-comercial [data-quote-drawer] {
z-index: 100010;
}
body.skin-comercial .jomo-quote-modal,
body.skin-comercial [data-quote-modal],
body.skin-comercial .jomo-price-modal {
z-index: 100030;
} @media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
body.skin-comercial *,
body.skin-comercial *::before,
body.skin-comercial *::after {
scroll-behavior: auto;
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
}
@media print {
body.skin-comercial {
padding-top: 0;
background: #fff;
}
body.skin-comercial .header--commercial,
body.skin-comercial .commercial-prefooter,
body.skin-comercial .commercial-footer,
body.skin-comercial .jomo-newsletter,
body.skin-comercial .commercial-button,
body.skin-comercial .commercial-text-link {
display: none;
}
} @media (max-width: 379px) {
body.skin-comercial .commercial-title--section {
max-width: 100%;
font-size: clamp(30px, 9.8vw, 36px);
line-height: 0.98;
}
body.skin-comercial .commercial-hero__title,
body.skin-comercial .commercial-title--hero {
max-width: 100%;
font-size: min(var(--commercial-hero-title-size-mobile, var(--jomo-hero-title-size-mobile)), 44px);
line-height: 0.96;
}
body.skin-comercial .commercial-certifications__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-comercial .commercial-certifications__item {
grid-template-columns: 1fr;
grid-template-rows: 64px auto;
align-items: center;
min-height: 116px;
text-align: center;
}
body.skin-comercial .commercial-certifications__label {
min-height: 2.5em;
margin: 8px 0 0;
text-align: center;
}
body.skin-comercial .commercial-certifications__metrics {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(230px, 78vw);
gap: 1px;
padding-bottom: 10px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: inline mandatory;
overscroll-behavior-inline: contain;
}
body.skin-comercial .commercial-certifications__metric {
border-right: 0;
scroll-snap-align: start;
}
}
@media (max-width: 339px) {
body.skin-comercial .commercial-mobile-menu__actions {
grid-template-columns: 1fr;
}
body.skin-comercial .commercial-mobile-menu__cta,
body.skin-comercial .commercial-mobile-menu__reference-cta {
width: 100%;
justify-content: center;
}
body.skin-comercial .commercial-mobile-menu__navigation {
min-height: 0;
max-height: none;
}
} body.skin-comercial-legal .legal-commercial-page {
background: var(--jomo-color-surface, #f4efe7);
color: var(--jomo-color-text, #20231f);
}
body.skin-comercial-legal .legal-commercial-hero {
padding-block: clamp(56px, 7vw, 112px) clamp(40px, 5vw, 72px);
border-bottom: 1px solid var(--jomo-color-border, rgba(32, 35, 31, 0.14));
}
body.skin-comercial-legal .legal-commercial-breadcrumb {
margin-bottom: clamp(30px, 4vw, 54px);
font-family: var(--jomo-font-sans);
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.skin-comercial-legal .legal-commercial-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
body.skin-comercial-legal .legal-commercial-breadcrumb li + li::before {
content: "/";
margin-right: 0.55rem;
color: var(--jomo-color-text-muted, #6f746e);
}
body.skin-comercial-legal .legal-commercial-breadcrumb a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.24em;
}
body.skin-comercial-legal .legal-commercial-hero__eyebrow {
margin-bottom: 0.85rem;
}
body.skin-comercial-legal .legal-commercial-hero__title {
max-width: 14ch;
margin: 0;
font-family: var(--jomo-font-serif);
font-size: clamp(3rem, 7vw, 6.7rem);
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.045em;
text-wrap: balance;
}
body.skin-comercial-legal .legal-commercial-hero__updated {
margin: clamp(24px, 3vw, 38px) 0 0;
font-family: var(--jomo-font-sans);
font-size: 0.875rem;
line-height: 1.6;
color: var(--jomo-color-text-muted, #6f746e);
}
body.skin-comercial-legal .legal-commercial-content {
padding-block: clamp(56px, 7vw, 112px) clamp(72px, 9vw, 136px);
}
body.skin-comercial-legal .legal-commercial-content__body {
max-width: 860px;
font-family: var(--jomo-font-sans);
font-size: clamp(1rem, 0.95rem + 0.18vw, 1.125rem);
line-height: 1.78;
}
body.skin-comercial-legal .legal-commercial-content__body > :first-child {
margin-top: 0;
}
body.skin-comercial-legal .legal-commercial-content__body > :last-child {
margin-bottom: 0;
}
body.skin-comercial-legal .legal-commercial-content__body :where(h2, h3, h4) {
max-width: 28ch;
margin: 2.6em 0 0.8em;
color: inherit;
text-wrap: balance;
}
body.skin-comercial-legal .legal-commercial-content__body h2 {
font-family: var(--jomo-font-serif);
font-size: clamp(2rem, 4vw, 3.6rem);
font-weight: 400;
line-height: 1;
letter-spacing: -0.035em;
}
body.skin-comercial-legal .legal-commercial-content__body :where(h3, h4) {
font-family: var(--jomo-font-sans);
font-size: clamp(1.05rem, 1rem + 0.28vw, 1.35rem);
font-weight: 700;
line-height: 1.3;
}
body.skin-comercial-legal .legal-commercial-content__body :where(p, ul, ol, blockquote, table) {
margin-block: 0 1.35em;
}
body.skin-comercial-legal .legal-commercial-content__body :where(ul, ol) {
padding-left: 1.35em;
}
body.skin-comercial-legal .legal-commercial-content__body li + li {
margin-top: 0.45em;
}
body.skin-comercial-legal .legal-commercial-content__body a:not(.commercial-button) {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
body.skin-comercial-legal .legal-commercial-content__body a:not(.commercial-button):hover {
text-decoration-thickness: 2px;
}
body.skin-comercial-legal .legal-commercial-content__body :where(a, button):focus-visible {
outline: 3px solid currentColor;
outline-offset: 4px;
}
body.skin-comercial-legal .legal-commercial-content__body blockquote {
padding: 1.4rem 1.6rem;
border-left: 3px solid var(--jomo-color-primary, #44524c);
background: rgba(255, 255, 255, 0.42);
}
body.skin-comercial-legal .legal-commercial-content__body table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
}
body.skin-comercial-legal .legal-commercial-content__body :where(th, td) {
padding: 0.8rem;
border: 1px solid var(--jomo-color-border, rgba(32, 35, 31, 0.14));
text-align: left;
vertical-align: top;
}
body.skin-comercial-legal .legal-commercial-content__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
@media (max-width: 767px) {
body.skin-comercial-legal .legal-commercial-hero__title {
max-width: 18ch;
font-size: clamp(2.7rem, 14vw, 4.8rem);
}
body.skin-comercial-legal .legal-commercial-content__body {
line-height: 1.7;
}
body.skin-comercial-legal .legal-commercial-content__actions .commercial-button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
body.skin-comercial-legal .legal-commercial-page *,
body.skin-comercial-legal .legal-commercial-page *::before,
body.skin-comercial-legal .legal-commercial-page *::after {
scroll-behavior: auto !important;
}
}