.sdb-destaques {
--sdb-dr-primary: var(--sdb-color-primary, #0058B7);
--sdb-dr-secondary: var(--sdb-color-secondary, #009BD8);
--sdb-dr-text: var(--sdb-color-text, #6B7785);
--sdb-dr-heading: var(--sdb-color-heading, #364048);
--sdb-dr-border: var(--sdb-color-border, #EEF3F8);
--sdb-dr-surface: var(--sdb-color-surface, #FFFFFF);
--sdb-dr-background: var(--sdb-color-background, #F5F8FB);
--sdb-dr-radius-xl: var(--sdb-radius-xl, 34px);
--sdb-dr-radius-lg: var(--sdb-radius-lg, 28px);
--sdb-dr-radius-md: var(--sdb-radius-md, 18px);
--sdb-dr-shadow: var(--sdb-shadow-element, 0 30px 80px rgba(31, 42, 54, .15));
--sdb-dr-font-body: var(--sdb-font-body, Archivo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
--sdb-dr-font-heading: var(--sdb-font-heading, "Neo Sans", Archivo, system-ui, sans-serif);
container-type: inline-size;
}
.sdb-destaques__grid {
display: grid;
grid-template-columns: repeat(var(--sdb-destaques-cols, 3), minmax(0, 1fr));
gap: clamp(20px, 2.4vw, 36px);
align-items: stretch;
}
.sdb-highlight {
--sdb-highlight-color: var(--sdb-dr-primary);
position: relative;
min-width: 0;
border-radius: var(--sdb-dr-radius-xl);
isolation: isolate;
}
.sdb-highlight::before {
content: "";
position: absolute;
inset: auto 18px -18px 18px;
height: 48%;
border-radius: 999px;
background: color-mix(in srgb, var(--sdb-highlight-color) 38%, transparent);
filter: blur(34px);
opacity: .34;
z-index: -1;
transform: translateY(0) scale(.98);
transition: transform .45s ease, opacity .45s ease;
}
.sdb-highlight__link {
color: inherit;
display: grid;
min-height: 100%;
text-decoration: none !important;
outline: none;
}
.sdb-highlight__link:focus-visible .sdb-highlight__media {
outline: 3px solid color-mix(in srgb, var(--sdb-highlight-color) 70%, #fff);
outline-offset: 4px;
}
.sdb-highlight__media {
position: relative;
overflow: hidden;
min-height: clamp(430px, 38vw, 560px);
border-radius: var(--sdb-dr-radius-xl);
background:
radial-gradient(circle at 16% 16%, color-mix(in srgb, var(--sdb-highlight-color) 38%, white), transparent 32%),
linear-gradient(145deg, color-mix(in srgb, var(--sdb-highlight-color) 20%, #ffffff), var(--sdb-dr-background));
box-shadow: var(--sdb-dr-shadow);
transform: translateZ(0);
}
.sdb-highlight__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(31, 42, 54, .03) 0%, rgba(31, 42, 54, .22) 44%, rgba(31, 42, 54, .92) 100%),
linear-gradient(90deg, color-mix(in srgb, var(--sdb-highlight-color) 34%, rgba(31, 42, 54, .52)) 0%, rgba(31, 42, 54, .14) 52%, rgba(31, 42, 54, .34) 100%);
pointer-events: none;
}
.sdb-highlight__media::before {
content: "";
position: absolute;
width: 62%;
aspect-ratio: 1;
right: -24%;
top: -22%;
border: 1px solid rgba(255,255,255,.30);
border-radius: 999px;
z-index: 2;
opacity: .55;
pointer-events: none;
}
.sdb-highlight__media img,
.sdb-highlight__placeholder {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
transform: scale(1.025);
filter: saturate(.92) contrast(1.03) brightness(.92);
transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s cubic-bezier(.2, .7, .2, 1);
}
.sdb-highlight__placeholder {
background:
radial-gradient(circle at 72% 24%, rgba(255,255,255,.42), transparent 25%),
linear-gradient(135deg, color-mix(in srgb, var(--sdb-highlight-color) 74%, var(--sdb-dr-primary)), var(--sdb-dr-secondary));
}
.sdb-highlight__content {
position: absolute;
inset: clamp(22px, 2.5vw, 34px) clamp(22px, 2.7vw, 38px) clamp(22px, 2.7vw, 38px) clamp(22px, 2.7vw, 38px);
z-index: 3;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: clamp(9px, 1vw, 13px);
}
.sdb-highlight__caption {
order: -1;
align-self: flex-start;
margin: 0;
max-width: min(100%, 32ch);
padding: 6px 11px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
background: rgba(255,255,255,.10);
-webkit-backdrop-filter: blur(10px) saturate(1.12);
backdrop-filter: blur(10px) saturate(1.12);
color: rgba(255,255,255,.90);
font-family: var(--sdb-dr-font-body);
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
line-height: 1.1;
text-transform: uppercase;
white-space: normal;
overflow: visible;
text-overflow: clip;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.sdb-highlight__title {
margin: auto 0 0;
max-width: 13ch;
color: #fff;
font-family: var(--sdb-dr-font-heading);
font-size: clamp(28px, 3.65vw, 46px);
font-weight: 900;
letter-spacing: -.045em;
line-height: 1.02;
text-wrap: balance;
text-shadow: 0 4px 24px rgba(0,0,0,.34);
}
.sdb-highlight__description {
margin: 0;
max-width: 34ch;
color: rgba(255,255,255,.90);
font-family: var(--sdb-dr-font-body);
font-size: clamp(15px, 1.22vw, 18px);
font-weight: 500;
line-height: 1.48;
text-wrap: pretty;
text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.sdb-highlight__cta {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin-top: clamp(6px, .85vw, 10px);
padding: 12px 16px 12px 18px;
border-radius: 999px;
background: rgba(255,255,255,.96);
color: color-mix(in srgb, var(--sdb-highlight-color) 88%, #1F2A36);
font-family: var(--sdb-dr-font-body);
font-size: 14px;
font-weight: 800;
line-height: 1;
box-shadow: 0 16px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.76);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.sdb-highlight__cta::after {
content: "→";
font-size: 1.15em;
line-height: .8;
transform: translateX(0);
transition: transform .28s ease;
}
.sdb-highlight:has(.sdb-highlight__link):hover::before,
.sdb-highlight:has(.sdb-highlight__link):focus-within::before {
transform: translateY(-8px) scale(1.04);
opacity: .50;
}
.sdb-highlight:has(.sdb-highlight__link):hover img,
.sdb-highlight:has(.sdb-highlight__link):focus-within img {
transform: scale(1.075);
filter: saturate(1.02) contrast(1.06) brightness(.96);
}
.sdb-highlight:has(.sdb-highlight__link):hover .sdb-highlight__cta,
.sdb-highlight:has(.sdb-highlight__link):focus-within .sdb-highlight__cta {
transform: translateY(-2px);
box-shadow: 0 20px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.82);
}
.sdb-highlight:has(.sdb-highlight__link):hover .sdb-highlight__cta::after,
.sdb-highlight:has(.sdb-highlight__link):focus-within .sdb-highlight__cta::after {
transform: translateX(4px);
}
.sdb-destaques--cols-2 .sdb-highlight__title,
.sdb-destaques--cols-1 .sdb-highlight__title {
max-width: 16ch;
}
.sdb-destaques--cols-3 .sdb-highlight__media,
.sdb-destaques--cols-4 .sdb-highlight__media {
min-height: clamp(380px, 34vw, 500px);
}
.sdb-destaques--cols-3 .sdb-highlight__title,
.sdb-destaques--cols-4 .sdb-highlight__title {
font-size: clamp(24px, 2.25vw, 33px);
max-width: 14ch;
}
.sdb-destaques--cols-3 .sdb-highlight__description,
.sdb-destaques--cols-4 .sdb-highlight__description {
font-size: clamp(14px, 1.05vw, 16px);
}
.sdb-destaques--cols-4 .sdb-highlight__content {
inset: 22px 22px 24px 22px;
}
.sdb-destaques--cols-4 .sdb-highlight__title {
font-size: clamp(22px, 1.85vw, 28px);
}
.sdb-destaques--cols-4 .sdb-highlight__description {
font-size: 14px;
}
.sdb-destaques--cols-4 .sdb-highlight__caption {
max-width: 24ch;
font-size: 9.5px;
letter-spacing: .105em;
padding: 6px 10px;
}
@container (max-width: 980px) {
.sdb-destaques__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sdb-highlight__media,
.sdb-destaques--cols-3 .sdb-highlight__media,
.sdb-destaques--cols-4 .sdb-highlight__media {
min-height: clamp(360px, 55vw, 500px);
}
.sdb-highlight__title,
.sdb-destaques--cols-3 .sdb-highlight__title,
.sdb-destaques--cols-4 .sdb-highlight__title {
font-size: clamp(26px, 3.9vw, 38px);
}
}
@container (max-width: 640px) {
.sdb-destaques__grid {
grid-template-columns: 1fr;
gap: 22px;
}
.sdb-highlight,
.sdb-highlight__media {
border-radius: 24px;
}
.sdb-highlight__media,
.sdb-destaques--cols-3 .sdb-highlight__media,
.sdb-destaques--cols-4 .sdb-highlight__media {
min-height: clamp(430px, 118vw, 560px);
}
.sdb-highlight__content,
.sdb-destaques--cols-4 .sdb-highlight__content {
inset: 20px 20px 24px 20px;
}
.sdb-highlight__caption {
max-width: 28ch;
font-size: 10px;
}
.sdb-highlight__title,
.sdb-destaques--cols-3 .sdb-highlight__title,
.sdb-destaques--cols-4 .sdb-highlight__title {
font-size: clamp(29px, 8.7vw, 40px);
max-width: 13ch;
}
.sdb-highlight__description,
.sdb-destaques--cols-3 .sdb-highlight__description,
.sdb-destaques--cols-4 .sdb-highlight__description {
font-size: 15.5px;
}
}
@supports not (container-type: inline-size) {
@media (max-width: 980px) {
.sdb-destaques__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.sdb-destaques__grid { grid-template-columns: 1fr; }
}
}
@media (prefers-reduced-motion: reduce) {
.sdb-highlight::before,
.sdb-highlight__media img,
.sdb-highlight__cta,
.sdb-highlight__cta::after {
transition: none;
}
} .sdb-destaques .sdb-highlight__media {
min-height: clamp(455px, 40vw, 590px);
}
.sdb-destaques .sdb-highlight__media::after {
background:
radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--sdb-highlight-color) 28%, rgba(255,255,255,.18)), transparent 34%),
linear-gradient(180deg, rgba(31, 42, 54, .08) 0%, rgba(31, 42, 54, .28) 42%, rgba(31, 42, 54, .96) 100%),
linear-gradient(90deg, color-mix(in srgb, var(--sdb-highlight-color) 30%, rgba(31, 42, 54, .66)) 0%, rgba(31, 42, 54, .20) 52%, rgba(31, 42, 54, .38) 100%) !important;
}
.sdb-destaques .sdb-highlight__media img,
.sdb-destaques .sdb-highlight__placeholder {
filter: saturate(.88) contrast(1.02) brightness(.82) !important;
}
.sdb-destaques .sdb-highlight__content {
justify-content: flex-end !important;
gap: clamp(10px, 1vw, 14px) !important;
padding: 0 !important;
}
.sdb-destaques .sdb-highlight__caption {
position: absolute !important;
top: 0 !important;
left: 0 !important;
max-width: min(calc(100% - 22px), 44ch) !important;
padding: 7px 13px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.13) !important;
border: 1px solid rgba(255,255,255,.20) !important;
color: rgba(255,255,255,.94) !important;
font-family: var(--sdb-dr-font-body) !important;
font-size: 10.5px !important;
font-weight: 850 !important;
letter-spacing: .135em !important;
line-height: 1.18 !important;
text-transform: uppercase !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
box-shadow: none !important;
}
.sdb-destaques .sdb-highlight__title,
.sdb-destaques .sdb-highlight__content h1.sdb-highlight__title,
.sdb-destaques .sdb-highlight__content h2.sdb-highlight__title,
.sdb-destaques .sdb-highlight__content h3.sdb-highlight__title,
.sdb-destaques .sdb-highlight__content h4.sdb-highlight__title {
margin: 0 !important;
max-width: 12.5ch !important;
color: #fff !important;
font-family: var(--sdb-dr-font-heading) !important;
font-size: clamp(25px, 3.1vw, 38px) !important;
font-weight: 950 !important;
letter-spacing: -.048em !important;
line-height: 1.02 !important;
text-shadow: 0 4px 24px rgba(0,0,0,.44) !important;
}
.sdb-destaques .sdb-highlight__description {
margin: 0 !important;
max-width: 31ch !important;
color: rgba(255,255,255,.93) !important;
font-family: var(--sdb-dr-font-body) !important;
font-size: clamp(14.5px, 1.08vw, 16.5px) !important;
font-weight: 560 !important;
line-height: 1.46 !important;
text-shadow: 0 2px 18px rgba(0,0,0,.36) !important;
}
.sdb-destaques .sdb-highlight__cta {
margin-top: clamp(4px, .7vw, 8px) !important;
padding: 11px 15px 11px 17px !important;
font-size: 13.5px !important;
font-weight: 850 !important;
}
.sdb-destaques--cols-3 .sdb-highlight__media,
.sdb-destaques--cols-4 .sdb-highlight__media {
min-height: clamp(410px, 34vw, 520px) !important;
}
.sdb-destaques--cols-3 .sdb-highlight__title,
.sdb-destaques--cols-4 .sdb-highlight__title,
.sdb-destaques--cols-3 .sdb-highlight__content h3.sdb-highlight__title,
.sdb-destaques--cols-4 .sdb-highlight__content h3.sdb-highlight__title {
font-size: clamp(22px, 2vw, 29px) !important;
max-width: 12.5ch !important;
}
.sdb-destaques--cols-3 .sdb-highlight__description,
.sdb-destaques--cols-4 .sdb-highlight__description {
max-width: 29ch !important;
font-size: clamp(13.5px, .96vw, 15px) !important;
}
.sdb-destaques--cols-3 .sdb-highlight__caption,
.sdb-destaques--cols-4 .sdb-highlight__caption {
max-width: min(calc(100% - 20px), 36ch) !important;
font-size: 9.5px !important;
padding: 6px 10px !important;
letter-spacing: .115em !important;
}
@container (max-width: 980px) {
.sdb-destaques .sdb-highlight__title,
.sdb-destaques .sdb-highlight__content h3.sdb-highlight__title {
font-size: clamp(25px, 4.1vw, 34px) !important;
}
}
@container (max-width: 640px) {
.sdb-destaques .sdb-highlight__caption {
max-width: calc(100% - 18px) !important;
font-size: 9.3px !important;
}
.sdb-destaques .sdb-highlight__title,
.sdb-destaques .sdb-highlight__content h3.sdb-highlight__title {
font-size: clamp(27px, 8vw, 36px) !important;
max-width: 12ch !important;
}
.sdb-destaques .sdb-highlight__description {
font-size: 15px !important;
max-width: 30ch !important;
}
} .sdb-destaques .sdb-highlight__caption,
.sdb-destaques--cols-3 .sdb-highlight__caption,
.sdb-destaques--cols-4 .sdb-highlight__caption {
display: inline-block !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(100% - 8px) !important;
height: auto !important;
max-height: none !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
-webkit-box-orient: initial !important;
}
.sdb-destaques .sdb-highlight__caption::before,
.sdb-destaques .sdb-highlight__caption::after {
content: none !important;
}
@container (max-width: 640px) {
.sdb-destaques .sdb-highlight__caption {
max-width: calc(100% - 6px) !important;
font-size: 9px !important;
line-height: 1.22 !important;
}
}