/* Liquid Glass Design System — instalado por tools/design-systems/install_ds.py
   Fonte: https://gitlab.convertiva.ai/convertiva/liquid-glass-design-system @ 266b5de
   NÃO editar aqui: este arquivo é sobrescrito a cada instalação. */

/* ─── tokens/liquid-glass.tokens.css (do repo do DS) ─── */
/*
  Liquid Glass Design System — Token Layer
  ==========================================
  Every component in this system must derive its values from here.
  Never hardcode a blur, opacity, or color inline in a component file —
  if a value is missing, add a token for it, don't inline it.

  Ranges are documented per-token so Claude Code/Design can make bounded
  adjustments ("make it more subtle") without guessing at safe limits.
*/

:root{

  /* ---------- MATERIAL: how the glass itself behaves ---------- */

  /* Tier 1 — static frosted glass. Universal browser support.
     Use for: content cards, blurbs, text-heavy surfaces. */
  --glass-blur-soft: 16px;              /* range: 8px–24px */
  --glass-saturate-soft: 140%;          /* range: 100%–160% */

  /* Tier 2/3 — refractive glass. Chromium-only, degrades to Tier 1 elsewhere.
     Use for: nav, floating chrome, hero panels, buttons. Max ~5 instances
     visible per viewport — see usage-rules.md for the performance budget. */
  --glass-blur-live: 3px;               /* range: 2px–6px */
  --glass-distort-scale: 18;            /* range: 8–30. Past ~30 reads glitchy. */
  --glass-distort-frequency: 0.011 0.016;  /* feTurbulence baseFrequency — lower = smoother */

  --glass-fill-opacity: 0.09;           /* range: 0.06–0.14 */
  --glass-border-opacity: 0.28;         /* range: 0.18–0.40 */
  --glass-shadow-opacity: 0.35;         /* range: 0.20–0.45 */

  /* ---------- MOTION ---------- */
  --glass-lift-duration: 180ms;         /* range: 120ms–260ms */
  --glass-lift-easing: cubic-bezier(.2,.8,.2,1);
  --glass-highlight-radius: 180px;      /* specular highlight spread, range: 120px–240px */
  --glass-highlight-opacity: 0.4;       /* range: 0.25–0.5 */

  /* ---------- SEMANTIC TINTS ----------
     Tint sits OVER .glass, never replaces it. Each tint opacity must be
     re-checked for 4.5:1 text contrast if pushed toward the top of its range —
     this has NOT been formally audited yet, see usage-rules.md open item. */
  --ok: #34d399;      --ok-tint: rgba(52,211,153,0.16);    /* tint range: 0.10–0.24 */
  --warn: #fbbf24;     --warn-tint: rgba(251,191,36,0.16); /* tint range: 0.10–0.24 */
  --err: #fb7185;      --err-tint: rgba(251,113,133,0.16); /* tint range: 0.10–0.24 */
  --info: #7dd3fc;     --info-tint: rgba(125,211,252,0.16);/* tint range: 0.10–0.24 */

  /* ---------- TYPE (fill in with your brand's actual faces) ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
}

/*
  Reduced-motion / reduced-transparency support is NOT optional per component —
  it lives here once, globally, so no component can ship without it.
*/
@media (prefers-reduced-motion: reduce){
  :root{ --glass-lift-duration: 0ms; }
}
@media (prefers-reduced-transparency: reduce){
  :root{
    --glass-fill-opacity: 0.92;
    --glass-blur-soft: 0px;
    --glass-blur-live: 0px;
  }
}

/*
  Shared SVG filter reference. Every Tier 2/3 component's backdrop-filter
  should point at #liquidDistort, defined once per page:

  <svg width="0" height="0" style="position:absolute">
    <filter id="liquidDistort" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise"
        baseFrequency="var(--glass-distort-frequency)"
        numOctaves="2" seed="9" result="noise"/>
      <feGaussianBlur in="noise" stdDeviation="2" result="softNoise"/>
      <feDisplacementMap in="SourceGraphic" in2="softNoise"
        scale="var(--glass-distort-scale)"
        xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </svg>

  Note: CSS custom properties are NOT read inside SVG attribute values in all
  browsers — if scale/frequency need to be dynamic per-instance, generate the
  <filter> server-side or via JS rather than relying on var() inside the SVG.
*/

.glass{
  background: rgba(255,255,255, var(--glass-fill-opacity));
  -webkit-backdrop-filter: blur(var(--glass-blur-live)) url(#liquidDistort);
  backdrop-filter: blur(var(--glass-blur-live)) url(#liquidDistort);
  border: 1px solid rgba(255,255,255, var(--glass-border-opacity));
  box-shadow:
    0 12px 32px rgba(0,0,0, var(--glass-shadow-opacity)),
    inset 0 1px 1px rgba(255,255,255,0.4);
}
.glass-soft{
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate-soft));
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate-soft));
}
.glass-live{ position:relative; overflow:hidden; }
.glass-live::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(var(--glass-highlight-radius) circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255, var(--glass-highlight-opacity)), transparent 62%);
  opacity:0; transition:opacity .25s ease;
}
.glass-live:hover::before{ opacity:1; }

/* ─── liquid-glass/divi-bridge.css (ponte para o DOM do Divi, deste repo) ─── */
/*
  Liquid Glass ↔ Divi 5 — camada de ponte
  =======================================
  O DS é dono dos valores; esta camada só os coloca no DOM que o Divi gera.
  Regra: **nenhum valor visual novo é inventado aqui**. Tudo é `var()` do
  token layer, ou vem citado do `reference/full-reference.html` com a linha.

  Por que existe: o Divi envolve tudo em `.et_pb_section > .et_pb_row >
  .et_pb_column > .et_pb_*`, com estilos próprios de padding, largura e
  tipografia. Sem esta camada, `.glass` do DS pinta um elemento que o Divi já
  cobriu com o dele.

  ⚠️ LACUNA DO DS, reportar ao repo de origem: `tokens/liquid-glass.tokens.css`
  não tem cor de superfície nem de texto — `--ink`, `--sub` e o fundo da página
  só existem no `:root` do `reference/full-reference.html` (linhas 8–13 e 24–31).
  Enquanto não subirem para o token layer, ficam declarados aqui, com a citação.
*/

:root{
  --lg-ink:  #e8ecf6;                    /* reference/full-reference.html:9  (--ink) */
  --lg-sub:  #a7aec2;                    /* reference/full-reference.html:10 (--sub) */
  --lg-bg:   #0a0c12;                    /* reference/full-reference.html:29 (body background) */
}

/* ── O palco ───────────────────────────────────────────────────────────────
   A seção NUNCA é de vidro: "full-page backgrounds → Never" é a regra mais
   explícita do usage-rules.md (§1). A seção é o fundo que o vidro refrata —
   sem algo atrás, vidro não tem o que distorcer e vira retângulo cinza. */
.et_pb_section.lg-stage{
  background: var(--lg-bg);
  background-image:
    radial-gradient(60% 55% at 18% 12%, rgba(125,211,252,0.22), transparent 70%),
    radial-gradient(55% 50% at 82% 78%, rgba(167,139,250,0.20), transparent 70%);
  padding: 8vh 0;
}
.et_pb_section.lg-stage,
.et_pb_section.lg-stage .et_pb_text,
.et_pb_section.lg-stage h1,
.et_pb_section.lg-stage h2,
.et_pb_section.lg-stage h3{ color: var(--lg-ink); }
.et_pb_section.lg-stage p{ color: var(--lg-sub); }

/* ── A linha é o painel ────────────────────────────────────────────────────
   O vidro mora na row, não na section: é o elemento com tamanho de painel, e
   deixa a section livre para ser o fundo. Também respeita "glass never nests
   inside glass" — só um nível de vidro por bloco. */
.et_pb_row.glass{
  border-radius: 26px;                   /* .hero-panel, reference:232 */
  padding: 44px 40px;                    /* .hero-panel, reference:232 */
  overflow: hidden;                      /* o highlight do .glass-live é inset */
}
.et_pb_row.glass.blurb{
  border-radius: 18px;                   /* .blurb, reference:240 */
  padding: 22px 26px;
}
.et_pb_row.hero-panel{ text-align: center; }
.et_pb_row.hero-panel .et_pb_column{ text-align: center; }

/* ── Campos ────────────────────────────────────────────────────────────────
   O eyebrow do contrato do #296 é o `.kicker` do DS (reference:234). */
.lg-stage .cv-field-eyebrow p{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--info); margin-bottom: 14px;
}
.lg-stage .cv-field-title h1,
.lg-stage .cv-field-title h2{
  font-size: clamp(24px, 3.4vw, 32px);   /* .hero-panel h2, reference:235 */
  font-weight: 650; letter-spacing: -0.02em; margin: 0 0 12px;
}
.lg-stage .cv-field-subtitle p{ font-size: 14.5px; max-width: 460px; }
/* `margin-inline:auto` só faz sentido no painel centralizado. Nos blocos Tier 1,
   que são alinhados à esquerda, ele empurra o parágrafo para o meio e o texto
   nasce desalinhado do próprio título. */
.hero-panel .cv-field-subtitle p{ margin-inline: auto; }

/* ── Botão ─────────────────────────────────────────────────────────────────
   `.et_pb_button` do Divi traz borda, padding e uma seta em `::after`. Aqui a
   seta sai e o resto passa a seguir `.btn` do DS (reference:201–210). */
/*
  ⚠️ ESPECIFICIDADE: o Divi injeta a Global Color do botão inline, no `<head>`,
  com `.et_pb_bg_layout_light.et_pb_module.et_pb_button` — três classes. Uma
  regra de design system com duas classes **perde em silêncio**: o CSS carrega,
  o seletor casa, e a cor simplesmente não é a do DS. Medido aqui: o botão saiu
  amarelo da marca em vez do `--ink` do Liquid Glass.

  Por isso a ponte usa quatro classes. Vale para qualquer DS sobre Divi.
*/
.et_pb_section.lg-stage .et_pb_module.et_pb_button,
.et_pb_section.lg-stage .et_pb_module.et_pb_button:hover{
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  border-radius: 16px; padding: 12px 22px;
  border: 1px solid rgba(255,255,255, var(--glass-border-opacity));
  /* O Divi aplica a Global Color da marca no texto do botão por um seletor mais
     específico que o do DS. Sobre vidro escuro o amarelo perde contraste, então
     aqui o texto volta ao `--ink` do Liquid Glass. */
  color: var(--lg-ink);
  transition: transform var(--glass-lift-duration) var(--glass-lift-easing),
              box-shadow var(--glass-lift-duration) ease;
}
.lg-stage .et_pb_button:after{ display: none; }
.lg-stage .et_pb_button:hover{ transform: translateY(-2px) scale(1.02); }
.lg-stage .et_pb_button:active{ transform: scale(0.97); }

/* ── Degradação ────────────────────────────────────────────────────────────
   O token layer já zera blur em prefers-reduced-transparency. O que falta é o
   fundo do painel deixar de ser translúcido — senão o texto fica sobre o
   gradiente sem contraste, que é pior que sem vidro nenhum. */
/*
  ⚠️ BUG DO DS, encontrado neste teste — reportar ao repo de origem.

  Em `prefers-reduced-transparency`, o token layer sobe `--glass-fill-opacity`
  para 0.92. Mas `.glass` preenche com **branco**: `rgba(255,255,255, …)`. Num
  tema escuro isso vira uma superfície quase branca com texto claro por cima —
  ilegível. O fallback de acessibilidade produz o pior contraste da página,
  exatamente para quem pediu mais legibilidade.

  Verificado ao vivo: com "Reduzir transparência" ligado no macOS, o botão
  renderizou como bloco branco com texto amarelo. Não é hipótese.

  Enquanto o DS não resolver na origem, a opacidade e a cor do fallback são
  redeclaradas aqui para o tema escuro — nunca a transparência, que deve
  continuar desligada.
*/
@media (prefers-reduced-transparency: reduce){
  .et_pb_section.lg-stage .glass,
  .et_pb_section.lg-stage .et_pb_button{
    background: rgba(16,18,26,0.96);
    border-color: rgba(255,255,255,0.22);
  }
}