/* ============================================================================
   GIBIVERSO — MEMBROS · DESIGN SYSTEM
   Fonte única de verdade do visual (index / login / cadastro).
   O admin tem folha própria (admin/style.css) e não depende deste arquivo.

   CAMADAS (@layer — precedência de baixo pra cima):
     tokens      variáveis. Valor cru (px, hex) só existe aqui.
     base        reset + elementos nativos
     layout      shell (AppShell) + primitivas (stack / group / grid)
     components  peças nomeadas (card, btn, tile, media, hero, ...)
     utilities   ajuste fino de 1 propriedade — sempre vence componente

   CONVENÇÃO
     .sf-bloco            componente
     .sf-bloco__parte     filho
     .sf-bloco--variante  modificador
     Cada componente expõe suas próprias custom properties (ex.: --card-pad,
     --stack-gap) para ajuste local no HTML — nunca `style=` com valor cru.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ============================================================================
   1 · TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* -- cor: rampa da marca ------------------------------------------------
       fundos = NAVY QUADRINHO; a MARCA e o vermelho #E81112 (primária/bordas/
       glows) + azul #005CD9 como acento secundario (universos). Nomes de token
       --sf-navy-*/--sf-blue-* mantidos p/ nao tocar todos os usos (valores
       remapeados). */
    --sf-navy-900:#0B0C0E;
    --sf-navy-800:#101215;
    --sf-navy-700:#14171B;
    --sf-navy-600:#181B20;
    --sf-navy-500:#1E2228;
    --sf-blue-600:#5C2200;
    --sf-blue-500:#D9530A;
    --sf-blue-400:#FF6A13;
    --sf-blue-300:#FF9A57;
    --sf-blue-200:#FFE0CC;

    /* -- cor: papéis semânticos -------------------------------------------- */
    --bg:var(--sf-navy-900);
    --bg-2:var(--sf-navy-800);
    --surface:var(--sf-navy-600);
    --surface-2:var(--sf-navy-700);
    --surface-3:var(--sf-navy-500);
    --primary:var(--sf-blue-400);
    --primary-dark:var(--sf-blue-500);
    --primary-deeper:var(--sf-blue-600);
    --primary-2:var(--sf-blue-300);
    --primary-ink:#fff;

    --ink:#fff;
    --ink-soft:#E3E6EA;
    --muted:#A6ADB7;
    --faint:#717A86;

    --success:#3DD68C;
    --warn:#F2453D;
    --danger:#E85C5C;

    /* alfa da primária — evita rgba(255,106,19,.xx) espalhado */
    --primary-a04:rgba(255,106,19,.04);
    --primary-a06:rgba(255,106,19,.06);
    --primary-a10:rgba(255,106,19,.10);
    --primary-a14:rgba(255,106,19,.14);
    --primary-a22:rgba(255,106,19,.22);
    --primary-a32:rgba(255,106,19,.32);
    --primary-a50:rgba(255,106,19,.5);

    --border:rgba(255,106,19,.16);
    --border-soft:rgba(255,106,19,.10);
    --border-strong:rgba(255,106,19,.42);
    --hairline:rgba(255,255,255,.05);

    /* -- superfícies compostas --------------------------------------------- */
    --fill-solid:linear-gradient(180deg,rgba(18,18,18,.94),rgba(13,13,13,.94));
    --fill-raised:linear-gradient(180deg,rgba(21,21,21,.94),rgba(12,12,12,.94));
    --fill-glass:linear-gradient(180deg,rgba(18,18,18,.72),rgba(13,13,13,.72));
    --fill-nav:linear-gradient(180deg,var(--sf-navy-800) 0%,var(--sf-navy-900) 100%);
    --rim:linear-gradient(90deg,transparent,rgba(255,154,87,.8),transparent);
    --bg-ambient:
      radial-gradient(circle at 18% 12%, rgba(255,106,19,.16), transparent 46%),
      radial-gradient(circle at 84% 82%, rgba(217,83,10,.12), transparent 48%);

    /* -- espaçamento (base 4) ---------------------------------------------- */
    --sp-0:0;
    --sp-1:4px;
    --sp-2:8px;
    --sp-3:12px;
    --sp-4:16px;
    --sp-5:20px;
    --sp-6:24px;
    --sp-7:32px;
    --sp-8:40px;
    --sp-9:56px;
    --sp-10:72px;

    /* -- tipografia --------------------------------------------------------- */
    --font-sans:'Geist',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-serif:'Instrument Serif',Georgia,serif;
    --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,Consolas,monospace;

    --fs-3xs:10px;
    --fs-2xs:11px;
    --fs-xs:12px;
    --fs-sm:13px;
    --fs-md:14px;
    --fs-lg:15px;
    --fs-xl:17px;
    --fs-2xl:20px;
    --fs-3xl:24px;
    /* displays fluidos */
    --fs-d3:clamp(20px,2.4vw,27px);
    --fs-d2:clamp(23px,3.4vw,34px);
    --fs-d1:clamp(28px,4.6vw,48px);
    --fs-d0:clamp(50px,8vw,84px);

    --lh-tight:1.15;
    --lh-snug:1.35;
    --lh-base:1.55;

    --fw-regular:400;
    --fw-medium:500;
    --fw-semi:600;
    --fw-bold:700;
    --fw-black:800;

    --tracking-tight:-.02em;
    --tracking-wide:.12em;
    --tracking-caps:.16em;

    /* -- raio ---------------------------------------------------------------- */
    --r-xs:8px;
    --r-sm:10px;
    --r-md:12px;
    --r-lg:14px;
    --r-xl:18px;
    --r-2xl:24px;
    --r-pill:999px;

    /* -- elevação ------------------------------------------------------------ */
    --sh-inset:inset 0 1px 0 var(--hairline);
    --sh-1:0 12px 30px -20px rgba(0,0,0,.7);
    --sh-2:0 20px 50px -28px rgba(0,0,0,.75), var(--sh-inset);
    --sh-3:0 24px 60px -30px rgba(0,0,0,.85), var(--sh-inset);
    --sh-4:0 30px 80px -30px rgba(0,0,0,.8);
    --sh-lift:0 30px 70px -28px rgba(0,0,0,.9), 0 0 40px -18px var(--primary-a50);
    --sh-primary:0 8px 24px rgba(255,106,19,.25);
    --sh-primary-lg:0 14px 32px rgba(255,106,19,.42);
    --sh-focus:0 0 0 3px var(--primary-a32);

    /* -- movimento ----------------------------------------------------------- */
    --dur-1:.14s;
    --dur-2:.2s;
    --dur-3:.3s;
    --ease:cubic-bezier(.2,.8,.3,1);
    --ease-out:ease;

    /* -- camadas ------------------------------------------------------------- */
    --z-bg:0;
    --z-content:1;
    --z-sticky:15;
    --z-nav:20;
    --z-tabbar:40;
    --z-overlay:60;
    --z-toast:80;

    /* -- shell (equivalente ao AppShell) ------------------------------------- */
    --shell-nav-w:264px;
    --shell-header-h:68px;
    --shell-tabbar-h:66px;
    --shell-gutter:clamp(16px,3vw,34px);
    --shell-pad-y:clamp(20px,3vw,32px);
    --shell-max:1480px;

    /* -- breakpoint de referência (documental; @media não lê var) ------------
       sm 560px · md 760px · lg 900px · xl 1200px                              */

    /* -- acento secundario: AZUL Gibiverso (universos, tags DC) ------------- */
    --accent-blue:#9FB0C4;
    --accent-blue-deep:#6E8196;
    --accent-blue-soft:rgba(159,176,196,.14);
    --accent-blue-line:rgba(159,176,196,.38);

    color-scheme:dark;
  }
}

/* ============================================================================
   2 · BASE
   ========================================================================== */
@layer base {
  *,*::before,*::after{box-sizing:border-box}

  html{
    min-height:100%;
    /* reserva a barra de rolagem sempre -> sem "pulo" ao trocar de página */
    scrollbar-gutter:stable;
    -webkit-text-size-adjust:100%;
  }

  body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:var(--fs-md);
    line-height:var(--lh-base);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  a{color:inherit;text-decoration:none}
  button{font-family:inherit;font-size:inherit;cursor:pointer}
  img{max-width:100%}
  svg{display:inline-block;vertical-align:middle}
  h1,h2,h3,h4{margin:0;font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);line-height:var(--lh-tight)}
  p{margin:0}

  ::selection{background:var(--primary-a32)}

  /* foco visível padronizado (teclado) — acessibilidade */
  :focus-visible{outline:2px solid var(--primary-2);outline-offset:2px;border-radius:var(--r-xs)}

  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-thumb{background:var(--primary-a22);border-radius:var(--r-pill);border:2px solid var(--bg)}
  *::-webkit-scrollbar-thumb:hover{background:var(--primary-a50)}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  }
}

/* ============================================================================
   3 · LAYOUT — shell + primitivas
   ========================================================================== */
@layer layout {

  /* -- brilho ambiente ao fundo -------------------------------------------- */
  .sf-ambient{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;background:var(--bg-ambient)}

  /* -- AppShell ------------------------------------------------------------ */
  .sf-shell{position:relative;z-index:var(--z-content);display:flex;min-height:100vh}
  .sf-shell__body{flex:1;min-width:0;display:flex;flex-direction:column}

  .sf-main{
    flex:1;
    width:100%;
    max-width:var(--shell-max);
    padding:var(--shell-pad-y) var(--shell-gutter) var(--sp-10);
  }
  .sf-main.is-switching{animation:sfSwap var(--dur-1) var(--ease-out) both}
  @keyframes sfSwap{from{opacity:.55}to{opacity:1}}

  /* -- navbar (desktop) — cola abaixo da topbar full-width ------------------ */
  .sf-nav{
    position:sticky;top:var(--shell-header-h);z-index:var(--z-nav);
    width:var(--shell-nav-w);flex:0 0 var(--shell-nav-w);
    height:calc(100vh - var(--shell-header-h));overflow-y:auto;
    display:flex;flex-direction:column;
    padding:var(--sp-6) var(--sp-4);
    background:var(--fill-nav);
    border-right:1px solid var(--border-soft);
  }

  /* -- header (desktop): barra única full-width — logo | ações -------------- */
  .sf-header{
    position:sticky;top:0;z-index:var(--z-nav);
    display:flex;align-items:center;gap:var(--sp-3);
    height:var(--shell-header-h);
    padding:0 var(--shell-gutter);
    background:rgba(5,5,5,.85);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .sf-header__brand{display:flex;align-items:center;cursor:pointer}
  .sf-header__brand img{height:40px;width:auto}
  .sf-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}

  /* -- topbar mobile + tabbar ---------------------------------------------- */
  .sf-mobilebar{display:none}
  .sf-tabbar{display:none}

  /* -- primitiva: Stack (coluna) ------------------------------------------- */
  .sf-stack{
    display:flex;flex-direction:column;
    gap:var(--stack-gap,var(--sp-5));
    align-items:var(--stack-align,stretch);
    justify-content:var(--stack-justify,flex-start);
  }
  .sf-stack--xs{--stack-gap:var(--sp-2)}
  .sf-stack--sm{--stack-gap:var(--sp-3)}
  .sf-stack--md{--stack-gap:var(--sp-4)}
  .sf-stack--lg{--stack-gap:var(--sp-6)}
  .sf-stack--xl{--stack-gap:var(--sp-7)}

  /* -- primitiva: Group (linha) -------------------------------------------- */
  .sf-group{
    display:flex;flex-direction:row;
    gap:var(--group-gap,var(--sp-3));
    align-items:var(--group-align,center);
    justify-content:var(--group-justify,flex-start);
    flex-wrap:var(--group-wrap,wrap);
  }
  .sf-group--xs{--group-gap:var(--sp-1)}
  .sf-group--sm{--group-gap:var(--sp-2)}
  .sf-group--lg{--group-gap:var(--sp-5)}
  .sf-group--xl{--group-gap:var(--sp-6)}
  .sf-group--between{--group-justify:space-between}
  .sf-group--end{--group-justify:flex-end}
  .sf-group--center{--group-justify:center}
  .sf-group--top{--group-align:flex-start}
  .sf-group--stretch{--group-align:stretch}
  .sf-group--nowrap{--group-wrap:nowrap}

  /* -- primitiva: Grid ------------------------------------------------------
     Uma regra auto-fill substitui os 3 media queries antigos: a coluna mínima
     define quando quebra. `--grid-min` é o único botão a girar.
     auto-FILL (e não auto-fit): mantém as trilhas vazias, então um catálogo
     com 2 itens continua com o card no tamanho normal em vez de esticar.    */
  .sf-grid{
    display:grid;
    gap:var(--grid-gap,var(--sp-5));
    grid-template-columns:repeat(auto-fill,minmax(min(var(--grid-min,260px),100%),1fr));
  }
  .sf-grid--2{--grid-min:380px}
  .sf-grid--3{--grid-min:290px}
  .sf-grid--4{--grid-min:232px}
  .sf-grid--wide{--grid-min:100%}
  /* fit: colapsa trilhas vazias — os cards existentes esticam e preenchem a
     linha inteira em partes iguais (usado nas seções do painel) */
  .sf-grid--fit{grid-template-columns:repeat(auto-fit,minmax(min(var(--grid-min,260px),100%),1fr))}
  /* tiles de número: no celular ficam 2-up em vez de empilhar um a um */
  .sf-grid--tiles{--grid-min:232px}
  @media (max-width:560px){ .sf-grid--tiles{--grid-min:44%} }
  .sf-grid__span{grid-column:1/-1}

  .sf-divider{height:1px;background:var(--border-soft);border:0;margin:var(--sp-2) 0}
  .sf-spacer{flex:1}

  /* -- responsivo do shell -------------------------------------------------- */
  @media (max-width:900px){
    .sf-nav,.sf-header{display:none}

    .sf-mobilebar{
      position:sticky;top:0;z-index:var(--z-sticky);
      display:flex;align-items:center;justify-content:space-between;
      height:60px;padding:0 var(--sp-4);
      background:rgba(5,5,5,.9);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      border-bottom:1px solid var(--border-soft);
    }
    .sf-mobilebar__brand{display:flex;align-items:center}
    .sf-mobilebar__brand img{height:34px;width:auto}

    .sf-main{padding:var(--sp-4) var(--sp-4) calc(var(--shell-tabbar-h) + var(--sp-7))}

    .sf-tabbar{
      position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);
      display:flex;height:var(--shell-tabbar-h);
      padding-bottom:env(safe-area-inset-bottom);
      background:rgba(10,10,10,.94);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-top:1px solid var(--border);
    }
    .sf-tabbar a{
      flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);
      color:var(--faint);font-size:10.5px;font-weight:var(--fw-semi);
      transition:color var(--dur-1) var(--ease-out);
    }
    .sf-tabbar a svg{width:22px;height:22px}
    .sf-tabbar a.is-active{color:var(--primary-2)}
  }
}

/* ============================================================================
   4 · COMPONENTES
   ========================================================================== */
@layer components {

  /* -------------------------------------------------------------------------
     4.1 Superfície — um card, quatro tratamentos.
     --card-pad controla o respiro; variantes só trocam preenchimento/moldura.
     ---------------------------------------------------------------------- */
  .sf-card{
    --card-pad:var(--sp-6);
    position:relative;
    display:block;
    padding:var(--card-pad);
    color:inherit;
    background:var(--fill-solid);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-2);
    transition:border-color var(--dur-2) var(--ease-out),
               transform var(--dur-1) var(--ease-out),
               box-shadow var(--dur-2) var(--ease-out);
  }
  .sf-card--flush{--card-pad:0;overflow:hidden}
  .sf-card--tight{--card-pad:var(--sp-4)}
  .sf-card--roomy{--card-pad:clamp(var(--sp-6),4vw,var(--sp-8))}
  .sf-card--lg{border-radius:var(--r-xl)}

  /* elevado: fundo mais claro + rim LED no topo (destaque de conteúdo) */
  .sf-card--glow{background:var(--fill-raised);border-color:var(--primary-a22);box-shadow:var(--sh-3)}
  /* moldura sem fundo: para cards com arte por baixo (não apaga a imagem) */
  .sf-card--edge{background:none;border-color:var(--primary-a22);box-shadow:var(--sh-3)}
  /* vidro: sobreposições e blocos leves */
  .sf-card--glass{
    background:var(--fill-glass);
    backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
    border-color:rgba(255,106,19,.18);
  }
  .sf-card--glow::before,
  .sf-card--edge::before{
    content:"";position:absolute;left:var(--sp-4);right:var(--sp-4);top:0;height:1px;pointer-events:none;
    background:var(--rim);
  }
  /* card em linha (lista dentro de modal/sheet): ocupa a largura e alinha à esquerda */
  .sf-card--row{width:100%;text-align:left}
  .sf-card.is-selected{border-color:var(--border-strong)}
  .sf-card--link{cursor:pointer}
  .sf-card--link:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--sh-lift)}
  .sf-card--link:active{transform:translateY(-1px)}

  /* -------------------------------------------------------------------------
     4.2 Arte de fundo — imagem real + véu navy regulável (--art-scrim)
     ---------------------------------------------------------------------- */
  .sf-art{
    --art-scrim:.88;
    background-size:cover;background-position:center;
    background-image:
      linear-gradient(180deg,rgba(5,5,5,.35),rgba(5,5,5,var(--art-scrim))),
      var(--art-image,none);
  }
  .sf-art--a{--art-image:url('img/p-a.jpg')}
  .sf-art--b{--art-image:url('img/p-b.jpg')}
  .sf-art--c{--art-image:url('img/p-c.jpg')}
  .sf-art--candles{
    --art-image:url('img/hero-candles.jpg');
    background-image:
      linear-gradient(180deg,rgba(5,5,5,.42),rgba(5,5,5,.93)),
      radial-gradient(120% 100% at 75% 12%, var(--primary-a32), transparent 60%),
      var(--art-image);
  }
  /* hero largo: escurece à esquerda para o texto, abre a arte à direita */
  .sf-art--hero{
    --art-image:url('img/hero-candles.jpg');
    background-position:right center;
    background-image:
      linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.74) 46%,rgba(217,83,10,.14) 100%),
      radial-gradient(130% 150% at 90% 40%, rgba(255,106,19,.42), transparent 55%),
      var(--art-image);
  }
  /* card-banner: arte pronta (imagem já com o texto embutido) ocupa o card todo */
  .sf-card--banner{--card-pad:0;padding:0;overflow:hidden}
  .sf-card--banner>img{display:block;width:100%;height:auto}
  /* card de grade com banner pronto: mostra a imagem INTEIRA, proporcional
     (o card acompanha a altura do banner — sem cortar o texto embutido) */
  .sf-promo--img{--card-pad:0;padding:0;overflow:hidden;position:relative}
  .sf-promo--img>img{display:block;width:100%;height:auto}
  /* CTA sobreposto na arte (canto inferior esquerdo, área livre do banner) */
  .sf-promo-img__cta{position:absolute;left:var(--sp-6);bottom:var(--sp-6);z-index:1}
  .sf-promo-img__cta--right{left:auto;right:var(--sp-6)}

  /* -------------------------------------------------------------------------
     4.3 Botões
     ---------------------------------------------------------------------- */
  .sf-btn{
    --btn-pad-y:11px;--btn-pad-x:18px;
    display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
    padding:var(--btn-pad-y) var(--btn-pad-x);
    border:1px solid transparent;border-radius:var(--r-md);
    font-size:var(--fs-md);font-weight:var(--fw-semi);line-height:1;white-space:nowrap;
    background:none;color:var(--ink);
    transition:transform var(--dur-1) var(--ease-out),
               box-shadow var(--dur-2) var(--ease-out),
               background-color var(--dur-2) var(--ease-out),
               border-color var(--dur-2) var(--ease-out),
               color var(--dur-2) var(--ease-out);
  }
  .sf-btn--sm{--btn-pad-y:9px;--btn-pad-x:14px;font-size:var(--fs-sm)}
  .sf-btn--lg{--btn-pad-y:15px;--btn-pad-x:22px;font-size:var(--fs-lg)}
  .sf-btn--block{width:100%}
  .sf-btn--icon{--btn-pad-x:11px}

  .sf-btn--primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--primary-ink);box-shadow:var(--sh-primary);
  }
  .sf-btn--primary:hover{transform:translateY(-1px);box-shadow:var(--sh-primary-lg)}
  .sf-btn--ghost{border-color:rgba(255,106,19,.25);color:var(--ink-soft)}
  .sf-btn--ghost:hover{border-color:var(--primary);color:var(--primary-2);background:var(--primary-a06)}
  .sf-btn--soft{background:var(--primary-a10);border-color:rgba(255,106,19,.35);color:var(--primary-2)}
  .sf-btn--soft:hover{background:var(--primary-a14);border-color:var(--primary)}
  .sf-btn--danger:hover{color:var(--danger);border-color:rgba(255,138,76,.4)}
  .sf-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}

  /* -------------------------------------------------------------------------
     4.4 Rótulos: eyebrow · chip · pill · badge
     ---------------------------------------------------------------------- */
  .sf-eyebrow{
    font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);
    text-transform:uppercase;color:var(--primary-2);
  }
  /* sobre arte/imagem o eyebrow vira branco esmaecido (mais legível que azul) */
  .sf-eyebrow--onart{color:var(--ink);opacity:.72}
  .sf-badge{
    font-size:var(--fs-3xs);font-weight:var(--fw-bold);letter-spacing:.14em;
    text-transform:uppercase;color:var(--primary-2);
  }
  .sf-chip{
    display:inline-flex;align-items:center;gap:var(--sp-2);
    padding:6px 11px;border-radius:var(--r-pill);
    border:1px solid var(--border);background:var(--primary-a04);
    font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--muted);
  }
  .sf-chip__i{display:inline-flex;color:var(--primary-2)}
  .sf-pill{
    display:inline-flex;align-items:center;gap:7px;
    padding:6px 12px;border-radius:var(--r-pill);
    border:1px solid var(--primary-a32);background:var(--primary-a10);
    font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--primary-2);
  }
  .sf-pill--live{border-color:rgba(255,138,76,.4);background:rgba(255,138,76,.1);color:#ff9b8f}
  .sf-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
  .sf-pill--live .sf-dot{animation:sfPulse 1.6s ease-in-out infinite}

  /* -------------------------------------------------------------------------
     4.5 Cabeçalhos de página e de seção
     ---------------------------------------------------------------------- */
  .sf-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
  .sf-pagehead__title{font-size:var(--fs-d2)}
  .sf-pagehead__sub{margin-top:var(--sp-1);color:var(--muted);font-size:var(--fs-lg)}

  .sf-section{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin:var(--sp-7) 0 var(--sp-4)}
  .sf-section__title{font-size:var(--fs-d3)}
  .sf-section__action{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--primary-2);cursor:pointer}
  .sf-section__action:hover{color:var(--ink)}

  .sf-crumb{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
  .sf-crumb__path{color:var(--muted);font-size:var(--fs-sm)}
  .sf-crumb__path i{font-style:normal;opacity:.45;padding:0 2px}
  @media (max-width:560px){ .sf-crumb__path{display:none} }

  .sf-panelhead{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
  .sf-panelhead__icon{
    width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-sm);
    display:grid;place-items:center;background:var(--primary-a14);color:var(--primary-2);
  }
  .sf-panelhead__title{font-size:var(--fs-xl);font-weight:var(--fw-bold)}

  /* -------------------------------------------------------------------------
     4.6 Hero — bloco de abertura reutilizável (painel, curso, gate, quiz)
     ---------------------------------------------------------------------- */
  .sf-hero{
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
    padding:clamp(var(--sp-6),4vw,46px);
    border-radius:var(--r-xl);overflow:hidden;
  }
  .sf-hero--end{align-items:flex-end}
  .sf-hero--center{flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4)}
  .sf-hero--band{min-height:308px}
  .sf-hero--tall{min-height:clamp(230px,32vw,300px)}
  /* align-items:flex-start impede que pill/chip/botão estiquem na largura toda
     (são inline-flex, mas em coluna o stretch do flex os alargava);
     grupos internos voltam a ocupar a linha inteira.                          */
  .sf-hero__body{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:var(--sp-3);min-width:240px;max-width:700px;
  }
  .sf-hero__body > .sf-group,
  .sf-hero__body > .sf-progress{align-self:stretch}
  .sf-hero__title{font-size:var(--fs-d1)}
  .sf-hero__title--sm{font-size:var(--fs-d2)}
  .sf-hero--center .sf-hero__title{max-width:22ch}
  .sf-hero--center .sf-hero__lead{margin-inline:auto}
  .sf-hero__display{
    font-size:var(--fs-d0);font-weight:var(--fw-black);line-height:.9;
    letter-spacing:-.03em;color:var(--primary-2);text-transform:uppercase;
  }
  .sf-hero__kicker{
    font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink);opacity:.72;
  }
  .sf-hero__lead{color:var(--ink-soft);font-size:var(--fs-lg);line-height:var(--lh-snug);max-width:54ch}
  .sf-hero__icon{
    width:66px;height:66px;flex:0 0 66px;border-radius:var(--r-xl);display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary-a22),var(--primary-a06));
    border:1px solid var(--primary-a32);color:var(--primary-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 30px -8px var(--primary-a50);
  }

  /* horários das lives (blocos de vidro do painel) */
  .sf-slot{padding:13px var(--sp-5);min-width:150px;border-radius:var(--r-lg)}
  .sf-slot__label{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted)}
  .sf-slot__time{font-size:30px;font-weight:var(--fw-black);line-height:1.05;color:var(--primary-2)}
  .sf-slot__host{font-size:var(--fs-xs);color:var(--muted)}
  .sf-slot__host b{color:var(--ink)}

  /* -------------------------------------------------------------------------
     4.7 Tile de número (stats do painel)
     ---------------------------------------------------------------------- */
  .sf-tile{--card-pad:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1)}
  .sf-tile__icon{
    width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;
    background:var(--primary-a14);color:var(--primary-2);margin-bottom:var(--sp-1);
  }
  .sf-tile__icon--warn{background:rgba(228,178,60,.14);color:var(--warn)}
  .sf-tile__value{
    font-size:30px;font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);line-height:1;
    background:linear-gradient(90deg,#fff,var(--sf-blue-200));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .sf-tile__label{font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-medium)}

  /* -------------------------------------------------------------------------
     4.8 Card de mídia (lives, e-books, módulos) — arte em cima, corpo embaixo
     ---------------------------------------------------------------------- */
  .sf-media{--card-pad:0;display:flex;flex-direction:column;overflow:hidden}
  .sf-media__art{
    --media-ratio:16/10;
    position:relative;aspect-ratio:var(--media-ratio);
    display:grid;place-items:center;
    border-bottom:1px solid var(--border-soft);
  }
  .sf-media__art--square{--media-ratio:4/3}
  .sf-media__stamp{
    font-size:clamp(26px,3.4vw,40px);font-weight:var(--fw-black);line-height:1;
    letter-spacing:var(--tracking-tight);text-align:center;text-shadow:0 2px 22px rgba(0,0,0,.55);
  }
  .sf-media__stamp em{font-style:normal;color:var(--primary-2)}
  .sf-media__cover{
    position:absolute;inset:auto var(--sp-5) var(--sp-5) var(--sp-5);
    font-size:clamp(22px,2.6vw,28px);font-weight:var(--fw-black);
    line-height:1.12;letter-spacing:var(--tracking-tight);max-width:15ch;
  }
  .sf-media__badge{position:absolute;top:var(--sp-5);right:var(--sp-5)}
  .sf-media__tag{position:absolute;left:var(--sp-3);bottom:11px}
  .sf-media__icon{position:absolute;top:var(--sp-5);left:var(--sp-5)}
  .sf-media__play{
    width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,106,19,.2);border:1px solid rgba(255,154,87,.45);color:var(--primary-2);
    box-shadow:0 0 18px var(--primary-a50);
    transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease-out);
  }
  .sf-media__play--corner{position:absolute;right:var(--sp-3);bottom:10px}
  .sf-media__play--tile{width:48px;height:48px;border-radius:var(--r-lg);background:var(--primary-a14);border-color:rgba(255,154,87,.28)}
  .sf-card--link:hover .sf-media__play{transform:scale(1.08);box-shadow:0 0 26px var(--primary-a50)}
  .sf-media__lock{
    position:absolute;top:11px;right:11px;width:30px;height:30px;border-radius:9px;
    display:grid;place-items:center;background:rgba(5,5,5,.6);color:var(--ink);
    border:1px solid var(--primary-a22);backdrop-filter:blur(4px);
  }
  .sf-media__body{
    display:flex;flex-direction:column;gap:var(--sp-2);flex:1;
    padding:var(--sp-4) var(--sp-4) var(--sp-5);
    background:var(--fill-solid);
  }
  .sf-media__body--roomy{padding:var(--sp-5) var(--sp-5) var(--sp-6)}
  .sf-media__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
  .sf-media__title--fixed{min-height:2.7em}
  .sf-media__text{font-size:var(--fs-sm);color:var(--muted)}
  .sf-media__meta{display:flex;align-items:center;gap:7px;margin-top:auto;font-size:var(--fs-xs);color:var(--muted)}

  /* -------------------------------------------------------------------------
     4.9 Banner largo (catálogo de treinamentos): info | arte
     ---------------------------------------------------------------------- */
  .sf-banner{--card-pad:0;display:flex;min-height:238px;overflow:hidden}
  .sf-banner__body{
    flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);
    padding:clamp(var(--sp-6),3vw,var(--sp-8));
    background:var(--fill-raised);
  }
  .sf-banner__title{font-size:clamp(21px,2.6vw,28px)}
  .sf-banner__art{
    flex:0 0 44%;position:relative;display:grid;place-items:center;
    padding:var(--sp-7);border-left:1px solid var(--border-soft);
  }
  .sf-banner__stamp{
    font-size:clamp(24px,3.2vw,42px);font-weight:var(--fw-black);text-transform:uppercase;
    color:var(--primary);text-align:center;line-height:.9;letter-spacing:-.025em;opacity:.94;
  }
  .sf-banner__eyebrow{position:absolute;top:22px;right:var(--sp-6);opacity:.7}
  /* arte = capa real do curso (imagem pronta, sem carimbo por cima) */
  .sf-banner__art--img{
    background-size:cover;background-position:center;
    background-image:linear-gradient(90deg,rgba(5,5,5,.45),transparent 45%),var(--art-image,none);
  }
  @media (max-width:760px){
    .sf-banner__art{display:none}
    .sf-banner__body{padding:var(--sp-6)}
  }

  /* -------------------------------------------------------------------------
     4.10 Card-ação com arte (atalhos do painel)
     ---------------------------------------------------------------------- */
  .sf-promo{
    --card-pad:var(--sp-6);--promo-h:190px;
    display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-2);
    min-height:var(--promo-h);overflow:hidden;
  }
  .sf-promo--tall{--promo-h:250px;--card-pad:28px}
  /* reserva o espaço do ícone flutuante — senão ele encosta no título */
  .sf-promo--icon{padding-top:calc(var(--sp-5) + 40px + var(--sp-4))}
  .sf-promo__title{font-size:var(--fs-2xl)}
  .sf-promo--tall .sf-promo__title{font-size:27px}
  .sf-promo__text{color:var(--muted);font-size:var(--fs-md);max-width:44ch}
  .sf-promo__icon{position:absolute;top:var(--sp-5);left:var(--sp-5)}
  .sf-promo__cta{align-self:flex-start;margin-top:var(--sp-2)}

  /* -------------------------------------------------------------------------
     4.11 Progresso · sinal · passos
     ---------------------------------------------------------------------- */
  .sf-progress{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);overflow:hidden}
  .sf-progress__bar{display:block;height:100%;border-radius:var(--r-pill);
    background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 0 12px var(--primary-a50)}

  .sf-signal{display:flex;align-items:flex-end;gap:var(--sp-1);height:32px}
  .sf-signal__bar{width:11px;border-radius:3px;background:rgba(255,255,255,.1);transition:background var(--dur-2) var(--ease-out)}
  .sf-signal__bar:nth-child(1){height:12px}
  .sf-signal__bar:nth-child(2){height:21px}
  .sf-signal__bar:nth-child(3){height:30px}
  .sf-signal__bar.is-on{background:var(--signal-color,var(--primary));box-shadow:0 0 12px -2px var(--signal-color,var(--primary))}
  .sf-signal__range{
    display:block;margin-top:var(--sp-4);
    font-size:var(--fs-3xl);font-weight:var(--fw-black);letter-spacing:-.01em;
    color:var(--signal-color,var(--primary-2));
  }

  .sf-step{display:flex;align-items:flex-start;gap:var(--sp-4)}
  .sf-step__n{
    width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--ink);
    font-weight:var(--fw-black);font-size:var(--fs-sm);box-shadow:0 6px 16px -6px rgba(255,106,19,.7);
  }
  .sf-step__text{color:var(--muted);font-size:var(--fs-lg);padding-top:5px}

  /* -------------------------------------------------------------------------
     4.12 Estado vazio · conteúdo bloqueado · skeleton
     ---------------------------------------------------------------------- */
  .sf-empty{--card-pad:var(--sp-8);display:grid;place-items:center;gap:var(--sp-2);text-align:center}
  .sf-empty__icon{
    width:56px;height:56px;border-radius:var(--r-xl);display:grid;place-items:center;
    background:var(--primary-a10);color:var(--primary);
  }
  .sf-empty__title{font-size:var(--fs-2xl)}
  .sf-empty__text{color:var(--muted);max-width:34ch}

  .sf-locked{--card-pad:var(--sp-6);overflow:hidden;opacity:.62;pointer-events:none;user-select:none}
  .sf-locked__badge{
    position:absolute;top:var(--sp-4);right:var(--sp-4);width:34px;height:34px;border-radius:var(--r-sm);
    display:grid;place-items:center;background:rgba(5,5,5,.5);border:1px solid var(--border);color:var(--muted);
  }
  .sf-locked__body{filter:blur(1.6px);display:flex;flex-direction:column;gap:var(--sp-2)}
  .sf-locked__icon{
    width:48px;height:48px;border-radius:var(--r-lg);display:grid;place-items:center;
    background:var(--primary-a10);color:var(--primary-2);margin-bottom:var(--sp-2);
  }

  .sf-skeleton{
    border-radius:var(--r-xs);
    background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
    background-size:200% 100%;animation:sfSkeleton 1.2s infinite;
  }
  @keyframes sfSkeleton{to{background-position:-200% 0}}

  /* -------------------------------------------------------------------------
     4.13 Navegação (itens da sidebar e do bottom-sheet)
     ---------------------------------------------------------------------- */
  .sf-navgroup{margin-bottom:var(--sp-4)}
  .sf-navgroup__label{
    padding:var(--sp-2) var(--sp-3) 6px;
    font-size:var(--fs-3xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);
    text-transform:uppercase;color:var(--faint);
  }
  .sf-navitem{
    position:relative;display:flex;align-items:center;gap:var(--sp-3);
    padding:11px 13px;border:1px solid transparent;border-radius:11px;
    color:var(--muted);font-size:var(--fs-md);font-weight:var(--fw-medium);cursor:pointer;
    transition:color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);
  }
  .sf-navitem svg{width:19px;height:19px;flex:0 0 19px}
  .sf-navitem:hover{color:var(--ink-soft);background:var(--primary-a06)}
  .sf-navitem.is-active{
    color:var(--ink);font-weight:var(--fw-semi);
    background:linear-gradient(90deg,rgba(255,106,19,.18),var(--primary-a04));
    border-color:var(--primary-a14);
  }
  .sf-navitem.is-active::before{
    content:"";position:absolute;left:calc(var(--sp-4) * -1);top:var(--sp-2);bottom:var(--sp-2);
    width:3px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--primary),var(--primary-2));
  }
  .sf-navitem--highlight{
    background:rgba(255,106,19,.05);border-color:var(--border);
    color:var(--ink-soft);font-weight:var(--fw-semi);margin-bottom:var(--sp-2);
  }
  .sf-navitem--highlight:hover{border-color:var(--border-strong)}
  .sf-navitem--danger:hover{color:var(--danger)}
  .sf-navitem__meta{margin-left:auto;font-size:var(--fs-3xs);color:var(--faint)}

  /* -------------------------------------------------------------------------
     4.14 Avatar · seletor de idioma
     ---------------------------------------------------------------------- */
  .sf-avatar{
    --avatar-size:40px;
    width:var(--avatar-size);height:var(--avatar-size);flex:0 0 var(--avatar-size);
    border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 30% 30%,var(--primary-dark) 0%,var(--primary-deeper) 80%);
    border:1px solid rgba(255,106,19,.4);color:var(--ink);
    font-weight:var(--fw-bold);font-size:var(--fs-md);cursor:pointer;
  }
  .sf-avatar--sm{--avatar-size:34px;font-size:var(--fs-xs)}
  .sf-avatar--lg{--avatar-size:56px;font-size:var(--fs-xl)}

  .sf-langbtn{
    display:flex;align-items:center;gap:7px;
    padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:11px;
    background:rgba(255,106,19,.05);color:var(--muted);font-size:var(--fs-sm);
    transition:border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
  }
  .sf-langbtn:hover{border-color:var(--primary);color:var(--primary-2)}
  /* popover ancorado (seletor de idioma) */
  .sf-popover{
    position:fixed;z-index:var(--z-overlay);min-width:216px;padding:var(--sp-2);
    background:linear-gradient(180deg,var(--surface),var(--surface-2));
    border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-3);
    animation:sfPop var(--dur-2) var(--ease) both;
  }
  @keyframes sfPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .sf-popover__item{
    display:flex;align-items:center;gap:var(--sp-3);width:100%;
    padding:10px 12px;border:0;border-radius:var(--r-sm);
    background:none;color:var(--ink-soft);font-size:var(--fs-md);font-weight:var(--fw-semi);
    cursor:pointer;text-align:left;
    transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
  }
  .sf-popover__item:hover{background:var(--primary-a10);color:var(--ink)}
  .sf-popover__item.is-selected{background:var(--primary-a14);color:var(--primary-2)}
  /* mini-bandeira SVG do idioma (emoji de bandeira não renderiza no Windows) */
  .sf-flag{
    display:inline-flex;width:20px;height:14px;flex:0 0 auto;
    border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12);
  }
  .sf-flag svg{width:100%;height:100%;display:block}
  .sf-flag--lg{width:27px;height:19px;border-radius:4px}

  /* -------------------------------------------------------------------------
     4.15 Formulários
     ---------------------------------------------------------------------- */
  .sf-label{display:block;margin-bottom:7px;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--ink-soft)}
  .sf-label--caps{font-size:var(--fs-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2)}
  .sf-input{
    width:100%;padding:12px 14px;
    background:rgba(5,5,5,.6);border:1px solid rgba(255,106,19,.2);border-radius:11px;
    color:var(--ink);font-size:16px;font-family:inherit;outline:none;
    transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out);
  }
  .sf-input::placeholder{color:var(--faint)}
  .sf-input:focus{border-color:rgba(255,106,19,.65);background:rgba(5,5,5,.9);box-shadow:var(--sh-focus)}
  .sf-input:disabled{opacity:.6;cursor:not-allowed}
  .sf-input--mono{font-family:var(--font-mono);letter-spacing:.04em}
  .sf-input--lg{padding:14px 16px;border-radius:var(--r-md)}
  .sf-input--auto{width:auto}

  .sf-field{position:relative}
  .sf-field__affix{
    position:absolute;right:13px;top:50%;transform:translateY(-50%);
    display:flex;color:var(--faint);background:none;border:0;padding:0;
  }
  .sf-field__affix--btn{right:6px;padding:var(--sp-2) var(--sp-3);color:var(--primary-2)}
  .sf-field--affixed .sf-input{padding-right:46px}

  .sf-prefix{
    display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
    padding:0 14px;border:1px solid var(--border);border-radius:11px;background:var(--bg-2);
    font-size:var(--fs-md);font-weight:var(--fw-semi);color:var(--muted);
  }

  .sf-dropzone{
    display:flex;align-items:center;gap:var(--sp-3);
    padding:var(--sp-4);border:1.5px dashed var(--primary-a22);border-radius:var(--r-md);
    color:var(--muted);font-size:var(--fs-sm);cursor:pointer;
    transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
  }
  .sf-dropzone:hover{border-color:var(--primary);color:var(--ink-soft)}
  .sf-dropzone b{color:var(--primary-2)}
  .sf-dropzone__icon{
    width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-sm);display:grid;place-items:center;
    background:var(--primary-a14);color:var(--primary-2);
  }

  .sf-alert{padding:12px 14px;border-radius:var(--r-sm);font-size:var(--fs-sm)}
  .sf-alert--err{background:rgba(255,138,76,.1);border:1px solid rgba(255,138,76,.35);color:#FFC7C7}
  .sf-alert--ok{background:var(--primary-a10);border:1px solid rgba(255,106,19,.35);color:#FFE0CC}

  /* -------------------------------------------------------------------------
     4.16 Sobreposições: overlay · modal · sheet · toast
     ---------------------------------------------------------------------- */
  .sf-overlay{
    position:fixed;inset:0;z-index:var(--z-overlay);
    display:grid;place-items:center;padding:var(--sp-5);
    background:rgba(8,9,11,.7);backdrop-filter:blur(3px);
    opacity:0;animation:sfFade var(--dur-2) forwards;
  }
  .sf-overlay--bottom{align-items:flex-end;padding:0}
  /* teclado aberto: modal ancora no topo da faixa visível (centralizar jogaria
     metade pra trás do teclado) e o respiro encolhe pra sobrar área útil */
  .kb-open .sf-overlay{place-items:start center;padding:10px 12px}
  @keyframes sfFade{to{opacity:1}}

  .sf-modal{
    width:100%;max-width:520px;overflow-y:auto;overscroll-behavior:contain;
    /* --vvh = altura do viewport VISÍVEL (app.js); com teclado aberto o modal
       encolhe pra caber inteiro acima dele em vez de sumir por baixo */
    max-height:min(88vh, calc(var(--vvh, 100vh) - 20px));
    padding:var(--sp-6);border-radius:var(--r-xl);
    background:linear-gradient(180deg,var(--surface),var(--surface-2));
    border:1px solid var(--border);box-shadow:var(--sh-4);
    animation:sfPop var(--dur-3) var(--ease);
  }
  @keyframes sfPop{from{transform:scale(.96) translateY(8px);opacity:.6}to{transform:none;opacity:1}}
  .sf-modal__head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
  .sf-modal__icon{
    width:42px;height:42px;flex:0 0 42px;border-radius:var(--r-md);display:grid;place-items:center;
    background:var(--primary-a14);color:var(--primary-2);
  }
  /* variante neutra: a cor vem da marca do link (dado), não do tema */
  .sf-modal__icon--brand{background:rgba(255,255,255,.05)}
  .sf-modal__title{font-size:var(--fs-2xl);font-weight:var(--fw-black)}
  .sf-modal__close{margin-left:auto;background:none;border:0;color:var(--muted);font-size:var(--fs-2xl);line-height:1}
  .sf-modal__close:hover{color:var(--ink)}

  /* certificado (modal largo + preview da imagem gerada) */
  .sf-modal--wide{max-width:780px}
  .sf-cert__img{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--border);box-shadow:var(--sh-2)}

  /* boas-vindas (1º acesso ao painel pós-cadastro) */
  .sf-welcome{position:relative}
  .sf-welcome__close{position:absolute;top:var(--sp-4);right:var(--sp-4)}
  .sf-welcome__bar{width:44px;height:4px;border-radius:var(--r-pill);background:var(--primary-2);margin-bottom:var(--sp-4)}
  .sf-welcome__title{font-size:var(--fs-2xl);font-weight:var(--fw-black);margin-bottom:var(--sp-3)}
  .sf-welcome__lead{font-weight:var(--fw-bold);margin-bottom:var(--sp-3)}
  .sf-welcome__text{color:var(--muted);font-size:var(--fs-sm)}
  .sf-welcome__label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--faint);margin-bottom:var(--sp-3)}
  .sf-welcome__hint{text-align:center;color:var(--faint);font-size:var(--fs-xs);margin-top:var(--sp-4)}

  .sf-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-overlay);
    max-height:88vh;overflow-y:auto;
    padding:var(--sp-4) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,var(--surface),var(--bg-2));
    border-top:1px solid var(--border);border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    animation:sfUp var(--dur-3) var(--ease);
  }
  @keyframes sfUp{from{transform:translateY(100%)}to{transform:none}}
  .sf-sheet__handle{width:40px;height:4px;border-radius:var(--r-pill);background:var(--primary-a32);margin:0 auto var(--sp-4)}

  .sf-toast{
    position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:var(--z-toast);
    padding:12px 18px;border-radius:var(--r-md);
    background:linear-gradient(180deg,var(--surface-3),var(--surface-2));
    border:1px solid var(--border);color:var(--ink);
    font-size:var(--fs-md);font-weight:var(--fw-medium);
    box-shadow:0 10px 40px rgba(0,0,0,.6);opacity:0;transition:opacity var(--dur-2) var(--ease-out);
  }
  .sf-toast.is-on{opacity:1}

  /* -------------------------------------------------------------------------
     4.17 Autenticação (login / cadastro)
     ---------------------------------------------------------------------- */
  .sf-authpage{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--sp-6)}
  .sf-auth{position:relative;z-index:var(--z-content);width:100%;max-width:440px}
  .sf-auth__logo{display:flex;justify-content:center;margin:0 auto var(--sp-6)}
  .sf-auth__logo img{width:104px;height:auto}
  .sf-auth__title{
    text-align:center;font-size:30px;font-weight:var(--fw-semi);
    letter-spacing:var(--tracking-tight);line-height:1.1;margin-bottom:6px;
  }
  .sf-auth__title em{font-family:var(--font-serif);font-style:italic;font-weight:var(--fw-regular);color:var(--primary-2)}
  .sf-auth__sub{text-align:center;color:var(--muted);font-size:var(--fs-md);margin-bottom:var(--sp-7)}
  .sf-auth__alt{text-align:center;color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-4)}
  .sf-auth__alt a{color:var(--primary-2);font-weight:var(--fw-semi)}
  .sf-auth__link{display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
  .sf-auth__link:hover{color:var(--primary-2)}
  .sf-auth__foot{
    margin-top:var(--sp-7);text-align:center;
    font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  }

  /* -------------------------------------------------------------------------
     4.18 FX de assinatura Safirion
     ---------------------------------------------------------------------- */
  .sf-led{position:relative}
  .sf-led::before{
    content:'';position:absolute;left:var(--sp-4);right:var(--sp-4);top:0;height:1px;pointer-events:none;
    background:var(--rim);
  }
  .sf-glow{box-shadow:0 0 12px var(--primary-a50)}
  .sf-leddot{
    width:8px;height:8px;border-radius:50%;display:inline-block;
    background:var(--primary);box-shadow:0 0 10px var(--primary);animation:sfPulse 2s ease-in-out infinite;
  }
  @keyframes sfPulse{0%,100%{box-shadow:0 0 8px currentColor;opacity:1}50%{box-shadow:0 0 16px currentColor;opacity:.75}}
  .sf-sheen{position:relative;overflow:hidden}
  .sf-sheen::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);
    transform:translateX(-120%);animation:sfSheen 3.4s ease-in-out infinite;
  }
  @keyframes sfSheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
}

/* ============================================================================
   5 · UTILITÁRIOS — 1 propriedade, sempre vencem o componente
   ========================================================================== */
@layer utilities {
  .sf-muted{color:var(--muted)}
  .sf-faint{color:var(--faint)}
  .sf-accent{color:var(--primary-2)}
  .sf-ink{color:var(--ink)}
  .sf-serif{font-family:var(--font-serif)}
  .sf-mono{font-family:var(--font-mono)}

  .sf-text-xs{font-size:var(--fs-xs)}
  .sf-text-sm{font-size:var(--fs-sm)}
  .sf-text-md{font-size:var(--fs-md)}
  .sf-text-lg{font-size:var(--fs-lg)}

  .sf-clamp-1,.sf-clamp-2,.sf-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .sf-clamp-1{-webkit-line-clamp:1}
  .sf-clamp-2{-webkit-line-clamp:2}
  .sf-clamp-3{-webkit-line-clamp:3}

  .sf-measure{max-width:52ch}
  .sf-maxw-md{max-width:440px}
  .sf-emoji{font-size:var(--fs-3xl);line-height:1}
  .sf-start{align-self:flex-start}
  .sf-push{margin-left:auto}
  .sf-fill{flex:1;min-width:0}
  .sf-relative{position:relative}

  .sf-mt-auto{margin-top:auto}
  .sf-mt-2{margin-top:var(--sp-2)}
  .sf-mt-4{margin-top:var(--sp-4)}
  .sf-mt-6{margin-top:var(--sp-6)}

  /* tamanhos de ícone (usados por CDT.icon(name, cls)) */
  .sf-ico-sm{width:16px;height:16px}
  .sf-ico-md{width:20px;height:20px}
  .sf-ico-lg{width:24px;height:24px}
  .sf-btn svg,.sf-chip svg{width:18px;height:18px}
  .sf-btn .sf-ico-sm,.sf-chip .sf-ico-sm{width:16px;height:16px}
  .sf-btn .sf-ico-md{width:20px;height:20px}

  @media (max-width:560px){ .sf-hide-sm{display:none !important} }
  @media (max-width:900px){ .sf-hide-md{display:none !important} }
}

/* ======================================================================
   AULA — player embutido (Google Drive /preview) + playlist lateral
   Página: assets/pages/aula.js. Extensão da camada components.
   ====================================================================== */
@layer components {
  .sf-lesson{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  @media (max-width:980px){ .sf-lesson{grid-template-columns:1fr} }

  .sf-lesson__title{font-size:var(--fs-d3);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);line-height:var(--lh-tight);margin:var(--sp-2) 0}

  /* a altura vem da proporção real do vídeo (--player-pt), senão o iframe
     do Drive colapsa numa faixa fina ou ganha tarja preta */
  .sf-player{position:relative;width:100%;padding-top:var(--player-pt,56.25%);overflow:hidden;border-radius:var(--r-lg);background:#000;border:1px solid var(--border);box-shadow:var(--sh-2)}
  .sf-player__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
  /* escudo anti-fuga: cobre "abrir no Drive" + menu ⋮ (canto sup. direito),
     sem alcançar a barra de controles na base nem o clique de pausa no centro */
  .sf-player__shield{position:absolute;top:0;right:0;width:clamp(96px,26%,160px);height:54px;z-index:2;cursor:default;background:transparent}

  .sf-done[aria-pressed="true"]{border-color:rgba(40,220,100,.45);background:rgba(40,220,100,.12);color:var(--success)}

  .sf-lessonnav{display:flex;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--hairline)}
  .sf-lessonnav__link{display:grid;gap:2px;max-width:48%;cursor:pointer}
  .sf-lessonnav__link b{color:var(--primary-2);font-weight:var(--fw-semi)}
  .sf-lessonnav__link:hover b{color:var(--ink)}
  .sf-lessonnav__link--next{text-align:right;margin-left:auto}
  .sf-lessonnav__link--done{cursor:default;opacity:.75}
  .sf-lessonnav__link--done b{color:var(--muted)}

  .sf-lesson__aside{position:sticky;top:var(--sp-6);max-height:calc(100dvh - 48px);overflow-y:auto}
  @media (max-width:980px){ .sf-lesson__aside{position:static;max-height:none} }

  .sf-lessonrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-2) var(--ease)}
  .sf-lessonrow:hover{background:var(--primary-a10)}
  .sf-lessonrow.is-current{background:var(--primary-a14);box-shadow:inset 3px 0 0 var(--primary)}
  .sf-lessonrow__badge{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--primary-a06);color:var(--primary-2);font-weight:var(--fw-bold);font-size:var(--fs-xs)}
  .sf-lessonrow__name{font-weight:var(--fw-medium);font-size:var(--fs-md);color:var(--ink-soft)}
  .sf-lessonrow.is-current .sf-lessonrow__name{color:var(--ink)}
  .sf-lessonrow__check{display:none;color:var(--success)}
  .sf-lessonrow.is-watched .sf-lessonrow__badge{background:rgba(40,220,100,.14);border-color:rgba(40,220,100,.4);color:var(--success)}
  .sf-lessonrow.is-watched .sf-lessonrow__check{display:inline-flex}

  /* capa real da aula (frame do vídeo em --thumb) no card do curso:
     véu azul-noite por cima mantém o botão de play legível e o card no clima
     do design system; hover clareia levemente (mesma linguagem dos sf-art) */
  .sf-media__art--thumb{
    background-image:linear-gradient(180deg,rgba(5,5,5,.10),rgba(5,5,5,.52)),var(--thumb);
    background-size:cover;background-position:center;
  }
  .sf-card--link:hover .sf-media__art--thumb{
    background-image:linear-gradient(180deg,rgba(5,5,5,.02),rgba(5,5,5,.40)),var(--thumb);
  }
}

/* ============================================================================
   COMUNIDADE — feed de posts/estratégias (réplica do setor do Clube do Trading)
   ========================================================================== */
@layer components {
  .sf-center{display:flex;justify-content:center}

  /* abas */
  .cm-tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5);border-bottom:1px solid var(--border-soft);padding-bottom:var(--sp-2);flex-wrap:wrap}
  .cm-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;border:1px solid transparent;
    background:transparent;color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-semi);cursor:pointer;
    transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
  .cm-tab:hover{color:var(--ink-soft)}
  .cm-tab.is-on{background:var(--primary-a10);border-color:rgba(255,106,19,.35);color:var(--primary-2)}

  /* feed */
  .cm-feed{display:flex;flex-direction:column;gap:var(--sp-4);max-width:640px;margin-inline:auto}

  .cm-post{--card-pad:var(--sp-5)}
  .cm-post__head{display:flex;align-items:center;gap:var(--sp-3)}
  .cm-post__avatar{cursor:default}
  .cm-post__meta{display:flex;flex-direction:column;min-width:0;flex:1}
  .cm-post__author{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink);line-height:1.2}
  .cm-post__time{display:inline-flex;align-items:center;gap:5px;color:var(--faint);font-size:var(--fs-xs);margin-top:2px}
  .cm-post__time svg{width:13px;height:13px}
  .cm-post__msg{margin-top:var(--sp-3);color:var(--ink-soft);font-size:var(--fs-lg);line-height:var(--lh-snug);white-space:pre-wrap;word-break:break-word}
  .cm-post__media{margin-top:var(--sp-4);border-radius:12px;overflow:hidden;border:1px solid var(--border-soft);background:var(--surface-2)}
  .cm-post__media img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#08090B}
  .cm-post__count{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-sm)}
  .cm-post__count svg{color:#FF4D6D;width:15px;height:15px}

  .cm-post__actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-soft)}
  .cm-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:11px;
    border:1px solid transparent;background:transparent;color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-semi);cursor:pointer;
    transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
  .cm-act:hover{background:var(--primary-a06);color:var(--ink-soft)}
  .cm-act.is-on{color:#FF4D6D}
  .cm-act.is-on svg{color:#FF4D6D}

  .cm-iconbtn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--border-soft);
    background:transparent;color:var(--faint);cursor:pointer;transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
  .cm-iconbtn:hover{color:var(--danger);border-color:rgba(255,138,76,.4)}

  /* status (Meus Posts) */
  .cm-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:var(--fs-3xs);font-weight:var(--fw-bold);
    letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border)}
  .cm-badge--wait{color:#F2453D;border-color:rgba(242,69,61,.4);background:rgba(242,69,61,.10)}
  .cm-badge--ok{color:var(--success);border-color:rgba(40,220,100,.4);background:rgba(40,220,100,.10)}
  .cm-badge--no{color:var(--danger);border-color:rgba(255,138,76,.4);background:rgba(255,138,76,.10)}

  /* comentários */
  .cm-comments{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-soft)}
  .cm-comments__list{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-3)}
  .cm-comment{display:flex;gap:var(--sp-3)}
  .cm-comment__avatar{cursor:default}
  .cm-comment__body{flex:1;min-width:0;background:var(--primary-a04);border:1px solid var(--border-soft);border-radius:12px;padding:9px 12px}
  .cm-comment__author{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-soft)}
  .cm-comment__time{margin-left:7px;font-size:var(--fs-3xs);color:var(--faint)}
  .cm-comment__msg{margin-top:2px;font-size:var(--fs-sm);color:var(--ink-soft);line-height:var(--lh-snug);white-space:pre-wrap;word-break:break-word}
  .cm-commentform{display:flex;gap:var(--sp-2);align-items:center}
  .cm-commentinput{flex:1}

  /* composer (modal Novo Post) */
  .cm-composer{display:flex;flex-direction:column;gap:var(--sp-4)}
  .cm-composer__text{width:100%;resize:vertical;min-height:110px}
  .cm-attach{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:12px;cursor:pointer;
    border:1px dashed var(--border-strong);background:var(--primary-a04);color:var(--primary-2);font-size:var(--fs-sm);font-weight:var(--fw-semi);
    transition:background var(--dur-2) var(--ease-out)}
  .cm-attach:hover{background:var(--primary-a06)}
  .cm-attach-preview{border-radius:12px;overflow:hidden;border:1px solid var(--border-soft)}
  .cm-attach-preview img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;background:#08090B}
  /* rodapé sticky: Publicar/Cancelar nunca somem quando o preview da imagem
     empurra o conteúdo pra baixo do teclado — o modal rola por trás dele */
  .cm-composer__foot{
    justify-content:flex-end;margin-top:var(--sp-1);
    position:sticky;bottom:0;z-index:1;
    padding:10px 0;background:var(--surface-2);
    box-shadow:0 -10px 14px -10px rgba(0,0,0,.55);
  }
  /* teclado aberto: composer compacto pra caber texto+anexo+botões na faixa visível */
  .kb-open .cm-composer{gap:var(--sp-3)}
  .kb-open .cm-composer__text{min-height:84px}
  .kb-open .cm-attach-preview img{max-height:150px}
  .kb-open .cm-attach{padding:9px}

  /* skeleton de carregamento */
  .cm-skel{height:180px;border-radius:14px;border:1px solid var(--border-soft);
    background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);
    background-size:200% 100%;animation:cm-shimmer 1.3s linear infinite}
  @keyframes cm-shimmer{to{background-position:-200% 0}}
}

/* ============================================================================
   ESTRATÉGIAS — biblioteca de indicadores (card + bloco de código no modal)
   ========================================================================== */
@layer components {
  .sf-est-card{display:flex;flex-direction:column}
  .sf-est-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
  .sf-est-card__icon{color:var(--primary-2)}
  .sf-est-card .sf-btn{margin-top:auto;align-self:flex-start}

  .sf-est__howto{border-left:2px solid var(--border-strong);padding-left:var(--sp-3)}

  /* bloco de código: fundo bem escuro, monospace, rola em x e y */
  .sf-code{max-height:340px;overflow:auto;border-radius:12px;border:1px solid var(--border-soft);background:#08090B}
  .sf-code pre{margin:0;padding:14px 16px;font-family:'Geist Mono',ui-monospace,monospace;
    font-size:12px;line-height:1.55;color:#E3E6EA;white-space:pre;tab-size:2}
}

/* seções ricas do "Ver detalhes" das Estratégias */
@layer components {
  .sf-est__sec{margin-top:var(--sp-4)}
  .sf-est__sec .sf-eyebrow{margin-bottom:6px}
  .sf-est__bullets{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
  .sf-est__bullets li{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-snug)}
}

/* ============================================================================
   GIBIVERSO — componentes proprios da plataforma de HQs
   (capa de HQ retrato, leitor de PDF, acentos por universo, faixa de lancamento)
   ========================================================================== */
@layer components {

  /* -- acento por universo: Marvel = vermelho (marca) · DC = azul ----------- */
  .sf-uni--dc{color:var(--accent-blue)}
  .sf-chip--dc,.sf-pill--dc{border-color:var(--accent-blue-line);background:var(--accent-blue-soft);color:var(--accent-blue)}
  .sf-chip--dc .sf-chip__i{color:var(--accent-blue)}

  /* -- cartao de HQ: capa retrato 2/3 (padrao de quadrinho) + corpo curto ---- */
  .sf-hq{--card-pad:0;display:flex;flex-direction:column;overflow:hidden}
  .sf-hq__art{
    position:relative;aspect-ratio:2/3;overflow:hidden;
    background:var(--surface-2) var(--hq-cover,none) center/cover no-repeat;
    border-bottom:1px solid var(--border-soft);
  }
  .sf-hq__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,5,8,.72));opacity:.9}
  .sf-card--link:hover .sf-hq__art{filter:brightness(1.06)}
  .sf-hq__badge{position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:2}
  .sf-hq__fav{
    position:absolute;top:var(--sp-3);right:var(--sp-3);z-index:3;
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    background:rgba(5,5,8,.55);border:1px solid var(--border);color:var(--ink);
    backdrop-filter:blur(4px);cursor:pointer;transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);
  }
  .sf-hq__fav:hover{transform:scale(1.08)}
  .sf-hq__fav.is-on{color:#FF4D6D;border-color:rgba(255,77,109,.5)}
  .sf-hq__read{
    position:absolute;left:var(--sp-3);bottom:var(--sp-3);right:var(--sp-3);z-index:2;
    display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink)
  }
  .sf-hq__cta{
    position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:0;
    transition:opacity var(--dur-2) var(--ease-out)
  }
  .sf-card--link:hover .sf-hq__cta{opacity:1}
  .sf-hq__cta span{
    display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-pill);
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
    font-size:var(--fs-sm);font-weight:var(--fw-bold);box-shadow:var(--sh-primary-lg)
  }
  .sf-hq__body{display:flex;flex-direction:column;gap:4px;padding:var(--sp-4);background:var(--fill-solid);flex:1}
  .sf-hq__title{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:-.01em}
  .sf-hq__sub{font-size:var(--fs-xs);color:var(--faint)}
  .sf-hq__prog{margin-top:auto;padding-top:var(--sp-2)}

  /* grade de HQs: colunas estreitas (capa retrato) */
  .sf-grid--hq{--grid-min:168px;--grid-gap:var(--sp-4)}
  @media (max-width:560px){ .sf-grid--hq{--grid-min:44%} }

  /* -- capa de UNIVERSO (banner alto com arte e logo) ----------------------- */
  .sf-unicard{--card-pad:0;position:relative;min-height:210px;display:flex;align-items:flex-end;overflow:hidden}
  .sf-unicard__art{position:absolute;inset:0;background:var(--uni-art,none) center/cover no-repeat;opacity:.34}
  .sf-unicard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,8,.35),rgba(5,5,8,.9)),radial-gradient(120% 120% at 80% 10%,var(--uni-glow,var(--primary-a32)),transparent 60%)}
  .sf-unicard__body{position:relative;z-index:1;padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
  .sf-unicard__logo{height:44px;width:auto;margin-bottom:var(--sp-2);filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
  .sf-unicard__name{font-size:var(--fs-2xl);font-weight:var(--fw-black);letter-spacing:-.02em}
  .sf-unicard__meta{font-size:var(--fs-xs);color:var(--muted)}
  .sf-unicard--dc{--uni-glow:rgba(159,176,196,.32)}

  /* -- LEITOR de HQ (PDF via Google Drive /preview) — retrato, alto --------- */
  .sf-reader{position:relative;width:100%;height:min(84vh,1180px);overflow:hidden;border-radius:var(--r-lg);background:#000;border:1px solid var(--border);box-shadow:var(--sh-2)}
  .sf-reader__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
  /* escudo anti-fuga: cobre "abrir no Drive" + menu (canto sup. direito) */
  .sf-reader__shield{position:absolute;top:0;right:0;width:clamp(96px,26%,168px);height:52px;z-index:2;background:transparent}
  @media (max-width:560px){ .sf-reader{height:min(78vh,900px)} }
}

/* -------------------------------------------------------------------------
   Atividade ao vivo — card "novo HQ adicionado agora" (live-activity.js)
   ------------------------------------------------------------------------- */
@layer components {
  .gv-live{
    position:fixed; left:20px; bottom:24px; z-index:var(--z-toast);
    display:flex; align-items:center; gap:12px; width:min(340px,calc(100vw - 40px));
    padding:12px 40px 12px 12px; text-decoration:none;
    background:linear-gradient(180deg,var(--surface-3),var(--surface-2));
    border:1px solid var(--border); border-radius:var(--r-lg);
    box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px var(--border-soft) inset;
    color:var(--ink); font-family:var(--font-sans);
    opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
    transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
  }
  .gv-live.is-on{ opacity:1; transform:none; pointer-events:auto; }

  .gv-live__pulse{
    position:absolute; top:12px; left:12px; width:8px; height:8px; border-radius:50%;
    background:#33d17a; box-shadow:0 0 0 0 rgba(51,209,122,.6);
    animation:gvLivePulse 1.8s ease-out infinite;
  }
  @keyframes gvLivePulse{
    0%{ box-shadow:0 0 0 0 rgba(51,209,122,.55) }
    70%{ box-shadow:0 0 0 9px rgba(51,209,122,0) }
    100%{ box-shadow:0 0 0 0 rgba(51,209,122,0) }
  }

  .gv-live__cover{
    flex:0 0 auto; width:44px; height:60px; border-radius:8px; overflow:hidden;
    background:var(--surface); border:1px solid var(--border-soft); display:block;
  }
  .gv-live__cover img{ width:100%; height:100%; object-fit:cover; display:block; }

  .gv-live__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .gv-live__eyebrow{
    font-size:11px; font-weight:var(--fw-semi,600); letter-spacing:.02em;
    color:#33d17a; text-transform:none; padding-left:14px;
  }
  .gv-live__title{
    font-size:var(--fs-md,14px); font-weight:var(--fw-semi,600); color:var(--ink);
    line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .gv-live__meta{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .gv-live__x{
    position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
    display:grid; place-items:center; font-size:12px; color:var(--muted);
    background:transparent; transition:background .2s, color .2s;
  }
  .gv-live__x:hover{ background:var(--primary-a10); color:var(--ink); }

  /* no mobile: sobe acima da bottom-nav e ocupa a largura */
  @media (max-width:900px){
    .gv-live{ left:12px; right:12px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); width:auto; }
  }
  @media (prefers-reduced-motion:reduce){
    .gv-live{ transition:opacity .3s linear; transform:none; }
    .gv-live__pulse{ animation:none; }
  }
}



/* ============================================================================
   SERRALHEIRO RAIZ — camada da marca (grafite + laranja faísca, Barlow Condensed)
   ========================================================================== */
@layer components {
  .sp-brand{display:inline-flex;align-items:center;gap:10px;color:var(--primary);text-decoration:none}
  .sp-brand__mark{width:30px;height:30px;flex:none}
  .sp-brand__word{font-family:'Barlow Condensed',var(--font-sans);font-weight:800;font-size:22px;letter-spacing:.04em;color:var(--ink);line-height:1}
  .sp-brand__word b{color:var(--primary);margin-left:5px;font-weight:800}
  .sf-mobilebar__brand .sp-brand__mark{width:26px;height:26px}
  .sf-mobilebar__brand .sp-brand__word{font-size:19px}

  .sf-hero__title,.sf-unicard__name,.sf-pagehead__title,.sf-lesson__title{
    font-family:'Barlow Condensed',var(--font-sans);font-weight:800;letter-spacing:.005em;text-transform:uppercase}
  .sf-hero__title{font-size:clamp(34px,5.4vw,58px);line-height:.98}
  .sf-unicard__name{font-size:clamp(22px,2.4vw,28px);line-height:1.02}
  .sf-pagehead__title{font-size:clamp(28px,3.6vw,40px);line-height:1}
  .sf-lesson__title{font-size:clamp(24px,3vw,34px);line-height:1.04}

  /* hero: grade de chapa + faísca laranja, sem foto */
  .sf-hero--forge{
    background-color:var(--bg-2);
    background-image:
      radial-gradient(90% 120% at 92% 8%, rgba(255,106,19,.38), transparent 55%),
      radial-gradient(60% 80% at 70% 110%, rgba(255,154,87,.14), transparent 60%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
      linear-gradient(180deg,#14171B,#0B0C0E);
  }
  .sf-hero--forge::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
    background:repeating-linear-gradient(135deg,var(--primary) 0 14px,#0B0C0E 14px 28px);opacity:.9}

  /* cartões: capa 4/3; PDF = folha clara inteira (contain), foto = cover */
  .sf-hq__art{aspect-ratio:4/3}
  .sf-hq__art--doc{background:#E9ECEF var(--hq-cover,none) center top/contain no-repeat}
  .sf-hq__art--doc::after{background:linear-gradient(180deg,transparent 62%,rgba(11,12,14,.55))}
  .sf-hq__art--glyph{display:grid;place-items:center;
    background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),var(--surface-2)}
  .sf-glyph{position:relative;z-index:1;display:grid;place-items:center;min-width:64px;height:64px;padding:0 12px;border-radius:14px;
    border:1.5px solid var(--border-strong);color:var(--primary-2);font-family:'Barlow Condensed',var(--font-sans);font-weight:800;font-size:22px;letter-spacing:.04em}
  .sf-glyph svg{width:30px;height:30px}
  .sf-proj__count{position:absolute;left:var(--sp-3);bottom:var(--sp-3);z-index:2;display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;border-radius:var(--r-pill);background:rgba(11,12,14,.82);border:1px solid var(--border);
    font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--ink)}
  .sf-proj .sf-hq__art{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
  .sf-grid--hq{--grid-min:190px}
  @media (max-width:560px){ .sf-grid--hq{--grid-min:44%} }

  .sf-unicard__art{opacity:.30;filter:grayscale(.35) contrast(1.05)}
  .sf-unicard--banner{min-height:240px}

  .sf-libsearch{margin-bottom:var(--sp-6)}

  /* viewer: PDF local usa o leitor nativo do navegador */
  .sf-reader--local{background:#525659}
  .sf-dlcard{display:flex;gap:var(--sp-6);align-items:center;padding:var(--sp-7)}
  .sf-dlcard__glyph{flex:none;display:grid;place-items:center;width:96px;height:112px;border-radius:14px;
    border:1.5px solid var(--border-strong);background:var(--primary-a10);color:var(--primary-2);
    font-family:'Barlow Condensed',var(--font-sans);font-weight:800;font-size:28px}
  @media (max-width:560px){ .sf-dlcard{flex-direction:column;align-items:flex-start;padding:var(--sp-5)} }

  .sf-pdfopen{display:block;position:relative;overflow:hidden;padding:0}
  .sf-pdfopen__art{aspect-ratio:3/4;border:0}
  .sf-pdfopen__btn{position:absolute;left:50%;bottom:var(--sp-5);transform:translateX(-50%);z-index:3;white-space:nowrap}
}