/* =============================================================================
   WeAgency Club :: assets/css/app.css
   INTERIOR do Club (tudo em /app/). Pele de COMUNIDADE, nao de relatorio.

   Autoria: Felix (frontend) com Iris (design system), reescrita 2026-08-05.
   Motivo da reescrita: a Laise rejeitou a versao anterior ("ta parecendo um
   relatorio e nao uma comunidade"). A versao anterior era escura, com cards de
   documento. Esta e uma rede social habitada: fundo claro, header colorido,
   feed de posts de gente, avatares, curtidas, comentarios, membros visiveis.

   ---------------------------------------------------------------------------
   ANATOMIA COPIADA (referencia aprovada pela Laise)
   ---------------------------------------------------------------------------
   Esqueleto herdado de /Users/laisemesquita/Sites/weloveplay/comunidade/
   (interior do We Love Club da WLC, estilo Skool/myICOR, ja aprovado):
   pagina clara, header colorido com cantos inferiores grandes, topbar com
   marca + busca em pill + avatar, titulo grande centrado, layout de 3 colunas
   (sidebar 210px / feed / coluna direita 300px), composer em pill flutuante
   sobreposto ao header por margem negativa, cards de post claros com avatar
   redondo colorido, rodape de acoes por post, widgets na coluna direita.
   O ESQUELETO e o mesmo; a PELE e WLB, nunca WLC.

   ---------------------------------------------------------------------------
   PALETA: DI-003-wlb (WLB), nunca WLC
   ---------------------------------------------------------------------------
   Zero rosa, zero verde, zero vermelho imperial da WLC. Laranja #D97559 e a
   cor do header e dos acentos primarios; lilas #9B7BC7 e a secundaria.

   SUPERFICIES CLARAS: NAO foram derivadas, saem do proprio DI-003-wlb.
   - pagina  #F5EFE8 = `--wlb-beige`, secao 2 ("Background padrao da pagina").
   - cards   #FFFCF8 = `--wlb-white`, secao 2 ("Superficies elevadas sobre bege").
   - recuo   #F3ECDF = `--cs-bg` do tema Alabaster Luxo, secao 9.1.
   - texto   #1E1B2E = `--wlb-ink`, secao 2.
   Como os quatro ja existem no DI-003-wlb, NAO ha superficie nova esperando
   ratificacao da Iris.

   PONTO QUE PRECISA DE RATIFICACAO DA IRIS NO DI-003-wlb (unico):
   o RAIO DE CANTO. A secao 5 fixa cards em 14px e foto hero em 20px. Esta
   superficie de comunidade usa `--r-card: 22px`, pills 999px e header
   0 0 56px 56px, porque a anatomia aprovada pela Laise pede canto generoso.
   E um desvio consciente da secao 5, restrito a superficie de comunidade do
   app. Iris precisa ratificar (ou rebaixar para 14px) antes do proximo gate.

   AA (WCAG 2.2): o laranja #D97559 aparece so como FUNDO grande e decorativo
   (header) e como texto em tamanho display, nunca como texto pequeno sobre
   claro, conforme a secao 2. Todo texto ou acento laranja usa `--accent-text`
   = #A8472E (`--wlb-orange-ink`), que passa AA sobre bege e branco quente.
   Espacamento: base-4 da secao 3b, sem valor arbitrario.
   Tipografia: Lufga com fallback (secao 3). Zero italico, zero travessao.
   ========================================================================== */

/* ===================== TOKENS ===================== */

:root {
  color-scheme: light;

  /* Paleta de marca, DI-003-wlb secao 2 */
  --wlb-orange: #D97559;
  --wlb-orange-deep: #B85C42;
  --wlb-orange-soft: #F2B39A;
  --wlb-orange-ink: #A8472E;
  --wlb-lilac: #C7A5F3;
  --wlb-lilac-mid: #9B7BC7;
  --wlb-lilac-deep: #6B3FA0;
  --wlb-lilac-soft: #E4D4FA;
  --wlb-ink: #1E1B2E;
  --wlb-beige: #F5EFE8;
  --wlb-white: #FFFCF8;

  /* Superficies claras, DI-003-wlb secao 2 + secao 9.1 (Alabaster Luxo) */
  --cs-bg: var(--wlb-beige);
  --cs-surface: var(--wlb-white);
  --cs-surface-2: #F3ECDF;
  --cs-ink: var(--wlb-ink);
  --cs-ink-2: #4A435E;
  --cs-ink-3: #7A7388;
  --cs-line: rgba(30, 27, 46, 0.10);
  --cs-line-forte: rgba(30, 27, 46, 0.20);

  /* Tokens semanticos de produto, DI-003-wlb secao 8 e secao 9.1 (claro) */
  --accent-text: var(--wlb-orange-ink);
  --cta-bg: var(--wlb-orange-ink);
  --cta-fg: #FFFFFF;
  --cta-hover: #8F3B26;
  --focus-ring: var(--wlb-orange-ink);
  --focus-ring-offset: 2px;
  --error-bg: var(--wlb-white);
  --error-fg: var(--wlb-orange-ink);
  --error-border: var(--wlb-orange-deep);
  --done-fg: var(--wlb-orange-ink);
  --done-opacity: 0.55;

  /* Escala base-4, DI-003-wlb secao 3b */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Raio: ver nota de ratificacao no cabecalho deste arquivo */
  --r-card: 22px;
  --r-inner: 16px;
  --r-pill: 999px;

  --sombra-card: 0 10px 28px rgba(30, 27, 46, 0.08);
  --sombra-flutuante: 0 14px 34px rgba(30, 27, 46, 0.14);

  /* Respiro lateral fluido da pagina full-bleed */
  --page-pad: clamp(var(--space-md), 4vw, var(--space-2xl));

  --fonte: 'Lufga', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===================== RESET ===================== */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--cs-bg);
  color: var(--cs-ink);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; }

a { color: inherit; text-decoration: none; }

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

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

/* ===================== ACESSIBILIDADE ===================== */

.wac-oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wac-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-inner) 0;
}
.wac-pular:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--space-sm);
}

/* Sobre o header laranja o anel precisa ser claro para aparecer */
.wac-hero a:focus-visible,
.wac-hero button:focus-visible,
.wac-hero input:focus-visible {
  outline-color: var(--wlb-white);
}

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

/* ===================== FITA DE PREVIA ===================== */

.wac-fita-previa {
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
}

/* =============================================================================
   HEADER (hero laranja)
   Espelha o header vermelho da comunidade WLC: cantos inferiores grandes,
   topbar com marca, busca em pill e avatar, titulo grande centrado. Aqui o
   fundo e o laranja WLB. Texto sobre ele so em tamanho display (autorizado
   pela secao 2 do DI-003-wlb) ou dentro de pill de fundo escuro.
   ========================================================================== */

.wac-hero {
  background: var(--wlb-orange);
  border-radius: 0 0 56px 56px;
  padding-bottom: var(--space-2xl);
}

.wac-hero__topo {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--page-pad) 0;
}

.wac-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  min-height: 44px;
}

.wac-marca__sinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--wlb-white);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.wac-marca__nome {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--wlb-white);
  font-size: 20px;
  line-height: 1.1;
}
.wac-marca__nome b { font-weight: 900; }
.wac-marca__nome span { font-weight: 500; }

.wac-busca {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255, 252, 248, 0.38);
  border-radius: var(--r-pill);
  background: rgba(30, 27, 46, 0.42);
  color: var(--wlb-white);
}

.wac-busca svg { flex-shrink: 0; }

.wac-busca input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--wlb-white);
}
.wac-busca input::placeholder { color: var(--wlb-white); opacity: 1; }
.wac-busca input:focus-visible { outline: 2px solid var(--wlb-white); outline-offset: 2px; }

.wac-hero__avatar {
  margin-left: auto;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wlb-lilac-soft);
  color: var(--wlb-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.wac-hero__cabeca {
  padding: var(--space-lg) var(--page-pad) 0;
  text-align: center;
}

.wac-hero__eyebrow {
  display: inline-block;
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 5px 14px;
}

.wac-hero__titulo {
  margin-top: var(--space-sm);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--wlb-white);
}

/* Enfase por COR e PESO, nunca italico (DI-003-wlb secao 3).
   Ink sobre laranja mede 5.3:1, passa AA com folga. */
.wac-hero__titulo em {
  font-style: normal;
  color: var(--wlb-ink);
}

.wac-hero__sub {
  max-width: 62ch;
  margin: var(--space-md) auto 0;
  color: var(--wlb-ink);
  font-size: 15px;
  font-weight: 500;
}

/* ===================== LAYOUT DE 3 COLUNAS ===================== */

.wac-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 300px;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: 0 var(--page-pad) var(--space-xl);
}

/* Paginas sem coluna direita (trilha, biblioteca, boas-vindas) */
.wac-layout--duas { grid-template-columns: 210px minmax(0, 1fr); }

.wac-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  /* Puxa o composer para cima do header, igual a referencia aprovada */
  margin-top: -32px;
}

.wac-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  padding-top: var(--space-lg);
}

/* ===================== SIDEBAR (injetada por wac-shell.js) ===================== */

.wac-sidebar {
  position: sticky;
  top: var(--space-lg);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  padding-top: var(--space-lg);
}

.wac-nav-grupo { min-width: 0; }

.wac-nav-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
  padding: 0 14px var(--space-sm);
}

.wac-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.wac-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border-radius: var(--r-pill);
  color: var(--cs-ink);
  font-size: 14px;
  font-weight: 500;
}

.wac-nav__item svg { flex-shrink: 0; }
.wac-nav__rotulo { flex: 1; min-width: 0; }

.wac-nav__item:hover { background: var(--cs-surface); }

.wac-nav__item.is-ativo {
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: 700;
}
.wac-nav__item.is-ativo:hover { background: var(--cta-bg); }

.wac-nav__item.is-desativado { color: var(--cs-ink-2); cursor: default; }
.wac-nav__item.is-desativado:hover { background: transparent; }

.wac-nav__chip {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cs-ink-2);
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-pill);
  padding: 2px var(--space-sm);
  white-space: nowrap;
}

.wac-nav__pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--wlb-lilac-deep);
  background: var(--wlb-lilac-soft);
  border-radius: var(--r-pill);
  padding: 2px var(--space-sm);
  white-space: nowrap;
}
.wac-nav__item.is-ativo .wac-nav__pill { background: var(--wlb-white); color: var(--accent-text); }

.wac-sidebar__rodape { margin-top: var(--space-xs); }

.wac-sair {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cs-ink-2);
  font-size: 14px;
  font-weight: 500;
}
.wac-sair:hover { background: var(--cs-surface); color: var(--cs-ink); }

/* ===================== COMPOSER (pill flutuante) ===================== */

.wac-composer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--cs-surface);
  border-radius: var(--r-pill);
  box-shadow: var(--sombra-flutuante);
  padding: var(--space-sm);
}

.wac-composer__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wlb-orange-ink);
  color: var(--wlb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.wac-composer__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 160px;
  resize: none;
  overflow-y: hidden;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  padding: 12px var(--space-md);
  font-size: 14px;
  line-height: 1.35;
  color: var(--cs-ink);
}
.wac-composer__input::placeholder { color: var(--cs-ink-2); }

.wac-composer__publicar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 13px;
  font-weight: 700;
}
.wac-composer__publicar:hover:not(:disabled) { background: var(--cta-hover); }
.wac-composer__publicar:disabled {
  background: var(--cs-surface-2);
  color: var(--cs-ink-2);
  border: 1px solid var(--cs-line);
  cursor: not-allowed;
}

.wac-composer__dica {
  margin: calc(var(--space-sm) * -1) 0 0 var(--space-2xl);
  font-size: 11.5px;
  color: var(--cs-ink-2);
}

/* ===================== RETOMAR (faixa de continuidade) ===================== */

.wac-retomar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
}
.wac-retomar:hover { border-color: var(--wlb-orange); }

.wac-retomar__icone {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wlb-lilac-soft);
  color: var(--wlb-lilac-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wac-retomar__corpo { flex: 1; min-width: 0; display: block; }
.wac-retomar__rotulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.wac-retomar__titulo { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--cs-ink); }

/* ===================== POST ===================== */

.wac-post {
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: var(--space-lg);
}

.wac-post--fixado {
  border: 1px solid var(--wlb-orange-soft);
  box-shadow: var(--sombra-card), 0 0 0 4px rgba(217, 117, 89, 0.08);
}

.wac-post__fixado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.wac-post__cabeca { display: flex; align-items: center; gap: var(--space-sm); }

.wac-post__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  background: var(--wlb-ink);
  color: var(--wlb-white);
}

.wac-post__meta { flex: 1; min-width: 0; }

.wac-post__linha-autor {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.wac-post__autor { font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.wac-post__quando { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-post__titulo {
  margin-top: var(--space-md);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cs-ink);
}

.wac-post__corpo {
  margin-top: var(--space-sm);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cs-ink-2);
}
.wac-post__corpo p + p { margin-top: var(--space-sm); }
.wac-post__corpo b, .wac-post__corpo strong { color: var(--cs-ink); font-weight: 700; }

/* Selo de nivel do autor */
.wac-nivel {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 3px var(--space-sm);
  white-space: nowrap;
}
.wac-nivel--equipe { background: var(--cta-bg); color: var(--cta-fg); }
.wac-nivel--agente { background: var(--wlb-lilac-deep); color: #FFFFFF; }
.wac-nivel--fundador { background: var(--wlb-lilac-soft); color: var(--wlb-lilac-deep); }

/* Categoria do post */
.wac-post__tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-text);
  border: 1.5px solid var(--wlb-orange);
  border-radius: var(--r-pill);
  padding: 2px var(--space-sm);
  white-space: nowrap;
}

/* Foto do post: placeholder em gradiente CSS. Gradiente so dentro da familia
   laranja ou da familia lilas, nunca cruzando para rosa (DI-003-wlb 9.7). */
.wac-post__foto {
  position: relative;
  margin-top: var(--space-md);
  height: 200px;
  border-radius: var(--r-inner);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 252, 248, 0.45), transparent 46%),
    linear-gradient(140deg, var(--wlb-orange-soft), var(--wlb-orange-deep));
}

.wac-post__foto--lilas {
  background:
    radial-gradient(circle at 74% 22%, rgba(255, 252, 248, 0.42), transparent 48%),
    linear-gradient(140deg, var(--wlb-lilac-soft), var(--wlb-lilac-deep));
}

.wac-post__foto-legenda {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-size: 11.5px;
  font-weight: 500;
}

/* Acoes do post */
.wac-post__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.wac-post__acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cs-ink-2);
  font-size: 13.5px;
  font-weight: 500;
}
.wac-post__acao svg { color: var(--wlb-orange-deep); }
.wac-post__acao:hover { background: var(--cs-surface-2); color: var(--cs-ink); }
.wac-post__acao[aria-pressed="true"] { color: var(--accent-text); font-weight: 700; }
.wac-post__acao[aria-pressed="true"] svg { fill: rgba(184, 92, 66, 0.22); }

/* Comentario em previa dentro do post */
.wac-comentario {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cs-line);
}
.wac-comentario__corpo { min-width: 0; font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-comentario__autor { font-weight: 700; color: var(--cs-ink); }

/* ===================== CARDS GENERICOS ===================== */

.wac-card {
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: var(--space-lg);
}

.wac-card--destaque { border: 1px solid var(--wlb-orange-soft); }

.wac-card--lilas { background: var(--wlb-lilac-soft); box-shadow: none; }

.wac-card--acao { display: block; }
.wac-card--acao:hover { box-shadow: var(--sombra-flutuante); }

.wac-card__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.wac-card__titulo { font-size: 17px; font-weight: 700; color: var(--cs-ink); }
.wac-card__texto { margin-top: var(--space-sm); font-size: 14.5px; line-height: 1.6; color: var(--cs-ink-2); }
.wac-card__meta { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-divisor { border: 0; border-top: 1px solid var(--cs-line); margin: var(--space-md) 0; }

.wac-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

/* ===================== WIDGETS DA COLUNA DIREITA ===================== */

.wac-widget {
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: var(--space-md);
}

/* Widget lilas (proxima entrega): precisa vir depois de .wac-widget para
   ganhar dele na cascata, ja que a especificidade e a mesma. */
.wac-widget.wac-card--lilas { background: var(--wlb-lilac-soft); box-shadow: none; }

.wac-widget__titulo { margin-bottom: var(--space-md); font-size: 14px; font-weight: 700; color: var(--cs-ink); }

/* Card do clube */
.wac-clube__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-inner);
  background: var(--wlb-orange);
  color: var(--wlb-ink);
  font-size: 14px;
  font-weight: 900;
}
.wac-clube__nome { margin-top: var(--space-sm); font-size: 16px; font-weight: 900; color: var(--cs-ink); }
.wac-clube__texto { margin-top: var(--space-xs); font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-clube__numeros {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line);
}
.wac-clube__num { font-size: 18px; font-weight: 900; line-height: 1.1; color: var(--accent-text); }
.wac-clube__rotulo { font-size: 11px; font-weight: 500; color: var(--cs-ink-2); }

/* Leaderboard */
.wac-rank { display: flex; flex-direction: column; gap: var(--space-sm); }
.wac-rank__item { display: flex; align-items: center; gap: var(--space-sm); }
.wac-rank__pos {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--cs-ink-2);
}
.wac-rank__nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--cs-ink); }
.wac-rank__nivel { font-size: 11.5px; font-weight: 500; color: var(--cs-ink-2); }
.wac-rank__xp {
  flex-shrink: 0;
  padding: 3px var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.wac-rank__item--voce { background: var(--cs-surface-2); border-radius: var(--r-pill); padding: var(--space-xs); }

/* Membros online */
.wac-online__fila { display: flex; align-items: center; flex-wrap: wrap; }
.wac-online__fila .wac-avatar { margin-right: -8px; border: 2px solid var(--cs-surface); }
.wac-online__mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin-left: 14px;
  padding: 0 var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  color: var(--cs-ink-2);
  font-size: 12px;
  font-weight: 700;
}
.wac-online__texto { margin-top: var(--space-sm); font-size: 12.5px; color: var(--cs-ink-2); }

/* Proxima entrega */
.wac-entrega { display: flex; gap: var(--space-sm); align-items: center; }
.wac-data-chip {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  border-radius: 999px 999px var(--space-sm) var(--space-sm);
  background: var(--cs-surface);
}
.wac-data-chip .dia { font-size: 16px; font-weight: 900; line-height: 1.1; color: var(--accent-text); }
.wac-data-chip .mes {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cs-ink-2);
}

/* ===================== AVATARES ===================== */

.wac-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wlb-ink);
  color: var(--wlb-white);
  font-weight: 900;
  flex-shrink: 0;
}
.wac-avatar--p { width: 28px; height: 28px; font-size: 10px; }
.wac-avatar--m { width: 36px; height: 36px; font-size: 12px; }
.wac-avatar--g { width: 52px; height: 52px; font-size: 16px; }

.wac-avatar--laranja { background: var(--wlb-orange-ink); color: var(--wlb-white); }
.wac-avatar--lilas { background: var(--wlb-lilac-deep); color: #FFFFFF; }
.wac-avatar--terra { background: var(--wlb-orange-deep); color: var(--wlb-white); }
.wac-avatar--claro { background: var(--wlb-lilac-mid); color: var(--wlb-ink); }

/* ===================== CHIPS, SELOS E BOTOES ===================== */

.wac-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
}
.wac-chip--xp { background: var(--cs-surface-2); color: var(--accent-text); }
.wac-chip--lilas { background: var(--wlb-lilac-soft); color: var(--wlb-lilac-deep); }
.wac-chip--calado { background: var(--cs-surface-2); color: var(--cs-ink-2); }

.wac-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) 12px;
  border-radius: var(--r-pill);
  background: var(--wlb-lilac-soft);
  color: var(--wlb-lilac-deep);
  font-size: 12px;
  font-weight: 700;
}

.wac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-pill);
  background: var(--cs-surface);
  color: var(--cs-ink);
  font-size: 14px;
  font-weight: 700;
}
.wac-btn:hover { border-color: var(--wlb-orange); }

.wac-btn--primario { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.wac-btn--primario:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

.wac-btn--pequeno { padding: var(--space-sm) var(--space-md); font-size: 13px; }
.wac-btn--bloco { width: 100%; }

.wac-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wac-btn:disabled:hover { border-color: var(--cs-line-forte); }

.wac-acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* ===================== PROGRESSO ===================== */

.wac-progresso { min-width: 0; }

.wac-progresso__trilho {
  height: var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  overflow: hidden;
}

.wac-progresso__barra {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--wlb-orange-deep), var(--wlb-orange));
}

.wac-progresso__legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 6px;
  font-size: 12px;
  color: var(--cs-ink-2);
}
.wac-progresso__legenda b { color: var(--cs-ink); }

/* ===================== PASSOS (onboarding) ===================== */

.wac-passos { display: flex; flex-direction: column; gap: var(--space-md); }

.wac-passo { display: flex; gap: var(--space-sm); align-items: flex-start; }

.wac-passo__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--wlb-orange);
  background: var(--cs-surface);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
}

.wac-passo--feito .wac-passo__num {
  background: var(--done-fg);
  border-color: var(--done-fg);
  color: var(--cta-fg);
}
.wac-passo--feito .wac-passo__corpo { opacity: var(--done-opacity); }

.wac-passo__corpo { flex: 1; min-width: 0; }

.wac-passo__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-ink);
}

.wac-passo__texto { margin-top: var(--space-xs); font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-passo__acao { margin-top: var(--space-sm); }

.wac-passo-marcador {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}

/* ===================== TRILHA (modulos e aulas) ===================== */

.wac-modulos { display: flex; flex-direction: column; gap: var(--space-sm); }

.wac-modulo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
}

.wac-modulo__ordem {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cs-surface-2);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
}

.wac-modulo__corpo { flex: 1; min-width: 0; }
.wac-modulo__titulo { font-size: 14.5px; font-weight: 700; color: var(--cs-ink); }
.wac-modulo__meta { font-size: 12px; color: var(--cs-ink-2); }

.wac-modulo--ativo { border-color: var(--wlb-orange); box-shadow: 0 0 0 3px rgba(217, 117, 89, 0.12); }
.wac-modulo--bloqueado { background: var(--cs-surface-2); border-style: dashed; }
.wac-modulo--bloqueado .wac-modulo__titulo { color: var(--cs-ink-2); }

/* ===================== PAR PDF + SKILL ===================== */

.wac-par {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
}

.wac-par__linha { display: flex; gap: var(--space-sm); font-size: 13.5px; line-height: 1.5; color: var(--cs-ink-2); }
.wac-par__linha b { color: var(--cs-ink); }

.wac-par__marca {
  flex-shrink: 0;
  width: var(--space-sm);
  height: var(--space-sm);
  margin-top: 6px;
  border-radius: 50%;
  background: var(--wlb-lilac-mid);
}
.wac-par__linha--pago .wac-par__marca { background: var(--wlb-orange-ink); }

.wac-dica { display: inline-flex; }

/* ===================== MEMBRO, METRICAS E DADOS ===================== */

.wac-membro { display: flex; align-items: center; gap: var(--space-sm); }
.wac-membro__nome { font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.wac-membro__nivel { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }

.wac-metrica { padding: var(--space-sm) 12px; border-radius: var(--r-inner); background: var(--cs-surface-2); }
.wac-metrica__valor { font-size: 20px; font-weight: 900; line-height: 1.1; color: var(--accent-text); }
.wac-metrica__rotulo { font-size: 11px; color: var(--cs-ink-2); }

.wac-dados { display: flex; flex-direction: column; }
.wac-dados__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 12px 0;
  border-bottom: 1px solid var(--cs-line);
  font-size: 14px;
}
.wac-dados__linha:last-child { border-bottom: 0; }
.wac-dados__rotulo { color: var(--cs-ink-2); }
.wac-dados__valor { font-weight: 700; color: var(--cs-ink); text-align: right; }

/* ===================== FORMULARIO DO PERFIL ===================== */

.wac-campo { display: flex; flex-direction: column; gap: 6px; }
.wac-campo label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.wac-campo input {
  width: 100%;
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-pill);
  background: var(--cs-surface);
  color: var(--cs-ink);
}
.wac-campo input[aria-invalid="true"] { border-color: var(--error-border); }

.wac-avatares { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.wac-avatar-op {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  color: var(--wlb-ink);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wac-avatar-op[aria-pressed="true"] { border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(168, 71, 46, 0.18); }

/* ===================== AVISOS E ESTADO VAZIO ===================== */

.wac-aviso {
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
  font-size: 14px;
  color: var(--cs-ink-2);
}
.wac-aviso[hidden] { display: none; }

/* Erro nunca usa vermelho (DI-003-wlb secao 8.2) */
.wac-aviso--erro { background: var(--error-bg); border-color: var(--error-border); color: var(--error-fg); font-weight: 500; }
.wac-aviso--ok { background: var(--wlb-lilac-soft); border-color: var(--wlb-lilac-mid); color: var(--wlb-lilac-deep); }

.wac-vazio {
  padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--cs-line-forte);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  text-align: center;
  color: var(--cs-ink-2);
}
.wac-vazio strong { display: block; margin: var(--space-sm) 0 var(--space-xs); font-size: 16px; color: var(--cs-ink); }

.wac-vazio__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cs-surface-2);
  color: var(--accent-text);
}

/* ===================== CABECA DE SECAO ===================== */

.wac-secao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.wac-secao__titulo { font-size: 18px; font-weight: 900; color: var(--cs-ink); }
.wac-secao__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-text);
}
.wac-secao__link:hover { text-decoration: underline; }

/* ===================== ONBOARDING (pagina bem-vindo) ===================== */

.wac-conector {
  width: 2px;
  height: var(--space-2xl);
  margin: var(--space-lg) auto;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--wlb-orange), var(--wlb-lilac-mid));
}

/* ===================== RODAPE ===================== */

.wac-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-lg) var(--page-pad);
  border-top: 1px solid var(--cs-line);
}
.wac-rodape__frase { font-size: 13px; color: var(--cs-ink-2); }
.wac-rodape__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.wac-rodape__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--cs-ink-2);
}
.wac-rodape__links a:hover { color: var(--accent-text); }

/* =============================================================================
   RESPONSIVO
   REGRA DA CASA (pedido da Laise, 2026-08-05): a SIDEBAR LATERAL fica VISIVEL
   ate 760px de largura. O painel onde ela revisa tem cerca de 800px e ela
   precisa ver a sidebar la. Por isso a coluna direita empilha antes (980px) e
   a sidebar so vira barra horizontal rolavel abaixo de 760px, no TOPO, nunca
   virando barra inferior.
   ========================================================================== */

@media (max-width: 1180px) {
  .wac-layout { grid-template-columns: 190px minmax(0, 1fr) 264px; }
  .wac-layout--duas { grid-template-columns: 190px minmax(0, 1fr); }
}

/* 761px a 980px: sidebar CONTINUA lateral e visivel; a coluna direita desce
   para o fim do conteudo, em largura cheia. E o caso do painel de 800px. */
@media (max-width: 980px) {
  .wac-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .wac-lateral {
    grid-column: 2;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .wac-hero { border-radius: 0 0 40px 40px; }
}

/* Abaixo de 760px: uma coluna so. */
@media (max-width: 760px) {
  .wac-layout,
  .wac-layout--duas { grid-template-columns: 1fr; gap: var(--space-md); }

  .wac-sidebar {
    position: static;
    order: -1;
    width: 100%;
    padding-top: var(--space-md);
    gap: var(--space-sm);
  }

  .wac-nav-eyebrow { padding: 0 var(--space-xs) 6px; }

  .wac-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 6px;
  }

  .wac-nav__item {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--cs-surface);
    font-size: 13px;
    padding: var(--space-sm) var(--space-md);
  }
  .wac-nav__item.is-ativo { background: var(--cta-bg); }

  .wac-sair { width: auto; align-self: flex-start; padding-left: var(--space-md); padding-right: var(--space-md); }

  .wac-lateral { grid-column: auto; }

  .wac-hero { border-radius: 0 0 32px 32px; padding-bottom: var(--space-xl); }
  .wac-hero__topo { gap: var(--space-sm); }
  .wac-busca { display: none; }

  /* Em uma coluna a sidebar fica LOGO ACIMA do feed. Manter a margem negativa
     do composer aqui faria o primeiro card subir por cima dos trilhos de
     navegacao. Nesta faixa o composer nasce abaixo dos trilhos, sem sobrepor. */
  .wac-feed { margin-top: 0; }
}

@media (max-width: 520px) {
  .wac-post, .wac-card { padding: var(--space-md); }
  .wac-post__foto { height: 170px; }
  .wac-composer { flex-wrap: wrap; border-radius: var(--r-card); }
  .wac-composer__input { flex: 1 1 100%; order: 3; }
  .wac-composer__publicar { margin-left: auto; }
  .wac-composer__dica { margin-left: 0; }
  .wac-metricas { grid-template-columns: 1fr; }
  .wac-marca__nome { font-size: 17px; }
}

/* =============================================================================
   TRILHA FUNDACAO (onda 4, 2026-08-05, Felix)
   SECAO ADITIVA. Nada acima desta linha foi alterado: a pele de comunidade
   acabou de ser aprovada pela Laise e continua intacta. Tudo aqui e classe
   NOVA (ou modificador novo de classe existente), nunca redefinicao.

   Componentes reaproveitados sem tocar: .wac-hero, .wac-layout, .wac-card,
   .wac-widget, .wac-modulo, .wac-chip, .wac-progresso, .wac-btn, .wac-selo.
   O que entra aqui e o que a trilha pediu e nao existia: linha de aula
   clicavel com estado, slot de video 16:9, tipografia de leitura longa,
   indice por ancora e o card de celebracao.

   AA (WCAG 2.2): texto de corpo usa --cs-ink-2 (#4A435E) sobre --cs-surface
   (#FFFCF8), 8.9:1. Acento continua sendo --accent-text (#A8472E), 6.0:1
   sobre branco quente. O laranja puro segue so como fundo grande ou borda.
   Alvo minimo 44px em tudo que clica. Foco visivel herdado do bloco de
   acessibilidade la em cima.
   ========================================================================== */

/* ---------------- Capa da trilha ---------------- */

.wac-capa__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.wac-capa__titulo {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--cs-ink);
}

.wac-capa__promessa {
  margin-top: var(--space-sm);
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cs-ink-2);
}

.wac-capa__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ---------------- Modulo como secao da trilha ---------------- */

.wac-trilha-secao { margin-top: var(--space-xl); }

.wac-trilha-secao__cabeca {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  scroll-margin-top: var(--space-lg);
}

.wac-trilha-secao__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cta-bg);
  color: var(--cta-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
}

.wac-trilha-secao__titulo { font-size: 16px; font-weight: 900; color: var(--cs-ink); }
.wac-trilha-secao__meta { font-size: 12px; color: var(--cs-ink-2); }
.wac-trilha-secao__resumo {
  margin: 0 0 var(--space-sm) 38px;
  max-width: 60ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cs-ink-2);
}

/* Selo de modulo completo */
.wac-selo--completo { background: var(--cs-surface-2); color: var(--accent-text); }

/* ---------------- Linha de aula (modificadores novos de .wac-modulo) ------- */

a.wac-modulo { text-decoration: none; }
a.wac-modulo:hover { border-color: var(--wlb-orange); box-shadow: var(--sombra-card); }

.wac-modulo--feito .wac-modulo__ordem { background: var(--cta-bg); color: var(--cta-fg); }
.wac-modulo--feito .wac-modulo__titulo { color: var(--cs-ink-2); }

.wac-modulo--travada { background: var(--cs-surface-2); border-style: dashed; cursor: default; }
.wac-modulo--travada .wac-modulo__titulo { color: var(--cs-ink-2); }
.wac-modulo--travada .wac-modulo__ordem { background: transparent; color: var(--cs-ink-2); }

.wac-modulo--marco {
  border-color: var(--wlb-lilac-mid);
  box-shadow: 0 0 0 3px rgba(155, 123, 199, 0.14);
}
.wac-modulo--marco .wac-modulo__ordem { background: var(--wlb-lilac-soft); color: var(--wlb-lilac-deep); }
.wac-modulo--marco.wac-modulo--feito .wac-modulo__ordem { background: var(--cta-bg); color: var(--cta-fg); }

.wac-modulo__cauda {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Check laranja da aula concluida */
.wac-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cta-bg);
  color: var(--cta-fg);
}

/* ---------------- Celebracao de trilha completa ---------------- */

.wac-celebra {
  margin-top: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--r-card);
  background: var(--wlb-lilac-soft);
  text-align: center;
}

.wac-celebra__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cs-surface);
  color: var(--accent-text);
  box-shadow: var(--sombra-card);
}

.wac-celebra__titulo {
  margin-top: var(--space-md);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 900;
  color: var(--wlb-lilac-deep);
}

.wac-celebra__texto {
  margin: var(--space-sm) auto 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--wlb-lilac-deep);
}

.wac-celebra__acoes { margin-top: var(--space-lg); justify-content: center; }

/* ---------------- Migalhas (pagina de aula) ---------------- */

.wac-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wlb-ink);
}
.wac-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wac-crumbs a:hover { text-decoration: underline; }
.wac-crumbs span { opacity: 0.72; }

/* ---------------- Slot de video 16:9 ---------------- */

.wac-video-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  /* 16:9 exato, com teto de altura para o slot vazio nao engolir a primeira
     tela. Quando o player entrar, ele herda a mesma caixa. */
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-lg);
  border: 1px dashed var(--cs-line-forte);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
  text-align: center;
}

.wac-video-slot__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cs-surface);
  color: var(--accent-text);
  box-shadow: var(--sombra-card);
}

.wac-video-slot__texto {
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cs-ink-2);
}

/* ---------------- Indice por ancora ---------------- */

.wac-indice { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }

.wac-indice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-ink-2);
}
.wac-indice a:hover { border-color: var(--wlb-orange); color: var(--cs-ink); }

/* ---------------- Tipografia de leitura longa ---------------- */

.wac-aula__secao + .wac-aula__secao { margin-top: var(--space-xl); }

.wac-aula__h2 {
  max-width: 34ch;
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--cs-ink);
  scroll-margin-top: var(--space-lg);
}

.wac-aula__corpo {
  margin-top: var(--space-md);
  max-width: 66ch;
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--cs-ink-2);
}

.wac-aula__corpo > * + * { margin-top: var(--space-md); }
.wac-aula__corpo strong { color: var(--cs-ink); font-weight: 700; }

.wac-aula__corpo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--cs-surface-2);
  color: var(--cs-ink);
  word-break: break-word;
}

.wac-aula__corpo ul,
.wac-aula__corpo ol { padding-left: var(--space-lg); }
.wac-aula__corpo ul li { list-style: disc; }
.wac-aula__corpo ol li { list-style: decimal; }
.wac-aula__corpo li + li { margin-top: var(--space-sm); }

.wac-aula__corpo blockquote {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 3px solid var(--wlb-orange);
  color: var(--cs-ink);
  font-weight: 500;
}

/* Wikilink citado dentro do script: continua legivel como wikilink */
.wac-wiki { color: var(--accent-text); font-weight: 600; word-break: break-word; }

/* Conteudo de arquivo mostrado na aula (frontmatter, ficha de CRM) */
.wac-aula__arquivo {
  overflow-x: auto;
  padding: var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--cs-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Tabela do script: rola dentro do proprio container, a pagina nunca rola de lado */
.wac-aula__rolo { overflow-x: auto; }

.wac-aula__tabela {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}
.wac-aula__tabela th,
.wac-aula__tabela td {
  padding: var(--space-sm) 12px;
  border-bottom: 1px solid var(--cs-line);
  text-align: left;
  vertical-align: top;
}
.wac-aula__tabela th { color: var(--cs-ink); font-weight: 700; }

/* ---------------- Fim da aula ---------------- */

.wac-fim { text-align: center; }
.wac-fim__acoes { justify-content: center; margin-top: var(--space-md); }
.wac-fim__nota { margin-top: var(--space-sm); font-size: 12.5px; color: var(--cs-ink-2); }

/* ---------------- Ritmo (coluna direita da trilha) ---------------- */

.wac-ritmo__xp {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--accent-text);
}
.wac-ritmo__rotulo { font-size: 11.5px; color: var(--cs-ink-2); }

.wac-ritmo__proxima {
  display: block;
  margin-top: var(--space-md);
  padding: 12px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
}
.wac-ritmo__proxima:hover { border-color: var(--wlb-orange); }
.wac-ritmo__proxima-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.wac-ritmo__proxima-titulo {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cs-ink);
}

/* Aulas mais estreitas no celular: o texto longo respira melhor */
@media (max-width: 520px) {
  .wac-aula__corpo { font-size: 17px; line-height: 1.72; }
  .wac-video-slot { padding: var(--space-md); }
  .wac-video-slot__play { width: 52px; height: 52px; }
}

/* Coluna de leitura: a pagina de aula nao tem coluna direita, e uma coluna
   central de 1100px deixaria o texto perdido no meio do card. Este modificador
   estreita a coluna inteira (video, indice, script, fim) para largura de
   documento, sem tocar no .wac-feed que o feed usa. */
.wac-feed--leitura {
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Titulo de aula no header: o mesmo componente do hero, so que o titulo de uma
   aula e uma frase, nao uma palavra. Cai para tamanho de leitura sem sair da
   faixa "display" autorizada pela secao 2 do DI-003-wlb (branco sobre laranja
   so em tamanho grande). */
.wac-hero__titulo--aula {
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.15;
}

/* ===== EMBED DE VIDEO (Tella) — trilhas com video real ===== */
.wac-video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1E1B2E; }
.wac-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wac-outras-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-md, 16px); }