@layer  properties {@supports  (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {.nl-hs-cl-cases2 *,.nl-hs-cl-cases2 ::before,.nl-hs-cl-cases2 ::after,.nl-hs-cl-cases2 ::backdrop{ --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-ease: initial; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; }}}
@layer  theme {.nl-hs-cl-cases2,.nl-hs-cl-cases2 :host{ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace; --color-white: #fff; --spacing: .25rem; --container-md: 28rem; --container-3xl: 48rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-7xl: 4.5rem; --text-7xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; --tracking-tight: -.025em; --ease-out: cubic-bezier(0, 0, .2, 1); --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-border: var(--border); }}
@layer  base {.nl-hs-cl-cases2 *,.nl-hs-cl-cases2 ::after,.nl-hs-cl-cases2 ::before,.nl-hs-cl-cases2 ::backdrop{ box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }.nl-hs-cl-cases2 ::file-selector-button{ box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }.nl-hs-cl-cases2,.nl-hs-cl-cases2 :host{ text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; }.nl-hs-cl-cases2 hr{ height: 0px; color: inherit; border-top-width: 1px; }.nl-hs-cl-cases2 abbr:where([title]){ text-decoration: underline dotted; }.nl-hs-cl-cases2 h1,.nl-hs-cl-cases2 h2,.nl-hs-cl-cases2 h3,.nl-hs-cl-cases2 h4,.nl-hs-cl-cases2 h5,.nl-hs-cl-cases2 h6{ font-size: inherit; font-weight: inherit; }.nl-hs-cl-cases2 a{ color: inherit; text-decoration: inherit; }.nl-hs-cl-cases2 b,.nl-hs-cl-cases2 strong{ font-weight: bolder; }.nl-hs-cl-cases2 code,.nl-hs-cl-cases2 kbd,.nl-hs-cl-cases2 samp,.nl-hs-cl-cases2 pre{ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; }.nl-hs-cl-cases2 small{ font-size: 80%; }.nl-hs-cl-cases2 sub,.nl-hs-cl-cases2 sup{ vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }.nl-hs-cl-cases2 sub{ bottom: -0.25em; }.nl-hs-cl-cases2 sup{ top: -0.5em; }.nl-hs-cl-cases2 table{ text-indent: 0px; border-color: inherit; border-collapse: collapse; }.nl-hs-cl-cases2 progress{ vertical-align: baseline; }.nl-hs-cl-cases2 summary{ display: list-item; }.nl-hs-cl-cases2 ol,.nl-hs-cl-cases2 ul,.nl-hs-cl-cases2 menu{ list-style: none; }.nl-hs-cl-cases2 img,.nl-hs-cl-cases2 svg,.nl-hs-cl-cases2 video,.nl-hs-cl-cases2 canvas,.nl-hs-cl-cases2 audio,.nl-hs-cl-cases2 iframe,.nl-hs-cl-cases2 embed,.nl-hs-cl-cases2 object{ vertical-align: middle; display: block; }.nl-hs-cl-cases2 img,.nl-hs-cl-cases2 video{ max-width: 100%; height: auto; }.nl-hs-cl-cases2 button,.nl-hs-cl-cases2 input,.nl-hs-cl-cases2 select,.nl-hs-cl-cases2 optgroup,.nl-hs-cl-cases2 textarea{ font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }.nl-hs-cl-cases2 ::file-selector-button{ font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }.nl-hs-cl-cases2 :where(select:is([multiple],.nl-hs-cl-cases2 [size])) optgroup{ font-weight: bolder; }.nl-hs-cl-cases2 :where(select:is([multiple],.nl-hs-cl-cases2 [size])) optgroup option{ padding-inline-start: 20px; }.nl-hs-cl-cases2 ::file-selector-button{ margin-inline-end: 4px; }.nl-hs-cl-cases2 ::placeholder{ opacity: 1; }@supports  (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {.nl-hs-cl-cases2 ::placeholder{ color: currentcolor; }@supports  (color: color-mix(in lab, red, red)) {.nl-hs-cl-cases2 ::placeholder{ color: color-mix(in oklab, currentcolor, transparent); }}}.nl-hs-cl-cases2 textarea{ resize: vertical; }.nl-hs-cl-cases2 ::-webkit-search-decoration{ appearance: none; }.nl-hs-cl-cases2 ::-webkit-date-and-time-value{ min-height: 1lh; text-align: inherit; }.nl-hs-cl-cases2 ::-webkit-datetime-edit{ display: inline-flex; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-fields-wrapper{ padding: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-year-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-month-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-day-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-hour-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-minute-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-second-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-millisecond-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-datetime-edit-meridiem-field{ padding-block: 0px; }.nl-hs-cl-cases2 ::-webkit-calendar-picker-indicator{ line-height: 1; }.nl-hs-cl-cases2 button,.nl-hs-cl-cases2 input:where([type="button"],.nl-hs-cl-cases2 [type="reset"],.nl-hs-cl-cases2 [type="submit"]){ appearance: button; }.nl-hs-cl-cases2 ::file-selector-button{ appearance: button; }.nl-hs-cl-cases2 ::-webkit-inner-spin-button{ height: auto; }.nl-hs-cl-cases2 ::-webkit-outer-spin-button{ height: auto; }.nl-hs-cl-cases2 [hidden]:where(:not([hidden="until-found"])){ display: none !important; }.nl-hs-cl-cases2 *{ border-color: var(--color-border); }.nl-hs-cl-cases2{ background-color: var(--color-background); color: var(--color-foreground); }}
@layer  utilities {.nl-hs-cl-cases2 minmax\(0\,.nl-hs-cl-cases2 1fr\)\)\]{ grid-template-columns: repeat(12, minmax(0px, 1fr)); }.nl-hs-cl-cases2 fit-content\(100\%\)\)\]{ grid-template-rows: repeat(1, fit-content(100%)); }.nl-hs-cl-cases2 0\,.nl-hs-cl-cases2 0\,.nl-hs-cl-cases2 0\)\]{ border-color: rgba(0, 0, 0, 0); }.nl-hs-cl-cases2 28\,.nl-hs-cl-cases2 61\{ background-color: rgba(15, 28, 61, 0.2); }.nl-hs-cl-cases2 28\,.nl-hs-cl-cases2 61\{ background-color: rgba(15, 28, 61, 0.4); }.nl-hs-cl-cases2 251\,.nl-hs-cl-cases2 252\{ background-color: rgba(250, 251, 252, 0.2); }.nl-hs-cl-cases2 251\,.nl-hs-cl-cases2 252\{ background-color: rgba(250, 251, 252, 0.9); }.nl-hs-cl-cases2 0\,.nl-hs-cl-cases2 0\{ --tw-gradient-from: #0009; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.nl-hs-cl-cases2 0\,.nl-hs-cl-cases2 0\{ --tw-gradient-from: #00000073; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.nl-hs-cl-cases2 23\,.nl-hs-cl-cases2 41\{ --tw-gradient-from: #0117291a; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.nl-hs-cl-cases2 0\,.nl-hs-cl-cases2 0\{ --tw-gradient-to: #0000002e; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.nl-hs-cl-cases2 0\,.nl-hs-cl-cases2 0\{ --tw-gradient-to: #0000003d; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.nl-hs-cl-cases2 23\,.nl-hs-cl-cases2 41\{ --tw-gradient-to: #011729cc; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Geist:Black", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Geist Mono:Regular", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Lato:Black", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Lato:Bold", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Lato:Bold Italic", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Lato:Italic", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Lato:Medium", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Lato:Medium Italic", sans-serif; }.nl-hs-cl-cases2 sans-serif\]{ font-family: "Lato:Regular", sans-serif; }.nl-hs-cl-cases2 .\[word-break\:break-word\]{ word-break: break-word; }.nl-hs-cl-cases2 28\,.nl-hs-cl-cases2 61\{ --tw-shadow: 0px 2px 8px 0px var(--tw-shadow-color, #0f1c3d59); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }.nl-hs-cl-cases2 .\[\&_\*\]\:text-\[\#0f1c3d\]\! *{ color: rgb(15, 28, 61) !important; }.nl-hs-cl-cases2 .\[\&_\*\]\:text-\[\#fafbfc\]\! *{ color: rgb(250, 251, 252) !important; }}
.nl-hs-cl-cases2{ --radius: .625rem; --background: oklch(100% 0 0); --foreground: oklch(12.9% .042 264.695); --card: oklch(100% 0 0); --card-foreground: oklch(12.9% .042 264.695); --popover: oklch(100% 0 0); --popover-foreground: oklch(12.9% .042 264.695); --primary: oklch(20.8% .042 265.755); --primary-foreground: oklch(98.4% .003 247.858); --secondary: oklch(96.8% .007 247.896); --secondary-foreground: oklch(20.8% .042 265.755); --muted: oklch(96.8% .007 247.896); --muted-foreground: oklch(55.4% .046 257.417); --accent: oklch(96.8% .007 247.896); --accent-foreground: oklch(20.8% .042 265.755); --destructive: oklch(57.7% .245 27.325); --destructive-foreground: oklch(98.4% .003 247.858); --border: oklch(92.9% .013 255.508); --input: oklch(92.9% .013 255.508); --ring: oklch(70.4% .04 256.788); --chart-1: oklch(64.6% .222 41.116); --chart-2: oklch(60% .118 184.704); --chart-3: oklch(39.8% .07 227.392); --chart-4: oklch(82.8% .189 84.429); --chart-5: oklch(76.9% .188 70.08); --sidebar: oklch(98.4% .003 247.858); --sidebar-foreground: oklch(12.9% .042 264.695); --sidebar-primary: oklch(20.8% .042 265.755); --sidebar-primary-foreground: oklch(98.4% .003 247.858); --sidebar-accent: oklch(96.8% .007 247.896); --sidebar-accent-foreground: oklch(20.8% .042 265.755); --sidebar-border: oklch(92.9% .013 255.508); --sidebar-ring: oklch(70.4% .04 256.788); }
@font-face { font-family: "Lato:Regular"; src: url('../../media/clientes-94e9a1fe-Lato-Regular.woff2') format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato:Medium"; src: url('../../media/clientes-9bb32769-Lato-Medium.woff2') format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Lato:Bold"; src: url('../../media/clientes-d298553b-Lato-Bold.woff2') format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato:Black"; src: url('../../media/clientes-c64df73a-Lato-Black.woff2') format("woff2"); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: "Lato:Italic"; src: url('../../media/clientes-673b4723-Lato-Italic.woff2') format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato:Light"; src: url('../../media/clientes-736fa05b-Lato-Light.woff2') format("woff2"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Lato:Bold_Italic"; src: url('../../media/clientes-6aab28e6-Lato-BoldItalic.woff2') format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato:Bold Italic"; src: url('../../media/clientes-6aab28e6-Lato-BoldItalic.woff2') format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato:Medium Italic"; src: url('../../media/clientes-38e0ede7-Lato-MediumItalic_1') format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono:Regular"; src: url('../../media/clientes-f48e03bd-GeistMono.woff2') format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist_Mono:Regular"; src: url('../../media/clientes-f48e03bd-GeistMono.woff2') format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono:Medium"; src: url('../../media/clientes-b7398b14-IBMPlexMono-Medium.woff2') format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM_Plex_Mono:Medium"; src: url('../../media/clientes-b7398b14-IBMPlexMono-Medium.woff2') format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
.nl-hs-cl-cases2,.nl-hs-cl-cases2,.nl-hs-cl-cases2 #root{ height: 100%; }
.nl-hs-cl-cases2,.nl-hs-cl-cases2{ background-color: rgb(250, 250, 250); }
.nl-hs-cl-cases2{ scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
@font-face { font-family: "Geist:Black"; src: local("Geist-VariableFont_wght"); font-style: normal; font-weight: 900; font-display: swap; }
.nl-hs-cl-cases2{ --nl-color-navy-900: #0f1c3d; --nl-color-blue-600: #2962a2; --nl-color-gray-100: #f5f7f9; --nl-color-gray-200: #ecf0f3; --nl-color-gray-300: #e0e6ec; --nl-color-gray-400: #9baec0; --nl-color-gray-600: #53687b; --nl-color-white-050: #fafbfc; --nl-color-ia-rosa: #ff22bd; --nl-color-ia-azul: #6385ee; --nl-gradiente-ia: linear-gradient(-25.14deg, var(--nl-color-ia-rosa) 22.127%, var(--nl-color-ia-azul) 73.374%); --nl-gradiente-ia-veu: linear-gradient(-10.62deg, var(--nl-color-ia-azul-a05) 33.654%, var(--nl-color-ia-rosa-a05) 100%); --nl-agentes-tile-largura: 90.63rem; --nl-agentes-tile-altura: 50.88rem; --nl-agentes-tile-opacidade: .08; --nl-agentes-tile-imagem: url('../../media/clientes-e5324918-rostos_letras-textura-de-fundo.jpg'); --nl-color-yellow-300: #fff570; --nl-title-3xl-size: 3.375rem; --nl-title-3xl-lh: 1.07; --nl-title-2xl-size: 2.5rem; --nl-title-2xl-lh: 1.11; --nl-title-xl-size: 1.75rem; --nl-title-xl-lh: 1.15; --nl-title-lg-blk-size: 1.5rem; --nl-title-lg-blk-lh: 1.17; --nl-title-lg-size: 1.5rem; --nl-title-lg-lh: 1.17; --nl-title-md-size: 1.25rem; --nl-title-md-lh: 1.21; --nl-title-sm-size: 1.125rem; --nl-title-sm-lh: 1.24; --nl-body-xl-size: 1.5rem; --nl-body-xl-lh: 1.4; --nl-body-lg-size: 1.25rem; --nl-body-lg-lh: 1.48; --nl-body-md-size: 1.125rem; --nl-body-md-lh: 1.53; --nl-body-sm-size: 1rem; --nl-body-sm-lh: 1.6; --nl-body-xs-size: .875rem; --nl-body-xs-lh: 1.67; --nl-body-2xs-size: .75rem; --nl-body-2xs-lh: 1.67; --nl-mono-xs-size: .75rem; --nl-mono-xs-lh: 1.67; --nl-ui-lg-size: 1.125rem; --nl-ui-lg-lh: 1; --nl-ui-md-size: .875rem; --nl-ui-md-lh: 1; --nl-ui-sm-size: .75rem; --nl-ui-sm-lh: 1; --nl-mono-xs-ui-size: .75rem; --nl-mono-xs-ui-lh: 1; --nl-title-3xl-weight: var(--nl-font-weight-black); --nl-title-2xl-weight: var(--nl-font-weight-black); --nl-title-xl-weight: var(--nl-font-weight-black); --nl-title-lg-blk-weight: var(--nl-font-weight-black); --nl-title-lg-weight: var(--nl-font-weight-bold); --nl-title-md-weight: var(--nl-font-weight-bold); --nl-title-sm-weight: var(--nl-font-weight-bold); --nl-body-xl-weight: var(--nl-font-weight-regular); --nl-body-lg-weight: var(--nl-font-weight-regular); --nl-body-md-weight: var(--nl-font-weight-regular); --nl-body-sm-weight: var(--nl-font-weight-regular); --nl-body-xs-weight: var(--nl-font-weight-regular); --nl-body-2xs-weight: var(--nl-font-weight-regular); --nl-mono-xs-weight: var(--nl-font-weight-regular); --nl-ui-lg-weight: var(--nl-font-weight-bold); --nl-ui-md-weight: var(--nl-font-weight-bold); --nl-ui-sm-weight: var(--nl-font-weight-bold); --nl-mono-xs-ui-weight: var(--nl-font-weight-regular); --nl-color-navy-a10: #0f1c3d1a; --nl-color-navy-a00: #0f1c3d00; --nl-color-navy-a002: #0f1c3d01; --nl-color-navy-a02: #0f1c3d05; --nl-color-navy-a04: #0f1c3d0a; --nl-color-navy-a06: #0f1c3d0f; --nl-color-navy-a08: #0f1c3d14; --nl-color-navy-a14: #0f1c3d24; --nl-color-navy-a15: #0f1c3d26; --nl-color-navy-a20: #0f1c3d33; --nl-color-navy-a30: #0f1c3d4d; --nl-color-navy-a40: #0f1c3d66; --nl-veu-leitura: linear-gradient(to bottom, #0f1c3d00 0%, #0f1c3d00 35%, #0f1c3dd9 100%); --nl-color-navy-a24: #0f1c3d3d; --nl-color-navy-a3: #0f1c3d4d; --nl-color-ia-azul-a05: #6385ee0d; --nl-color-ia-rosa-a05: #ff22bd0d; --nl-font-family-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --nl-font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; --nl-font-weight-regular: 400; --nl-font-weight-bold: 700; --nl-font-weight-black: 900; --nl-tracking-hero: -1px; --nl-tracking-section: -.5px; --nl-tracking-feature: -1px; --nl-tracking-none: 0; --nl-tag-pad-y: 10px; --nl-hover-duracao: .16s; --nl-hover-curva: cubic-bezier(.4, 0, .2, 1); --nl-hover-blue-700: #23548b; --nl-hover-veu-navy: color-mix(in srgb, var(--nl-color-navy-900) 4%, transparent); --nl-hover-branco-foto: color-mix(in srgb, var(--nl-color-navy-900) 6%, var(--nl-color-white-050)); --nl-space-4: .25rem; --nl-space-8: .5rem; --nl-space-52: 3.25rem; --nl-space-12: .75rem; --nl-space-16: 1rem; --nl-space-20: 1.25rem; --nl-space-24: 1.5rem; --nl-space-32: 2rem; --nl-space-36: 2.25rem; --nl-space-40: 2.5rem; --nl-space-48: 3rem; --nl-space-60: 3.75rem; --nl-space-64: 4rem; --nl-space-80: 5rem; --nl-space-100: 6.25rem; --nl-space-120: 7.5rem; --nl-space-160: 10rem; --nl-space-200: 12.5rem; --nl-grid-breakpoint: 900px; --nl-grid-columns: 4; --nl-grid-gutter: 1rem; --nl-grid-inset: 1.25rem; --nl-grid-max: 80rem; --nl-space-140: 8.75rem; --nl-radius-4: 4px; --nl-radius-8: 8px; --nl-radius-pill: 999px; --nl-border-1: 1px; --nl-focus-ring: 2px; --nl-focus-offset: 2px; --nl-touch-target: 44px; --nl-touch-target-small: 24px; --nl-nav-height: 68px; --nl-regua-altura: calc(100vh - var(--nl-nav-height)); --nl-regua-curso-extra: 70vh; --nl-regua-composicao: 38rem; --nl-regua-largura: 30rem; background-color: var(--nl-color-white-050); color: var(--nl-color-navy-900); font-family: var(--nl-font-family-sans); font-size: var(--nl-body-md-size); line-height: var(--nl-body-md-lh); -webkit-font-smoothing: antialiased; position: relative; overflow-x: clip; }
@media  (width <= 899px) {.nl-hs-cl-cases2{ font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); }}
@media  (width >= 900px) {.nl-hs-cl-cases2{ --nl-grid-columns: 12; --nl-grid-gutter: 1.5rem; --nl-grid-inset: 5rem; }}
@media  (width <= 899px) {.nl-hs-cl-cases2{ --nl-tracking-hero: -.5px; --nl-tracking-section: -.5px; --nl-tracking-feature: 0; }}
.nl-hs-cl-cases2 *,.nl-hs-cl-cases2 ::before,.nl-hs-cl-cases2 ::after{ box-sizing: border-box; }
.nl-hs-cl-cases2 :focus-visible{ outline: var(--nl-focus-ring) solid var(--nl-color-blue-600); outline-offset: var(--nl-focus-offset); }
.nl-hs-cl-cases2 .l4-section-title{ font-size: var(--nl-title-2xl-size); font-weight: var(--nl-font-weight-black); line-height: var(--nl-title-2xl-lh); letter-spacing: var(--nl-tracking-section); margin: 0px; }
@media  (width <= 899px) {.nl-hs-cl-cases2 .l4-section-title{ font-size: var(--nl-title-xl-size); line-height: var(--nl-title-xl-lh); }}
.nl-hs-cl-cases2 .l4-br{ display: inline; }
@media  (width <= 899px) {.nl-hs-cl-cases2 .l4-br{ width: 0.25em; height: 0px; display: inline-block; }}
.nl-hs-cl-cases2 .nl-shell{ width: 100%; max-width: calc(var(--nl-grid-max) + var(--nl-grid-inset) * 2); padding-inline: var(--nl-grid-inset); margin-inline: auto; }
@media  (width <= 899px) {.nl-hs-cl-cases2{ --nl-conteudo-fluido: clamp(350px, calc(41.26vw + 188.1px), 560px); }}
@media  (width <= 899px) {.nl-hs-cl-cases2{ --frz-conteudo-fluido: clamp(350px, calc(41.26vw + 188.1px), 560px); }}
.nl-hs-cl-cases2.cl-cases{ padding-block: var(--nl-space-80); color: var(--nl-color-navy-900); }
.nl-hs-cl-cases2 .cl-cases__grade{ margin: var(--nl-space-48) 0 0; gap: var(--nl-grid-gutter); grid-template-columns: 1fr; padding: 0px; list-style: none; display: grid; }
.nl-hs-cl-cases2 .cl-card{ aspect-ratio: 1 / 1; border-radius: 12px; flex-direction: column; min-width: 0px; display: flex; position: relative; overflow: clip; }
.nl-hs-cl-cases2 .cl-card__foto{ object-fit: cover; object-position: center top; width: 100%; height: 100%; position: absolute; inset: 0px; }
.nl-hs-cl-cases2 .cl-card__veu{ background-color: var(--nl-color-navy-900); opacity: 0.4; position: absolute; inset: 0px; }
.nl-hs-cl-cases2 .cl-card__corpo{ gap: var(--nl-space-8); height: 100%; color: var(--nl-color-white-050); flex-direction: column; padding: clamp(24px, 18px + 1.52vw, 40px); display: flex; position: relative; }
.nl-hs-cl-cases2 .cl-card__logo{ height: 30px; color: var(--nl-color-white-050); align-items: center; display: flex; }
.nl-hs-cl-cases2 .cl-card__citacao{ max-width: 300px; font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); font-weight: var(--nl-font-weight-bold); margin: auto 0px 0px; }
.nl-hs-cl-cases2 .cl-card__link{ width: var(--nl-touch-target); height: var(--nl-touch-target); color: var(--nl-color-white-050); border-radius: 999px; justify-content: center; align-items: center; text-decoration: none; display: flex; position: absolute; bottom: calc(6px + clamp(24px, 18px + 1.52vw, 40px)); right: calc(-12px + clamp(24px, 18px + 1.52vw, 40px)); }
.nl-hs-cl-cases2 .cl-card__link svg{ width: 20px; height: 20px; display: block; }
.nl-hs-cl-cases2 .cl-card__link:hover{ background-color: color-mix(in srgb, var(--nl-color-white-050) 16%, transparent); }
.nl-hs-cl-cases2 .cl-card__link:focus-visible{ outline: 2px solid var(--nl-color-white-050); outline-offset: 2px; }
.nl-hs-cl-cases2 .cl-pag{ margin-top: var(--nl-space-48); justify-content: center; align-items: center; display: flex; }
.nl-hs-cl-cases2 .cl-pag__seta,.nl-hs-cl-cases2 .cl-pag__num{ appearance: none; width: var(--nl-touch-target); height: var(--nl-touch-target); color: var(--nl-color-navy-900); font-family: inherit; font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); font-weight: var(--nl-font-weight-bold); cursor: pointer; background: none; border: 0px; justify-content: center; align-items: center; display: flex; }
.nl-hs-cl-cases2 .cl-pag__seta svg{ width: 20px; height: 20px; display: block; }
.nl-hs-cl-cases2 .cl-pag__seta:disabled,.nl-hs-cl-cases2 .cl-pag__num:disabled{ color: var(--nl-color-navy-900); cursor: default; }
.nl-hs-cl-cases2 .cl-pag__num[aria-current="page"]:disabled{ color: var(--nl-color-navy-900); }
.nl-hs-cl-cases2 .cl-pag__seta:focus-visible,.nl-hs-cl-cases2 .cl-pag__num:focus-visible{ outline: 2px solid var(--nl-color-blue-600); outline-offset: 2px; }
@media  (width >= 900px) {.nl-hs-cl-cases2.cl-cases{ padding-block: var(--nl-space-120); }.nl-hs-cl-cases2 .cl-cases__grade{ margin-top: var(--nl-space-64); grid-template-columns: repeat(3, minmax(0px, 1fr)); }}
.nl-hs-cl-cases2 .cl-filtros{ margin-top: var(--nl-space-40); flex-wrap: wrap; justify-content: center; gap: 8px; display: flex; }
.nl-hs-cl-cases2 .cl-filtro{ background: var(--nl-color-gray-200); min-height: 44px; color: var(--nl-color-gray-600); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: var(--nl-ui-md-size); line-height: var(--nl-ui-md-lh); cursor: pointer; border: 0px; border-radius: 999px; align-items: center; gap: 4px; padding: 0px 20px; font-weight: 400; display: inline-flex; }
.nl-hs-cl-cases2 .cl-filtro svg{ width: 12px; height: 12px; transition: transform 0.2s; }
.nl-hs-cl-cases2 .cl-filtro[aria-expanded="true"] svg{ transform: rotate(180deg); }
.nl-hs-cl-cases2 .cl-filtro:disabled{ cursor: default; }
.nl-hs-cl-cases2 .cl-filtro[data-ativo]{ background: var(--nl-color-navy-900); color: var(--nl-color-white-050); }
.nl-hs-cl-cases2.cl-cases .l4-section-title{ text-align: center; }
.nl-hs-cl-cases2 .cl-card__foto,.nl-hs-cl-cases2 .cl-card__veu,.nl-hs-cl-cases2 .cl-card__citacao,.nl-hs-cl-cases2 .cl-card__link svg{ transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media  (hover: hover) and (pointer: fine) {.nl-hs-cl-cases2 .cl-card:hover .cl-card__foto{ transform: scale(1.04); }.nl-hs-cl-cases2 .cl-card:hover .cl-card__veu{ opacity: 0.55; }.nl-hs-cl-cases2 .cl-card:hover .cl-card__citacao{ transform: translateY(-4px); }.nl-hs-cl-cases2 .cl-card:hover .cl-card__link svg{ transform: translateX(4px); }}
.nl-hs-cl-cases2 .cl-card:focus-within .cl-card__veu{ opacity: 0.55; }
@media  (prefers-reduced-motion: reduce) {.nl-hs-cl-cases2 .cl-card__foto,.nl-hs-cl-cases2 .cl-card__citacao,.nl-hs-cl-cases2 .cl-card__link svg{ transition: none; transform: none !important; }}
.nl-hs-cl-cases2 .cl-card__corpo{ padding: 32px; }
.nl-hs-cl-cases2 .cl-card__citacao{ max-width: none; padding-right: var(--nl-space-40); white-space: pre-line; }
.nl-hs-cl-cases2 .cl-card__link{ bottom: 34px; right: 20px; }
.nl-hs-cl-cases2.cl-cases{ padding-block: var(--nl-space-120); }
.nl-hs-cl-cases2 .cl-filtro{ min-height: 0px; padding: var(--nl-space-4) var(--nl-space-12); border-radius: var(--nl-radius-4); font-family: var(--nl-font-family-mono); font-size: var(--nl-mono-xs-size); line-height: var(--nl-mono-xs-lh); font-weight: 400; position: relative; }
.nl-hs-cl-cases2 .cl-filtro::after{ content: ""; height: 44px; position: absolute; top: 50%; left: 0px; right: 0px; transform: translateY(-50%); }
.nl-hs-cl-cases2 .cl-filtro[aria-pressed="true"]{ background: var(--nl-color-navy-900); color: var(--nl-color-white-050); }
.nl-hs-cl-cases2 .cl-filtro:focus-visible{ outline: 2px solid var(--nl-color-navy-900); outline-offset: 2px; }
.nl-hs-cl-cases2 .cl-card{ border-radius: var(--nl-radius-8); }
.nl-hs-cl-cases2 .cl-card__citacao{ font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); }
.nl-hs-cl-cases2 .cl-filtros[hidden],.nl-hs-cl-cases2 .cl-pag[hidden]{ display: none; }
.nl-hs-cl-cases2 .cl-card__logo img {display:block;max-width:100%;max-height:var(--nl-space-40);object-fit:contain;}
/* ===== regras atuais do site (clientes.css, 22 out 2026): filtros, paginação, cartão inteiro clicável ===== */
/* ─────────────────────────────────────────────────────────────────────────
   /clientes — só o que NASCE nesta tela.
   Tudo o que é igual à home vem do l4.css; esta folha entra DEPOIS dele e
   só cobre as três faixas novas: o carrossel de marcas, a grade de cases e
   a grade das 300 empresas.
   Toda entrelinha é declarada. Nenhum FFFFFF. Casca sempre .nl-shell.
   22 set 2026.
   ───────────────────────────────────────────────────────────────────────── */


/* ═══ CASES EM GRADE — nó 253:4628 ════════════════════════════════════════
   Três colunas de 410,67 em 1440 (1280 com gutter 24), card quadrado, foto
   no card inteiro e texto por cima, como os cards de departamento.
   GRADE SERVE À COMPLETUDE: aqui o argumento é "são muitos", não "leia um". */
.cl-cases {
  padding-block: var(--nl-space-80);
  color: var(--nl-color-navy-900);
}

.cl-cases__grade {
  list-style: none;
  margin: var(--nl-space-48) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nl-grid-gutter);
}

.cl-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: clip;
  border-radius: 12px; /* nó 325:6524, 23 set 2026; superado: radius-4 */
  display: flex;
  flex-direction: column;
}

.cl-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.cl-card__veu {
  position: absolute;
  inset: 0;
  background-color: var(--nl-color-navy-900);
  opacity: 0.4; /* 23 set 2026, lido do print; superado: 0.6 */
}

.cl-card__corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nl-space-8);
  padding: clamp(24px, 1.52vw + 18px, 40px); /* nó 325:6524: 40 em 1440, 24 em 390; superado: 24 */
  height: 100%;
  color: var(--nl-color-white-050);
}

.cl-card__logo {
  display: flex;
  align-items: center;
  height: 30px;
  color: var(--nl-color-white-050);
}

/* o número é o dado da faixa: manchete de 40/44, rótulo de 18/24 embaixo */
.cl-card__numero {
  margin: 0;
  margin-top: auto;
  font-size: var(--nl-title-2xl-size);
  line-height: var(--nl-title-2xl-lh);
  font-weight: var(--nl-font-weight-black);
  letter-spacing: -0.5px;
}
@media (max-width: 899px) { .cl-card__numero { font-size: var(--nl-title-xl-size); line-height: var(--nl-title-xl-lh); } }

.cl-card__numero span {
  display: block;
  font-size: var(--nl-body-md-size);
  line-height: var(--nl-body-md-lh);
  font-weight: var(--nl-font-weight-regular);
}
@media (max-width: 899px) { .cl-card__numero span { font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); } }

.cl-card__citacao {
  /* nó 325:6524 (23 set 2026): citação no PÉ, em negrito; superado: 18/24 regular logo abaixo do número */
  margin: auto 0 0;
  max-width: 300px; /* medida das linhas do print */
  font-size: var(--nl-body-sm-size);
  line-height: var(--nl-body-sm-lh);
  font-weight: var(--nl-font-weight-bold);
}

.cl-card__assina {
  margin: var(--nl-space-8) 0 0;
  padding-right: var(--nl-space-40); /* a seta mora nesta linha */
  font-size: var(--nl-body-xs-size);
  line-height: var(--nl-body-xs-lh);
  font-weight: var(--nl-font-weight-regular);
}

.cl-card__assina span {
  display: block;
  font-size: var(--nl-body-xs-size);
  line-height: var(--nl-body-xs-lh);
  font-weight: var(--nl-font-weight-regular);
  color: var(--nl-color-white-050);
}

/* ALVO DE TOQUE NUNCA DEFORMA DESENHO: o desenho é 20 (nó 253:4683) e o
   alvo cresce POR FORA até 44, transbordando o recuo do card. */
.cl-card__link {
  position: absolute;
  right: calc(clamp(24px, 1.52vw + 18px, 40px) - 12px);
  bottom: calc(clamp(24px, 1.52vw + 18px, 40px) + 6px);
  width: var(--nl-touch-target);
  height: var(--nl-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nl-color-white-050);
  border-radius: 999px;
  text-decoration: none;
}

.cl-card__link svg {
  width: 20px;
  height: 20px;
  display: block;
}

.cl-card__link:hover {
  background-color: color-mix(in srgb, var(--nl-color-white-050) 16%, transparent);
}

.cl-card__link:focus-visible {
  outline: 2px solid var(--nl-color-white-050);
  outline-offset: 2px;
}

/* ═══ PAGINAÇÃO DOS CASES — nó 253:4684 ═══════════════════════════════════
   Fileira centrada de 28: seta, 1, 2, 3, seta. Desenho de 20 (nó 253:4686);
   ALVO DE TOQUE NUNCA DEFORMA DESENHO — o alvo cresce por fora até 44. */
.cl-pag {
  margin-top: var(--nl-space-48);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cl-pag__seta,
.cl-pag__num {
  appearance: none;
  background: none;
  border: 0;
  width: var(--nl-touch-target);
  height: var(--nl-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nl-color-navy-900);
  font-family: inherit;
  font-size: var(--nl-body-sm-size);
  line-height: var(--nl-body-sm-lh);
  font-weight: var(--nl-font-weight-bold);
  cursor: pointer;
}

.cl-pag__seta svg {
  width: 20px;
  height: 20px;
  display: block;
}

.cl-pag__num[aria-current="page"] {
  /* 23 set 2026: sem sublinhado, os três números iguais no Figma */
}

.cl-pag__seta:disabled,
.cl-pag__num:disabled {
  color: var(--nl-color-navy-900); /* 23 set 2026; superado: gray-600 */
  cursor: default;
}

.cl-pag__num[aria-current="page"]:disabled {
  color: var(--nl-color-navy-900);
}

.cl-pag__seta:focus-visible,
.cl-pag__num:focus-visible {
  outline: 2px solid var(--nl-color-blue-600);
  outline-offset: 2px;
}


@media (min-width: 900px) {
  .cl-cases {
    padding-block: var(--nl-space-120);
  }

  .cl-cases__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--nl-space-64);
  }

}


/* ═══ 06 · FAIXA DE FOTO — nó 253:4735 ════════════════════════════════════
   1440 × 676 de ponta a ponta (razão 2,13:1). A sangria É a casca: o
   `.nl-grid--sangra` entra direto na seção, sem `.nl-shell` em volta, senão
   o recuo somaria duas vezes. Abaixo de 900 a razão fecha para 4:3, porque
   2,13:1 em 390 vira uma fita de 183 e a foto deixa de se ler.
   TAMANHO INTERPOLA, COMPORTAMENTO NÃO: só a razão muda. */
/* ═══ 06 · FAIXA DO OLHO COM NÚMEROS — nó 325:6601 (23 set 2026) ═════════
   1440 × 356, foto de ponta a ponta (olho-faixa, 1521 × 704), véu navy
   0,30 → 0,15, quatro números de 3 colunas cada, texto #FAFBFC. */
.cl-foto {
  position: relative;
  overflow: clip;
  padding-block: var(--nl-space-64);
  color: var(--nl-color-white-050);
}
.cl-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.cl-foto__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--nl-color-navy-a3), var(--nl-color-navy-a15));
}
.cl-foto .nl-shell { position: relative; }
.cl-foto__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nl-space-32) var(--nl-grid-gutter);
}
.cl-foto__item { display: flex; flex-direction: column; gap: var(--nl-space-8); min-width: 0; }
.cl-foto__num {
  font-weight: 700;
  font-size: clamp(28px, 1.9vw + 20.6px, 40px);
  line-height: 1;
  letter-spacing: -1px;
}
.cl-foto__rot { font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); }

@media (min-width: 900px) {
  .cl-foto { min-height: 356px; padding-block: 100px; }
  .cl-foto__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 40px 104px; column-gap: 28px; }
  .cl-foto__item { padding-inline: 40px; }
}

/* ═══ HERO — nó 325:6474: papel-v2 em multiply, sem manuscrito ═══════════ */
.cl-hero .cl-hero__art {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: clip;
  mix-blend-mode: multiply;
  opacity: 0.8; /* nó 325:6472, 23 set 2026 */
  pointer-events: none;
}
.cl-hero .cl-hero__art img {
  position: absolute;
  display: block;
  /* nó 325:6472 (23 set 2026); superado: 45.59 / -17.08 / 54.41 / 117.07 */
  left: 43.13%;
  top: -22.75%;
  width: 59.68%;
  height: 128.43%;
  max-width: none;
  object-fit: cover;
}
@media (min-width: 900px) {
  /* a home pede 720 pela arte dela; aqui o Figma declara 532 */
  .cl-hero .l4-hero__container { min-height: 532px; }
  /* a frase cabe numa linha só (pedido do David, 24 set 2026) */
  .cl-hero .l4-hero__sub { max-width: none; }
  .cl-hero .l4-hero__sub-line { white-space: nowrap; }
}
@media (max-width: 899px) {
  .cl-hero .cl-hero__art img {
    left: 30%;
    top: auto;
    bottom: -8%;
    width: 80%;
    height: auto;
    aspect-ratio: 1920 / 1717;
    opacity: 0.6;
  }
}

/* ═══ FRENTES — nó 325:6510: caixa #ECF0F3, raio 12, grade de 12 ═════════ */
.cl-frentes { padding-block: var(--nl-space-40); background: var(--nl-color-white-050); }
.cl-frentes__caixa {
  background: var(--nl-color-gray-200);
  border-radius: 12px;
  padding: var(--nl-space-40) var(--nl-space-20);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nl-space-24);
  color: var(--nl-color-navy-900);
}
.cl-frentes__item { display: flex; flex-direction: column; gap: var(--nl-space-8); min-width: 0; }
.cl-frentes__nome { margin: 0; font-weight: 700; font-size: var(--nl-title-lg-size); line-height: var(--nl-title-lg-lh); }
.cl-frentes__texto { margin: 0; font-size: var(--nl-body-xs-size); line-height: var(--nl-body-xs-lh); color: var(--nl-color-gray-600); }
.cl-frentes__cabeca { display: flex; flex-direction: column; gap: 12px; order: -1; min-width: 0; }
.cl-frentes__titulo { margin: 0; font-weight: 900; font-size: clamp(28px, 2.3vw + 19px, 40px); line-height: 1.1; letter-spacing: -0.5px; }
.cl-frentes__sub { margin: 0; font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); }
@media (min-width: 900px) {
  .cl-frentes { padding: 80px 0 40px; }
  .cl-frentes__caixa { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; padding: 40px 80px; }
  .cl-frentes__item:nth-child(1) { grid-column: 1 / span 2; }
  .cl-frentes__item:nth-child(2) { grid-column: 3 / span 2; }
  .cl-frentes__item:nth-child(3) { grid-column: 5 / span 2; }
  .cl-frentes__nome { max-width: 7ch; }
  .cl-frentes__cabeca { order: 0; grid-column: 8 / span 5; grid-row: 1; align-self: start; }
  .cl-frentes__titulo { line-height: var(--nl-title-2xl-lh); }
}

/* ═══ FILTROS DOS CASES — nó 325:6528: quatro pílulas centradas ══════════ */
.cl-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--nl-space-40); }
.cl-filtro {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px; /* superado 23 set: stroke gray-400 sem fundo */
  background: var(--nl-color-gray-200); color: var(--nl-color-gray-600);
  font: inherit; font-size: var(--nl-ui-md-size); line-height: var(--nl-ui-md-lh); font-weight: 400; cursor: pointer; /* 23 set 2026 (tarde): 14/14 regular; 16/16 bold SUPERADO; antes 14/14 regular navy com stroke */
}
.cl-filtro svg { width: 12px; height: 12px; transition: transform 200ms ease; }
.cl-filtro[aria-expanded="true"] svg { transform: rotate(180deg); }
.cl-filtro:disabled { cursor: default; }
.cl-filtro[data-ativo] { background: var(--nl-color-navy-900); color: var(--nl-color-white-050); }
.cl-filtro__conta { font-size: var(--nl-ui-sm-size); line-height: var(--nl-ui-sm-lh); }
.cl-filtro-wrap { position: relative; }
.cl-filtro__lista {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 240px;
  margin: 0; padding: 8px; list-style: none; text-align: left;
  background: var(--nl-color-white-050); border-radius: 12px;
  box-shadow: 0 8px 24px var(--nl-color-navy-a14);
}
.cl-filtro__opcao {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  font-size: var(--nl-body-xs-size); line-height: var(--nl-body-xs-lh); color: var(--nl-color-navy-900); cursor: pointer; border-radius: 8px;
}
.cl-filtro__opcao:hover { background: var(--nl-color-gray-100); }
.cl-filtro__opcao input { accent-color: var(--nl-color-navy-900); width: 16px; height: 16px; margin: 0; }
.cl-filtro__limpar {
  min-height: 44px; padding: 0 12px; border: 0; background: none; font: inherit;
  font-size: var(--nl-ui-md-size); line-height: var(--nl-ui-md-lh); color: var(--nl-color-blue-600, #2962A2); cursor: pointer;
}
.cl-cases__vazio { text-align: center; margin-top: var(--nl-space-40); font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); color: var(--nl-color-navy-900); }
.cl-cases .l4-section-title { text-align: center; }

/* caixas das marcas novas da grade das 300 — tamanho próprio de cada SVG */
.l4-logos__item[data-marca="unimed"] .l4-logos__art { width: 92px; height: 14px; }
.l4-logos__item[data-marca="localiza"] .l4-logos__art { width: 92px; height: 19px; }
.l4-logos__item[data-marca="btg"] .l4-logos__art { width: 102px; height: 40px; }
.l4-logos__item[data-marca="vibra"] .l4-logos__art { width: 88px; height: 33px; }
.l4-logos__item[data-marca="olx"] .l4-logos__art { width: 85px; height: 18px; }
.l4-logos__item[data-marca="blip"] .l4-logos__art { width: 62px; height: 23px; }
.l4-logos__item[data-marca="andrade"] .l4-logos__art { width: 80px; height: 31px; }
.l4-logos__item[data-marca="saintgobain"] .l4-logos__art { width: 79px; height: 33px; }
.l4-logos__item[data-marca="portoacu"] .l4-logos__art { width: 59px; height: 37px; }
.l4-logos__item[data-marca="alice"] .l4-logos__art { width: 62px; height: 33px; }
.l4-logos__item[data-marca="atvos"] .l4-logos__art { width: 90px; height: 25px; }
.l4-logos__item[data-marca="mrv"] .l4-logos__art { width: 89px; height: 24px; }
.l4-logos__item[data-marca="dux"] .l4-logos__art { width: 70px; height: 20px; }


/* ═══ AJUSTES DO NÓ 329:284 (23 set 2026) ═════════════════════════════════
   Três faixas lidas no Figma. Valores anteriores ficam acima, superados. */

/* FRENTES — nó 329:324: a caixa ganha a foto do olho + véu preto 20%;
   texto todo #FAFBFC; seção 80 em cima, 20 embaixo.
   superado: caixa gray-200 lisa, texto navy/gray-600, 80/40 */
.cl-frentes__caixa {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--nl-color-navy-900);
  color: var(--nl-color-white-050);
}
.cl-frentes__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cl-frentes__veu { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.2); }
.cl-frentes__texto { color: var(--nl-color-white-050); }
.cl-frentes__nome { color: var(--nl-color-white-050); }
@media (min-width: 900px) {
  .cl-frentes { padding: 80px 0 20px; }
}

/* NÚMEROS — nó 329:455: fundo #E0E6EC liso, 80 de recuo, 336 em 1440;
   número 40 bold navy −1, rótulo 16/22 BOLD #53687B.
   superado: foto do olho + véu navy, texto branco, rótulo regular */
.cl-foto {
  background: var(--nl-color-gray-300);
  color: var(--nl-color-navy-900);
  padding-block: var(--nl-space-40);
}
.cl-foto__num { color: var(--nl-color-navy-900); line-height: normal; }
.cl-foto__rot { color: var(--nl-color-gray-600); font-weight: 700; line-height: var(--nl-body-xs-lh); }
@media (min-width: 900px) {
  .cl-foto { min-height: 336px; padding-block: 80px; display: flex; align-items: center; }
  .cl-foto > .nl-shell { width: 100%; }
}

.cl-foto__item { gap: 0; }
/* a foto e o véu entram como filhos da caixa: a posição das frentes passa a
   contar por div (nth-of-type), senão as colunas escorregam duas casas */
@media (min-width: 900px) {
  .cl-frentes__item:nth-child(n) { grid-column: auto; }
  .cl-frentes__item:nth-of-type(1) { grid-column: 1 / span 2; grid-row: 1; }
  .cl-frentes__item:nth-of-type(2) { grid-column: 3 / span 2; grid-row: 1; }
  .cl-frentes__item:nth-of-type(3) { grid-column: 5 / span 2; grid-row: 1; }
}

/* ═══ HOVER DOS CARDS DE CASE — 23 set 2026, decisão nossa (pedido do David,
   "sutil, fluido, elegante, estilo Harvey"). Sem nó no Figma.
   Foto aproxima 4% em 900 ms, véu escurece 0,40→0,55, citação sobe 4 e a
   seta desliza 4 para a direita. Mesma curva em tudo. Só com ponteiro fino;
   prefers-reduced-motion corta o movimento e mantém o véu. */
.cl-card__foto,
.cl-card__veu,
.cl-card__citacao,
.cl-card__assina,
.cl-card__link svg {
  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .cl-card:hover .cl-card__foto { transform: scale(1.04); }
  .cl-card:hover .cl-card__veu { opacity: 0.55; }
  .cl-card:hover .cl-card__citacao,
  .cl-card:hover .cl-card__assina { transform: translateY(-4px); }
  .cl-card:hover .cl-card__link svg { transform: translateX(4px); }
}
.cl-card:focus-within .cl-card__veu { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .cl-card__foto,
  .cl-card__citacao,
  .cl-card__assina,
  .cl-card__link svg { transition: none; transform: none !important; }
}

/* 24 set 2026: texto novo sem aspas, sem nome/cargo, recuo 32 em toda largura.
   superado: recuo clamp(24→40), assinatura embaixo da citação */
.cl-card__corpo { padding: 32px; }
.cl-card__citacao { max-width: none; padding-right: var(--nl-space-40); white-space: pre-line; }
.cl-card__link { right: 20px; bottom: 34px; }

/* ═══ NÓ 350:2945 (24 set 2026) — três faixas ═══════════════════════════ */

/* HERO — nó 350:2947: centrado, sem arte, 100 de recuo, 60 embaixo.
   superado: papel-v2 em multiply, texto à esquerda, 532 de altura, botão */
.cl-hero .l4-hero__container { min-height: 0; }
.cl-hero .l4-hero__text {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  text-align: center; margin-inline: auto;
}
.cl-hero .l4-hero__sub, .cl-hero .l4-hero__sub-line { text-align: center; margin: 0; }
@media (min-width: 900px) {
  .cl-hero .l4-hero__container { min-height: 0; padding: 100px 40px; }
  .cl-hero { padding-bottom: 60px; }
}

/* FRENTES — nó 350:2985: foto de ponta a ponta na seção, véu navy 0,30,
   seção 50 de recuo; a caixa fica sem fundo (40/80).
   superado: foto dentro da caixa de raio 12, véu preto 0,20, 80/20 */
.cl-frentes { position: relative; isolation: isolate; overflow: clip; padding-block: 50px; }
.cl-frentes > .cl-frentes__img { z-index: -2; object-position: center 40%; }
.cl-frentes > .cl-frentes__veu { z-index: -1; background: var(--nl-color-navy-a40); }
.cl-frentes__caixa { background: transparent; overflow: visible; }
@media (min-width: 900px) {
  .cl-frentes { padding: 50px 0; }
}

/* NÚMEROS — nó 350:3110: sem fundo, fio #E0E6EC à esquerda do 2º ao 4º,
   item 40/20. superado: fundo #E0E6EC liso */
.cl-foto { background: transparent; }
.cl-foto__item { padding: 20px 0; }
@media (min-width: 900px) {
  .cl-foto { min-height: 296px; }
  .cl-foto__item { padding: 20px 40px; }
  .cl-foto__item + .cl-foto__item { border-left: 1px solid var(--nl-color-gray-300); }
}

/* 24 set 2026 · carrossel de marcas SÓ na Clientes: 60 em cima e embaixo,
   a pedido do David. A home segue com 40 (componente compartilhado). */
.cl-logos .cl-car {
  padding-block: var(--nl-space-60, 3.75rem);
}

/* TRÊS FRENTES, desenho único da /sobre e da /clientes (nó 829:28945, 9 out 2026).
   SUPERADO: véu navy-a3 e itens nas colunas 1–6 da /clientes. */
.cl-frentes > .cl-frentes__veu { background: var(--nl-color-navy-a40); }
.cl-frentes__seta { display: block; width: 24px; height: 24px; color: var(--nl-color-white-050); }
.cl-frentes__seta svg { display: block; width: 100%; height: 100%; }
/* Celular (12 out 2026, David): seta para baixo em custo e risco, para cima em receita. */
@media (max-width: 899px) {
  .cl-frentes__item .cl-frentes__seta svg { transform: rotate(90deg); }
  .cl-frentes__item:nth-child(3) .cl-frentes__seta svg { transform: rotate(-90deg); }
}
@media (min-width: 900px) {
  .cl-frentes .cl-frentes__item:nth-of-type(1) { grid-column: 2 / span 2; }
  .cl-frentes .cl-frentes__item:nth-of-type(2) { grid-column: 4 / span 2; }
  .cl-frentes .cl-frentes__item:nth-of-type(3) { grid-column: 6 / span 2; }
  .cl-frentes .cl-frentes__cabeca { grid-column: 8 / span 5; }
}
/* enquadramento da foto concreto-céu (9 out 2026, print do David): quina do
   concreto no terço esquerdo, céu à direita. SUPERADO: center 40% (foto do olho). */
.cl-frentes > .cl-frentes__img { object-position: center 7%; }

/* ═══ 12 out 2026 · Figma 840:35895 ═══════════════════════════════════════
   Filtros viram toggles: Geist Mono 12, recuo 4/12, raio 4, vão 8.
   Ligado navy-900/branco; desligado gray-200/gray-600. O alvo de toque
   cresce por fora até 44 (o desenho fica com a medida do Figma).
   SUPERADO: pílula 44 de altura, 14/14, com seta e lista (23 set 2026).
   Entrelinha: Figma pede 22; usamos o token mono-xs (1,67 ≈ 20). */
.cl-cases { padding-block: var(--nl-space-120); } /* superado: 80 */
.cl-filtro {
  position: relative;
  min-height: 0; padding: var(--nl-space-4) var(--nl-space-12);
  border-radius: var(--nl-radius-4);
  font-family: var(--nl-font-family-mono);
  font-size: var(--nl-mono-xs-size); line-height: var(--nl-mono-xs-lh); font-weight: 400;
}
.cl-filtro::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.cl-filtro[aria-pressed="true"] { background: var(--nl-color-navy-900); color: var(--nl-color-white-050); }
.cl-filtro:focus-visible { outline: 2px solid var(--nl-color-navy-900); outline-offset: 2px; }
.cl-card { border-radius: var(--nl-radius-8); } /* superado: 12 */
/* enquadramento declarado no Figma (Saint-Gobain e Gerdau) */
.cl-card__foto--figma { inset: auto; max-width: none; object-fit: fill; }
/* texto do resultado: Figma 16/20 bold; DS 16 tem par único 16/24 */
.cl-card__citacao { font-size: var(--nl-body-sm-size); line-height: var(--nl-body-sm-lh); }

/* frentes, 16 out 2026 · Figma 904:62305: ícones próprios já vêm na diagonal — sem giro no celular.
   SUPERADO: rotate(90deg)/rotate(-90deg) abaixo de 900. */
@media (max-width: 899px) {
  .cl-frentes__item .cl-frentes__seta svg,
  .cl-frentes__item:nth-child(3) .cl-frentes__seta svg { transform: none; }
}

/* 16 out 2026: filtros e paginação em hide (atributo hidden vence o display) */
.cl-filtros[hidden], .cl-pag[hidden] { display: none; }

/* 22 out 2026: cartão inteiro clicável — alvo cobre o card, seta vira desenho */
.cl-cases .cl-card__alvo {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.cl-cases .cl-card__alvo:focus-visible {
  outline: 2px solid var(--nl-color-white-050);
  outline-offset: -4px;
}
.cl-cases .cl-card:hover .cl-card__link {
  background-color: color-mix(in srgb, var(--nl-color-white-050) 16%, transparent);
}

.nl-hs-cl-cases2 .cl-card[hidden],.nl-hs-cl-cases2 [hidden]{display:none!important}
.nl-hs-cl-cases2 .cl-card__logo img{max-width:100%}