/* ---------------------------------------------------------------- tokens ---------------------------------------------------------------- */
    /* ============================================================================
   01 · TOKENS — a raiz do sistema
   Herda os nomes usados no site (--ast-global-color-*, --e-global-color-*)
   e adiciona a camada jsld-* do design system v2.
   ========================================================================== */
    :root {
      /* ---- Cores institucionais (Guia Básico da Marca) ---- */
      --jsld-teal-900: #003742;
      /* hsl(190 100% 13%)  rgb(0 55 66)     */
      --jsld-teal-800: #013D49;
      /* hsl(190 97% 15%)   rgb(1 61 73)     */
      --jsld-teal-700: #006271;
      /* PANTONE 3155 C · PRIMÁRIA · valor em produção   */
      --jsld-teal-600: #0A6071;
      /* hsl(190 84% 24%)   rgb(10 96 113)   */
      --jsld-teal-400: #839595;
      /* hsl(180 8% 55%)    rgb(131 149 149) */
      --jsld-teal-100: #D9E4E6;
      --jsld-teal-050: #F1F6F7;

      --jsld-sand-800: #3E3730;
      /* hsl(30 13% 22%)                     */
      --jsld-sand-700: #897E74;
      /* hsl(29 8% 50%)                      */
      --jsld-sand-500: #B7AEA5;
      /* PANTONE WARM GRAY 4 C · SECUNDÁRIA · em produção */
      --jsld-sand-200: #E4DFD9;
      --jsld-sand-050: #F7F5F2;

      --jsld-ink-900: #000000;
      /* PANTONE BLACK                       */
      --jsld-ink-700: #3E3F41;
      /* hsl(220 2% 25%)                     */
      --jsld-ink-400: #6E7074;
      --jsld-paper: #FFFFFF;
      /* BRANCO                              */
      --jsld-paper-alt: #EAEAEA;

      /* ---- Especificação exata do Guia da Marca (2018) ----------------
         Use estes tokens em impressão, PDF e qualquer conversão para
         Pantone/CMYK. Os tokens de produção acima diferem em 1 bit por
         canal (ΔE < 0,4 — imperceptível) e existem por compatibilidade
         com o site publicado. Nunca misture os dois no mesmo artefato. */
      --jsld-pantone-3155c: #006272;
      /* PANTONE 3155 C · C100 M9 Y29 K47 · R0 G98 B114  */
      --jsld-pantone-warmgray4c: #B6ADA5;
      /* PANTONE WARM GRAY 4 C · C11 M13 Y15 K27 · R182 G173 B165 */
      --jsld-pantone-black: #000000;
      /* PANTONE BLACK · C0 M0 Y0 K100 · R0 G0 B0        */

      /* ---- Feedback (derivadas, harmônicas com o teal) ---- */
      --jsld-success: #3F7A62;
      --jsld-warning: #B08442;
      --jsld-danger: #9E3B32;
      --jsld-info: var(--jsld-teal-600);

      /* ---- Pares acessíveis (texto ≥ 4,5:1 sobre paper/sand-050) ------
         As cores de feedback acima são calibradas para PREENCHIMENTO
         (ícone, borda, faixa). Para TEXTO sobre fundo claro use estas. */
      --jsld-success-text: #2F6B54;
      /* 6,26:1 em #FFFFFF                               */
      --jsld-warning-text: #8A6427;
      /* 5,34:1 em #FFFFFF (o #B08442 tem só 3,37:1)     */
      --jsld-danger-text: #9E3B32;
      /* 6,72:1 em #FFFFFF                               */
      --jsld-teal-400-text: #5F7373;
      /* 5,02:1 em #FFFFFF (o #839595 tem só 3,14:1)     */
      --jsld-muted-text: #6E7074;
      /* 4,96:1 em #FFFFFF — mínimo para texto auxiliar  */

      /* ---- Opacidades canônicas ---- */
      --jsld-a04: 0.04;
      --jsld-a08: 0.08;
      --jsld-a12: 0.12;
      --jsld-a24: 0.24;
      --jsld-a40: 0.40;
      --jsld-a64: 0.64;
      --jsld-a88: 0.88;
      --jsld-teal-a08: rgba(0, 98, 113, .08);
      --jsld-teal-a12: rgba(0, 98, 113, .12);
      --jsld-teal-a24: rgba(0, 98, 113, .24);
      --jsld-teal-a64: rgba(0, 98, 113, .64);
      --jsld-sand-a12: rgba(183, 174, 165, .12);
      --jsld-sand-a24: rgba(183, 174, 165, .24);
      --jsld-sand-a40: rgba(183, 174, 165, .40);

      /* ---- Contexto escuro: superfícies e texto ---- */
      --jsld-dark-text: rgba(255, 255, 255, .88);
      --jsld-dark-text-2: rgba(255, 255, 255, .68);
      --jsld-dark-line: rgba(255, 255, 255, .14);
      --jsld-dark-line-2: rgba(255, 255, 255, .28);
      --jsld-dark-surface: rgba(255, 255, 255, .06);

      /* ---- Gradientes da marca ---- */
      --jsld-grad-deep: linear-gradient(135deg, #003742 0%, #006271 55%, #0A6071 100%);
      --jsld-grad-dusk: linear-gradient(160deg, #013D49 0%, #006271 45%, #839595 100%);
      --jsld-grad-sand: linear-gradient(135deg, #F7F5F2 0%, #E4DFD9 60%, #B7AEA5 100%);
      --jsld-grad-line: linear-gradient(90deg, transparent, var(--jsld-sand-500), var(--jsld-teal-700), transparent);
      --jsld-grad-text: linear-gradient(100deg, #FFFFFF 0%, #D9E4E6 40%, #B7AEA5 100%);

      /* ---- Tipografia ---- */
      --jsld-font-display: 'Roxborough CF', 'PT Serif', Georgia, 'Times New Roman', serif;
      --jsld-font-sans: 'Greycliff CF', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
      --jsld-font-ui: 'Fjalla One', 'Greycliff CF', 'Montserrat', sans-serif;
      --jsld-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

      /* Escala tipográfica — herdada do Astra (base 17px = 1rem) */
      --jsld-fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 3.25rem);
      /*  38 → 55px */
      --jsld-fs-h2: clamp(1.9rem, 1.25rem + 2.7vw, 2.75rem);
      /*  32 → 47px */
      --jsld-fs-h3: clamp(1.6rem, 1.15rem + 1.9vw, 2.35rem);
      /*  27 → 40px */
      --jsld-fs-h4: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
      /*  23 → 30px */
      --jsld-fs-h5: 1.2941176rem;
      /*  22px      */
      --jsld-fs-h6: 0.8823529rem;
      /*  15px      */
      --jsld-fs-body-lg: 1.1176470rem;
      /*  19px      */
      --jsld-fs-body: 1rem;
      /*  17px      */
      --jsld-fs-body-sm: 0.8823529rem;
      /*  15px      */
      --jsld-fs-caption: 0.7647058rem;
      /*  13px      */
      --jsld-fs-label: 0.7058823rem;
      /*  12px      */

      /* ---- Espaço, raio, sombra, movimento ---- */
      --jsld-sp-1: .25rem;
      --jsld-sp-2: .5rem;
      --jsld-sp-3: .75rem;
      --jsld-sp-4: 1rem;
      --jsld-sp-5: 1.5rem;
      --jsld-sp-6: 2rem;
      --jsld-sp-7: 3rem;
      --jsld-sp-8: 4.5rem;
      --jsld-sp-9: 7rem;
      --jsld-radius-0: 0px;
      /* botões da marca: cantos retos (herdado do site) */
      --jsld-radius-1: 2px;
      --jsld-radius-2: 4px;
      --jsld-radius-3: 10px;
      --jsld-radius-pill: 999px;
      --jsld-shadow-1: 0 1px 2px rgba(0, 55, 66, .06), 0 2px 8px rgba(0, 55, 66, .06);
      --jsld-shadow-2: 0 4px 12px rgba(0, 55, 66, .08), 0 12px 32px rgba(0, 55, 66, .10);
      --jsld-shadow-3: 0 18px 48px rgba(0, 55, 66, .18), 0 2px 6px rgba(0, 55, 66, .10);
      --jsld-shadow-teal: 0 12px 30px rgba(0, 98, 113, .28);
      --jsld-ease: cubic-bezier(.22, .61, .36, 1);
      --jsld-ease-out: cubic-bezier(.16, 1, .3, 1);
      --jsld-ease-in-out: cubic-bezier(.65, 0, .35, 1);
      --jsld-dur-1: 120ms;
      --jsld-dur-2: 240ms;
      --jsld-dur-3: 420ms;
      --jsld-dur-4: 720ms;
      --jsld-dur-5: 1200ms;
      --jsld-container: 1180px;
      --jsld-container-narrow: 780px;
      --jsld-gutter: clamp(1.1rem, 3vw, 2rem);

      /* ---- Bordas ---- */
      --jsld-line: 1px solid var(--jsld-sand-200);
      --jsld-line-strong: 1px solid var(--jsld-sand-500);
      --jsld-line-dark: 1px solid var(--jsld-dark-line);
      --jsld-focus-ring: 0 0 0 3px var(--jsld-teal-a24);

      /* ---- Camadas (z-index canônico) ---- */
      --jsld-z-base: 1;
      --jsld-z-sticky: 100;
      --jsld-z-nav: 900;
      --jsld-z-drawer: 1000;
      --jsld-z-scrim: 1100;
      --jsld-z-modal: 1200;
      --jsld-z-toast: 1300;
      --jsld-z-tooltip: 1400;

      /* ---- Breakpoints (referência; CSS usa os valores literais) ---- */
      --jsld-bp-sm: 480px;
      --jsld-bp-md: 768px;
      --jsld-bp-lg: 1024px;
      --jsld-bp-xl: 1180px;

      /* ---- Compat: nomes que o site já usa ---- */
      --ast-global-color-0: var(--jsld-teal-700);
      --ast-global-color-1: var(--jsld-ink-700);
      --ast-global-color-2: var(--jsld-sand-700);
      --ast-global-color-3: var(--jsld-ink-700);
      --ast-global-color-4: var(--jsld-sand-050);
      --ast-global-color-5: var(--jsld-paper);
      --ast-global-color-6: var(--jsld-paper-alt);
      --ast-global-color-7: var(--jsld-ink-700);
      --ast-global-color-8: var(--jsld-ink-900);
      --e-global-color-582859a6: var(--jsld-teal-700);
      --e-global-color-e5b41f5: var(--jsld-sand-500);
      --e-global-color-1dbcb4b3: var(--jsld-ink-700);
      --e-global-color-6edd6194: var(--jsld-sand-700);
      --e-global-color-33a5137: var(--jsld-ink-900);
      --e-global-color-4beaf2e8: var(--jsld-paper);
    }



    /* ---------------------------------------------------------------- core ---------------------------------------------------------------- */
    /* ============================================================================
   00 · FONTES INSTITUCIONAIS
   Caminho relativo a partir de Assets/Fontes/
   ========================================================================== */
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    /* ============================================================================
   02 · BASE
   ========================================================================== */
    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html {
      font-size: 17px;
      scroll-behavior: smooth;
      scroll-padding-top: 84px;
      -webkit-text-size-adjust: 100%
    }

    body {
      margin: 0;
      background: var(--jsld-paper);
      color: var(--jsld-ink-700);
      font-family: var(--jsld-font-sans);
      font-size: var(--jsld-fs-body);
      font-weight: 400;
      line-height: 1.7;
      letter-spacing: .005em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      color: var(--jsld-teal-700);
      text-decoration: none;
      transition: color var(--jsld-dur-2) var(--jsld-ease)
    }

    a:hover {
      color: var(--jsld-teal-900)
    }

    ::selection {
      background: var(--jsld-teal-700);
      color: #fff
    }

    :focus-visible {
      outline: 2px solid var(--jsld-teal-700);
      outline-offset: 3px
    }

    /* ---- Escala tipográfica: herda a régua do Astra e aplica a voz da marca ---- */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .elementor-heading-title {
      margin: 0 0 var(--jsld-sp-4);
      color: var(--jsld-teal-900);
      font-family: var(--jsld-font-display)
    }

    h1,
    .entry-content :where(h1) {
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: var(--jsld-fs-h1);
      line-height: 1.12em;
      letter-spacing: -.018em;
      text-transform: none
    }

    h2,
    .entry-content :where(h2) {
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: var(--jsld-fs-h2);
      line-height: 1.18em;
      letter-spacing: -.014em;
      text-transform: none
    }

    h3,
    .entry-content :where(h3) {
      font-family: var(--jsld-font-display);
      font-weight: 600;
      font-size: var(--jsld-fs-h3);
      line-height: 1.24em;
      letter-spacing: -.010em;
      text-transform: none
    }

    h4,
    .entry-content :where(h4) {
      font-family: var(--jsld-font-sans);
      font-weight: 600;
      font-size: var(--jsld-fs-h4);
      line-height: 1.30em;
      letter-spacing: -.004em;
      text-transform: none
    }

    h5,
    .entry-content :where(h5) {
      font-family: var(--jsld-font-sans);
      font-weight: 600;
      font-size: var(--jsld-fs-h5);
      line-height: 1.35em;
      letter-spacing: 0;
      text-transform: none
    }

    h6,
    .entry-content :where(h6) {
      font-family: var(--jsld-font-ui);
      font-weight: 400;
      font-size: var(--jsld-fs-h6);
      line-height: 1.25em;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--jsld-teal-700)
    }

    p {
      margin: 0 0 var(--jsld-sp-4)
    }

    strong {
      font-weight: 700;
      color: var(--jsld-teal-900)
    }

    .jsld-body-lg {
      font-family: var(--jsld-font-sans);
      font-weight: 400;
      font-size: var(--jsld-fs-body-lg);
      line-height: 1.65;
      letter-spacing: .004em
    }

    .jsld-body-sm {
      font-family: var(--jsld-font-sans);
      font-weight: 400;
      font-size: var(--jsld-fs-body-sm);
      line-height: 1.6;
      letter-spacing: .006em
    }

    .jsld-caption {
      font-family: var(--jsld-font-sans);
      font-weight: 400;
      font-size: var(--jsld-fs-caption);
      line-height: 1.45;
      letter-spacing: .02em;
      color: var(--jsld-sand-700)
    }

    .jsld-label {
      font-family: var(--jsld-font-ui);
      font-weight: 400;
      font-size: var(--jsld-fs-label);
      line-height: 1.2;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--jsld-teal-700)
    }

    .jsld-helper {
      font-family: var(--jsld-font-sans);
      font-weight: 400;
      font-size: var(--jsld-fs-caption);
      line-height: 1.4;
      letter-spacing: .01em;
      color: var(--jsld-ink-400)
    }

    .jsld-mono {
      font-family: var(--jsld-font-mono);
      font-size: .76rem;
      letter-spacing: 0;
      font-weight: 400
    }

    .jsld-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-family: var(--jsld-font-ui);
      font-size: var(--jsld-fs-label);
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--jsld-teal-700);
      margin-bottom: var(--jsld-sp-3)
    }

    .jsld-eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--jsld-sand-500)
    }

    /* ---- Layout ---- */
    .jsld-container {
      width: min(100% - 2.5rem, var(--jsld-container));
      margin-inline: auto
    }

    .jsld-section {
      position: relative;
      padding: var(--jsld-sp-9) 0;
      overflow: hidden;
      isolation: isolate
    }

    .jsld-section__head {
      max-width: 62ch;
      margin-bottom: var(--jsld-sp-7);
      position: relative;
      z-index: 2
    }

    .jsld-grid {
      display: grid;
      gap: var(--jsld-sp-5)
    }

    .jsld-grid--2 {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
    }

    .jsld-grid--3 {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
    }

    .jsld-grid--4 {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
    }

    .jsld-stack {
      display: flex;
      flex-wrap: wrap;
      gap: var(--jsld-sp-4);
      align-items: flex-start
    }

    .jsld-rule {
      height: 1px;
      background: var(--jsld-grad-line);
      border: 0;
      margin: var(--jsld-sp-6) 0
    }


    /* ============================================================================
   02.b · CONTEXTO ESCURO — legibilidade garantida
   Tudo o que vive dentro de .jsld-on-dark recebe o par de cores correto.
   ========================================================================== */
    .jsld-on-dark {
      color: var(--jsld-dark-text)
    }

    .jsld-on-dark h1,
    .jsld-on-dark h2,
    .jsld-on-dark h3,
    .jsld-on-dark h4,
    .jsld-on-dark h5 {
      color: #fff
    }

    .jsld-on-dark h6 {
      color: var(--jsld-sand-500)
    }

    .jsld-on-dark strong {
      color: #fff
    }

    .jsld-on-dark p {
      color: var(--jsld-dark-text)
    }

    .jsld-on-dark .jsld-eyebrow {
      color: var(--jsld-sand-500)
    }

    .jsld-on-dark .jsld-eyebrow::before {
      background: var(--jsld-teal-400)
    }

    .jsld-on-dark .jsld-label {
      color: var(--jsld-sand-500)
    }

    .jsld-on-dark .jsld-helper {
      color: var(--jsld-dark-text-2)
    }

    .jsld-on-dark .jsld-caption {
      color: var(--jsld-dark-text-2)
    }

    .jsld-on-dark .jsld-mono {
      color: var(--jsld-dark-text-2)
    }

    .jsld-on-dark .jsld-body-lg,
    .jsld-on-dark .jsld-body-sm {
      color: var(--jsld-dark-text)
    }

    .jsld-on-dark a {
      color: var(--jsld-sand-500)
    }

    .jsld-on-dark a:hover {
      color: #fff
    }

    .jsld-on-dark .jsld-rule {
      background: linear-gradient(90deg, transparent, var(--jsld-teal-400), var(--jsld-sand-500), transparent)
    }

    /* Ilha clara dentro de contexto escuro: devolve o texto ao par claro.
   Aplicar .jsld-light em qualquer bloco de fundo claro sobre seção escura. */
    .jsld-light {
      color: var(--jsld-ink-700)
    }

    .jsld-light h1,
    .jsld-light h2,
    .jsld-light h3,
    .jsld-light h4,
    .jsld-light h5 {
      color: var(--jsld-teal-900)
    }

    .jsld-light h6 {
      color: var(--jsld-teal-700)
    }

    .jsld-light p {
      color: var(--jsld-ink-700)
    }

    .jsld-light strong {
      color: var(--jsld-teal-900)
    }

    .jsld-light .jsld-eyebrow,
    .jsld-light .jsld-label {
      color: var(--jsld-teal-700)
    }

    .jsld-light .jsld-helper {
      color: var(--jsld-ink-400)
    }

    .jsld-light .jsld-caption {
      color: var(--jsld-sand-700)
    }

    .jsld-light .jsld-mono {
      color: var(--jsld-sand-700)
    }

    .jsld-light a {
      color: var(--jsld-teal-700)
    }

    .jsld-light a:hover {
      color: var(--jsld-teal-900)
    }


    /* ============================================================================
   03 · FUNDOS ANIMADOS  (reaproveitados em TODAS as dobras)
   ========================================================================== */
    .jsld-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden
    }

    /* 03.a — Orbes suaves: eco das circunferências translúcidas das artes de feed */
    .jsld-bg__orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(6px);
      opacity: .5;
      animation: jsld-orb-drift 26s var(--jsld-ease-in-out) infinite alternate
    }

    .jsld-bg__orb--a {
      width: 38vw;
      height: 38vw;
      left: -8vw;
      top: -10vw;
      background: radial-gradient(circle at 35% 35%, var(--jsld-teal-a12), transparent 68%)
    }

    .jsld-bg__orb--b {
      width: 30vw;
      height: 30vw;
      right: -6vw;
      bottom: -12vw;
      background: radial-gradient(circle at 60% 40%, var(--jsld-sand-a24), transparent 70%);
      animation-delay: -9s;
      animation-duration: 34s
    }

    .jsld-bg__orb--c {
      width: 18vw;
      height: 18vw;
      right: 22vw;
      top: 14vw;
      background: radial-gradient(circle at 50% 50%, var(--jsld-teal-a08), transparent 72%);
      animation-delay: -16s;
      animation-duration: 22s
    }

    @keyframes jsld-orb-drift {
      0% {
        transform: translate3d(0, 0, 0) scale(1)
      }

      50% {
        transform: translate3d(3vw, -2.4vw, 0) scale(1.09)
      }

      100% {
        transform: translate3d(-2.2vw, 3vw, 0) scale(.95)
      }
    }

    /* 03.b — Malha do campo de proteção "2X" do manual, respirando */
    .jsld-bg__grid {
      position: absolute;
      inset: -2px;
      opacity: .5;
      background-image: linear-gradient(var(--jsld-teal-a08) 1px, transparent 1px),
        linear-gradient(90deg, var(--jsld-teal-a08) 1px, transparent 1px);
      background-size: 72px 72px;
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
      mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
      animation: jsld-grid-breathe 18s var(--jsld-ease-in-out) infinite alternate
    }

    @keyframes jsld-grid-breathe {
      0% {
        background-position: 0 0;
        opacity: .35
      }

      100% {
        background-position: 36px 36px;
        opacity: .62
      }
    }

    /* 03.c — Tapeçaria do monograma JM (referência: cartão de Natal impresso) */
    .jsld-bg__monogram {
      position: absolute;
      inset: 0;
      opacity: .06;
      pointer-events: none
    }

    .jsld-bg__monogram svg {
      width: 100%;
      height: 100%;
      display: block
    }

    .jsld-tapestry-tile {
      animation: jsld-tapestry 60s linear infinite
    }

    @keyframes jsld-tapestry {
      from {
        transform: translate(0px, 0px)
      }

      to {
        transform: translate(-120px, -80px)
      }
    }

    /* 03.d — Varredura de luz: passa devagar sobre fundos escuros */
    .jsld-bg__sweep {
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .055) 48%, transparent 62%);
      background-size: 280% 100%;
      animation: jsld-sweep 14s var(--jsld-ease-in-out) infinite
    }

    @keyframes jsld-sweep {
      0% {
        background-position: 180% 0
      }

      55%,
      100% {
        background-position: -90% 0
      }
    }

    /* 03.e — Traços finos verticais (eco do line-art das artes) */
    .jsld-bg__threads {
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(90deg, transparent 0 118px, var(--jsld-sand-a12) 118px 119px);
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
      mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
      animation: jsld-threads 24s linear infinite
    }

    @keyframes jsld-threads {
      from {
        background-position: 0 0
      }

      to {
        background-position: 119px 0
      }
    }

    /* 03.f — Ruído sutil de papel */
    .jsld-bg__grain {
      position: absolute;
      inset: 0;
      opacity: .28;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.35'/></svg>");
      animation: jsld-grain 5s steps(5) infinite
    }

    @keyframes jsld-grain {
      0% {
        transform: translate(0, 0)
      }

      20% {
        transform: translate(-3%, 2%)
      }

      40% {
        transform: translate(2%, -3%)
      }

      60% {
        transform: translate(-2%, -2%)
      }

      80% {
        transform: translate(3%, 1%)
      }

      100% {
        transform: translate(0, 0)
      }
    }

    /* Fundos de seção prontos */
    .jsld-surface--paper {
      background: var(--jsld-paper)
    }

    .jsld-surface--sand {
      background: var(--jsld-grad-sand)
    }

    .jsld-surface--deep {
      background: var(--jsld-grad-deep)
    }

    .jsld-surface--dusk {
      background: var(--jsld-grad-dusk)
    }

    /* Divisor triangular assimétrico — o mesmo shape divider das seções do site */
    .elementor-shape,
    .jsld-shape {
      position: absolute;
      left: 0;
      width: 100%;
      line-height: 0;
      direction: ltr;
      z-index: 1;
      overflow: hidden
    }

    .elementor-shape-top,
    .jsld-shape--top {
      top: -1px
    }

    .elementor-shape-bottom,
    .jsld-shape--bottom {
      bottom: -1px;
      transform: rotate(180deg)
    }

    .elementor-shape svg,
    .jsld-shape svg {
      display: block;
      width: calc(100% + 1.3px);
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      height: 64px
    }

    .elementor-shape-fill {
      fill: var(--jsld-paper)
    }


    /* ============================================================================
   04 · ANIMAÇÕES DE SURGIMENTO  (IntersectionObserver → .jsld-in)
   ========================================================================== */
    .jsld-reveal {
      opacity: 0;
      transform: translate3d(0, 26px, 0);
      transition: opacity var(--jsld-dur-4) var(--jsld-ease-out), transform var(--jsld-dur-4) var(--jsld-ease-out);
      transition-delay: var(--d, 0ms);
      will-change: opacity, transform
    }

    .jsld-reveal.jsld-in {
      opacity: 1;
      transform: none
    }

    .jsld-reveal--left {
      transform: translate3d(-34px, 0, 0)
    }

    .jsld-reveal--right {
      transform: translate3d(34px, 0, 0)
    }

    .jsld-reveal--zoom {
      transform: scale(.94)
    }

    .jsld-reveal--blur {
      filter: blur(10px)
    }

    .jsld-reveal--blur.jsld-in {
      filter: blur(0)
    }

    /* Cortina: o bloco é revelado por uma faixa teal que desliza (assinatura da marca) */
    .jsld-curtain {
      position: relative;
      overflow: hidden
    }

    .jsld-curtain::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--jsld-teal-700);
      transform: scaleX(0);
      transform-origin: left;
      z-index: 3;
      pointer-events: none
    }

    .jsld-curtain.jsld-in::after {
      animation: jsld-curtain-pass 1s var(--jsld-ease-in-out) forwards;
      animation-delay: var(--d, 0ms)
    }

    @keyframes jsld-curtain-pass {
      0% {
        transform: scaleX(0);
        transform-origin: left
      }

      45% {
        transform: scaleX(1);
        transform-origin: left
      }

      55% {
        transform: scaleX(1);
        transform-origin: right
      }

      100% {
        transform: scaleX(0);
        transform-origin: right
      }
    }

    /* Texto que sobe linha a linha */
    .jsld-lines>span {
      display: block;
      overflow: hidden
    }

    .jsld-lines>span>i {
      display: block;
      font-style: inherit;
      transform: translateY(105%);
      transition: transform 900ms var(--jsld-ease-out);
      transition-delay: var(--d, 0ms)
    }

    .jsld-lines.jsld-in>span>i {
      transform: none
    }

    /* Palavras em cascata */
    .jsld-words .jsld-w {
      display: inline-block;
      opacity: 0;
      transform: translateY(.5em) rotate(2deg);
      transition: opacity 620ms var(--jsld-ease-out), transform 620ms var(--jsld-ease-out)
    }

    .jsld-words.jsld-in .jsld-w {
      opacity: 1;
      transform: none
    }

    /* Traço que se desenha (referência: ilustrações de linha única das artes) */
    .jsld-draw path,
    .jsld-draw line,
    .jsld-draw circle,
    .jsld-draw polyline {
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: var(--len, 1400);
      stroke-dashoffset: var(--len, 1400);
      transition: stroke-dashoffset 2.8s cubic-bezier(0.37, 0, 0.21, 1);
      transition-delay: var(--d, 0ms)
    }

    .jsld-draw.jsld-in path,
    .jsld-draw.jsld-in line,
    .jsld-draw.jsld-in circle,
    .jsld-draw.jsld-in polyline {
      stroke-dashoffset: 0
    }

    /* Contador / número */
    .jsld-count {
      font-family: var(--jsld-font-display);
      font-variant-numeric: tabular-nums
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important
      }

      .jsld-reveal {
        opacity: 1;
        transform: none;
        filter: none
      }

      .jsld-lines>span>i {
        transform: none
      }

      .jsld-words .jsld-w {
        opacity: 1;
        transform: none
      }

      .jsld-draw path {
        stroke-dashoffset: 0
      }
    }


    /* ============================================================================
   07 · PEÇAS DE DOCUMENTAÇÃO
   ========================================================================== */
    .jsld-card {
      position: relative;
      background: var(--jsld-paper);
      border: 1px solid var(--jsld-teal-a08);
      padding: var(--jsld-sp-5);
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out),
        box-shadow var(--jsld-dur-3) var(--jsld-ease-out), border-color var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-card::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 100%;
      background: var(--jsld-teal-700);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--jsld-shadow-2);
      border-color: var(--jsld-teal-a24)
    }

    .jsld-card:hover::after {
      transform: scaleY(1);
      transform-origin: top
    }

    .jsld-on-dark .jsld-card {
      background: rgba(255, 255, 255, .055);
      border-color: var(--jsld-dark-line)
    }

    .jsld-on-dark .jsld-card::after {
      background: var(--jsld-sand-500)
    }

    .jsld-spec {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--jsld-fs-body-sm)
    }

    .jsld-spec th,
    .jsld-spec td {
      text-align: left;
      padding: .62rem .8rem;
      border-bottom: 1px solid var(--jsld-teal-a08);
      vertical-align: top
    }

    .jsld-spec thead th {
      font-family: var(--jsld-font-ui);
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-teal-700);
      border-bottom: 1px solid var(--jsld-teal-a24);
      white-space: nowrap
    }

    .jsld-spec tbody tr {
      transition: background var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-spec tbody tr:hover {
      background: var(--jsld-teal-050)
    }

    .jsld-spec code,
    .jsld-code {
      font-family: var(--jsld-font-mono);
      font-size: .74rem;
      background: var(--jsld-teal-a08);
      color: var(--jsld-teal-900);
      padding: .12rem .38rem;
      border-radius: 2px;
      white-space: nowrap
    }

    .jsld-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
    }

    .jsld-note {
      border-left: 3px solid var(--jsld-sand-500);
      background: var(--jsld-sand-050);
      padding: var(--jsld-sp-4) var(--jsld-sp-5);
      font-size: var(--jsld-fs-body-sm)
    }

    .jsld-note--alert {
      border-left-color: var(--jsld-danger);
      background: rgba(158, 59, 50, .05)
    }

    .jsld-demo {
      background: var(--jsld-sand-050);
      border: 1px dashed var(--jsld-sand-500);
      padding: var(--jsld-sp-5);
      display: flex;
      flex-wrap: wrap;
      gap: var(--jsld-sp-4);
      align-items: center
    }

    .jsld-demo--dark {
      background: var(--jsld-teal-900);
      border-color: rgba(255, 255, 255, .28);
      color: var(--jsld-dark-text)
    }

    /* --- Contexto escuro: tabelas, código, notas e demos --- */
    .jsld-on-dark .jsld-spec th,
    .jsld-on-dark .jsld-spec td {
      border-bottom-color: var(--jsld-dark-line);
      color: var(--jsld-dark-text)
    }

    .jsld-on-dark .jsld-spec thead th {
      color: var(--jsld-sand-500);
      border-bottom-color: var(--jsld-dark-line-2)
    }

    .jsld-on-dark .jsld-spec tbody tr:hover {
      background: rgba(255, 255, 255, .07)
    }

    .jsld-on-dark .jsld-spec strong {
      color: #fff
    }

    .jsld-on-dark .jsld-code,
    .jsld-on-dark .jsld-spec code {
      background: rgba(255, 255, 255, .16);
      color: #fff
    }

    .jsld-on-dark .jsld-note {
      background: rgba(255, 255, 255, .07);
      border-left-color: var(--jsld-sand-500);
      color: var(--jsld-dark-text)
    }

    .jsld-on-dark .jsld-note--alert {
      background: rgba(158, 59, 50, .18);
      border-left-color: #E38B82
    }

    .jsld-on-dark .jsld-demo {
      background: rgba(255, 255, 255, .06);
      border-color: var(--jsld-dark-line-2)
    }

    /* --- Ilha clara sobre seção escura: devolve o par de cores claro --- */
    .jsld-light .jsld-spec th,
    .jsld-light .jsld-spec td {
      border-bottom-color: var(--jsld-teal-a08);
      color: var(--jsld-ink-700)
    }

    .jsld-light .jsld-spec thead th {
      color: var(--jsld-teal-700);
      border-bottom-color: var(--jsld-teal-a24)
    }

    .jsld-light .jsld-spec tbody tr:hover {
      background: var(--jsld-teal-050)
    }

    .jsld-light .jsld-spec strong {
      color: var(--jsld-teal-900)
    }

    .jsld-light .jsld-code,
    .jsld-light .jsld-spec code {
      background: var(--jsld-teal-a08);
      color: var(--jsld-teal-900)
    }

    .jsld-light.jsld-demo {
      background: var(--jsld-sand-050);
      border-color: var(--jsld-sand-500)
    }


    /* ---------------------------------------------------------------- 11.1 botões (compartilhado por todo o sistema, não só o catálogo de componentes) ---------------------------------------------------------------- */

    /* ---------- 11.1 BOTÕES ---------- */
    .elementor-button,
    .jsld-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-style: solid;
      border-width: 1px;
      border-radius: var(--jsld-radius-0);
      padding: 16px 24px;
      text-decoration: none;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
      font-family: var(--jsld-font-ui);
      font-weight: 400;
      font-size: .94117647rem;
      line-height: 1;
      letter-spacing: .10em;
      text-transform: uppercase;
      transition: background-color var(--jsld-dur-2) var(--jsld-ease),
        border-color var(--jsld-dur-2) var(--jsld-ease),
        color var(--jsld-dur-2) var(--jsld-ease),
        transform var(--jsld-dur-2) var(--jsld-ease),
        box-shadow var(--jsld-dur-3) var(--jsld-ease)
    }

    .elementor-button-content-wrapper {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      position: relative;
      z-index: 2
    }

    .elementor-button-icon {
      display: inline-flex;
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .elementor-button:hover .elementor-button-icon,
    .jsld-btn:hover .elementor-button-icon {
      transform: translateX(5px)
    }

    .elementor-button-text {
      position: relative
    }

    .elementor-size-xs {
      padding: 9px 15px;
      font-size: .76rem
    }

    .elementor-size-sm {
      padding: 12px 20px;
      font-size: .82rem
    }

    .elementor-size-md {
      padding: 16px 24px
    }

    .elementor-size-lg {
      padding: 19px 34px;
      font-size: 1rem
    }

    .elementor-size-xl {
      padding: 23px 44px;
      font-size: 1.06rem
    }

    /* Primário — #006271 / branco · 7,03:1 AAA */
    .jsld-btn--primary,
    .jsld-on-dark .jsld-btn--primary,
    .jsld-on-dark a.jsld-btn--primary {
      background: var(--jsld-teal-700);
      border-color: var(--jsld-teal-700);
      color: #fff !important
    }

    .jsld-btn--primary:hover,
    .jsld-on-dark .jsld-btn--primary:hover,
    .jsld-on-dark a.jsld-btn--primary:hover {
      background: var(--jsld-teal-900);
      border-color: var(--jsld-teal-900);
      color: #fff !important;
      transform: translateY(-2px);
      box-shadow: var(--jsld-shadow-teal)
    }

    .jsld-btn--primary:active,
    .jsld-on-dark .jsld-btn--primary:active {
      background: var(--jsld-teal-800);
      transform: translateY(0);
      box-shadow: none
    }

    /* Secundário — areia institucional / teal-900 · 5,91:1 AA */
    .jsld-btn--secondary,
    .jsld-on-dark .jsld-btn--secondary,
    .jsld-on-dark a.jsld-btn--secondary {
      background: var(--jsld-sand-500);
      border-color: var(--jsld-sand-500);
      color: var(--jsld-teal-900) !important
    }

    .jsld-btn--secondary:hover,
    .jsld-on-dark .jsld-btn--secondary:hover,
    .jsld-on-dark a.jsld-btn--secondary:hover {
      background: #fff;
      border-color: #fff;
      color: var(--jsld-teal-900) !important;
      transform: translateY(-2px);
      box-shadow: var(--jsld-shadow-2)
    }

    .jsld-btn--secondary:active,
    .jsld-on-dark .jsld-btn--secondary:active {
      background: var(--jsld-sand-200);
      transform: translateY(0)
    }

    /* Botão de apoio — teal suave para áreas de apoio secundário */
    .jsld-btn--legacy,
    .jsld-on-dark .jsld-btn--legacy,
    .jsld-on-dark a.jsld-btn--legacy {
      background: var(--jsld-teal-400);
      border-color: var(--jsld-teal-400);
      color: #fff !important
    }

    .jsld-btn--legacy:hover,
    .jsld-on-dark .jsld-btn--legacy:hover,
    .jsld-on-dark a.jsld-btn--legacy:hover {
      background: var(--jsld-ink-900);
      border-color: var(--jsld-ink-900);
      color: #fff !important;
      transform: translateY(-2px)
    }

    .jsld-btn--ghost {
      background: transparent;
      border-color: var(--jsld-teal-700);
      color: var(--jsld-teal-700)
    }

    .jsld-btn--ghost:hover {
      background: var(--jsld-teal-700);
      color: #fff;
      transform: translateY(-2px)
    }

    .jsld-btn--ghost-light,
    .jsld-on-dark a.jsld-btn--ghost-light {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .42);
      color: #fff !important
    }

    .jsld-btn--ghost-light:hover,
    .jsld-on-dark a.jsld-btn--ghost-light:hover {
      background: #fff;
      border-color: #fff;
      color: var(--jsld-teal-900) !important;
      transform: translateY(-2px)
    }

    .jsld-btn--link {
      background: none;
      border-color: transparent;
      color: var(--jsld-teal-700);
      padding-inline: 0;
      letter-spacing: .14em
    }

    .jsld-btn--link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 8px;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-btn--link:hover {
      color: var(--jsld-teal-900)
    }

    .jsld-btn--link:hover::after {
      transform: scaleX(1);
      transform-origin: left
    }

    /* …e sobre fundo escuro o link inverte, em vez de sumir */
    .jsld-on-dark .jsld-btn--link {
      color: var(--jsld-sand-500) !important
    }

    .jsld-on-dark .jsld-btn--link:hover {
      color: #fff !important
    }

    .elementor-button-success {
      background: var(--jsld-success) !important;
      border-color: var(--jsld-success) !important;
      color: #fff !important
    }

    .jsld-btn[disabled],
    .jsld-btn.is-disabled {
      background: var(--jsld-paper-alt);
      border-color: var(--jsld-paper-alt);
      color: #5C5E62 !important;
      pointer-events: none;
      opacity: 1
    }

    .jsld-on-dark .jsld-btn[disabled],
    .jsld-on-dark .jsld-btn.is-disabled,
    .jsld-on-dark a.jsld-btn.is-disabled {
      background: rgba(255, 255, 255, .14) !important;
      border-color: rgba(255, 255, 255, .18) !important;
      color: rgba(255, 255, 255, .5) !important
    }

    /* Efeito 1 — varredura de luz (sweep) */
    .jsld-btn--sweep::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
      background-size: 250% 100%;
      background-position: 180% 0;
      transition: background-position 850ms var(--jsld-ease-out)
    }

    .jsld-btn--sweep:hover::before {
      background-position: -70% 0
    }

    /* Efeito 2 — preenchimento que sobe (fill) */
    .jsld-btn--fill::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: var(--jsld-fill, var(--jsld-teal-700));
      transform: translateY(101%);
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-btn--fill:hover::before {
      transform: translateY(0)
    }

    /* Efeito 3 — corte diagonal do monograma (slice) */
    .jsld-btn--slice::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: var(--jsld-slice, var(--jsld-teal-900));
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      transition: clip-path 520ms var(--jsld-ease-out)
    }

    .jsld-btn--slice:hover::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }

    /* Correção: sobre fundo escuro o slice preenche de branco e o texto escurece,
   garantindo que o rótulo nunca fique cor-sobre-cor. */
    .jsld-btn--ghost-light.jsld-btn--slice {
      --jsld-slice: #FFFFFF
    }

    .jsld-btn--ghost-light.jsld-btn--slice:hover,
    .jsld-btn--ghost-light.jsld-btn--fill:hover {
      background: rgba(255, 255, 255, .08);
      border-color: #fff;
      color: var(--jsld-teal-900) !important
    }

    .jsld-btn--ghost-light.jsld-btn--slice:hover .elementor-button-text,
    .jsld-btn--ghost-light.jsld-btn--fill:hover .elementor-button-text {
      color: var(--jsld-teal-900) !important
    }

    /* Efeito 4 — texto que troca verticalmente (swap) */
    .jsld-btn--swap .elementor-button-text {
      display: inline-block;
      height: 1.15em;
      line-height: 1.15em;
      overflow: hidden;
      vertical-align: middle
    }

    .jsld-btn--swap .elementor-button-text span {
      display: block;
      height: 1.15em;
      line-height: 1.15em;
      transition: transform 420ms var(--jsld-ease-out)
    }

    .jsld-btn--swap:hover .elementor-button-text span {
      transform: translateY(-100%)
    }

    /* Efeito 5 — pulso institucional (foco de atenção) */
    .jsld-btn--pulse {
      animation: jsld-pulse 2.6s var(--jsld-ease-in-out) infinite
    }

    @keyframes jsld-pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(183, 174, 165, .5)
      }

      50% {
        box-shadow: 0 0 0 14px rgba(183, 174, 165, 0)
      }
    }

    /* Efeito 6 — ondulação no clique (ripple, via JS) */
    .jsld-ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, .42);
      transform: scale(0);
      animation: jsld-ripple 640ms var(--jsld-ease-out) forwards;
      pointer-events: none;
      z-index: 1
    }

    @keyframes jsld-ripple {
      to {
        transform: scale(2.6);
        opacity: 0
      }
    }


    /* Snippet Exporter Copy Button (v2.1.0) */
    .jsld-card__copy-group {
      position: absolute;
      top: .8rem;
      right: .8rem;
      display: inline-flex;
      gap: .25rem;
      z-index: 10;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity var(--jsld-dur-2) var(--jsld-ease), visibility var(--jsld-dur-2) var(--jsld-ease);
    }

    .jsld-piece .jsld-card__copy-group {
      top: .5rem;
      right: .5rem;
    }

    .jsld-card:hover>.jsld-card__copy-group,
    .jsld-demo:hover>.jsld-card__copy-group,
    .jsld-piece:hover>.jsld-card__copy-group,
    .jsld-sig:hover>.jsld-card__copy-group,
    [data-jsld-snippet]:hover>.jsld-card__copy-group,
    .jsld-card__copy-group:focus-within {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .jsld-card__copy-btn {
      position: static;
      background: var(--jsld-teal-050);
      border: 1px solid var(--jsld-teal-a12);
      color: var(--jsld-teal-700);
      font-family: var(--jsld-font-mono);
      font-size: .62rem;
      padding: .25rem .55rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      opacity: .9;
      border-radius: 4px;
      transition: all var(--jsld-dur-2) var(--jsld-ease);
    }

    .jsld-card__copy-btn:hover {
      background: var(--jsld-teal-700);
      color: #fff;
      border-color: var(--jsld-teal-700);
      opacity: 1;
    }

    .jsld-card__copy-btn--clean {
      background: var(--jsld-sand-100);
      border-color: var(--jsld-sand-300);
      color: var(--jsld-ink-700);
    }

    .jsld-card__copy-btn--clean:hover {
      background: var(--jsld-sand-700);
      color: #fff;
      border-color: var(--jsld-sand-700);
    }

    .jsld-on-dark .jsld-card__copy-btn {
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .2);
      color: #fff;
    }

    .jsld-on-dark .jsld-card__copy-btn:hover {
      background: var(--jsld-sand-500);
      color: var(--jsld-teal-900);
    }


    /* Badges — Restaurado exato da versão 2.0.2 */
    .jsld-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .28rem .7rem;
      font-family: var(--jsld-font-ui);
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      border: 1px solid transparent;
      border-radius: var(--jsld-radius-pill);
      white-space: nowrap;
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-badge--solid {
      background: var(--jsld-teal-700);
      color: #fff
    }

    .jsld-badge--soft {
      background: var(--jsld-teal-a12);
      color: var(--jsld-teal-900)
    }

    .jsld-badge--outline {
      border-color: var(--jsld-teal-700);
      color: var(--jsld-teal-700)
    }

    .jsld-badge--sand {
      background: var(--jsld-sand-500);
      color: var(--jsld-teal-900)
    }

    .jsld-badge--success {
      background: rgba(63, 122, 98, .14);
      color: #2F6B54;
      border-color: rgba(63, 122, 98, .45)
    }

    .jsld-badge--warning {
      background: rgba(176, 132, 66, .14);
      color: #7A5A26;
      border-color: rgba(176, 132, 66, .45)
    }

    .jsld-badge--danger {
      background: rgba(158, 59, 50, .12);
      color: var(--jsld-danger);
      border-color: rgba(158, 59, 50, .45)
    }

    .jsld-badge:hover {
      transform: translateY(-2px)
    }

    .jsld-badge--live::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      animation: jsld-blink 1.6s var(--jsld-ease-in-out) infinite
    }

    @keyframes jsld-blink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .35;
        transform: scale(.72)
      }
    }

    /* Badges de feedback sobre fundo escuro ganham fundo claro sólido (regras exatas da v2.0.2) */
    .jsld-on-dark .jsld-demo--dark .jsld-badge--success,
    .jsld-on-dark .jsld-table .jsld-badge--success {
      background: #D7E7DF;
      color: #22513F;
      border-color: #D7E7DF
    }

    .jsld-on-dark .jsld-demo--dark .jsld-badge--warning,
    .jsld-on-dark .jsld-table .jsld-badge--warning {
      background: #F1E3CB;
      color: #6B4E1C;
      border-color: #F1E3CB
    }

    .jsld-on-dark .jsld-demo--dark .jsld-badge--danger,
    .jsld-on-dark .jsld-table .jsld-badge--danger {
      background: #F3DAD7;
      color: #7C2B24;
      border-color: #F3DAD7
    }


    .jsld-imgfallback {
      display: grid;
      place-items: center;
      gap: .5rem;
      width: 100%;
      aspect-ratio: 4/3;
      background:
        linear-gradient(135deg, var(--jsld-teal-900), var(--jsld-teal-700));
      color: var(--jsld-dark-text-2);
      font-family: var(--jsld-font-ui);
      font-size: .64rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      text-align: center;
      padding: 1.4rem
    }

    .jsld-imgfallback i {
      font-size: 1.6rem;
      opacity: .5
    }

    .jsld-piece {
      --w: 1080;
      --h: 1080;
      position: relative;
      width: 100%;
      aspect-ratio: var(--w)/var(--h);
      overflow: hidden;
      container-type: inline-size;
      background: var(--jsld-paper);
      box-shadow: var(--jsld-shadow-2);
      isolation: isolate
    }

    /* tipografia proporcional: 1cqw = 1% da largura da peça */
    .jsld-piece * {
      box-sizing: border-box
    }

    .jsld-piece__pad {
      position: absolute;
      inset: 0;
      padding: 8cqw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2
    }

    .jsld-piece--dark {
      background: var(--jsld-teal-900);
      color: var(--jsld-dark-text)
    }

    .jsld-piece--teal {
      background: var(--jsld-teal-700);
      color: #fff
    }

    .jsld-piece--sand {
      background: var(--jsld-sand-050);
      color: var(--jsld-teal-900)
    }

    .jsld-piece--grad {
      background: var(--jsld-grad-deep);
      color: #fff
    }

    .jsld-piece__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden
    }

    .jsld-piece__bg svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .jsld-piece__mark {
      width: 26cqw;
      height: auto;
      flex: none
    }

    .jsld-piece__mark--sm {
      width: 18cqw
    }

    .jsld-piece__eyebrow {
      font-family: var(--jsld-font-ui);
      font-size: 2.6cqw;
      letter-spacing: .3em;
      text-transform: uppercase;
      margin: 0 0 2cqw;
      color: var(--jsld-sand-500)
    }

    .jsld-piece__title {
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: 8.2cqw;
      line-height: 1.06;
      letter-spacing: -.01em;
      margin: 0
    }

    .jsld-piece__title--sm {
      font-size: 6.2cqw
    }

    .jsld-piece__quote {
      font-family: var(--jsld-font-display);
      font-style: italic;
      font-size: 7cqw;
      line-height: 1.22;
      margin: 0
    }

    .jsld-piece__body {
      font-family: var(--jsld-font-sans);
      font-size: 3.4cqw;
      line-height: 1.5;
      margin: 2.4cqw 0 0;
      max-width: 46ch
    }

    .jsld-piece__foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 3cqw;
      font-family: var(--jsld-font-ui);
      font-size: 2.4cqw;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: .82
    }

    .jsld-piece__rule {
      width: 18cqw;
      height: .8cqw;
      background: var(--jsld-sand-500);
      margin: 0 0 3.4cqw
    }

    .jsld-piece__num {
      font-family: var(--jsld-font-display);
      font-size: 14cqw;
      line-height: .8;
      color: var(--jsld-sand-a40)
    }

    .jsld-piece__tag {
      display: inline-block;
      font-family: var(--jsld-font-ui);
      font-size: 2.3cqw;
      letter-spacing: .24em;
      text-transform: uppercase;
      padding: 1.1cqw 2.4cqw;
      border: .3cqw solid currentColor;
      margin-bottom: 3cqw
    }

    /* área de segurança visualizável */
    .jsld-piece--safe::after {
      content: "";
      position: absolute;
      inset: 8cqw;
      border: 1px dashed rgba(183, 174, 165, .75);
      pointer-events: none;
      z-index: 5
    }

    .jsld-piece--safe-story::after {
      inset: 18cqw 8cqw 14cqw
    }

    .jsld-piece__label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .6rem;
      margin-top: .6rem;
      font-family: var(--jsld-font-ui);
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-muted-text)
    }

    .jsld-piece__label b {
      font-family: var(--jsld-font-mono);
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: var(--jsld-teal-700)
    }

    .jsld-pieces {
      display: grid;
      gap: 1.6rem;
      grid-template-columns: repeat(auto-fit, minmax(238px, 1fr))
    }

    .jsld-pieces--wide {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
    }

    .jsld-piece-wrap {
      min-width: 0
    }

    /* faixa de formatos */
    .jsld-format {
      display: flex;
      gap: .9rem;
      align-items: center;
      padding: .7rem .9rem;
      border: var(--jsld-line);
      background: #fff
    }

    .jsld-format__box {
      flex: none;
      width: 46px;
      display: grid;
      place-items: center
    }

    .jsld-format__box i {
      display: block;
      width: 100%;
      background: var(--jsld-teal-a24);
      border: 1px solid var(--jsld-teal-700)
    }

    .jsld-format__txt {
      min-width: 0
    }

    .jsld-format__txt b {
      display: block;
      font-family: var(--jsld-font-sans);
      font-size: .84rem;
      font-weight: 600;
      color: var(--jsld-teal-900)
    }

    .jsld-format__txt span {
      font-family: var(--jsld-font-mono);
      font-size: .68rem;
      color: var(--jsld-muted-text)
    }

    .jsld-stat-card {
      background: #fff;
      border: var(--jsld-line);
      border-left: 3px solid var(--jsld-teal-700);
      padding: 1rem 1.1rem
    }

    .jsld-stat-card b {
      display: block;
      font-family: var(--jsld-font-display);
      font-size: 1.5rem;
      color: var(--jsld-teal-900);
      line-height: 1.1
    }

    .jsld-stat-card span {
      font-family: var(--jsld-font-ui);
      font-size: .6rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--jsld-muted-text)
    }

    .jsld-sig {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      line-height: 1.45;
      color: #3E3F41;
      background: #fff;
      border: var(--jsld-line);
      padding: 1.2rem;
      overflow-x: auto
    }

    .jsld-sig table {
      border-collapse: collapse
    }

    .jsld-sig td {
      padding: 0;
      vertical-align: top
    }

    .jsld-sig__name {
      font-size: 15px;
      font-weight: bold;
      color: #003742
    }

    .jsld-sig__role {
      font-size: 11px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #897E74
    }

    .jsld-sig__sep {
      width: 1px;
      background: #E4DFD9
    }

    .jsld-sig a {
      color: #006271;
      text-decoration: none
    }

    ul.jsld-check {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: .55rem
    }

    ul.jsld-check li {
      position: relative;
      padding-left: 1.5rem;
      font-size: .9rem;
      line-height: 1.5
    }

    ul.jsld-check li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.25em;
      width: 14px;
      height: 14px;
      border: 1px solid var(--jsld-teal-700);
      background: var(--jsld-teal-050);
      box-sizing: border-box
    }

    .jsld-dd {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
    }

    .jsld-dd__item {
      background: #fff;
      border: var(--jsld-line);
      border-top: 3px solid var(--jsld-success);
      padding: 1rem 1.1rem
    }

    .jsld-dd__item--no {
      border-top-color: var(--jsld-danger)
    }

    .jsld-dd__item h6 {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin: 0 0 .5rem;
      font-family: var(--jsld-font-ui);
      font-size: .64rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--jsld-success-text)
    }

    .jsld-dd__item--no h6 {
      color: var(--jsld-danger-text)
    }

    .jsld-dd__item p {
      margin: 0;
      font-size: .88rem;
      line-height: 1.55
    }

    @media print {

      .site-header,
      .jsld-nav__drawer,
      .jsld-nav__drawer-scrim,
      .jsld-search-modal,
      .jsld-top,
      .jsld-bg,
      .jsld-shape,
      .jsld-scrollcue,
      .jsld-card__copy-btn,
      .jsld-export__actions,
      .jsld-skip {
        display: none !important
      }

      .jsld-section {
        padding: 1.2cm 0 !important;
        break-inside: avoid
      }

      .jsld-on-dark,
      .jsld-surface--deep,
      .jsld-piece--dark,
      .jsld-piece--teal,
      .jsld-piece--grad {
        background: #fff !important;
        color: #000 !important
      }

      .jsld-reveal,
      .jsld-lines span i,
      .jsld-words .jsld-w {
        opacity: 1 !important;
        transform: none !important
      }

      a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .7em;
        color: #555
      }

      @page {
        margin: 1.4cm
      }
    }

    /* jsld-alert__close: usado tanto no alerta (componentes) quanto no drawer/busca (shell/header) */
    .jsld-alert__close {
      background: none;
      border: 0;
      color: inherit;
      cursor: pointer;
      opacity: .6;
      font-size: .9rem
    }

    .jsld-alert__close:hover {
      opacity: 1
    }


    /* ============================================================================
   CATÁLOGO DE ANIMAÇÕES
   ========================================================================== */
    .jsld-anim {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--jsld-teal-a12);
      background: var(--jsld-paper)
    }

    .jsld-anim__stage {
      height: 130px;
      position: relative;
      overflow: hidden;
      background: var(--jsld-teal-900);
      display: grid;
      place-items: center
    }

    .jsld-anim__body {
      padding: .9rem
    }

    .jsld-anim__body h5 {
      margin: 0 0 .2rem;
      font-size: .95rem
    }

    .jsld-anim__body p {
      margin: 0;
      font-size: var(--jsld-fs-caption);
      color: var(--jsld-sand-700)
    }

    .jsld-anim__body code {
      display: block;
      margin-top: .5rem;
      font-family: var(--jsld-font-mono);
      font-size: .6rem;
      color: var(--jsld-teal-700);
      word-break: break-all
    }

    .jsld-anim__stage .jsld-mini {
      width: 56px;
      height: auto
    }

    @keyframes jsld-redraw {

      0%,
      4% {
        stroke-dashoffset: var(--len, 6000)
      }

      40%,
      55% {
        stroke-dashoffset: 0
      }

      92%,
      100% {
        stroke-dashoffset: var(--len, 6000)
      }
    }

    /* ============================================================================
   10 · CORES
   ========================================================================== */
    .jsld-swatch {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--jsld-teal-a08);
      background: var(--jsld-paper);
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out), box-shadow var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-swatch:hover {
      transform: translateY(-6px);
      box-shadow: var(--jsld-shadow-2)
    }

    .jsld-swatch__chip {
      height: 120px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: .7rem
    }

    .jsld-swatch__chip::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
      background-size: 250% 100%;
      background-position: 180% 0;
      transition: background-position 900ms var(--jsld-ease-out)
    }

    .jsld-swatch:hover .jsld-swatch__chip::after {
      background-position: -60% 0
    }

    .jsld-swatch__pantone {
      position: relative;
      z-index: 2;
      font-family: var(--jsld-font-ui);
      font-size: .56rem;
      letter-spacing: .18em;
      text-transform: uppercase
    }

    .jsld-swatch__body {
      padding: .9rem
    }

    .jsld-swatch__name {
      font-family: var(--jsld-font-sans);
      font-weight: 600;
      font-size: .92rem;
      color: var(--jsld-teal-900);
      margin: 0 0 .2rem
    }

    .jsld-swatch__role {
      font-family: var(--jsld-font-ui);
      font-size: .56rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-teal-700);
      display: block;
      margin-bottom: .5rem
    }

    .jsld-swatch__val {
      display: block;
      font-family: var(--jsld-font-mono);
      font-size: .66rem;
      color: var(--jsld-sand-700);
      line-height: 1.75
    }

    .jsld-swatch__ops {
      display: flex;
      height: 16px;
      margin-top: .6rem;
      border: 1px solid var(--jsld-teal-a08)
    }

    .jsld-swatch__ops i {
      flex: 1;
      display: block
    }

    .jsld-ratio {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      margin-top: .55rem;
      padding: .16rem .45rem;
      font-family: var(--jsld-font-mono);
      font-size: .6rem;
      border: 1px solid currentColor;
      border-radius: 2px
    }

    .jsld-ratio--aaa {
      color: #2F6B54
    }

    .jsld-ratio--aa {
      color: var(--jsld-teal-700)
    }

    .jsld-ratio--large {
      color: #8A6520
    }

    .jsld-ratio--deco {
      color: var(--jsld-sand-700)
    }

    .jsld-gradbar {
      height: 88px;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--jsld-teal-a08);
      display: flex;
      align-items: flex-end;
      padding: .6rem
    }

    .jsld-gradbar span {
      font-family: var(--jsld-font-mono);
      font-size: .62rem;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
      position: relative;
      z-index: 2
    }

    .jsld-gradbar::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
      background-size: 300% 100%;
      animation: jsld-sweep 9s var(--jsld-ease-in-out) infinite
    }

    .jsld-chip {
      display: block;
      width: 52px;
      height: 22px;
      border-radius: 2px
    }


    /* ============================================================================
   11 · COMPONENTES
   Base: classes reais do site (.elementor-button, .elementor-field,
   .elementor-post, .elementor-icon-list-*) + camada .jsld-*
   ========================================================================== */


    /* ---------- 11.2 INPUTS ---------- */
    .elementor-field-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: var(--jsld-sp-4)
    }

    .elementor-field-label {
      font-family: var(--jsld-font-ui);
      font-size: var(--jsld-fs-label);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-teal-700)
    }

    .elementor-field-textual,
    .jsld-input {
      width: 100%;
      font-family: var(--jsld-font-sans);
      font-size: var(--jsld-fs-body-sm);
      color: var(--jsld-ink-700);
      background: var(--jsld-paper);
      border: 1px solid var(--jsld-sand-200);
      border-radius: var(--jsld-radius-0);
      padding: .78rem .95rem;
      transition: border-color var(--jsld-dur-2) var(--jsld-ease),
        box-shadow var(--jsld-dur-2) var(--jsld-ease), background var(--jsld-dur-2) var(--jsld-ease)
    }

    .elementor-field-textual::placeholder,
    .jsld-input::placeholder {
      color: var(--jsld-ink-400);
      opacity: 1
    }

    .elementor-field-textual:hover,
    .jsld-input:hover {
      border-color: var(--jsld-sand-500)
    }

    .elementor-field-textual:focus,
    .jsld-input:focus {
      outline: none;
      border-color: var(--jsld-teal-700);
      box-shadow: 0 0 0 3px var(--jsld-teal-a12);
      background: var(--jsld-teal-050)
    }

    .elementor-field-textual:disabled,
    .jsld-input:disabled {
      background: var(--jsld-sand-050);
      border-color: var(--jsld-paper-alt);
      color: var(--jsld-ink-400);
      cursor: not-allowed
    }

    .jsld-input--error {
      border-color: var(--jsld-danger) !important;
      box-shadow: 0 0 0 3px rgba(158, 59, 50, .12) !important;
      animation: jsld-shake 420ms var(--jsld-ease)
    }

    .jsld-input--success {
      border-color: var(--jsld-success) !important;
      box-shadow: 0 0 0 3px rgba(63, 122, 98, .12) !important
    }

    @keyframes jsld-shake {

      0%,
      100% {
        transform: translateX(0)
      }

      20% {
        transform: translateX(-6px)
      }

      40% {
        transform: translateX(5px)
      }

      60% {
        transform: translateX(-3px)
      }

      80% {
        transform: translateX(2px)
      }
    }

    /* Label flutuante */
    .jsld-field {
      position: relative;
      margin-bottom: var(--jsld-sp-4)
    }

    .jsld-field .jsld-input {
      padding: 1.35rem .95rem .5rem
    }

    .jsld-field label {
      position: absolute;
      left: .95rem;
      top: .95rem;
      font-family: var(--jsld-font-sans);
      font-size: var(--jsld-fs-body-sm);
      color: var(--jsld-ink-400);
      pointer-events: none;
      transition: all var(--jsld-dur-2) var(--jsld-ease-out)
    }

    .jsld-field .jsld-input:focus+label,
    .jsld-field .jsld-input:not(:placeholder-shown)+label {
      top: .36rem;
      font-family: var(--jsld-font-ui);
      font-size: .58rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-teal-700)
    }

    .jsld-field__bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: var(--jsld-teal-700);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-field .jsld-input:focus~.jsld-field__bar {
      transform: scaleX(1)
    }

    /* Checkbox / switch */
    label.jsld-check {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      cursor: pointer;
      font-size: var(--jsld-fs-body-sm);
      color: inherit
    }

    .jsld-check input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0
    }

    .jsld-check__box {
      width: 18px;
      height: 18px;
      border: 1px solid var(--jsld-sand-500);
      display: grid;
      place-items: center;
      transition: all var(--jsld-dur-2) var(--jsld-ease);
      flex: none;
      background: #fff
    }

    .jsld-check__box i {
      color: #fff;
      font-size: .6rem;
      transform: scale(0);
      transition: transform var(--jsld-dur-2) var(--jsld-ease-out)
    }

    .jsld-check input:checked+.jsld-check__box {
      background: var(--jsld-teal-700);
      border-color: var(--jsld-teal-700)
    }

    .jsld-check input:checked+.jsld-check__box i {
      transform: scale(1)
    }

    .jsld-check input:focus-visible+.jsld-check__box {
      box-shadow: 0 0 0 3px var(--jsld-teal-a24)
    }

    .jsld-switch {
      width: 44px;
      height: 24px;
      border-radius: 999px;
      background: var(--jsld-sand-500);
      position: relative;
      transition: background var(--jsld-dur-2) var(--jsld-ease);
      flex: none
    }

    .jsld-switch::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-check input:checked+.jsld-switch {
      background: var(--jsld-teal-700)
    }

    .jsld-check input:checked+.jsld-switch::after {
      transform: translateX(20px)
    }

    /* ---------- 11.3 CARDS ---------- */
    .elementor-post,
    .jsld-post {
      position: relative;
      background: var(--jsld-paper);
      border: 1px solid var(--jsld-teal-a08);
      padding: var(--jsld-sp-5);
      overflow: hidden;
      color: var(--jsld-ink-700);
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out), box-shadow var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .elementor-post::before {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: var(--jsld-grad-line);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .elementor-post:hover {
      transform: translateY(-6px);
      box-shadow: var(--jsld-shadow-2)
    }

    .elementor-post:hover::before {
      transform: scaleX(1)
    }

    .elementor-post__title {
      font-family: var(--jsld-font-display);
      font-weight: 600;
      font-size: 1.14rem;
      line-height: 1.3;
      margin: 0 0 .5rem;
      color: var(--jsld-teal-900)
    }

    .elementor-post__title a {
      color: var(--jsld-teal-900)
    }

    .elementor-post:hover .elementor-post__title a {
      color: var(--jsld-teal-700)
    }

    .elementor-post__meta-data {
      font-family: var(--jsld-font-ui);
      font-size: .6rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-sand-700);
      margin-bottom: .7rem
    }

    .elementor-post__excerpt p {
      font-size: var(--jsld-fs-body-sm);
      color: var(--jsld-ink-700);
      margin: 0 0 .9rem
    }

    .elementor-post__read-more {
      font-family: var(--jsld-font-ui);
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--jsld-teal-700);
      display: inline-flex;
      align-items: center;
      gap: .4rem
    }

    .elementor-post__read-more::after {
      content: "»";
      transition: transform var(--jsld-dur-2) var(--jsld-ease)
    }

    .elementor-post:hover .elementor-post__read-more::after {
      transform: translateX(5px)
    }

    /* Card de área de atuação — vira teal ao passar o mouse */
    .jsld-area {
      position: relative;
      padding: var(--jsld-sp-5);
      border: 1px solid var(--jsld-teal-a12);
      background: var(--jsld-paper);
      overflow: hidden;
      isolation: isolate;
      color: var(--jsld-ink-700);
      transition: color var(--jsld-dur-3) var(--jsld-ease), transform var(--jsld-dur-3) var(--jsld-ease-out),
        box-shadow var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-area::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--jsld-grad-deep);
      clip-path: circle(0% at 88% 88%);
      transition: clip-path 640ms var(--jsld-ease-out)
    }

    .jsld-area h4,
    .jsld-on-dark .jsld-area h4 {
      margin: 0 0 .5rem;
      font-size: 1.08rem;
      color: var(--jsld-teal-900);
      transition: color var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-area p,
    .jsld-on-dark .jsld-area p {
      margin: 0;
      font-size: var(--jsld-fs-body-sm);
      color: var(--jsld-ink-700);
      transition: color var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-area:hover {
      color: #fff;
      transform: translateY(-6px);
      box-shadow: var(--jsld-shadow-3)
    }

    .jsld-area:hover::before {
      clip-path: circle(150% at 88% 88%)
    }

    .jsld-area:hover h4,
    .jsld-on-dark .jsld-area:hover h4 {
      color: #fff
    }

    .jsld-area:hover p,
    .jsld-on-dark .jsld-area:hover p {
      color: rgba(255, 255, 255, .88)
    }

    .jsld-area:hover .jsld-area__icon {
      color: var(--jsld-sand-500);
      transform: translateY(-4px) rotate(-6deg)
    }

    .jsld-area:hover .jsld-area__num {
      color: rgba(255, 255, 255, .22)
    }

    .jsld-area__icon {
      font-size: 1.5rem;
      color: var(--jsld-teal-700);
      margin-bottom: .9rem;
      display: block;
      transition: color var(--jsld-dur-3) var(--jsld-ease), transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-area__num {
      position: absolute;
      top: .7rem;
      right: .9rem;
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: 2.4rem;
      line-height: 1;
      color: var(--jsld-teal-a12);
      transition: color var(--jsld-dur-3) var(--jsld-ease)
    }

    /* Card de mídia com parallax de imagem */
    .jsld-media {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--jsld-teal-a08);
      background: var(--jsld-teal-900)
    }

    .jsld-media__img {
      aspect-ratio: 16/10;
      overflow: hidden
    }

    .jsld-media__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(.85) brightness(.9);
      transform: scale(1.05);
      transition: transform 1.2s var(--jsld-ease-out), filter var(--jsld-dur-4) var(--jsld-ease)
    }

    .jsld-media:hover .jsld-media__img img {
      transform: scale(1.14);
      filter: grayscale(0) brightness(1)
    }

    .jsld-media__body {
      position: absolute;
      inset: auto 0 0 0;
      padding: var(--jsld-sp-5);
      background: linear-gradient(transparent, rgba(0, 55, 66, .94));
      color: #fff
    }

    .jsld-media__body h4,
    .jsld-on-dark .jsld-media__body h4 {
      color: #fff;
      margin: 0 0 .25rem
    }

    .jsld-media__body p {
      color: rgba(255, 255, 255, .78);
      margin: 0
    }


    /* ---------- 11.5 TOOLTIPS ---------- */
    .jsld-tip {
      position: relative;
      display: inline-flex;
      border-bottom: 1px dotted currentColor;
      cursor: help
    }

    .jsld-tip::after {
      content: attr(data-tip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(6px) scale(.96);
      transform-origin: bottom center;
      min-width: max-content;
      max-width: 260px;
      white-space: normal;
      text-align: center;
      background: #00252D;
      color: #fff;
      padding: .5rem .75rem;
      border: 1px solid rgba(255, 255, 255, .16);
      font-family: var(--jsld-font-sans);
      font-size: .7rem;
      line-height: 1.45;
      letter-spacing: .01em;
      text-transform: none;
      box-shadow: var(--jsld-shadow-3);
      opacity: 0;
      pointer-events: none;
      z-index: 50;
      transition: opacity var(--jsld-dur-2) var(--jsld-ease), transform var(--jsld-dur-2) var(--jsld-ease-out)
    }

    .jsld-tip::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: calc(100% + 4px);
      transform: translateX(-50%) translateY(6px);
      border: 6px solid transparent;
      border-top-color: #00252D;
      opacity: 0;
      z-index: 50;
      transition: opacity var(--jsld-dur-2) var(--jsld-ease), transform var(--jsld-dur-2) var(--jsld-ease-out)
    }

    .jsld-tip:hover::after,
    .jsld-tip:focus-visible::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1)
    }

    .jsld-tip:hover::before,
    .jsld-tip:focus-visible::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    .jsld-tip--right::after {
      left: calc(100% + 12px);
      bottom: auto;
      top: 50%;
      transform: translateY(-50%) translateX(-6px) scale(.96)
    }

    .jsld-tip--right::before {
      left: calc(100% + 6px);
      bottom: auto;
      top: 50%;
      transform: translateY(-50%) translateX(-6px);
      border-top-color: transparent;
      border-right-color: #00252D
    }

    .jsld-tip--right:hover::after {
      transform: translateY(-50%) translateX(0) scale(1)
    }

    .jsld-tip--right:hover::before {
      transform: translateY(-50%) translateX(0)
    }

    /* ---------- 11.6 MODAL ---------- */
    .jsld-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: grid;
      place-items: center;
      padding: 1.4rem;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--jsld-dur-3) var(--jsld-ease), visibility 0s linear var(--jsld-dur-3)
    }

    .jsld-modal.is-open {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s
    }

    .jsld-modal__scrim {
      position: absolute;
      inset: 0;
      background: rgba(0, 55, 66, .66);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px)
    }

    .jsld-modal__box {
      position: relative;
      width: min(100%, 560px);
      background: var(--jsld-paper);
      color: var(--jsld-ink-700);
      border-top: 3px solid var(--jsld-teal-700);
      box-shadow: var(--jsld-shadow-3);
      padding: var(--jsld-sp-6);
      transform: translateY(24px) scale(.97);
      opacity: 0;
      transition: transform 520ms var(--jsld-ease-out), opacity 420ms var(--jsld-ease)
    }

    .jsld-modal.is-open .jsld-modal__box {
      transform: none;
      opacity: 1
    }

    .jsld-modal__close {
      position: absolute;
      top: .8rem;
      right: .8rem;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      background: none;
      border: 1px solid var(--jsld-teal-a24);
      color: var(--jsld-teal-700);
      cursor: pointer;
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-modal__close:hover {
      background: var(--jsld-teal-700);
      color: #fff;
      border-color: var(--jsld-teal-700);
      transform: rotate(90deg)
    }

    /* ---------- 11.7 SECTIONS / listas ---------- */
    .elementor-icon-list-items {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .elementor-icon-list-item {
      display: flex;
      gap: .8rem;
      align-items: flex-start;
      padding: .55rem 0;
      font-size: var(--jsld-fs-body-sm);
      transition: transform var(--jsld-dur-2) var(--jsld-ease)
    }

    .elementor-icon-list-item:hover {
      transform: translateX(5px)
    }

    .elementor-icon-list-icon {
      color: var(--jsld-teal-700);
      width: 1.1rem;
      text-align: center;
      flex: none;
      padding-top: .14rem
    }

    .jsld-on-dark .elementor-icon-list-icon {
      color: var(--jsld-sand-500)
    }

    /* Accordion */
    .jsld-acc {
      border-top: 1px solid var(--jsld-teal-a12)
    }

    .jsld-on-dark .jsld-acc,
    .jsld-on-dark .jsld-acc__item {
      border-color: var(--jsld-dark-line)
    }

    .jsld-acc__item {
      border-bottom: 1px solid var(--jsld-teal-a12)
    }

    .jsld-acc__btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      background: none;
      border: 0;
      cursor: pointer;
      text-align: left;
      padding: 1.1rem .2rem;
      font-family: var(--jsld-font-sans);
      font-weight: 600;
      font-size: 1.02rem;
      color: var(--jsld-teal-900);
      transition: color var(--jsld-dur-2) var(--jsld-ease), padding-left var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-acc__btn:hover {
      color: var(--jsld-teal-700);
      padding-left: .7rem
    }

    .jsld-on-dark .jsld-acc__btn {
      color: #fff
    }

    .jsld-on-dark .jsld-acc__btn:hover {
      color: var(--jsld-sand-500)
    }

    .jsld-acc__btn i {
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out);
      color: var(--jsld-teal-700);
      flex: none
    }

    .jsld-on-dark .jsld-acc__btn i {
      color: var(--jsld-sand-500)
    }

    .jsld-acc__item.is-open .jsld-acc__btn i {
      transform: rotate(180deg)
    }

    .jsld-acc__panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 520ms var(--jsld-ease-out)
    }

    .jsld-acc__panel>div {
      padding: 0 .2rem 1.2rem;
      font-size: var(--jsld-fs-body-sm);
      color: var(--jsld-ink-700)
    }

    .jsld-on-dark .jsld-acc__panel>div {
      color: var(--jsld-dark-text)
    }

    /* Tabs */
    .jsld-tabs__nav {
      display: flex;
      flex-wrap: wrap;
      gap: .2rem;
      border-bottom: 1px solid var(--jsld-teal-a12)
    }

    .jsld-on-dark .jsld-tabs__nav {
      border-bottom-color: var(--jsld-dark-line)
    }

    .jsld-tabs__btn {
      position: relative;
      background: none;
      border: 0;
      cursor: pointer;
      padding: .7rem 1.1rem;
      font-family: var(--jsld-font-ui);
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--jsld-sand-700);
      transition: color var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-tabs__btn::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--jsld-teal-700);
      transform: scaleX(0);
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-tabs__btn:hover {
      color: var(--jsld-teal-700)
    }

    .jsld-tabs__btn.is-active {
      color: var(--jsld-teal-900)
    }

    .jsld-tabs__btn.is-active::after {
      transform: scaleX(1)
    }

    .jsld-on-dark .jsld-tabs__btn {
      color: var(--jsld-dark-text-2)
    }

    .jsld-on-dark .jsld-tabs__btn:hover {
      color: var(--jsld-sand-500)
    }

    .jsld-on-dark .jsld-tabs__btn.is-active {
      color: #fff
    }

    .jsld-on-dark .jsld-tabs__btn::after {
      background: var(--jsld-sand-500)
    }

    .jsld-tabs__panel {
      display: none;
      padding-top: 1.2rem;
      animation: jsld-fade-up 520ms var(--jsld-ease-out)
    }

    .jsld-tabs__panel.is-active {
      display: block
    }

    @keyframes jsld-fade-up {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* Toast */
    .jsld-toasts {
      position: fixed;
      right: 1.2rem;
      bottom: 1.2rem;
      z-index: 210;
      display: flex;
      flex-direction: column;
      gap: .6rem
    }

    .jsld-toast {
      display: flex;
      align-items: center;
      gap: .7rem;
      min-width: 250px;
      padding: .8rem 1rem;
      background: #00252D;
      color: #fff;
      border-left: 3px solid var(--jsld-sand-500);
      box-shadow: var(--jsld-shadow-3);
      font-size: var(--jsld-fs-body-sm);
      animation: jsld-toast-in 480ms var(--jsld-ease-out)
    }

    .jsld-toast.is-out {
      animation: jsld-toast-out 380ms var(--jsld-ease) forwards
    }

    @keyframes jsld-toast-in {
      from {
        opacity: 0;
        transform: translateX(36px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes jsld-toast-out {
      to {
        opacity: 0;
        transform: translateX(36px)
      }
    }

    /* Sub-rótulo de bloco dentro de seção escura */
    .jsld-sublabel {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      margin: 1.4rem 0 .8rem;
      font-family: var(--jsld-font-ui);
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--jsld-sand-500)
    }

    /* ---------------------------------------------------------------- Alertas, timeline, tabela, skeleton, spinner, playground (v2.1.0) ---------------------------------------------------------------- */

    /* Novos Componentes v2.1.0 (Alertas, Timeline, Tabela, Skeletons, Playground) */
    .jsld-alert {
      position: relative;
      padding: 1rem 1.2rem;
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      border-left: 4px solid var(--jsld-teal-700);
      background: var(--jsld-sand-050);
      font-size: var(--jsld-fs-body-sm);
      color: var(--jsld-ink-700);
      transition: all var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-alert--info {
      border-left-color: var(--jsld-info);
      background: var(--jsld-teal-050)
    }

    .jsld-alert--success {
      border-left-color: var(--jsld-success);
      background: rgba(63, 122, 98, .08)
    }

    .jsld-alert--warning {
      border-left-color: var(--jsld-warning);
      background: rgba(176, 132, 66, .08)
    }

    .jsld-alert--danger {
      border-left-color: var(--jsld-danger);
      background: rgba(158, 59, 50, .08)
    }

    .jsld-alert__icon {
      font-size: 1.1rem;
      flex: none;
      margin-top: .1rem
    }

    .jsld-alert__content {
      flex: 1
    }

    .jsld-alert__content h5 {
      margin: 0 0 .2rem;
      font-size: .92rem;
      color: inherit
    }

    .jsld-alert__close {
      background: none;
      border: 0;
      color: inherit;
      cursor: pointer;
      opacity: .6;
      font-size: .9rem
    }

    .jsld-alert__close:hover {
      opacity: 1
    }

    .jsld-on-dark .jsld-alert {
      background: rgba(255, 255, 255, .08);
      color: var(--jsld-dark-text)
    }

    .jsld-timeline {
      position: relative;
      padding-left: 2rem;
      border-left: 2px solid var(--jsld-sand-200)
    }

    .jsld-on-dark .jsld-timeline {
      border-left-color: var(--jsld-dark-line)
    }

    .jsld-timeline__item {
      position: relative;
      margin-bottom: 2rem
    }

    .jsld-timeline__item:last-child {
      margin-bottom: 0
    }

    .jsld-timeline__marker {
      position: absolute;
      left: calc(-2rem - 6px);
      top: .2rem;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--jsld-paper);
      border: 2px solid var(--jsld-teal-700);
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-timeline__item.is-done .jsld-timeline__marker {
      background: var(--jsld-teal-700)
    }

    .jsld-timeline__item.is-current .jsld-timeline__marker {
      background: var(--jsld-sand-500);
      border-color: var(--jsld-teal-900);
      box-shadow: 0 0 0 4px var(--jsld-teal-a12)
    }

    .jsld-timeline__date {
      font-family: var(--jsld-font-ui);
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-teal-700);
      margin-bottom: .2rem
    }

    .jsld-on-dark .jsld-timeline__date {
      color: var(--jsld-sand-500)
    }

    .jsld-timeline__title {
      font-size: 1.02rem;
      font-weight: 600;
      color: var(--jsld-teal-900);
      margin: 0 0 .4rem
    }

    .jsld-on-dark .jsld-timeline__title {
      color: #fff
    }

    .jsld-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--jsld-teal-a12);
      background: var(--jsld-paper)
    }

    .jsld-on-dark .jsld-table-wrap {
      background: rgba(255, 255, 255, .05);
      border-color: var(--jsld-dark-line)
    }

    .jsld-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: var(--jsld-fs-body-sm)
    }

    .jsld-table th {
      background: var(--jsld-teal-900);
      color: #fff;
      font-family: var(--jsld-font-ui);
      font-size: .64rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: .8rem 1rem
    }

    .jsld-table td {
      padding: .85rem 1rem;
      border-bottom: 1px solid var(--jsld-sand-200);
      color: var(--jsld-ink-700)
    }

    .jsld-on-dark .jsld-table td {
      border-bottom-color: var(--jsld-dark-line);
      color: var(--jsld-dark-text)
    }

    .jsld-table tr:hover td {
      background: var(--jsld-teal-050)
    }

    .jsld-on-dark .jsld-table tr:hover td {
      background: rgba(255, 255, 255, .08)
    }

    .jsld-skeleton {
      background: linear-gradient(90deg, var(--jsld-sand-200) 25%, var(--jsld-sand-050) 50%, var(--jsld-sand-200) 75%);
      background-size: 200% 100%;
      animation: jsld-skeleton-loading 1.6s infinite;
      border-radius: 2px
    }

    .jsld-on-dark .jsld-skeleton {
      background: linear-gradient(90deg, rgba(255, 255, 255, .1) 25%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .1) 75%);
      background-size: 200% 100%
    }

    @keyframes jsld-skeleton-loading {
      0% {
        background-position: 200% 0
      }

      100% {
        background-position: -200% 0
      }
    }

    .jsld-spinner {
      width: 24px;
      height: 24px;
      border: 3px solid var(--jsld-teal-a24);
      border-top-color: var(--jsld-teal-700);
      border-radius: 50%;
      animation: jsld-spin 800ms linear infinite;
      display: inline-block
    }

    .jsld-on-dark .jsld-spinner {
      border-color: rgba(255, 255, 255, .2);
      border-top-color: var(--jsld-sand-500)
    }

    @keyframes jsld-spin {
      to {
        transform: rotate(360deg)
      }
    }

    .jsld-playground {
      background: var(--jsld-paper);
      border: 1px solid var(--jsld-teal-a12);
      padding: 1.5rem
    }

    .jsld-on-dark .jsld-playground {
      background: rgba(255, 255, 255, .05);
      border-color: var(--jsld-dark-line)
    }

    .jsld-playground__controls {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--jsld-sand-200)
    }

    .jsld-on-dark .jsld-playground__controls {
      border-bottom-color: var(--jsld-dark-line)
    }

    /* ---------------------------------------------------------------- shell/header ---------------------------------------------------------------- */
    /* ============================================================================
   05 · NAVBAR  (.site-header / .ast-* + camada jsld-)
   ========================================================================== */
    .site-header.jsld-nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 80;
      background: rgba(255, 255, 255, .72);
      backdrop-filter: saturate(180%) blur(14px);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      border-bottom: 1px solid var(--jsld-teal-a08);
      transition: transform var(--jsld-dur-3) var(--jsld-ease), background var(--jsld-dur-3) var(--jsld-ease),
        box-shadow var(--jsld-dur-3) var(--jsld-ease), padding var(--jsld-dur-3) var(--jsld-ease)
    }

    .site-header.jsld-nav.ast-sticky-shrunk {
      box-shadow: var(--jsld-shadow-1);
      background: rgba(255, 255, 255, .94)
    }

    .site-header.jsld-nav.jsld-nav--hidden {
      transform: translateY(-102%)
    }

    .main-header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--jsld-sp-5);
      padding: .7rem 0;
      transition: padding var(--jsld-dur-3) var(--jsld-ease)
    }

    .ast-sticky-shrunk .main-header-bar {
      padding: .45rem 0
    }

    .site-branding {
      display: flex;
      align-items: center;
      gap: .7rem;
      min-width: 0
    }

    .site-branding .jsld-mark {
      width: 30px;
      height: auto;
      flex: none;
      transition: transform var(--jsld-dur-3) var(--jsld-ease)
    }

    .site-branding:hover .jsld-mark {
      transform: rotate(-8deg) scale(1.08)
    }

    .site-branding .jsld-wordmark {
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: .98rem;
      letter-spacing: .04em;
      color: var(--jsld-teal-900);
      line-height: 1.05;
      white-space: nowrap
    }

    .site-branding .jsld-wordmark small {
      display: block;
      font-family: var(--jsld-font-ui);
      font-size: .5rem;
      letter-spacing: .26em;
      color: var(--jsld-sand-700);
      text-transform: uppercase
    }

    .main-header-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: .15rem;
      flex-wrap: wrap;
      justify-content: flex-end
    }

    .main-header-menu .menu-link {
      position: relative;
      display: block;
      padding: .5rem .72rem;
      font-family: var(--jsld-font-ui);
      font-size: .74rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--jsld-ink-700);
      transition: color var(--jsld-dur-2) var(--jsld-ease)
    }

    .main-header-menu .menu-link::after {
      content: "";
      position: absolute;
      left: .72rem;
      right: .72rem;
      bottom: .28rem;
      height: 1px;
      background: var(--jsld-teal-700);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .main-header-menu .menu-link:hover,
    .main-header-menu .current-menu-item>.menu-link {
      color: var(--jsld-teal-700)
    }

    .main-header-menu .menu-link:hover::after,
    .main-header-menu .current-menu-item>.menu-link::after {
      transform: scaleX(1);
      transform-origin: left
    }

    .jsld-nav__progress {
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 0;
      background: linear-gradient(90deg, var(--jsld-sand-500), var(--jsld-teal-700));
      box-shadow: 0 0 12px var(--jsld-teal-a64)
    }

    .jsld-nav__actions {
      display: flex;
      align-items: center;
      gap: .8rem
    }

    .jsld-nav__search-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .38rem .75rem;
      background: var(--jsld-teal-050);
      border: 1px solid var(--jsld-teal-a12);
      font-family: var(--jsld-font-mono);
      font-size: .66rem;
      color: var(--jsld-teal-700);
      cursor: pointer;
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-nav__search-btn:hover {
      background: var(--jsld-teal-700);
      color: #fff;
      border-color: var(--jsld-teal-700)
    }

    .jsld-nav__toggle {
      display: none;
      background: none;
      border: 1px solid var(--jsld-teal-a24);
      color: var(--jsld-teal-900);
      padding: .4rem .6rem;
      cursor: pointer;
      font-size: 1.1rem;
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-nav__toggle:hover {
      background: var(--jsld-teal-700);
      color: #fff;
      border-color: var(--jsld-teal-700)
    }

    @media (max-width:860px) {
      .main-header-menu {
        display: none
      }

      .jsld-nav__toggle {
        display: inline-flex
      }
    }

    /* Drawer Mobile (v2.1.0) */
    .jsld-nav__drawer {
      position: fixed;
      inset: 0;
      z-index: 190;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--jsld-teal-900);
      color: #fff;
      padding: 2rem;
      transform: translateX(100%);
      transition: transform 420ms var(--jsld-ease-out);
      isolation: isolate
    }

    .jsld-nav__drawer.is-open {
      transform: translateX(0)
    }

    .jsld-nav__drawer-scrim {
      position: fixed;
      inset: 0;
      z-index: 189;
      background: rgba(0, 55, 66, .6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 300ms var(--jsld-ease)
    }

    .jsld-nav__drawer-scrim.is-open {
      opacity: 1;
      visibility: visible
    }

    .jsld-nav__drawer-head {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .jsld-nav__drawer-menu {
      list-style: none;
      padding: 0;
      margin: 2rem 0;
      display: flex;
      flex-direction: column;
      gap: 1.2rem
    }

    .jsld-nav__drawer-menu a {
      font-family: var(--jsld-font-ui);
      font-size: 1.1rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--jsld-sand-500)
    }

    .jsld-nav__drawer-menu a:hover {
      color: #fff
    }


    /* Search Modal (Ctrl + K) (v2.1.0) */
    .jsld-search-modal {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: grid;
      place-items: start center;
      padding-top: 10vh;
      opacity: 0;
      visibility: hidden;
      transition: all 260ms var(--jsld-ease)
    }

    .jsld-search-modal.is-open {
      opacity: 1;
      visibility: visible
    }

    .jsld-search-modal__scrim {
      position: absolute;
      inset: 0;
      background: rgba(0, 55, 66, .75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px)
    }

    .jsld-search-modal__box {
      position: relative;
      z-index: 2;
      width: min(100% - 2rem, 640px);
      background: var(--jsld-paper);
      border-top: 3px solid var(--jsld-teal-700);
      box-shadow: var(--jsld-shadow-3);
      overflow: hidden
    }

    .jsld-search-modal__input-wrap {
      display: flex;
      align-items: center;
      padding: 1rem 1.2rem;
      border-bottom: 1px solid var(--jsld-sand-200)
    }

    .jsld-search-modal__input-wrap i {
      color: var(--jsld-teal-700);
      margin-right: .8rem;
      font-size: 1.1rem
    }

    .jsld-search-modal__input {
      flex: 1;
      border: 0;
      font-family: var(--jsld-font-sans);
      font-size: 1.1rem;
      color: var(--jsld-teal-900);
      outline: none;
      background: transparent
    }

    .jsld-search-modal__results {
      max-height: 50vh;
      overflow-y: auto;
      padding: .8rem
    }

    .jsld-search-modal__item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .75rem 1rem;
      border-radius: 2px;
      color: var(--jsld-ink-700);
      text-decoration: none;
      transition: background 180ms var(--jsld-ease)
    }

    .jsld-search-modal__item:hover {
      background: var(--jsld-teal-050);
      color: var(--jsld-teal-700)
    }


    /* ============================================================================
   15 · v2.2.1 — NAVEGAÇÃO EM GRUPOS, SKIP LINK E BUSCA
   ========================================================================== */
    .jsld-skip {
      position: fixed;
      top: -60px;
      left: 1rem;
      z-index: var(--jsld-z-tooltip);
      background: var(--jsld-teal-700);
      color: #fff;
      padding: .7rem 1.1rem;
      font-family: var(--jsld-font-ui);
      font-size: .74rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      transition: top var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-skip:focus {
      top: 1rem;
      outline: 2px solid var(--jsld-sand-500);
      outline-offset: 2px
    }

    .site-header.jsld-nav {
      z-index: var(--jsld-z-nav)
    }

    .menu-item.jsld-has-sub {
      position: relative
    }

    .jsld-sub-toggle {
      display: flex;
      align-items: center;
      gap: .34rem;
      background: none;
      border: 0;
      cursor: pointer;
      font-family: var(--jsld-font-ui)
    }

    .jsld-sub-toggle i {
      font-size: .62rem;
      transition: transform var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-has-sub.is-open .jsld-sub-toggle i {
      transform: rotate(180deg)
    }

    .jsld-nav__sub {
      position: absolute;
      top: calc(100% + .35rem);
      right: 0;
      min-width: 232px;
      list-style: none;
      margin: 0;
      padding: .4rem;
      background: #fff;
      border: var(--jsld-line);
      border-top: 2px solid var(--jsld-teal-700);
      box-shadow: var(--jsld-shadow-2);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity var(--jsld-dur-2) var(--jsld-ease), transform var(--jsld-dur-2) var(--jsld-ease),
        visibility var(--jsld-dur-2)
    }

    .jsld-has-sub:hover .jsld-nav__sub,
    .jsld-has-sub:focus-within .jsld-nav__sub,
    .jsld-has-sub.is-open .jsld-nav__sub {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .jsld-nav__sub .menu-link {
      padding: .5rem .7rem;
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap
    }

    .jsld-nav__sub .menu-link::after {
      display: none
    }

    .jsld-nav__sub .menu-link:hover,
    .jsld-nav__sub .menu-link.is-current {
      background: var(--jsld-teal-050);
      color: var(--jsld-teal-700)
    }

    .jsld-has-sub.is-active>.jsld-sub-toggle {
      color: var(--jsld-teal-700)
    }

    .jsld-has-sub.is-active>.jsld-sub-toggle::after {
      transform: scaleX(1);
      transform-origin: left
    }

    .jsld-drawer-group {
      font-family: var(--jsld-font-ui);
      font-size: .58rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--jsld-sand-500);
      padding: 1rem 0 .3rem;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      margin-bottom: .3rem
    }

    .jsld-search-modal__foot {
      display: flex;
      gap: 1.1rem;
      padding: .6rem .9rem;
      border-top: var(--jsld-line);
      font-size: .66rem;
      color: var(--jsld-muted-text);
      font-family: var(--jsld-font-ui);
      letter-spacing: .08em
    }

    .jsld-search-modal__foot kbd {
      font-family: var(--jsld-font-mono);
      font-size: .62rem;
      border: var(--jsld-line);
      border-radius: 3px;
      padding: 0 .28rem;
      margin-right: .18rem;
      background: var(--jsld-sand-050)
    }

    .jsld-search-modal__item.is-cursor {
      background: var(--jsld-teal-050);
      outline: 1px solid var(--jsld-teal-a24)
    }

    .jsld-search-modal__item mark {
      background: var(--jsld-sand-a40);
      color: inherit;
      padding: 0 .1em
    }

    .jsld-search-empty {
      padding: 1.2rem .9rem;
      font-size: .82rem;
      color: var(--jsld-muted-text)
    }


    /* ---------------------------------------------------------------- hero ---------------------------------------------------------------- */
    /* ============================================================================
   06 · HERO — primeira dobra
   ========================================================================== */
    .jsld-hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: 8rem 0 5rem;
      background: var(--jsld-grad-deep);
      color: #fff;
      overflow: hidden;
      isolation: isolate
    }

    .jsld-hero__inner {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: var(--jsld-sp-7);
      align-items: center;
      position: relative;
      z-index: 3
    }

    @media (max-width:940px) {
      .jsld-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--jsld-sp-6)
      }
    }

    .jsld-hero__title {
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: clamp(2.6rem, 1.2rem + 5.4vw, 4.6rem);
      line-height: 1.02;
      letter-spacing: -.026em;
      color: #fff;
      margin: 0 0 var(--jsld-sp-5)
    }

    .jsld-hero__title em {
      font-style: italic;
      font-weight: 400;
      background: var(--jsld-grad-text);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding-right: .08em
    }

    .jsld-hero__lead {
      max-width: 52ch;
      font-size: var(--jsld-fs-body-lg);
      color: rgba(255, 255, 255, .8);
      margin-bottom: var(--jsld-sp-6)
    }

    .jsld-hero__meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--jsld-sp-6);
      margin-top: var(--jsld-sp-7);
      padding-top: var(--jsld-sp-5);
      border-top: 1px solid rgba(255, 255, 255, .14)
    }

    .jsld-hero__stat {
      min-width: 118px
    }

    .jsld-hero__stat b {
      display: block;
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: 2rem;
      line-height: 1;
      color: #fff;
      font-variant-numeric: tabular-nums
    }

    .jsld-hero__stat span {
      font-family: var(--jsld-font-ui);
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--jsld-sand-500)
    }

    /* Símbolo institucional em cena — desenha-se e depois flutua */
    .jsld-hero__symbol {
      position: absolute;
      right: -6vw;
      top: 50%;
      width: min(46vw, 620px);
      transform: translateY(-50%);
      opacity: .28;
      z-index: 1;
      pointer-events: none;
      filter: drop-shadow(0 0 12px rgba(183, 174, 165, .35));
      animation: jsld-float 14s var(--jsld-ease-in-out) infinite alternate
    }

    @keyframes jsld-float {
      0% {
        transform: translateY(-50%) rotate(0deg) scale(1)
      }

      100% {
        transform: translateY(-56%) rotate(-3deg) scale(1.05)
      }
    }

    /* Cartão de demonstração: foto + monograma vivo */
    .jsld-hero__card {
      position: relative;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .05);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: var(--jsld-sp-5);
      box-shadow: var(--jsld-shadow-3);
      transform-style: preserve-3d;
      transition: transform 600ms var(--jsld-ease-out)
    }

    .jsld-hero__card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(130deg, rgba(255, 255, 255, .16), transparent 45%);
      opacity: 0;
      transition: opacity var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-hero__card:hover::before {
      opacity: 1
    }

    .jsld-hero__figure {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: var(--jsld-grad-dusk)
    }

    .jsld-hero__figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.06) brightness(.82);
      transform: scale(1.06);
      transition: transform 1.4s var(--jsld-ease-out), filter 700ms var(--jsld-ease)
    }

    .jsld-hero__card:hover .jsld-hero__figure img {
      transform: scale(1);
      filter: grayscale(.15) contrast(1.02) brightness(.95)
    }

    .jsld-hero__figure::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(200deg, rgba(0, 55, 66, .10), rgba(0, 55, 66, .62));
      mix-blend-mode: multiply
    }

    .jsld-hero__badge {
      position: absolute;
      left: var(--jsld-sp-5);
      bottom: var(--jsld-sp-5);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .4rem .8rem;
      background: rgba(0, 55, 66, .8);
      border: 1px solid rgba(255, 255, 255, .24);
      font-family: var(--jsld-font-ui);
      font-size: .6rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #fff
    }

    .jsld-hero__badge i {
      color: var(--jsld-sand-500)
    }

    .jsld-hero__cardfoot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: var(--jsld-sp-4);
      gap: var(--jsld-sp-4);
      flex-wrap: wrap
    }

    /* Cursor-follow spotlight sobre a hero */
    .jsld-hero__spot {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(183, 174, 165, .16), transparent 62%);
      transition: background 260ms linear
    }

    .jsld-scrollcue {
      position: absolute;
      left: 50%;
      bottom: 1.6rem;
      transform: translateX(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      font-family: var(--jsld-font-ui);
      font-size: .56rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .62)
    }

    .jsld-scrollcue span {
      display: block;
      width: 1px;
      height: 44px;
      background: linear-gradient(180deg, var(--jsld-sand-500), transparent);
      animation: jsld-cue 2.4s var(--jsld-ease-in-out) infinite
    }

    @keyframes jsld-cue {

      0%,
      100% {
        transform: scaleY(.4);
        transform-origin: top;
        opacity: .4
      }

      50% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1
      }
    }


    /* ---------------------------------------------------------------- marca ---------------------------------------------------------------- */
    /* ============================================================================
   08 · MARCA
   ========================================================================== */
    .jsld-lockup {
      display: grid;
      place-items: center;
      padding: var(--jsld-sp-6);
      min-height: 210px;
      position: relative;
      overflow: hidden
    }

    .jsld-lockup svg {
      width: min(100%, 250px);
      height: auto
    }

    .jsld-lockup--paper {
      background: var(--jsld-paper);
      border: 1px solid var(--jsld-teal-a08)
    }

    .jsld-lockup--teal {
      background: var(--jsld-teal-700)
    }

    .jsld-lockup--sand {
      background: var(--jsld-sand-500)
    }

    .jsld-lockup--photo {
      background: var(--jsld-teal-900) center/cover
    }

    .jsld-lockup__tag {
      position: absolute;
      top: .6rem;
      left: .6rem;
      font-family: var(--jsld-font-ui);
      font-size: .56rem;
      letter-spacing: .18em;
      text-transform: uppercase
    }

    .jsld-lockup--paper .jsld-lockup__tag {
      color: var(--jsld-sand-700)
    }

    .jsld-lockup--teal .jsld-lockup__tag,
    .jsld-lockup--photo .jsld-lockup__tag {
      color: rgba(255, 255, 255, .8)
    }

    .jsld-lockup--sand .jsld-lockup__tag {
      color: var(--jsld-teal-900)
    }

    /* Campo de proteção 2X — interativo */
    .jsld-protect {
      position: relative;
      display: grid;
      place-items: center;
      padding: 3.6rem;
      background: var(--jsld-paper);
      border: 1px solid var(--jsld-teal-a08);
      overflow: hidden
    }

    .jsld-protect::before {
      content: "";
      position: absolute;
      inset: 2.2rem;
      border: 1px dashed var(--jsld-teal-400);
      opacity: 0;
      transition: opacity var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-protect::after {
      content: "2X";
      position: absolute;
      top: .8rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--jsld-font-mono);
      font-size: .62rem;
      color: var(--jsld-teal-600);
      opacity: 0;
      transition: opacity var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-protect:hover::before,
    .jsld-protect:hover::after {
      opacity: 1
    }

    .jsld-protect svg {
      width: min(100%, 200px);
      position: relative;
      z-index: 2
    }

    /* Usos proibidos */
    .jsld-forbid {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 170px;
      padding: var(--jsld-sp-5);
      background: var(--jsld-paper);
      border: 1px solid rgba(158, 59, 50, .24);
      overflow: hidden
    }

    .jsld-forbid svg {
      width: min(100%, 170px);
      height: auto;
      transition: transform var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-forbid::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top left, transparent calc(50% - .5px), rgba(158, 59, 50, .4) 50%, transparent calc(50% + .5px));
      opacity: 0;
      transition: opacity var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-forbid:hover::after {
      opacity: 1
    }

    .jsld-forbid--squish svg {
      transform: scaleX(1.45)
    }

    .jsld-forbid--rotate svg {
      transform: rotate(12deg)
    }

    .jsld-forbid--color {
      --jsld-lk-1: #9E3B32;
      --jsld-lk-2: #C9756B
    }

    .jsld-forbid--scale {
      --jsld-lk-2: #B7AEA5
    }

    .jsld-forbid--scale svg {
      transform: scaleY(1.5)
    }


    /* ---------------------------------------------------------------- tipografia ---------------------------------------------------------------- */
    /* ============================================================================
   09 · TIPOGRAFIA
   ========================================================================== */
    .jsld-typeface {
      position: relative;
      overflow: hidden;
      padding: var(--jsld-sp-6);
      border: 1px solid var(--jsld-teal-a12);
      background: var(--jsld-paper)
    }

    .jsld-typeface__glyph {
      font-size: clamp(5rem, 16vw, 9rem);
      line-height: .86;
      color: var(--jsld-teal-700);
      display: block;
      transition: transform 900ms var(--jsld-ease-out), color var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-typeface:hover .jsld-typeface__glyph {
      transform: translateX(6px);
      color: var(--jsld-teal-900)
    }

    .jsld-typeface__weights {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem 1rem;
      margin-top: var(--jsld-sp-4)
    }

    .jsld-typeface__weights span {
      font-size: var(--jsld-fs-body-sm);
      color: var(--jsld-sand-700)
    }

    .jsld-type-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: var(--jsld-sp-5);
      align-items: baseline;
      padding: var(--jsld-sp-5) 0;
      border-bottom: 1px solid var(--jsld-teal-a08);
      transition: padding-left var(--jsld-dur-3) var(--jsld-ease), background var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-type-row:hover {
      padding-left: var(--jsld-sp-4);
      background: linear-gradient(90deg, var(--jsld-teal-050), transparent 70%)
    }

    .jsld-type-row__sample {
      margin: 0;
      color: var(--jsld-teal-900);
      min-width: 0
    }

    .jsld-type-row__specs {
      font-family: var(--jsld-font-mono);
      font-size: .68rem;
      line-height: 1.85;
      color: var(--jsld-sand-700);
      white-space: nowrap
    }

    .jsld-type-row__specs b {
      color: var(--jsld-teal-700);
      font-weight: 600
    }

    @media (max-width:760px) {
      .jsld-type-row {
        grid-template-columns: 1fr
      }
    }


    .jsld-as-h1 {
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: var(--jsld-fs-h1);
      line-height: 1.12em;
      letter-spacing: -.018em;
      color: var(--jsld-teal-900)
    }

    .jsld-as-h2 {
      font-family: var(--jsld-font-display);
      font-weight: 700;
      font-size: var(--jsld-fs-h2);
      line-height: 1.18em;
      letter-spacing: -.014em;
      color: var(--jsld-teal-900)
    }

    .jsld-as-h3 {
      font-family: var(--jsld-font-display);
      font-weight: 600;
      font-size: var(--jsld-fs-h3);
      line-height: 1.24em;
      letter-spacing: -.010em;
      color: var(--jsld-teal-900)
    }

    .jsld-as-h4 {
      font-family: var(--jsld-font-sans);
      font-weight: 600;
      font-size: var(--jsld-fs-h4);
      line-height: 1.30em;
      letter-spacing: -.004em;
      color: var(--jsld-teal-900)
    }

    .jsld-as-h5 {
      font-family: var(--jsld-font-sans);
      font-weight: 600;
      font-size: var(--jsld-fs-h5);
      line-height: 1.35em;
      color: var(--jsld-teal-900)
    }

    .jsld-as-h6 {
      font-family: var(--jsld-font-ui);
      font-weight: 400;
      font-size: var(--jsld-fs-h6);
      line-height: 1.25em;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--jsld-teal-700)
    }

    .jsld-fontstatus {
      display: flex;
      align-items: center;
      gap: .55rem;
      margin: 0 0 1rem;
      padding: .6rem .85rem;
      font-family: var(--jsld-font-sans);
      font-size: .8rem;
      line-height: 1.45;
      border-left: 3px solid var(--jsld-sand-500);
      background: var(--jsld-sand-050);
      color: var(--jsld-ink-700)
    }

    .jsld-fontstatus[data-state="ok"] {
      border-left-color: var(--jsld-success);
      background: rgba(47, 107, 84, .07);
      color: var(--jsld-success-text)
    }

    .jsld-fontstatus[data-state="warn"] {
      border-left-color: var(--jsld-warning);
      background: rgba(176, 132, 66, .09);
      color: var(--jsld-warning-text)
    }

    .jsld-fontstatus[data-state="err"] {
      border-left-color: var(--jsld-danger);
      background: rgba(158, 59, 50, .07);
      color: var(--jsld-danger-text)
    }



    /* ---------------------------------------------------------------- fundacoes ---------------------------------------------------------------- */
    .jsld-scale-row {
      display: grid;
      grid-template-columns: 108px 92px 1fr;
      align-items: center;
      gap: 1rem;
      padding: .55rem 0;
      border-bottom: var(--jsld-line)
    }

    .jsld-scale-row:last-child {
      border-bottom: 0
    }

    .jsld-scale-row code {
      font-family: var(--jsld-font-mono);
      font-size: .72rem;
      color: var(--jsld-teal-700)
    }

    .jsld-scale-row b {
      font-family: var(--jsld-font-mono);
      font-size: .7rem;
      color: var(--jsld-muted-text);
      font-weight: 400
    }

    .jsld-scale-bar {
      height: 14px;
      background: linear-gradient(90deg, var(--jsld-teal-700), var(--jsld-teal-400));
      border-radius: var(--jsld-radius-1)
    }

    .jsld-radius-demo,
    .jsld-shadow-demo {
      display: grid;
      place-items: center;
      height: 92px;
      background: #fff;
      border: var(--jsld-line);
      font-family: var(--jsld-font-mono);
      font-size: .68rem;
      color: var(--jsld-teal-700)
    }

    .jsld-shadow-demo {
      border: 0
    }

    .jsld-grid-demo {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: .35rem;
      padding: .7rem;
      background: var(--jsld-sand-050);
      border: var(--jsld-line)
    }

    .jsld-grid-demo span {
      height: 46px;
      background: var(--jsld-teal-a12);
      border-top: 2px solid var(--jsld-teal-700);
      display: grid;
      place-items: center;
      font-family: var(--jsld-font-mono);
      font-size: .58rem;
      color: var(--jsld-teal-700)
    }

    @media (max-width:768px) {
      .jsld-grid-demo {
        grid-template-columns: repeat(4, 1fr)
      }

      .jsld-grid-demo span:nth-child(n+5) {
        display: none
      }

      .jsld-scale-row {
        grid-template-columns: 92px 78px 1fr;
        gap: .6rem
      }
    }



    /* ---------------------------------------------------------------- icones ---------------------------------------------------------------- */
    /* ============================================================================
   12 · ÍCONES
   ========================================================================== */
    .jsld-icon-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      padding: 1.1rem .6rem;
      border: 1px solid var(--jsld-teal-a08);
      background: var(--jsld-paper);
      text-align: center;
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-icon-cell i {
      font-size: 1.35rem;
      color: var(--jsld-teal-700);
      transition: transform var(--jsld-dur-3) var(--jsld-ease-out), color var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-icon-cell span {
      font-family: var(--jsld-font-mono);
      font-size: .56rem;
      color: var(--jsld-sand-700);
      word-break: break-all
    }

    .jsld-icon-cell:hover {
      background: var(--jsld-teal-700);
      border-color: var(--jsld-teal-700);
      transform: translateY(-4px);
      box-shadow: var(--jsld-shadow-2)
    }

    .jsld-icon-cell:hover i {
      color: #fff;
      transform: translateY(-3px) scale(1.12)
    }

    .jsld-icon-cell:hover span {
      color: rgba(255, 255, 255, .82)
    }

    .jsld-icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
      gap: .6rem
    }

    .jsld-icon-size {
      display: flex;
      align-items: flex-end;
      gap: 1.4rem;
      flex-wrap: wrap
    }

    .jsld-icon-size figure {
      margin: 0;
      text-align: center
    }

    .jsld-icon-size i {
      color: var(--jsld-teal-700);
      display: block;
      margin-bottom: .4rem
    }

    /* Ícones proprietários em SVG (traço, derivados da geometria do símbolo) */
    .jsld-svgicon {
      width: 44px;
      height: 44px;
      fill: none;
      stroke: var(--jsld-teal-700);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke var(--jsld-dur-2) var(--jsld-ease), transform var(--jsld-dur-3) var(--jsld-ease-out)
    }

    .jsld-icon-cell:hover .jsld-svgicon {
      stroke: #fff;
      transform: translateY(-3px) scale(1.1)
    }








    /* ---------------------------------------------------------------- acessibilidade ---------------------------------------------------------------- */
    .jsld-cmatrix {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--jsld-font-mono);
      font-size: .68rem
    }

    .jsld-cmatrix th,
    .jsld-cmatrix td {
      border: 1px solid var(--jsld-sand-200);
      padding: .38rem .3rem;
      text-align: center;
      white-space: nowrap
    }

    .jsld-cmatrix th {
      background: var(--jsld-teal-900);
      color: #fff;
      font-family: var(--jsld-font-ui);
      font-size: .58rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      position: sticky;
      top: 0
    }

    .jsld-cmatrix th:first-child,
    .jsld-cmatrix td:first-child {
      text-align: left;
      background: var(--jsld-sand-050);
      font-family: var(--jsld-font-ui);
      font-size: .6rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--jsld-teal-900)
    }

    .jsld-cmatrix td[data-lv="aaa"] {
      background: rgba(47, 107, 84, .16);
      color: #22503F
    }

    .jsld-cmatrix td[data-lv="aa"] {
      background: rgba(47, 107, 84, .08);
      color: #2F6B54
    }

    .jsld-cmatrix td[data-lv="lg"] {
      background: rgba(176, 132, 66, .14);
      color: #7E5C24
    }

    .jsld-cmatrix td[data-lv="no"] {
      background: rgba(158, 59, 50, .1);
      color: #8A322A
    }

    .jsld-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: .8rem;
      font-family: var(--jsld-font-ui);
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--jsld-muted-text)
    }

    .jsld-legend i {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: .34rem;
      vertical-align: -1px
    }



    /* ---------------------------------------------------------------- recursos ---------------------------------------------------------------- */
    .jsld-export {
      background: var(--jsld-teal-900);
      color: var(--jsld-dark-text);
      border: 1px solid var(--jsld-dark-line)
    }

    .jsld-export__head {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      padding: .7rem .8rem;
      border-bottom: 1px solid var(--jsld-dark-line)
    }

    .jsld-export__tab {
      background: none;
      border: 1px solid var(--jsld-dark-line-2);
      color: var(--jsld-dark-text-2);
      font-family: var(--jsld-font-ui);
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: .38rem .7rem;
      cursor: pointer;
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .jsld-export__tab:hover {
      border-color: var(--jsld-sand-500);
      color: #fff
    }

    .jsld-export__tab.is-active {
      background: var(--jsld-sand-500);
      border-color: var(--jsld-sand-500);
      color: var(--jsld-teal-900)
    }

    .jsld-export__actions {
      margin-left: auto;
      display: flex;
      gap: .4rem
    }

    .jsld-export__pre {
      margin: 0;
      padding: 1rem;
      max-height: 340px;
      overflow: auto;
      font-family: var(--jsld-font-mono);
      font-size: .7rem;
      line-height: 1.6;
      color: #D9E4E6;
      white-space: pre;
      tab-size: 2
    }

    .jsld-log {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative
    }

    .jsld-log::before {
      content: "";
      position: absolute;
      left: 5px;
      top: .5rem;
      bottom: .5rem;
      width: 1px;
      background: var(--jsld-sand-200)
    }

    .jsld-log li {
      position: relative;
      padding: 0 0 1.4rem 1.8rem
    }

    .jsld-log li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .38rem;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--jsld-sand-500);
      box-shadow: 0 0 0 3px #fff
    }

    .jsld-log li:first-child::before {
      background: var(--jsld-teal-700)
    }

    .jsld-log h5 {
      margin: 0 0 .1rem;
      font-family: var(--jsld-font-ui);
      font-size: .8rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--jsld-teal-900)
    }

    .jsld-log time {
      font-family: var(--jsld-font-mono);
      font-size: .66rem;
      color: var(--jsld-muted-text);
      display: block;
      margin-bottom: .4rem
    }

    .jsld-log ul {
      margin: 0;
      padding-left: 1.1rem;
      font-size: .88rem;
      line-height: 1.6
    }

    .jsld-tree {
      font-family: var(--jsld-font-mono);
      font-size: .72rem;
      line-height: 1.75;
      white-space: pre;
      overflow-x: auto;
      margin: 0;
      padding: 1rem;
      background: var(--jsld-sand-050);
      border: var(--jsld-line);
      color: var(--jsld-ink-700)
    }



    /* ---------------------------------------------------------------- shell/footer ---------------------------------------------------------------- */
    /* ============================================================================
   14 · RODAPÉ
   ========================================================================== */
    .jsld-footer {
      position: relative;
      background: var(--jsld-teal-900);
      color: var(--jsld-dark-text);
      padding: var(--jsld-sp-8) 0 var(--jsld-sp-5);
      overflow: hidden;
      isolation: isolate
    }

    .jsld-footer h4 {
      color: #fff;
      font-family: var(--jsld-font-sans);
      font-size: 1rem;
      margin-bottom: .9rem
    }

    .jsld-footer a {
      color: var(--jsld-sand-500)
    }

    .jsld-footer a:hover {
      color: #fff
    }

    .jsld-footer__brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem
    }

    .jsld-footer__brand svg {
      width: min(100%, 250px);
      height: auto
    }

    .jsld-social {
      display: flex;
      gap: .5rem
    }

    .elementor-social-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .3);
      color: #fff;
      transition: all var(--jsld-dur-2) var(--jsld-ease)
    }

    .elementor-social-icon:hover {
      background: var(--jsld-sand-500);
      border-color: var(--jsld-sand-500);
      color: var(--jsld-teal-900);
      transform: translateY(-4px)
    }

    .jsld-footer__bar {
      margin-top: var(--jsld-sp-6);
      padding-top: var(--jsld-sp-4);
      border-top: 1px solid rgba(255, 255, 255, .14);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: var(--jsld-fs-caption);
      color: rgba(255, 255, 255, .6)
    }

    .jsld-top {
      position: fixed;
      right: 1.2rem;
      bottom: 1.2rem;
      z-index: 90;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      background: var(--jsld-teal-700);
      color: #fff;
      border: 0;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all var(--jsld-dur-3) var(--jsld-ease)
    }

    .jsld-top.is-visible {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .jsld-top:hover {
      background: var(--jsld-teal-900);
      transform: translateY(-4px);
      box-shadow: var(--jsld-shadow-teal)
    }