/*!
 * ES7 Liquid Glass — v2.0.0
 * Camada do tema sobre o ds.css. Tudo aqui vale só com
 * body[data-ds-theme="es7-liquid"]; os outros temas não enxergam nada.
 *
 * Pipeline óptico de cada superfície (spec body[data-ds-theme="es7-liquid"]2):
 *   [conteúdo do fundo] → backdrop-filter (blur + saturate + brightness)
 *                       → tinta em gradiente (background)
 *                       → ::before  camada sólida pré-renderizada (opacificação; só anima opacity)
 *                       → ::after   borda especular de 1px
 * Camadas (spec body[data-ds-theme="es7-liquid"]4): canvas 0 · conteúdo 100 · flutuantes 110 · navegação 200 · overlays 300.
 * Comportamento em tema.js: molas, raio squircle, guarda de camadas, paralaxe e metaballs.
 */

/* Propriedades registradas não herdam: cada superfície guarda os próprios valores. */
@property --glass-radius { syntax: '<length>'; inherits: false; initial-value: 24px; }
@property --glass-opacity { syntax: '<number>'; inherits: false; initial-value: 0.18; }
@property --glass-blur { syntax: '<length>'; inherits: false; initial-value: 28px; }
@property --glass-brightness { syntax: '<percentage>'; inherits: false; initial-value: 105%; }

/* ==========================================================================
   1. TOKENS (espelham a spec body[data-ds-theme="es7-liquid"]7)
   ========================================================================== */
body[data-ds-theme="es7-liquid"] {
    --glass-opacity-subtle: 0.08;
    --glass-opacity-regular: 0.18;
    --glass-opacity-prominent: 0.32;
    --glass-opacity-opaque: 0.85;
    --glass-blur-sm: 12px;
    --glass-blur-md: 28px;
    --glass-blur-lg: 45px;
    --glass-border-width: 1px;
    --glass-border-specular-light: rgba(255, 255, 255, 0.35);
    --glass-border-specular-dark: rgba(0, 0, 0, 0.20);
    --glass-spring-stiffness: 340;
    --glass-spring-damping: 28;

    --system-glass-opacity: 0.18;
    --system-glass-blur: 28px;
    --system-contrast-ratio: 1;

    --glass-saturate: 125%;
    --glass-radius-fallback: 24px;

    /* liquid: 340 / 28 / 0,8 → 430ms, overshoot 0,6% (amostrado da integração da mola) */
    --lg-ease-liquid: linear(0, 0.0066 1.28%, 0.0238 2.56%, 0.0521 3.95%, 0.0947 5.58%, 0.1879 8.49%, 0.4128 14.77%, 0.5153 17.79%, 0.6114 20.93%, 0.6951 24.07%, 0.7659 27.21%, 0.8243 30.35%, 0.8729 33.6%, 0.9133 37.09%, 0.9461 40.93%, 0.9708 45.12%, 0.9882 49.77%, 0.9994 55.23%, 1.0059 67.21%, 1);
    --lg-dur-liquid: 430ms;
    /* morph: 210 / 20 / 1,2 → 800ms, overshoot 7,8% */
    --lg-ease-morph: linear(0, 0.0071 1.13%, 0.0292 2.38%, 0.0655 3.69%, 0.12 5.19%, 0.2379 7.82%, 0.5138 13.27%, 0.631 15.71%, 0.7389 18.21%, 0.8296 20.65%, 0.9046 23.09%, 0.9655 25.59%, 1.0121 28.16%, 1.045 30.79%, 1.0709 34.61%, 1.0773 38.99%, 1.0669 43.87%, 1.0167 57.63%, 0.9997 65.89%, 0.994 76.6%, 1);
    --lg-dur-morph: 800ms;

    /* Toda transição do ds.css passa a seguir a mola, não uma curva estática. */
    --ds-ease: var(--lg-ease-liquid);
    --ds-dur: var(--lg-dur-liquid);

    --lg-z-canvas: 0;
    --lg-z-content: 100;
    --lg-z-float: 110;
    --lg-z-nav: 200;
    --lg-z-overlay: 300;

    --lg-brand-rgb: 10 66 245;
    --lg-brand-light-rgb: 77 124 255;
    --lg-cyan-rgb: 31 162 255;
    --lg-drop: 0 12px 32px -8px rgba(0, 0, 0, 0.15);

    /* Modo escuro (Noite e Dia-no-escuro) */
    --lg-tint: 255 255 255;
    --lg-o-soft: var(--glass-opacity-subtle);
    --lg-o-active: var(--glass-opacity-regular);
    --lg-o-dense: var(--glass-opacity-prominent);
    --lg-brightness: 100%;
    --lg-opaque: rgba(20, 20, 20, var(--glass-opacity-opaque));
    --lg-spec-top: var(--glass-border-specular-light);
    --lg-spec-bottom: rgba(0, 0, 0, 0.12);
    --lg-rim-hi: rgba(255, 255, 255, 0.42);
    --lg-rim-lo: rgba(255, 255, 255, 0.10);
    --lg-well: rgb(255 255 255 / 0.05);
    --lg-field: rgb(0 0 0 / 0.22);
    --lg-field-focus: rgb(0 0 0 / 0.30);
    --lg-orb: 1;
    --lg-grain: 0.05;
    --lg-goo-rgb: 255 255 255;
    --lg-goo-opacity: 0.2;
    --lg-ov-tint: 20 20 20;
}

/* Modo claro — só a variante Dia, e só fora do escuro do sistema. */
body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] {
    --lg-tint: 255 255 255;
    --lg-o-soft: var(--glass-opacity-regular);
    --lg-o-active: var(--glass-opacity-prominent);
    --lg-o-dense: 0.35;
    --lg-brightness: 110%;
    --lg-opaque: rgba(240, 240, 240, var(--glass-opacity-opaque));
    --lg-spec-top: rgba(255, 255, 255, 0.85);
    --lg-rim-hi: rgba(255, 255, 255, 0.95);
    --lg-rim-lo: var(--glass-border-specular-dark);
    --lg-well: rgb(16 26 56 / 0.04);
    --lg-field: rgb(255 255 255 / 0.55);
    --lg-field-focus: rgb(255 255 255 / 0.85);
    --lg-orb: 0.55;
    --lg-grain: 0.035;
    --lg-goo-rgb: 10 66 245;
    --lg-goo-opacity: 0.14;
    --lg-ov-tint: 255 255 255;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-ds-modo="claro"]) body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] {
        --lg-o-soft: var(--glass-opacity-subtle);
        --lg-o-active: var(--glass-opacity-regular);
        --lg-o-dense: var(--glass-opacity-prominent);
        --lg-brightness: 100%;
        --lg-opaque: rgba(20, 20, 20, var(--glass-opacity-opaque));
        --lg-spec-top: var(--glass-border-specular-light);
        --lg-rim-hi: rgba(255, 255, 255, 0.42);
        --lg-rim-lo: rgba(255, 255, 255, 0.10);
        --lg-well: rgb(255 255 255 / 0.05);
        --lg-field: rgb(0 0 0 / 0.22);
        --lg-field-focus: rgb(0 0 0 / 0.30);
        --lg-orb: 1;
        --lg-grain: 0.05;
        --lg-goo-rgb: 255 255 255;
        --lg-goo-opacity: 0.2;
        --lg-ov-tint: 20 20 20;
    }
}

:root[data-ds-modo="escuro"] body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] {
    --lg-o-soft: var(--glass-opacity-subtle);
    --lg-o-active: var(--glass-opacity-regular);
    --lg-o-dense: var(--glass-opacity-prominent);
    --lg-brightness: 100%;
    --lg-opaque: rgba(20, 20, 20, var(--glass-opacity-opaque));
    --lg-spec-top: var(--glass-border-specular-light);
    --lg-rim-hi: rgba(255, 255, 255, 0.42);
    --lg-rim-lo: rgba(255, 255, 255, 0.10);
    --lg-well: rgb(255 255 255 / 0.05);
    --lg-field: rgb(0 0 0 / 0.22);
    --lg-field-focus: rgb(0 0 0 / 0.30);
    --lg-orb: 1;
    --lg-grain: 0.05;
    --lg-goo-rgb: 255 255 255;
    --lg-goo-opacity: 0.2;
    --lg-ov-tint: 20 20 20;
}

/* ==========================================================================
   2. CANVAS BASE — Z0 (luz da marca atrás de tudo; funciona sem JS)
   ========================================================================== */
body[data-ds-theme="es7-liquid"]::before {
    content: '';
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgb(var(--lg-brand-rgb) / calc(0.62 * var(--lg-orb))), transparent),
        radial-gradient(closest-side, rgb(var(--lg-brand-light-rgb) / calc(0.36 * var(--lg-orb))), transparent),
        radial-gradient(closest-side, rgb(var(--lg-cyan-rgb) / calc(0.30 * var(--lg-orb))), transparent),
        radial-gradient(closest-side, rgb(0 45 179 / calc(0.55 * var(--lg-orb))), transparent);
    background-size: 78vmax 78vmax, 62vmax 62vmax, 66vmax 66vmax, 54vmax 54vmax;
    background-position: 88% 14%, 6% 44%, 76% 88%, 30% 70%;
    background-repeat: no-repeat;
    animation: lg-drift 30s var(--lg-ease-morph) infinite alternate;
}

body[data-ds-theme="es7-liquid"]::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--lg-grain);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes lg-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-3vmax, 2.5vmax, 0) scale(1.06); }
}

/* Os campos ficam transparentes: o vidro precisa de luz atrás. */
body[data-ds-theme="es7-liquid"] :is(.ds-field--paper, .ds-field--surface, .ds-hero, .ds-pagehead) { background: transparent; }
body[data-ds-theme="es7-liquid"]:not([data-ds-variant="dia"]) .ds-field--ink { background: transparent; }
:root[data-ds-modo="escuro"] body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] .ds-field--ink { background: transparent; }
@media (prefers-color-scheme: dark) {
    :root:not([data-ds-modo="claro"]) body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] .ds-field--ink { background: transparent; }
}
/* No Dia, campo de tinta continua uma faixa escura — é o que ele promete. */
body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] .ds-field--ink { background: color-mix(in srgb, var(--ds-color-ink) 92%, transparent); }

body[data-ds-theme="es7-liquid"] .ds-pagehead { border-bottom-color: transparent; }

body[data-ds-theme="es7-liquid"] :focus-visible { outline-color: var(--ds-color-brand-text); }

/* ==========================================================================
   3. MOTOR DE MATERIAIS ÓPTICOS
   ========================================================================== */

/* Superfícies de vidro, por camada */
body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
      .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante,
      .ds-suspenso, .ds-footer > .ds-shell) {
    --glass-opacity: var(--lg-o-soft);
    --glass-blur: var(--system-glass-blur);
    --glass-brightness: var(--lg-brightness);
    isolation: isolate;
    background: linear-gradient(180deg,
            rgb(var(--lg-tint) / calc(var(--glass-opacity) * 1.2)) 0%,
            rgb(var(--lg-tint) / calc(var(--glass-opacity) * 0.8)) 100%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    border: var(--glass-border-width) solid transparent;
    background-clip: padding-box;
    border-radius: var(--glass-radius, var(--glass-radius-fallback));
    box-shadow:
        inset 0 1px 1px 0 var(--lg-spec-top),
        inset 0 -1px 1px 0 var(--lg-spec-bottom),
        var(--lg-drop);
}

body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
      .ds-integra__centro, .ds-alerta) {
    position: relative;
    z-index: var(--lg-z-content);
}
body[data-ds-theme="es7-liquid"] .ds-footer > .ds-shell { z-index: var(--lg-z-content); }
body[data-ds-theme="es7-liquid"] .ds-eco__no { z-index: var(--lg-z-content); }
body[data-ds-theme="es7-liquid"] .ds-eco__centro { z-index: calc(var(--lg-z-content) + 1); }
body[data-ds-theme="es7-liquid"] .ds-flutuante { --glass-opacity: var(--lg-o-active); z-index: var(--lg-z-float); }
/* Overlays densos: no escuro a tinta é a cor sólida escura da spec, para o texto claro
   não apagar quando o vidro passa por cima da luz azul (legibilidade universal). */
body[data-ds-theme="es7-liquid"] .ds-suspenso {
    --lg-tint: var(--lg-ov-tint);
    --glass-opacity: var(--lg-o-dense);
    --glass-blur: var(--glass-blur-lg);
    z-index: var(--lg-z-overlay);
    color: var(--ds-color-text);
}

/* Camada sólida fosca pré-renderizada (opacificação automática da 3ª camada) */
body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
      .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante,
      .ds-suspenso, .ds-footer > .ds-shell)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--lg-opaque);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lg-dur-liquid) var(--lg-ease-liquid);
}

/* Borda especular: bisel em gradiente, no máximo 1px */
body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
      .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante,
      .ds-suspenso, .ds-footer > .ds-shell, .ds-header .ds-shell, .ds-btn, .ds-burger,
      .ds-docs li, .ds-badge, .ds-tag, .ds-selos li, .ds-head__eyebrow, .ds-abas__barra)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--glass-border-width);
    background: linear-gradient(160deg, var(--lg-rim-hi) 0%, transparent 34%, transparent 66%, var(--lg-rim-lo) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: var(--lg-rim-opacity, 0.8);
    pointer-events: none;
    transition: opacity var(--lg-dur-liquid) var(--lg-ease-liquid);
}

/* Opacificação: 1) o sólido cobre; 2) só então o blur desliga (tema.js) */
body[data-ds-theme="es7-liquid"] .lg-opaco::before { opacity: 1; }
body[data-ds-theme="es7-liquid"] .lg-solido { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Vidro dentro de vidro não desfoca: veria só o pai e somaria camadas. */
body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
      .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-footer > .ds-shell, .ds-header .ds-shell, .ds-suspenso)
   :is(.ds-btn, .ds-badge, .ds-tag, .ds-docs li, .ds-selos li, .ds-head__eyebrow, .ds-abas__barra, .ds-burger) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Superfícies escuras por natureza: a tela do produto continua tela. */
body[data-ds-theme="es7-liquid"] :is(.ds-painel, .ds-captura) {
    --lg-tint: 8 12 26;
    --glass-opacity: 0.62;
    --lg-rim-hi: rgba(255, 255, 255, 0.32);
    --lg-rim-lo: rgba(255, 255, 255, 0.08);
    --lg-spec-top: rgba(255, 255, 255, 0.22);
    --painel-fundo: transparent;
}

/* Vidro tingido com a marca */
body[data-ds-theme="es7-liquid"] .ds-metrics {
    --lg-tint: var(--lg-brand-rgb);
    --glass-opacity: 0.62;
    --lg-rim-hi: rgba(255, 255, 255, 0.55);
    --lg-rim-lo: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: clamp(1.5rem, 4vw, 2.75rem);
}
body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] .ds-metrics { --glass-opacity: 0.9; --glass-brightness: 100%; }
body[data-ds-theme="es7-liquid"] .ds-metrics .ds-metric__value { color: #fff; }
body[data-ds-theme="es7-liquid"] .ds-metrics .ds-metric__label { color: rgb(255 255 255 / 0.78); }
body[data-ds-theme="es7-liquid"][data-c-metrics-style="band"] .ds-metrics .ds-metric { border-bottom-color: rgb(255 255 255 / 0.28); }
body[data-ds-theme="es7-liquid"][data-c-metrics-style="inline"] .ds-metrics .ds-metric__value { color: #fff; }
body[data-ds-theme="es7-liquid"][data-c-metrics-style="inline"] .ds-metrics .ds-metric__label { color: rgb(255 255 255 / 0.78); }

body[data-ds-theme="es7-liquid"] .ds-integra__centro {
    --lg-tint: var(--lg-brand-rgb);
    --glass-opacity: 0.22;
    border: var(--glass-border-width) solid transparent;
}

body[data-ds-theme="es7-liquid"] .ds-flutuante { box-shadow: inset 3px 0 0 var(--ds-color-signal), inset 0 1px 1px 0 var(--lg-spec-top), var(--lg-drop); color: var(--ds-color-text); }
body[data-ds-theme="es7-liquid"] .ds-flutuante--aviso { box-shadow: inset 3px 0 0 var(--ds-color-brand-text), inset 0 1px 1px 0 var(--lg-spec-top), var(--lg-drop); }

body[data-ds-theme="es7-liquid"] .ds-form { padding: clamp(1.5rem, 3.5vw, 2.5rem); color: var(--ds-color-text); }
body[data-ds-theme="es7-liquid"] .ds-footer > .ds-shell {
    width: min(var(--ds-container), calc(100% - 1.5rem));
    padding-block: clamp(2rem, 5vw, 3.25rem);
}
body[data-ds-theme="es7-liquid"] .ds-footer { padding-block: var(--ds-space-6) var(--ds-space-5); }
body[data-ds-theme="es7-liquid"] .ds-alerta { border: var(--glass-border-width) solid transparent; }

/* Interação: elevação e rim por mola. O 'transform' fica livre para a paralaxe. */
body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote) {
    transition:
        translate var(--lg-dur-liquid) var(--lg-ease-liquid),
        scale var(--lg-dur-liquid) var(--lg-ease-liquid);
}
body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote):hover {
    transform: none;
    translate: 0 -4px;
    --lg-rim-opacity: 1;
    box-shadow:
        inset 0 1px 1px 0 var(--lg-spec-top),
        inset 0 -1px 1px 0 var(--lg-spec-bottom),
        var(--ds-shadow-lifted);
}
body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote):hover::after { opacity: 1; }

/* ==========================================================================
   4. GEOMETRIA SQUIRCLE — raio = min(L, A) × 0,22 (gravado pelo tema.js)
   ========================================================================== */
body[data-ds-theme="es7-liquid"] :is(.ds-tilemark, .ds-tile, .ds-kpi, .ds-grafico, .ds-painel__lista, .ds-input, .ds-aba,
      .ds-seg__aba, .ds-nav__link, .ds-suspenso__link, .ds-banner, .ds-vazio, .ds-paginacao__n,
      .ds-paginacao__passo, .ds-painel__item) {
    border-radius: var(--glass-radius, var(--ds-radius-md));
}

@supports (corner-shape: squircle) {
    body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
          .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante,
          .ds-suspenso, .ds-footer > .ds-shell, .ds-header .ds-shell, .ds-btn, .ds-burger,
          .ds-docs li, .ds-badge, .ds-tag, .ds-selos li, .ds-head__eyebrow, .ds-abas__barra,
          .ds-tilemark, .ds-tile, .ds-kpi, .ds-grafico, .ds-input, .ds-aba, .ds-banner,
          .ds-nav, .lg-plane, .lg-lente),
    body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
          .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante,
          .ds-suspenso, .ds-footer > .ds-shell, .ds-header .ds-shell, .ds-btn, .ds-burger)::before,
    body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
          .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante,
          .ds-suspenso, .ds-footer > .ds-shell, .ds-header .ds-shell, .ds-btn, .ds-burger)::after {
        corner-shape: squircle;
    }
}

/* ==========================================================================
   5. PARALAXE EM 3 PLANOS (spec body[data-ds-theme="es7-liquid"]5) — planos injetados pelo tema.js
   ========================================================================== */
body[data-ds-theme="es7-liquid"] [data-lg-tilt] { transform-origin: 50% 50%; }

body[data-ds-theme="es7-liquid"] .lg-plane {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* Plano 1 — fundo (gradiente / textura), Z −10px */
body[data-ds-theme="es7-liquid"] .lg-plane--fundo {
    z-index: -2;
    background:
        radial-gradient(90% 70% at 0% 0%, rgb(var(--lg-brand-light-rgb) / 0.16), transparent 70%),
        radial-gradient(80% 60% at 100% 100%, rgb(var(--lg-cyan-rgb) / 0.08), transparent 70%);
}

/* Plano 3 — especular (brilho / refração), Z +10px */
body[data-ds-theme="es7-liquid"] .lg-plane--especular { z-index: 2; overflow: hidden; }
body[data-ds-theme="es7-liquid"] .lg-plane__luz {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1;
    margin: -75% 0 0 -75%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05) 45%, transparent 72%);
    opacity: 0;
    transition: opacity var(--lg-dur-liquid) var(--lg-ease-liquid);
}
body[data-ds-theme="es7-liquid"] [data-lg-tilt].lg-inclinando .lg-plane__luz { opacity: 1; }

/* ==========================================================================
   6. CABEÇALHO — barra de vidro flutuante (Z200, Glass Ativo)
   O vidro fica no ::before: assim a barra não vira backdrop root e o menu
   e o submenu, que moram dentro dela, continuam desfocando a página.
   ========================================================================== */
body[data-ds-theme="es7-liquid"] .ds-header {
    z-index: var(--lg-z-nav);
    padding-top: 0.75rem;
    border-bottom: 0;
}

body[data-ds-theme="es7-liquid"] .ds-header .ds-shell {
    --glass-opacity: var(--lg-o-active);
    --glass-blur: var(--system-glass-blur);
    --glass-brightness: var(--lg-brightness);
    isolation: isolate;
    width: min(var(--ds-container), calc(100% - 1.5rem));
    padding-inline: 1.25rem 0.6rem;
    border-radius: var(--glass-radius, 16px);
    box-shadow: var(--lg-drop);
}

body[data-ds-theme="es7-liquid"] .ds-header .ds-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    --glass-opacity: inherit;
    --glass-blur: inherit;
    --glass-brightness: inherit;
    background: linear-gradient(180deg,
            rgb(var(--lg-tint) / calc(var(--glass-opacity) * 1.2)) 0%,
            rgb(var(--lg-tint) / calc(var(--glass-opacity) * 0.8)) 100%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    box-shadow:
        inset 0 1px 1px 0 var(--lg-spec-top),
        inset 0 -1px 1px 0 var(--lg-spec-bottom);
}

/* O estado "grudado" do ds.css vira só cor de texto: o vidro já é o fundo. */
body[data-ds-theme="es7-liquid"][data-ds-header][data-ds-header-ondark] .ds-header.is-stuck {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    color: var(--ds-color-text);
}
body[data-ds-theme="es7-liquid"][data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-btn--outline,
body[data-ds-theme="es7-liquid"][data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-btn--outline:hover {
    border-color: transparent;
    color: inherit;
    background: rgb(var(--lg-tint) / var(--lg-o-active));
}
body[data-ds-theme="es7-liquid"][data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-burger { border-color: transparent; }

body[data-ds-theme="es7-liquid"] .ds-nav__link { transition: opacity var(--lg-dur-liquid) var(--lg-ease-liquid); }

/* Lente do link ativo: duas bordas em molas diferentes (viscosidade) */
body[data-ds-theme="es7-liquid"] .lg-lente {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100px;
    height: 2.4rem;
    margin-top: -1.2rem;
    transform-origin: 0 50%;
    border-radius: var(--glass-radius, 12px);
    background: rgb(var(--lg-tint) / 0.12);
    box-shadow:
        inset 0 1px 1px 0 var(--lg-spec-top),
        inset 0 -1px 1px 0 var(--lg-spec-bottom);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lg-dur-liquid) var(--lg-ease-liquid);
}
body[data-ds-theme="es7-liquid"] .lg-lente.lg-pronta { opacity: 1; }
body[data-ds-theme="es7-liquid"] .lg-lente.lg-pronta.lg-ociosa { opacity: 0; }

@media (min-width: 992px) {
    body[data-ds-theme="es7-liquid"] .ds-nav { position: relative; }
    body[data-ds-theme="es7-liquid"] .ds-nav__link { position: relative; z-index: 1; }
}

body[data-ds-theme="es7-liquid"] .ds-burger {
    position: relative;
    isolation: isolate;
    border: var(--glass-border-width) solid transparent;
    background: rgb(var(--lg-tint) / var(--lg-o-active));
    border-radius: var(--glass-radius, 12px);
    box-shadow: inset 0 1px 1px 0 var(--lg-spec-top), inset 0 -1px 1px 0 var(--lg-spec-bottom);
}

/* Folha do menu no celular: vidro denso (Z300) que emerge do botão */
@media (max-width: 991.98px) {
    body[data-ds-theme="es7-liquid"] .ds-nav {
        --lg-tint: var(--lg-ov-tint);
        --glass-opacity: var(--lg-o-dense);
        --glass-blur: var(--glass-blur-lg);
        --glass-brightness: var(--lg-brightness);
        inset: calc(var(--ds-header-h) + 1.4rem) 0.75rem auto 0.75rem;
        max-height: calc(100dvh - var(--ds-header-h) - 2.5rem);
        padding: 0.5rem 1rem 1rem;
        border-radius: var(--glass-radius, 24px);
        color: var(--ds-color-text);
        background: linear-gradient(180deg,
                rgb(var(--lg-tint) / calc(var(--glass-opacity) * 1.2)) 0%,
                rgb(var(--lg-tint) / calc(var(--glass-opacity) * 0.8)) 100%);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
        border: var(--glass-border-width) solid transparent;
        background-clip: padding-box;
        box-shadow:
            inset 0 1px 1px 0 var(--lg-spec-top),
            inset 0 -1px 1px 0 var(--lg-spec-bottom),
            var(--ds-shadow-lifted);
        transform-origin: 100% 0;
    }
    body[data-ds-theme="es7-liquid"] .ds-nav.is-open {
        animation:
            lg-pop-opacidade var(--lg-dur-liquid) var(--lg-ease-liquid) var(--lg-atraso, 0s) backwards,
            lg-pop-escala var(--lg-dur-morph) var(--lg-ease-morph) var(--lg-atraso, 0s) backwards;
    }
    body[data-ds-theme="es7-liquid"] .ds-nav__link { border-radius: 0; }
    body[data-ds-theme="es7-liquid"] .lg-lente { display: none; }

    /* Submenu dentro da folha: lista simples, sem vidro próprio. */
    body[data-ds-theme="es7-liquid"] .ds-suspenso {
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        border: 0;
        animation: none !important;
    }
    body[data-ds-theme="es7-liquid"] .ds-suspenso::before,
    body[data-ds-theme="es7-liquid"] .ds-suspenso::after { display: none; }
}

body[data-ds-theme="es7-liquid"] .ds-suspenso:not([hidden]) {
    transform-origin: 0 0;
    animation:
        lg-pop-opacidade var(--lg-dur-liquid) var(--lg-ease-liquid) var(--lg-atraso, 0s) backwards,
        lg-pop-escala var(--lg-dur-morph) var(--lg-ease-morph) var(--lg-atraso, 0s) backwards;
}
body[data-ds-theme="es7-liquid"] .ds-suspenso__link:hover { background: rgb(var(--lg-tint) / 0.10); }

@keyframes lg-pop-opacidade { from { opacity: 0; } }
@keyframes lg-pop-escala { from { scale: 0.93; translate: 0 -8px; } }

/* ==========================================================================
   7. BOTÕES, CHIPS E POÇOS
   ========================================================================== */
body[data-ds-theme="es7-liquid"] .ds-btn {
    position: relative;
    isolation: isolate;
    border-radius: var(--glass-radius, var(--ds-btn-radius));
    transition:
        translate var(--lg-dur-liquid) var(--lg-ease-liquid),
        scale var(--lg-dur-liquid) var(--lg-ease-liquid),
        background-color var(--lg-dur-liquid) var(--lg-ease-liquid),
        color var(--lg-dur-liquid) var(--lg-ease-liquid);
}
body[data-ds-theme="es7-liquid"] .ds-btn:hover { transform: none; translate: 0 -2px; }
body[data-ds-theme="es7-liquid"] .ds-btn:active { transform: none; translate: 0 0; scale: 0.97; }
body[data-ds-theme="es7-liquid"] .ds-btn:hover::after { opacity: 1; }

/* Primário: vidro tingido com a marca */
body[data-ds-theme="es7-liquid"] :is(.ds-btn--primary, .ds-btn--onink),
body[data-ds-theme="es7-liquid"][data-c-hero-field] .ds-hero .ds-btn--onink {
    --lg-rim-hi: rgba(255, 255, 255, 0.6);
    --lg-rim-lo: rgba(255, 255, 255, 0.12);
    color: #fff;
    background: linear-gradient(180deg, #2b5cff 0%, var(--ds-color-brand) 55%, #002db3 100%);
    border-color: transparent;
    box-shadow:
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.18),
        0 10px 26px -10px rgb(var(--lg-brand-rgb) / 0.85);
}
body[data-ds-theme="es7-liquid"] :is(.ds-btn--primary, .ds-btn--onink):hover,
body[data-ds-theme="es7-liquid"][data-c-hero-field] .ds-hero .ds-btn--onink:hover {
    color: #fff;
    background: linear-gradient(180deg, #4471ff 0%, #2453ff 55%, var(--ds-color-brand) 100%);
}

/* Secundários: vidro claro */
body[data-ds-theme="es7-liquid"] :is(.ds-btn--outline, .ds-btn--ghost) {
    color: inherit;
    border-color: transparent;
    background: linear-gradient(180deg,
            rgb(var(--lg-tint) / calc(var(--lg-o-active) * 1.2)) 0%,
            rgb(var(--lg-tint) / calc(var(--lg-o-active) * 0.7)) 100%);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--lg-brightness));
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--lg-brightness));
    box-shadow:
        inset 0 1px 1px 0 var(--lg-spec-top),
        inset 0 -1px 1px 0 var(--lg-spec-bottom),
        0 6px 18px -8px rgba(0, 0, 0, 0.3);
}
body[data-ds-theme="es7-liquid"] :is(.ds-btn--outline, .ds-btn--ghost):hover {
    border-color: transparent;
    background: linear-gradient(180deg,
            rgb(var(--lg-tint) / calc(var(--lg-o-active) * 1.6)) 0%,
            rgb(var(--lg-tint) / calc(var(--lg-o-active) * 1.0)) 100%);
}

/* Chips */
body[data-ds-theme="es7-liquid"] :is(.ds-docs li, .ds-badge, .ds-tag, .ds-selos li, .ds-head__eyebrow) {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    color: inherit;
    border: var(--glass-border-width) solid transparent;
    background: rgb(var(--lg-tint) / var(--lg-o-active));
    background-clip: padding-box;
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--lg-brightness));
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--lg-brightness));
    border-radius: var(--glass-radius, 10px);
    box-shadow:
        inset 0 1px 1px 0 var(--lg-spec-top),
        inset 0 -1px 1px 0 var(--lg-spec-bottom);
    --lg-rim-opacity: 0.7;
}
body[data-ds-theme="es7-liquid"] .ds-head__eyebrow {
    color: var(--ds-color-brand-text);
    background: rgb(var(--lg-brand-rgb) / 0.16);
    font-weight: 600;
    letter-spacing: 0.04em;
}
body[data-ds-theme="es7-liquid"][data-c-sectionhead-size="display"] .ds-head__eyebrow { opacity: 1; }
body[data-ds-theme="es7-liquid"][data-c-sectionhead-layout="rail"] .ds-head__eyebrow { border-top: 0; justify-self: start; }
body[data-ds-theme="es7-liquid"] .ds-field--ink .ds-badge { color: inherit; }

/* Poços: superfícies internas, sem blur próprio */
body[data-ds-theme="es7-liquid"] .ds-tilemark {
    background: rgb(var(--lg-brand-rgb) / 0.16);
    color: var(--ds-color-brand-text);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16), inset 0 0 0 1px var(--ds-color-rule);
}
body[data-ds-theme="es7-liquid"] :is(.ds-tile, .ds-kpi, .ds-grafico, .ds-painel__lista) {
    background: var(--lg-well);
    border-color: var(--painel-linha, var(--ds-color-rule));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}

/* Campos */
body[data-ds-theme="es7-liquid"] .ds-input {
    background: var(--lg-field);
    border: 1px solid var(--ds-color-rule);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    transition:
        border-color var(--lg-dur-liquid) var(--lg-ease-liquid),
        box-shadow var(--lg-dur-liquid) var(--lg-ease-liquid),
        background-color var(--lg-dur-liquid) var(--lg-ease-liquid);
}
body[data-ds-theme="es7-liquid"] .ds-input:focus {
    background-color: var(--lg-field-focus);
    border-color: rgb(var(--lg-brand-light-rgb) / 0.8);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 4px rgb(var(--lg-brand-rgb) / 0.25);
}

/* Abas: controle segmentado de vidro */
body[data-ds-theme="es7-liquid"] .ds-abas__barra {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    padding: 0.3rem;
    gap: 0.25rem;
    border: var(--glass-border-width) solid transparent;
    background: rgb(var(--lg-tint) / var(--lg-o-soft));
    background-clip: padding-box;
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--lg-brightness));
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)) brightness(var(--lg-brightness));
    border-radius: var(--glass-radius, 14px);
    box-shadow: inset 0 1px 1px 0 var(--lg-spec-top), inset 0 -1px 1px 0 var(--lg-spec-bottom);
}
body[data-ds-theme="es7-liquid"] .ds-aba {
    border-bottom: 0;
    margin-bottom: 0;
    transition: background-color var(--lg-dur-liquid) var(--lg-ease-liquid), opacity var(--lg-dur-liquid) var(--lg-ease-liquid);
}
body[data-ds-theme="es7-liquid"] .ds-aba[aria-selected="true"] {
    background: color-mix(in srgb, var(--ds-color-brand) 26%, transparent);
    box-shadow: inset 0 1px 1px 0 var(--lg-spec-top);
}
body[data-ds-theme="es7-liquid"] .ds-seg__aba { transition: background-color var(--lg-dur-liquid) var(--lg-ease-liquid), opacity var(--lg-dur-liquid) var(--lg-ease-liquid); }

body[data-ds-theme="es7-liquid"] .ds-list__item:hover { background: rgb(var(--lg-tint) / 0.06); }
body[data-ds-theme="es7-liquid"] .cms-rendered-content th { background: rgb(var(--lg-tint) / 0.06); }

/* Entradas e revelações do ds.css, agora por mola */
body[data-ds-theme="es7-liquid"] .ds-hero [data-enter] { animation-timing-function: var(--lg-ease-morph) !important; }
body[data-ds-theme="es7-liquid"] .ds-painel--anima .ds-grafico__barra { animation-timing-function: var(--lg-ease-morph); }
body[data-ds-theme="es7-liquid"] .ds-fluxo[data-revela].ds-revelado .ds-fluxo__etapa {
    transition: opacity var(--lg-dur-liquid) var(--lg-ease-liquid) var(--d), transform var(--lg-dur-morph) var(--lg-ease-morph) var(--d);
}
body[data-ds-theme="es7-liquid"] .ds-eco[data-revela].ds-revelado .ds-eco__no {
    transition: opacity var(--lg-dur-liquid) var(--lg-ease-liquid) var(--d), transform var(--lg-dur-morph) var(--lg-ease-morph) var(--d);
}

/* ==========================================================================
   8. METABALLS — overlay transitório de fusão (filtro #lg-goo)
   ========================================================================== */
.lg-goo {
    position: fixed;
    inset: 0;
    z-index: 290;
    pointer-events: none;
    filter: url(#lg-goo);
    opacity: var(--lg-goo-opacity, 0.2);
    transition: opacity 430ms;
    transition-timing-function: var(--lg-ease-liquid, ease);
}
.lg-goo.lg-sumindo { opacity: 0; }
.lg-goo__gota {
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(var(--lg-goo-rgb, 255 255 255));
    transform-origin: 50% 50%;
    will-change: transform;
}

/* ==========================================================================
   9. ACESSIBILIDADE (spec body[data-ds-theme="es7-liquid"]6)
   A spec usa (prefers-contrast: high), que não é valor válido e nunca casa;
   o correto é "more". Inclui forced-colors.
   ========================================================================== */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
    body[data-ds-theme="es7-liquid"] {
        --system-glass-opacity: 0.95;
        --system-glass-blur: 0px;
        --system-contrast-ratio: 1.5;
        --lg-o-soft: var(--system-glass-opacity);
        --lg-o-active: var(--system-glass-opacity);
        --lg-o-dense: var(--system-glass-opacity);
        --lg-orb: 0.4;
    }

    body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-form, .ds-integra__centro,
          .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante, .ds-suspenso, .ds-footer > .ds-shell) {
        background: rgba(20, 20, 22, 0.96) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] :is(.ds-card, .ds-quote, .ds-panel, .ds-form, .ds-integra__centro,
          .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante, .ds-suspenso, .ds-footer > .ds-shell) {
        background: rgba(246, 247, 250, 0.97) !important;
        border-color: rgba(0, 0, 0, 0.3) !important;
    }
    body[data-ds-theme="es7-liquid"] .ds-metrics { background: #002db3 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    body[data-ds-theme="es7-liquid"] .ds-header .ds-shell::before {
        background: rgba(20, 20, 22, 0.96);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    }
    body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] .ds-header .ds-shell::before {
        background: rgba(246, 247, 250, 0.97);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    }
    body[data-ds-theme="es7-liquid"] :is(.ds-btn, .ds-docs li, .ds-badge, .ds-tag, .ds-selos li, .ds-head__eyebrow, .ds-abas__barra, .ds-nav) {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* Controles de vidro claro viram sólidos de contraste (tinta branca a 0,95 apagaria o texto). */
    body[data-ds-theme="es7-liquid"] :is(.ds-btn--outline, .ds-btn--ghost, .ds-docs li, .ds-badge, .ds-tag, .ds-selos li, .ds-abas__barra, .ds-burger),
    body[data-ds-theme="es7-liquid"][data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-btn--outline {
        background: rgb(44 47 58) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: #F4F7FF !important;
    }
    body[data-ds-theme="es7-liquid"][data-ds-variant="dia"] :is(.ds-btn--outline, .ds-btn--ghost, .ds-docs li, .ds-badge, .ds-tag, .ds-selos li, .ds-abas__barra, .ds-burger),
    body[data-ds-theme="es7-liquid"][data-ds-variant="dia"][data-ds-header][data-ds-header-ondark] .ds-header.is-stuck .ds-btn--outline {
        background: rgb(232 236 246) !important;
        border-color: rgba(0, 0, 0, 0.3) !important;
        color: #0B1226 !important;
    }
    body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-painel, .ds-captura, .ds-metrics, .ds-form,
          .ds-integra__centro, .ds-alerta, .ds-eco__centro, .ds-eco__no, .ds-flutuante,
          .ds-suspenso, .ds-footer > .ds-shell, .ds-header .ds-shell, .ds-btn, .ds-burger,
          .ds-docs li, .ds-badge, .ds-tag, .ds-selos li, .ds-head__eyebrow, .ds-abas__barra)::after,
    body[data-ds-theme="es7-liquid"] .lg-plane--especular { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-ds-theme="es7-liquid"]::before { animation: none; }
}

/* ==========================================================================
   10. FALLBACKS
   ========================================================================== */
@supports not (transition-timing-function: linear(0, 1)) {
    body[data-ds-theme="es7-liquid"] {
        --lg-ease-liquid: cubic-bezier(0.22, 0.9, 0.32, 1);
        --lg-ease-morph: cubic-bezier(0.34, 1.36, 0.64, 1);
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body[data-ds-theme="es7-liquid"] :is(.ds-card, .ds-quote, .ds-panel, .ds-form, .ds-integra__centro, .ds-alerta, .ds-eco__centro,
          .ds-eco__no, .ds-flutuante, .ds-suspenso, .ds-footer > .ds-shell) { background: var(--lg-opaque); }
    body[data-ds-theme="es7-liquid"] .ds-header .ds-shell::before { background: var(--lg-opaque); }
}