/* Fred Design kit · gerado por fred-design/scripts/kit.mjs, não editar à mão */
/* ---- rfibonacci/assets/rfibonacci.css ---- */
/* =====================================================================
   rfibonacci.css · proporção áurea para dashboards, decks e mediakits
   φ = 1,618 · espaço em Fibonacci · tipo em passos de √φ a partir de 13
   Colar ANTES da folha da peça. Só define tamanho, posição e tempo:
   cor e família tipográfica continuam vindo do manual da marca.
   Calculadora: node scripts/phi.mjs
   ===================================================================== */

:root {
  /* constantes */
  --phi: 1.618034;
  --phi-inv: 0.618034;      /* 1/φ   */
  --phi-sq: 2.618034;       /* φ²    */
  --phi-root: 1.272020;     /* √φ    */
  --phi-quarter: 1.127838;  /* φ^¼   */

  /* espaço: só Fibonacci */
  --f1: 1px;   --f2: 2px;   --f3: 3px;   --f5: 5px;    --f8: 8px;
  --f13: 13px; --f21: 21px; --f34: 34px; --f55: 55px;  --f89: 89px;
  --f144: 144px; --f233: 233px; --f377: 377px;

  /* espaço responsivo em degraus (sobe nos breakpoints 610 · 987 · 1597, lá embaixo)
     --section é o vão ENTRE seções, aplicado uma vez só (.phi-page). Nunca padding
     em cima e embaixo de cada seção: soma dos dois lados vira faixa vazia. */
  --gutter: var(--f21);
  --section: var(--f55);        /* entre seções: 55 celular · 89 desktop */
  --chapter: var(--f89);        /* virada de assunto (.phi-chapter): 89 celular · 144 desktop */
  --section-inset: var(--f34);  /* padding interno de seção com fundo próprio */
  --block: var(--f34);          /* entre blocos dentro da seção */
  --head-gap: var(--f21);       /* cabeça da seção até o conteúdo */
  --hero-top: var(--f34);       /* menu até o primeiro conteúdo da página: 34 celular · 55 desktop */
  --topbar: 0px;                /* altura da barra FIXA (fora do fluxo); barra sticky já ocupa espaço */

  /* versão fluida opcional (mediakit contínuo): fica ENTRE degraus nas telas
     intermediárias, então o auditor só vale em 390 e em 1597+ */
  --gutter-fluid: clamp(1.3125rem, 0.6558rem + 2.7869vw, 3.4375rem);   /* 21 → 55  */
  --section-fluid: clamp(3.4375rem, 2.7808rem + 2.7869vw, 5.5625rem);  /* 55 → 89  */
  --block-fluid: clamp(2.125rem, 1.7194rem + 1.7213vw, 3.4375rem);     /* 34 → 55  */

  /* tipo: passos de √φ (a cada 2 passos cai num Fibonacci) */
  --t-8: 0.5rem;        /*   8 */
  --t-10: 0.625rem;     /*  10 */
  --t-13: 0.8125rem;    /*  13  rótulo, caixa alta */
  --t-15: 0.9375rem;    /*  15  nota (passo ¼) */
  --t-17: 1.0625rem;    /*  17  corpo de leitura */
  --t-21: 1.3125rem;    /*  21  lead, h4 */
  --t-27: 1.6875rem;    /*  27  h3 */
  --t-34: 2.125rem;     /*  34  número de KPI, h2 compacto */
  --t-43: 2.6875rem;    /*  43 */
  --t-55: 3.4375rem;    /*  55  placar, h2 */
  --t-70: 4.375rem;     /*  70  h2 de apresentação */
  --t-89: 5.5625rem;    /*  89  h1 */
  --t-113: 7.0625rem;   /* 113  h1 de hero */
  --t-144: 9rem;        /* 144  display máximo */

  /* tipo responsivo em degraus: sempre um valor da escala */
  --t-h1: var(--t-55);
  --t-h2: var(--t-34);
  --t-h3: var(--t-21);
  --t-display: var(--t-55);

  /* tipo fluido opcional (mesma ressalva do espaço fluido) */
  --t-h1-fluid: clamp(3.4375rem, 2.3173rem + 4.7541vw, 7.0625rem);     /* 55 → 113 */
  --t-h2-fluid: clamp(2.125rem, 1.4297rem + 2.9508vw, 4.375rem);       /* 34 → 70  */
  --t-h3-fluid: clamp(1.3125rem, 1.0614rem + 1.0656vw, 2.125rem);      /* 21 → 34  */
  --t-display-fluid: clamp(3.4375rem, 1.7186rem + 7.2951vw, 9rem);     /* 55 → 144 */

  /* entrelinha: os próprios passos da escala */
  --lh-prose: 1.618;    /* texto corrido */
  --lh-ui: 1.272;       /* card, tabela, UI densa */
  --lh-title: 1.128;    /* título até 55 px */
  --lh-display: 1;      /* display acima de 55 px */
  --measure: 55ch;

  /* raio (aninhado: interno = externo menos o padding) */
  --r-3: 3px; --r-5: 5px; --r-8: 8px; --r-13: 13px; --r-21: 21px; --r-34: 34px;

  /* tempo em ms de Fibonacci */
  --d-89: 89ms;    /* press, toggle */
  --d-144: 144ms;  /* hover */
  --d-233: 233ms;  /* tooltip, dropdown, troca de estado */
  --d-377: 377ms;  /* card, painel */
  --d-610: 610ms;  /* reveal de seção */
  --d-987: 987ms;  /* entrada de hero, contador */
  --stagger: 55ms;        /* grupo de até 8 itens */
  --stagger-list: 34ms;   /* lista longa (faixa de 30 a 50 ms da ui-ux-pro-max) */

  /* posições (% da caixa) */
  --gold-a: 38.1966%;   /* linha áurea menor (1/φ²) */
  --gold-b: 61.8034%;   /* linha áurea maior (1/φ)  */
  --pole-near: 27.6393%;
  --pole-far: 72.3607%; /* olho da espiral: φ²/(1+φ²) */
}

/* breakpoints de Fibonacci: 377 (base) · 610 · 987 · 1597 */
@media (min-width: 610px) {
  :root { --gutter: var(--f34);
          --t-h1: var(--t-70); --t-h2: var(--t-43); --t-h3: var(--t-27); --t-display: var(--t-89); }
}
@media (min-width: 987px) {
  :root { --section: var(--f89); --chapter: var(--f144); --section-inset: var(--f55); --block: var(--f55); --head-gap: var(--f34); --hero-top: var(--f55);
          --t-h1: var(--t-89); --t-h2: var(--t-55); --t-display: var(--t-113); }
}
@media (min-width: 1597px) {
  :root { --gutter: var(--f55);
          --t-h1: var(--t-113); --t-h2: var(--t-70); --t-h3: var(--t-34); --t-display: var(--t-144); }
}

/* ---------------------------------------------------------------------
   Ritmo vertical: um vão só entre seções
   <main class="phi-page"> <section>…</section> <section class="phi-chapter">…</section> </main>
   --------------------------------------------------------------------- */
.phi-page > * { margin-block: 0; }
.phi-page > * + * { margin-block-start: var(--section); }
.phi-page > .phi-chapter { margin-block-start: var(--chapter); }
.phi-page { padding-block-end: var(--section); }
.phi-page > :where(section, header, footer, div) > :first-child { margin-block-start: 0; }
.phi-page > :where(section, header, footer, div) > :last-child { margin-block-end: 0; }
.phi-inset { padding-block: var(--section-inset); }   /* só seção com fundo próprio */
.phi-head { margin-block-end: var(--head-gap); }

/* ---------------------------------------------------------------------
   Divisões
   --------------------------------------------------------------------- */

/* 61,8 / 38,2 */
.phi-split {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: var(--phi-gap, var(--f34));
}
.phi-split.is-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }

/* 50 / 30,9 / 19,1 */
.phi-trio {
  display: grid;
  grid-template-columns: minmax(0, 2.618fr) minmax(0, 1.618fr) minmax(0, 1fr);
  gap: var(--phi-gap, var(--f34));
}
.phi-trio.is-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr); }

/* coluna dividida na vertical: 38,2 em cima, 61,8 embaixo (ou .is-rev) */
.phi-rows {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: var(--phi-gap, var(--f21));
}
.phi-rows.is-rev { grid-template-rows: minmax(0, 1.618fr) minmax(0, 1fr); }

/* tela de apresentação: cabeça no topo (logo abaixo do menu), corpo ocupa o resto.
   Nunca empurrar a cabeça para o meio da tela: vira sobra em cima (o Fred reprovou). */
.phi-slide {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  padding: calc(var(--topbar) + var(--hero-top)) var(--gutter) var(--f34);
}
.phi-slide > :first-child { padding-bottom: var(--head-gap); }

/* hero: o conteúdo COMEÇA logo abaixo do menu (55 desktop, 34 celular) e a altura vem do
   conteúdo. Nada de centralizar na tela nem linha de 1fr em cima: vira sobra no topo.
   A proporção áurea do hero é na horizontal (texto 61,8 · mídia 38,2) e no olho da mídia. */
.phi-hero {
  display: grid;
  align-content: start;
  padding: calc(var(--topbar) + var(--hero-top)) var(--gutter) var(--section);
}
.phi-hero.is-full { min-height: calc(100svh - var(--topbar)); }   /* só quando a mídia preenche a tela até embaixo */

/* ---------------------------------------------------------------------
   Bento da espiral: retângulo 89 x 55 com 6 blocos
     a = 55²  b = 34²  c = 21²  f = 13²  d = 8²  e = 5 x 8 (o olho)
   --------------------------------------------------------------------- */
.phi-bento {
  display: grid;
  width: 100%;
  align-self: start;                 /* item de grid com aspect-ratio não estica */
  aspect-ratio: 89 / 55;
  grid-template-columns: minmax(0, 55fr) minmax(0, 8fr) minmax(0, 5fr) minmax(0, 21fr);
  grid-template-rows: minmax(0, 34fr) minmax(0, 8fr) minmax(0, 13fr);
  grid-template-areas:
    "a b b b"
    "a d e c"
    "a f f c";
  gap: var(--phi-gap, 0px);           /* gap > 0 tira os blocos do quadrado exato */
}
.phi-bento.is-mirror {
  grid-template-columns: minmax(0, 21fr) minmax(0, 5fr) minmax(0, 8fr) minmax(0, 55fr);
  grid-template-areas:
    "b b b a"
    "c e d a"
    "c f f a";
}
.phi-bento.is-flip {
  grid-template-rows: minmax(0, 13fr) minmax(0, 8fr) minmax(0, 34fr);
  grid-template-areas:
    "a f f c"
    "a d e c"
    "a b b b";
}
.phi-bento.is-mirror.is-flip {
  grid-template-columns: minmax(0, 21fr) minmax(0, 5fr) minmax(0, 8fr) minmax(0, 55fr);
  grid-template-rows: minmax(0, 13fr) minmax(0, 8fr) minmax(0, 34fr);
  grid-template-areas:
    "c f f a"
    "c e d a"
    "b b b a";
}
.phi-bento.is-tall {
  aspect-ratio: 55 / 89;
  grid-template-columns: minmax(0, 34fr) minmax(0, 8fr) minmax(0, 13fr);
  grid-template-rows: minmax(0, 55fr) minmax(0, 8fr) minmax(0, 5fr) minmax(0, 21fr);
  grid-template-areas:
    "a a a"
    "b d f"
    "b e f"
    "b c c";
}
.phi-bento > * { min-width: 0; min-height: 0; overflow: hidden; }
.phi-bento > .a, .phi-bento > [data-phi="a"] { grid-area: a; }
.phi-bento > .b, .phi-bento > [data-phi="b"] { grid-area: b; }
.phi-bento > .c, .phi-bento > [data-phi="c"] { grid-area: c; }
.phi-bento > .d, .phi-bento > [data-phi="d"] { grid-area: d; }
.phi-bento > .e, .phi-bento > [data-phi="e"] { grid-area: e; }
.phi-bento > .f, .phi-bento > [data-phi="f"] { grid-area: f; }

/* ponto de foco absoluto: o pai precisa de position:relative */
.at-pole       { position: absolute; left: var(--pole-far);  top: var(--pole-far);  translate: -50% -50%; }
.at-pole.is-mirror { left: var(--pole-near); }
.at-pole.is-flip   { top: var(--pole-near); }
.at-gold       { position: absolute; left: var(--gold-b); top: var(--gold-a); translate: -50% -50%; }

/* ---------------------------------------------------------------------
   Abaixo de 987 px: a espiral vira pares 1,618 / 1 (21:13 e 8:5 são φ)
   --------------------------------------------------------------------- */
@media (max-width: 986.98px) {
  .phi-split, .phi-split.is-rev,
  .phi-trio, .phi-trio.is-rev { grid-template-columns: minmax(0, 1fr); }

  .phi-bento, .phi-bento.is-mirror, .phi-bento.is-flip,
  .phi-bento.is-mirror.is-flip, .phi-bento.is-tall {
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-template-areas:
      "a a"
      "b b"
      "c f"
      "d e";
    gap: var(--phi-gap-mobile, var(--f13));
  }
  .phi-bento > * { overflow: visible; }
}

/* movimento reduzido (Apple): não zera o feedback, troca deslocamento por fade curto */
@media (prefers-reduced-motion: reduce) {
  :root { --d-377: 233ms; --d-610: 233ms; --d-987: 233ms; --stagger: 0ms; --stagger-list: 0ms; }
}

/* ---- rfibonacci/assets/apple-presets.css ---- */
/* =====================================================================
   apple-presets.css · presets de design da Apple no pacote Fred Design
   Fonte: skill apple-design (WWDC: Designing Fluid Interfaces, UI Typography).
   Colar DEPOIS de rfibonacci.css. Física de mola e gesto: scripts/apple-motion.js
   Regra: tamanho e tempo visual seguem φ; constante física e alvo de toque
   seguem a Apple exatamente (exceção documentada).
   ===================================================================== */

:root {
  /* material (vidro): blur em Fibonacci, saturação e véu em φ */
  --glass-blur: 21px;
  --glass-blur-thick: 34px;                 /* superfície maior lê como material mais grosso */
  --glass-sat: 180%;
  --glass-light: rgb(255 255 255 / 0.618);
  --glass-dark: rgb(12 14 19 / 0.618);
  --glass-edge-light: rgb(255 255 255 / 0.382);  /* borda de cima: luz batendo no material */
  --glass-edge-dark: rgb(255 255 255 / 0.089);

  /* toque */
  --hit-min: 44px;                          /* rfib: exceção, mínimo de toque da Apple */
  --hit-pad: 8px;                           /* área invisível em volta de alvo pequeno */
  --press-scale: 0.97;
  --press-dur: 89ms;                        /* Apple 100 ms; degrau de Fibonacci */

  /* tracking por tamanho: negativo no grande, zero no corpo, positivo no miúdo */
  --track-display: -0.021em;                /* 55 px ou mais */
  --track-title: -0.013em;                  /* 27 a 43 px */
  --track-body: 0em;                        /* 17 a 21 px */
  --track-small: 0.013em;                   /* 15 px ou menos */
  --track-caps: 0.089em;                    /* rótulo em caixa alta */

  /* movimento de entrada (zera no movimento reduzido) */
  --motion-distance: 21px;
}

/* ---------------------------------------------------------------------
   Materiais
   --------------------------------------------------------------------- */
.glass {
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-edge-light);
}
.glass.is-dark {
  background: var(--glass-dark);
  box-shadow: inset 0 1px 0 var(--glass-edge-dark);
}
.glass.is-thick {
  -webkit-backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-sat));
}
/* borda de rolagem: degradê onde o conteúdo encontra a barra, no lugar da linha de 1 px
   (a barra precisa já ser sticky, fixed ou relative) */
.glass.has-edge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: var(--f21, 21px);
  background: linear-gradient(to bottom, var(--glass-dark), transparent);
  pointer-events: none;
}
.glass:not(.is-dark).has-edge::after { background: linear-gradient(to bottom, var(--glass-light), transparent); }
/* texto sobre vidro: um degrau mais pesado e um pouco de tracking (vibrancy) */
.glass :where(p, span, a, button, small) { font-weight: 500; letter-spacing: var(--track-small); }

/* material chega, não só aparece */
@keyframes rfib-materializar {
  from { opacity: 0; transform: scale(var(--press-scale)); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}
.materialize { animation: rfib-materializar var(--d-377, 377ms) cubic-bezier(0.2, 0, 0, 1) both; }

/* ---------------------------------------------------------------------
   Toque e feedback
   --------------------------------------------------------------------- */
/* alvo visual pequeno (chip de 34) com área de toque de 50: position relative + ::before */
.hit { position: relative; }
.hit::before {
  content: "";
  position: absolute;
  inset: calc(var(--hit-pad) * -1);
}
/* feedback no pointer-down (:active), instantâneo */
.press { transition: transform var(--press-dur) ease-out; -webkit-tap-highlight-color: transparent; }
.press:active, .press.is-pressed, .is-pressed > .press { transform: scale(var(--press-scale)); }
/* elemento arrastável recebe transform inline do JS: o scale do press vai numa camada interna */

/* ---------------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------------- */
.track-display { letter-spacing: var(--track-display); }
.track-title { letter-spacing: var(--track-title); }
.track-caps { letter-spacing: var(--track-caps); text-transform: uppercase; }
:where(body) { font-optical-sizing: auto; }

/* ---------------------------------------------------------------------
   Acessibilidade: três sinais independentes
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-distance: 0px; --press-scale: 1; }
  .materialize { animation-name: rfib-fade; }
  @keyframes rfib-fade { from { opacity: 0; } }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass.is-thick { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255); }
  .glass.is-dark { background: rgb(12 14 19); }
}
@media (prefers-contrast: more) {
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255); box-shadow: inset 0 0 0 1px rgb(0 0 0); }
  .glass.is-dark { background: rgb(12 14 19); box-shadow: inset 0 0 0 1px rgb(255 255 255); }
}

/* ---- fred-design/assets/liquid-gas.css ---- */
/* =====================================================================
   liquid-gas.css · botões e cards do Fred Design
   Receita da casa, aprovada na Solid, no Higgsfield x KR3W e no Dando as Cartas:
   3 bolhas pré-borradas dentro do elemento, só transform anima, custo zero parado.
   Botão soma o acabamento liquid glass (21st designali-in portado).
   Ordem: rfibonacci.css → apple-presets.css → liquid-gas.css
   Camadas injetadas por liquid-gas.js (FredDesign.liquid()).
   ===================================================================== */

:root {
  /* cor da marca: trocar pelos valores do manual do cliente */
  --accent: #4286ff;
  --accent-deep: #1d3f86;
  --accent-soft: #a9c8ff;
  --card-bg: rgb(20 24 33);

  --gas-a: color-mix(in srgb, var(--accent) 30%, transparent);
  --gas-b: color-mix(in srgb, var(--accent-deep) 55%, transparent);
  --gas-c: color-mix(in srgb, var(--accent-soft) 16%, transparent);
  --gas-rest: 0.618;          /* opacidade parado */
  --gas-live: 0.854;          /* correndo por estar na tela */
  --gas-blur: 55px;
  --gas-d1: 13s; --gas-d2: 21s; --gas-d3: 8s;
  --lg-radius: var(--r-21, 21px);
  --lg-ring: 2px;
}

/* ---------------------------------------------------------------------
   Base comum: o efeito vai no elemento inteiro, nunca num pedaço dele
   --------------------------------------------------------------------- */
.lg-card, .lg-btn { position: relative; isolation: isolate; }
.lg-card { border-radius: var(--lg-radius); background: var(--card-bg); }

.lg-gas {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;       /* camada arredonda a si mesma (GPU ignora o clip do pai) */
  overflow: hidden;
  pointer-events: none;
  opacity: var(--gas-rest);
  transition: opacity var(--d-610, 610ms) ease;
}
.lg-gas i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(var(--gas-blur));  /* estático: nunca animar filter */
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;   /* longhands: o shorthand zeraria o paused */
}
.lg-gas i:nth-child(1) { width: 61.8%; height: 76.4%; left: -14.6%; top: -23.6%; background: var(--gas-a); animation-name: lg-gas-a; animation-duration: var(--gas-d1); }
.lg-gas i:nth-child(2) { width: 50%; height: 85.4%; right: -14.6%; top: 9%; background: var(--gas-b); animation-name: lg-gas-b; animation-duration: var(--gas-d2); }
.lg-gas i:nth-child(3) { width: 38.2%; height: 61.8%; left: 23.6%; bottom: -23.6%; background: var(--gas-c); animation-name: lg-gas-c; animation-duration: var(--gas-d3); }

@keyframes lg-gas-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(38.2%, 23.6%, 0) scale(1.236); } }
@keyframes lg-gas-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-38.2%, -23.6%, 0) scale(1.146); } }
@keyframes lg-gas-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(23.6%, -38.2%, 0) scale(1.382); } }

/* estados: hover no desktop, foco no teclado, "na tela" no toque e no .lg-live */
@media (hover: hover) and (pointer: fine) {
  .lg-card:hover > .lg-gas, .lg-btn:hover > .lg-gas { opacity: 1; }
  .lg-card:hover > .lg-gas i, .lg-btn:hover > .lg-gas i { animation-play-state: running; }
}
.lg-card:focus-within > .lg-gas, .lg-btn:focus-visible > .lg-gas { opacity: 1; }
.lg-card:focus-within > .lg-gas i, .lg-btn:focus-visible > .lg-gas i { animation-play-state: running; }
@media (hover: none) {
  .lg-card.is-on > .lg-gas i, .lg-btn.is-on > .lg-gas i { animation-play-state: running; }
}
.lg-live.is-on > .lg-gas { opacity: var(--gas-live); }
.lg-live.is-on > .lg-gas i { animation-play-state: running; }
.lg-paused .lg-gas i { animation-play-state: paused !important; }  /* aba oculta */

/* ---------------------------------------------------------------------
   Variante anel: só o contorno animado. Padrão no tema claro e em card
   com vídeo cobrindo o fundo (o Fred reprovou gás no miolo de card claro)
   --------------------------------------------------------------------- */
.lg-card.lg-ring,
:root[data-theme="light"] .lg-card:not(.lg-fill) {
  background: transparent;
  border-color: transparent;
}
.lg-card.lg-ring > .lg-gas,
:root[data-theme="light"] .lg-card:not(.lg-fill) > .lg-gas {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  --gas-a: color-mix(in srgb, var(--accent) 90%, transparent);
  --gas-b: color-mix(in srgb, var(--accent-deep) 70%, transparent);
  --gas-c: color-mix(in srgb, var(--accent-soft) 100%, transparent);
}
.lg-card.lg-ring.is-on > .lg-gas i,
:root[data-theme="light"] .lg-card.is-on:not(.lg-fill) > .lg-gas i { animation-play-state: running; }
.lg-card.lg-ring::before,
:root[data-theme="light"] .lg-card:not(.lg-fill)::before {
  content: "";
  position: absolute;
  inset: var(--lg-ring);
  z-index: -1;
  border-radius: calc(var(--lg-radius) - var(--lg-ring));
  background: var(--card-bg);
  pointer-events: none;
}
.lg-card.lg-ring.has-media::before { background: transparent; }  /* vídeo do card fica no miolo */

/* ---------------------------------------------------------------------
   Botão: liquid gas por dentro + liquid glass por fora
   --------------------------------------------------------------------- */
.lg-btn {
  --gas-blur: 13px;
  --gas-d1: 5s; --gas-d2: 8s; --gas-d3: 3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f8, 8px);
  min-height: var(--f55, 55px);
  padding: 0 var(--f34, 34px);
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.21);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-17, 17px);
  font-weight: 600;
  line-height: var(--lh-ui, 1.272);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-233, 233ms) cubic-bezier(0.2, 0, 0, 1);
}
.lg-btn.is-small {
  min-height: var(--f34, 34px);
  padding: 0 var(--f13, 13px);
  font-size: var(--t-13, 13px);
  font-weight: 500;
}
.lg-btn.is-small::before {        /* área de toque de 50 px (Apple, mínimo 44) */
  content: "";
  position: absolute;
  inset: calc(var(--hit-pad, 8px) * -1);
}
.lg-btn > .lg-glass {
  position: absolute;
  inset: 0;
  z-index: -3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: rgb(244 247 252 / 0.07);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: url(#fd-lqglass);
}
.lg-btn > .lg-shine {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow var(--d-377, 377ms) ease;
  box-shadow: 0 0 8px rgb(0 0 0 / .03), 0 2px 6px rgb(0 0 0 / .08),
    inset 3px 3px .5px -3.5px rgb(255 255 255 / .09), inset -3px -3px .5px -3.5px rgb(255 255 255 / .85),
    inset 1px 1px 1px -.5px rgb(255 255 255 / .6), inset -1px -1px 1px -.5px rgb(255 255 255 / .6),
    inset 0 0 6px 6px rgb(255 255 255 / .12), inset 0 0 2px 2px rgb(255 255 255 / .06), 0 0 12px rgb(0 0 0 / .15);
}
.lg-btn.is-primary { border-color: transparent; color: #fff; }
.lg-btn.is-primary > .lg-glass {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, transparent), color-mix(in srgb, var(--accent-deep) 82%, transparent));
}
.lg-btn.is-primary {
  --gas-a: rgb(255 255 255 / .34);
  --gas-b: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  --gas-c: rgb(255 255 255 / .21);
}
.lg-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .lg-btn:hover { transform: scale(1.04); }
  .lg-btn:hover > .lg-shine {
    box-shadow: 0 0 10px rgb(0 0 0 / .04), 0 4px 10px rgb(0 0 0 / .1),
      inset 3px 3px .5px -3.5px rgb(255 255 255 / .12), inset -3px -3px .5px -3.5px rgb(255 255 255 / .95),
      inset 1px 1px 1px -.5px rgb(255 255 255 / .7), inset -1px -1px 1px -.5px rgb(255 255 255 / .7),
      inset 0 0 8px 8px rgb(255 255 255 / .16), inset 0 0 2px 2px rgb(255 255 255 / .08), 0 0 16px rgb(0 0 0 / .15);
  }
}
.lg-btn:active { transform: scale(var(--press-scale, 0.97)); transition-duration: var(--press-dur, 89ms); }

/* tema claro: pilha de brilho vira sombra escura, primário mais fundo pro branco passar de 4,5:1 */
:root[data-theme="light"] .lg-btn { border-color: rgb(0 0 0 / .13); }
:root[data-theme="light"] .lg-btn > .lg-glass { background: rgb(255 255 255 / .38); }
:root[data-theme="light"] .lg-btn > .lg-shine {
  box-shadow: 0 0 6px rgb(0 0 0 / .03), 0 2px 6px rgb(0 0 0 / .08),
    inset 3px 3px .5px -3px rgb(0 0 0 / .35), inset -3px -3px .5px -3px rgb(0 0 0 / .3),
    inset 1px 1px 1px -.5px rgb(0 0 0 / .22), inset -1px -1px 1px -.5px rgb(0 0 0 / .22),
    inset 0 0 6px 6px rgb(0 0 0 / .05), inset 0 0 2px 2px rgb(0 0 0 / .03), 0 0 12px rgb(255 255 255 / .4);
}
:root[data-theme="light"] .lg-btn.is-primary > .lg-glass {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 70%, var(--accent)), var(--accent-deep));
}

/* ---------------------------------------------------------------------
   Acessibilidade
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lg-gas i { animation: none !important; }
  .lg-btn, .lg-btn:hover, .lg-btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .lg-btn > .lg-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-bg); }
  .lg-btn.is-primary > .lg-glass { background: var(--accent-deep); }
}

/* ---- fred-design/assets/brand-cinema.css ---- */
/* A light, recurring gesture; playback stops outside the viewport. */
[data-pictogram]{animation:fd-pictogram 4.2s ease-in-out infinite;animation-delay:var(--icon-delay,0s);animation-play-state:paused;transform-origin:50% 60%;}
[data-pictogram].fd-icon-visible{animation-play-state:running}
.paused [data-pictogram],html[data-hidden] [data-pictogram]{animation-play-state:paused!important}
@keyframes fd-pictogram{0%,55%,100%{transform:translateY(0) rotate(0)}65%{transform:translateY(-2px) rotate(-5deg)}78%{transform:translateY(0) rotate(3deg)}90%{transform:translateY(-1px) rotate(0)}}
[data-cinema]{position:relative;isolation:isolate;overflow:hidden;background:#160f1d;}
.fd-cinema-media,.fd-cinema-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.fd-cinema-media{width:100%;height:100%;object-fit:cover;}
.fd-cinema-shade{background:linear-gradient(90deg,rgba(22,15,29,.96) 0%,rgba(22,15,29,.88) 38%,rgba(22,15,29,.15) 75%),linear-gradient(0deg,#160f1d 0%,transparent 24%,transparent 80%,#160f1d 100%);}
.fd-cinema-copy{position:relative;max-width:38rem;}
@media(max-width:700px){.fd-cinema-shade{background:linear-gradient(0deg,rgba(22,15,29,.98),rgba(22,15,29,.8) 65%,rgba(22,15,29,.25))}}
@media(prefers-reduced-motion:reduce){[data-pictogram]{animation:none!important}}

/* ---- fred-design/assets/text-ink.css ---- */
/* Opt-in digit reel. Keep glyph advance intact inside its clipping window.
   1/16em is optical bleed, intentionally proportional to the font size. */
[data-text-ink].fd-digit-clip{display:block;position:relative;flex:0 0 auto;overflow:hidden;font:inherit;letter-spacing:normal;padding-inline:.0625em;margin-inline:-.0625em}
[data-text-ink].fd-digit-clip>span{display:block;font:inherit;letter-spacing:normal}