/* ==========================================================================
   Wey Barros — Treinamento de Força · Design System v1
   Porte para o framework Ragazzo Control Panel (tema wc_wey)
   Camada de tema sobre Bootstrap 5.3.x (dashlite.css) + wc-agency.css
   Ordem de carga (index.php raiz, wc_css/ em ordem alfabética):
   aa-wey-fonts.css → ab-wey-icons.css → dashlite.css → slick.css → theme.css
   → wc-agency.css → wc-ead.css → wc-wey.css (ESTE) → zz-wey-palette.css
   → <style id="wc-theme-color"> (paleta do painel, sempre vence).
   --------------------------------------------------------------------------
   Fonte: contexto/cliente/wb-theme.css — blocos 1 a 29 na mesma ordem e com
   os mesmos comentários — mais o bloco I ("Integração com o framework") no fim.
   Regras do porte:
   · COR SÓ POR TOKEN. Nenhum hex de marca fora do :root de fallback. A rampa
     verde deriva da paleta do painel: --bs-primary → green-900 (a marca),
     --bs-primary-dark → green-950, --bs-secondary → green-600; os degraus
     intermediários nascem por color-mix a partir desses dois.
   · Todo rgba() de marca do original virou rgba(var(--wb-*-rgb), a) ou
     color-mix(in srgb, var(--wb-green-N) X%, transparent). rgba(255,255,255,x)
     é luz, não marca, e ficou.
   · Nenhuma importação remota de fontes: as três famílias vêm locais em aa-wey-fonts.css.
   · O estado escondido da revelação (.wb-reveal, [data-entra]) só existe sob
     html.wb-js, classe posta pelo zz-wey.js na 1ª linha — sem JS a página
     nasce inteira visível.
   --------------------------------------------------------------------------
   Mesma disciplina dos demais temas da casa: blocos numerados e contraste
   documentado. O que muda é a tese. Uma marca de cor clara (um ouro a 1,78:1
   no branco, por exemplo) não serve para escrever; aqui o problema é o
   inverso: o verde da marca tem 14,4:1 sobre o off-white — ele é um preto.
   Não existe cor de destaque neste sistema. O destaque é profundidade.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Verde: uma rampa só, matiz 146° travado no do logo -----------------
     A saturação sobe conforme escurece (7% no topo, 37% na marca). Rampa de
     matiz único: é ela que carrega marca, hierarquia, estado e intensidade.
     Os números de contraste abaixo foram medidos contra o off-white da marca
     (#F2F5F3) com a paleta padrão; o painel pode mover os extremos
     (--bs-primary, --bs-primary-dark, --bs-secondary) e os degraus do meio
     acompanham por color-mix — o hex só aparece como FALLBACK de var(). */
  --wb-green-950: var(--bs-primary-dark, #09160F);          /* rodapé do herói */
  --wb-green-900: var(--bs-primary, #12271B);               /* COR DO LOGO — âncora — 14,36:1 */
  --wb-green-900-rgb: var(--bs-primary-rgb, 18, 39, 27);
  --wb-green-800: color-mix(in srgb, var(--wb-green-900) 72%, var(--wb-green-600)); /* 11,04:1 — hover da superfície âncora */
  --wb-green-700: color-mix(in srgb, var(--wb-green-900) 36%, var(--wb-green-600)); /* 7,71:1 — texto de ênfase no claro */
  --wb-green-600: var(--bs-secondary, #427357);             /* 5,01:1 no off-white — link e texto de apoio */
  --wb-green-600-rgb: var(--bs-secondary-rgb, 66, 115, 87);
  --wb-green-500: color-mix(in srgb, var(--wb-green-600) 82%, #fff); /* 3,28:1 — borda de controle, nunca texto */
  --wb-green-400: color-mix(in srgb, var(--wb-green-600) 58%, #fff); /* 6,31:1 sobre a marca */
  --wb-green-300: color-mix(in srgb, var(--wb-green-600) 38%, #fff); /* 8,75:1 sobre a marca — voz secundária no escuro */
  --wb-green-200: var(--bs-border-color, #D2DDD7);          /* bordas no claro */
  --wb-green-100: var(--wc-bg-alt, #E7ECE9);                /* seção rebaixada */
  --wb-green-50:  var(--bs-body-bg, #F2F5F3);               /* OFF-WHITE DA MARCA — superfície base */
  --wb-green-25:  color-mix(in srgb, var(--wb-green-50) 60%, #fff);

  /* --- Preto: a terceira cor da marca. Superfície, nunca par do verde ----
     #0C0C0C contra #12271B dá 1,24:1. Preto e verde-marca não podem se tocar
     como texto/fundo em lugar nenhum. Só se alternam como blocos separados.
     O painel manda nele por SITE_THEME_FOOTER_BG (--wc-footer-bg). */
  --wb-black:      var(--wc-footer-bg, #0C0C0C);
  --wb-black-soft: color-mix(in srgb, var(--wb-black) 92%, #fff);
  --wb-white:      var(--bs-card-bg, #FFFFFF);   /* só card sobre o off-white; não é o fundo do site */
  --wb-bone:       var(--wb-green-50);
  /* Canais do off-white para os véus rgba(). Fixos de propósito: são a tinta
     translúcida da marca (vidro da ilha, bordas no escuro), não a superfície. */
  --wb-bone-rgb:   242, 245, 243;

  /* --- Estado (funcionais, fora da marca; usados no mínimo possível) --- */
  --wb-danger:         var(--bs-danger, #A62B21);    /* 6,21:1 no off-white */
  --wb-danger-on-dark: color-mix(in srgb, var(--wb-danger) 45%, #fff);
  --wb-warning:        var(--bs-warning, #8A5A00);   /* 5,23:1 no off-white */
  /* WhatsApp: marca de terceiro, fixa. O texto sobre ele é branco PURO (4,32:1
     contra o preenchimento), nunca o off-white — por isso ganha token próprio. */
  --wb-whats:          #128C4A;
  --wb-whats-fg:       #fff;
  /* Sucesso não tem cor própria: sucesso aqui é o verde da marca. */
  --wb-success:        var(--bs-success, var(--wb-green-700));

  /* --- Semântica (cada uma aceita o token equivalente do painel) --- */
  --wb-surface:        var(--bs-body-bg, var(--wb-bone));
  --wb-surface-raised: var(--bs-card-bg, #fff);
  --wb-surface-sunken: var(--wc-bg-alt, var(--wb-green-100));
  --wb-border:         var(--bs-border-color, var(--wb-green-200));
  --wb-border-strong:  var(--wb-green-300);
  --wb-text:           var(--bs-body-color, var(--wb-green-900));
  --wb-heading:        var(--bs-heading-color, var(--wb-text));   /* h1–h3 no claro */
  --wb-text-muted:     var(--wc-muted, var(--wb-green-700));
  --wb-text-accent:    var(--bs-link-color, var(--wb-green-600));
  --wb-anchor:         var(--wb-green-900);
  --wb-footer-text:    var(--wc-footer-text, var(--wb-green-300));
  --wb-footer-link:    var(--wc-footer-link, var(--wb-green-300));

  /* --- A rampa em gradiente: a mesma régua (100 → 800) que fecha o herói,
     abre o rodapé e sobe ao teto do plano em destaque, da coluna destacada da
     tabela e do formulário de diagnóstico. Um token, quatro usos. --- */
  --wb-rampa-grad: linear-gradient(90deg,
    var(--wb-green-100) 0%, var(--wb-green-200) 14%, var(--wb-green-300) 28%, var(--wb-green-400) 42%,
    var(--wb-green-500) 56%, var(--wb-green-600) 70%, var(--wb-green-700) 84%, var(--wb-green-800) 100%);

  /* --- Tipografia -------------------------------------------------------
     Familjen Grotesk nos títulos: grotesca sueca de aberturas fechadas e
     terminais retos, naturalmente estreita. Ecoa o traço monolinear do
     monograma WB e economiza largura — coerente com "treinar melhor, não
     mais". Instrument Sans no corpo, mais aberta e neutra, legível em 14px.
     JetBrains Mono nos dados: carga, repetição, RIR, semana, telefone.
     Onde o número precisa ser comparado linha a linha, a monoespaçada é
     função, não estilo. (As três chegam locais por aa-wey-fonts.css.) */
  --wb-font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --wb-font-body:    'Instrument Sans', system-ui, sans-serif;
  --wb-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --wb-fs-display: clamp(2.7rem, 6.4vw, 5.25rem);
  --wb-fs-h1:      clamp(2.1rem, 4.6vw, 3.5rem);
  --wb-fs-h2:      clamp(1.7rem, 3.1vw, 2.5rem);
  --wb-fs-h3:      clamp(1.3rem, 2vw, 1.7rem);
  --wb-fs-h4:      1.18rem;
  --wb-fs-lg:      1.125rem;
  --wb-fs-base:    1rem;
  --wb-fs-sm:      0.875rem;
  --wb-fs-xs:      0.75rem;

  --wb-lh-tight: 1.0;
  --wb-lh-snug:  1.14;
  --wb-lh-base:  1.62;

  /* --- Espaço (base 4) --- */
  --wb-space-1: .25rem;  --wb-space-2: .5rem;   --wb-space-3: .75rem;
  --wb-space-4: 1rem;    --wb-space-5: 1.5rem;  --wb-space-6: 2rem;
  --wb-space-7: 3rem;    --wb-space-8: 4rem;    --wb-space-9: 6rem;
  --wb-section-y: clamp(3.5rem, 8vw, 7rem);

  /* --- Raio -------------------------------------------------------------
     O canto cortado não é enfeite: o monograma mistura o W de terminais
     retos com o B de contornos arredondados. A moldura de ícone repete essa
     mistura — três cantos redondos, um reto. */
  --wb-radius-sm: 5px;   --wb-radius-md: 9px;   --wb-radius-lg: 16px;
  --wb-radius-xl: 26px;  --wb-radius-pill: 999px;
  --wb-radius-cut: var(--wb-radius-lg) var(--wb-radius-lg) var(--wb-radius-lg) 3px;

  /* --- Sombra (o verde é escuro; a sombra herda o matiz, não usa preto puro) */
  --wb-shadow-sm: 0 1px 2px rgba(var(--wb-green-900-rgb), .08), 0 1px 1px rgba(var(--wb-green-900-rgb), .05);
  --wb-shadow-md: 0 4px 16px -4px rgba(var(--wb-green-900-rgb), .13), 0 1px 2px rgba(var(--wb-green-900-rgb), .06);
  --wb-shadow-lg: 0 18px 48px -14px rgba(var(--wb-green-900-rgb), .24), 0 2px 6px rgba(var(--wb-green-900-rgb), .07);
  --wb-shadow-anchor: 0 12px 28px -12px rgba(var(--wb-green-900-rgb), .55);

  /* --- Movimento --- */
  --wb-ease: cubic-bezier(.22,1,.36,1);
  --wb-dur-fast: 150ms; --wb-dur-base: 280ms; --wb-dur-slow: 520ms;

  /* --- Layout --- */
  --wb-container: 1160px;
  --wb-nav-h: 76px;              /* fallback; o zz-wey.js mede a ilha e sobrescreve */
  --wb-anchor-offset: 6rem;

  /* --- Monograma WB: contorno vetorizado do arquivo oficial ---------------
     Entra como máscara, não como imagem. A marca é monocromática por
     definição, então o monograma toma a cor do contexto (currentColor) e
     fica impossível publicar uma versão colorida por engano. Um arquivo,
     nenhuma variante invertida para manter em sincronia. */
  --wb-logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 47'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M67 44.4 C66.5 44.1 66.4 44 66.4 43.4 C66.4 42.5 67.1 39.2 67.5 38.6 C67.6 38.3 67.8 37.7 68 37.1 C68.3 36 68.8 34.7 69.4 33.4 C69.6 33 70 32.2 70.2 31.8 C70.6 30.8 71.4 29.4 72 28.6 C72.2 28.2 72.7 27.5 73 27 C73.3 26.6 73.6 26.2 73.7 26.2 C73.7 26.2 73.9 26 73.9 25.9 C74.2 24.8 78.5 21.1 80.5 20.1 C83.2 18.8 83.2 18.8 96.9 18.8 L108.1 18.8 L108.9 18.2 C111.1 16.4 111.7 14.1 110.3 12.7 L109.5 12 L94.8 12 L80.1 12.1 L79.4 12.4 C79 12.6 78.4 12.9 78.1 12.9 C77.8 13 77.2 13.2 76.9 13.4 C76.6 13.6 76.1 13.9 75.8 14 C75.5 14.1 75.1 14.3 75 14.5 C74.8 14.6 74.4 14.9 74.1 15.1 C73.8 15.3 73.2 15.6 72.9 15.9 C72.1 16.4 68.4 19.9 68 20.5 C67.9 20.8 67.4 21.4 67 22 C65.9 23.5 65.4 24.1 64.9 25 C64.7 25.4 64.2 26.2 63.9 26.7 C63.6 27.2 63.2 27.8 63.1 28.1 C62.9 28.5 62.6 29 62.4 29.3 C62.2 29.6 62 30.1 61.9 30.4 C61.9 30.6 61.7 30.9 61.6 31 C61.4 31.1 61.2 31.6 61 32.1 C60.8 32.7 60.5 33.2 60.4 33.3 C60.3 33.5 60.1 34 59.9 34.5 C59.8 34.9 59.6 35.4 59.5 35.4 C59.4 35.5 59.2 35.9 59.1 36.4 C58.9 36.9 58.7 37.5 58.5 37.8 C58.4 38 58.1 38.7 57.9 39.2 C57 41.6 56.8 42.1 55.9 43 C53.5 45.4 48.8 44.4 48 41.3 C47.9 40.9 47.6 40.3 47.4 39.9 C47.2 39.5 47 39 47 38.8 C47 38.6 46.8 38.1 46.6 37.7 C46.4 37.3 46.1 36.6 46 36.2 C45.9 35.8 45.7 35.2 45.6 35 C45.4 34.8 45.1 34.1 44.9 33.5 C44.1 31.1 43.8 30.4 43.4 29.6 C43.2 29.1 43 28.7 43 28.5 C43 28.4 42.8 27.8 42.5 27.2 C42.2 26.7 42 26.1 42 26 C42 25.9 41.8 25.3 41.5 24.7 C41.2 24.2 41 23.6 41 23.5 C41 23.4 40.8 22.9 40.7 22.6 C40.5 22.2 40.2 21.5 40.1 21.1 C39.2 18.2 38.5 17.8 37.6 19.7 C36.6 21.5 36 22.9 36 23.1 C36 23.2 35.7 23.8 35.4 24.5 C35.1 25.2 34.6 26.1 34.4 26.6 C34.2 27 33.8 27.9 33.5 28.5 C33.3 29.1 33 29.8 32.9 30 C32.8 30.2 32.6 30.6 32.5 30.8 C32.3 31 32.2 31.3 32.2 31.4 C32.2 31.6 31.3 33.6 30.4 35.2 C30.2 35.6 30 36.1 29.9 36.3 C29.8 36.6 29.7 36.9 29.5 37.2 C29.3 37.4 29.1 37.9 29 38.2 C28.9 38.6 28.6 39.1 28.5 39.3 C28.3 39.5 28.2 39.8 28.2 39.9 C28.2 40.4 26.8 42.8 26.2 43.4 C23.7 45.8 18.8 44.1 17.9 40.6 C17.9 40.4 17.7 40.1 17.6 40 C17.5 39.9 17.2 39.4 17.1 38.9 C16.9 38.5 16.6 37.8 16.4 37.4 C16.2 36.9 16 36.5 16 36.4 C16 36.3 15.8 35.8 15.7 35.5 C15.3 34.8 14.9 33.7 14.2 31.5 C14 30.9 13.7 30.1 13.5 29.8 C13.3 29.4 13.1 28.7 13 28.3 C12.9 27.9 12.7 27.4 12.5 27.2 C12.3 26.9 12.1 26.4 12 26 C11.9 25.6 11.6 25 11.4 24.6 C11.2 24.1 11 23.7 11 23.6 C11 23.4 10.8 22.9 10.5 22.4 C10.2 21.9 10 21.3 10 21.2 C10 21 9.8 20.6 9.6 20.1 C9.4 19.7 9.1 19.1 9 18.8 C8.9 18.4 8.6 17.8 8.4 17.4 C8.2 16.9 8 16.5 8 16.3 C8 16.2 7.8 15.6 7.5 15.1 C7.2 14.6 7 14.1 7 13.9 C7 13.8 6.8 13.4 6.6 12.9 C6.4 12.5 6.1 11.9 6 11.5 C5.9 11.1 5.7 10.6 5.5 10.3 C5.3 10.1 5.1 9.6 5 9.2 C4.9 8.8 4.7 8.2 4.6 8 C4.4 7.8 4.2 7.2 4 6.7 C3.8 6.2 3.6 5.6 3.4 5.4 C1.8 2.9 2.2 2.6 7.5 2.6 C12.6 2.6 12.7 2.7 13 3.7 C13.1 4.1 13.3 4.6 13.5 4.8 C13.7 5.1 13.9 5.6 14 5.9 C14.1 6.3 14.4 7 14.6 7.4 C14.8 7.8 15 8.2 15 8.3 C15 8.5 15.2 9 15.5 9.6 C15.8 10.1 16 10.7 16 10.8 C16 11 16.2 11.5 16.5 12 C16.8 12.5 17 13 17 13.2 C17 13.3 17.2 13.8 17.4 14.2 C17.6 14.6 17.9 15.3 18 15.7 C18.1 16.1 18.3 16.6 18.5 16.8 C18.7 17.1 18.9 17.6 19 17.9 C19.1 18.3 19.4 19 19.6 19.4 C19.8 19.8 20 20.2 20 20.3 C20 20.5 20.2 21 20.5 21.6 C20.8 22.1 21 22.7 21 22.8 C21 23 21.2 23.5 21.5 24 C21.8 24.5 22 25 22 25.1 C22 25.7 23.2 27.8 23.5 27.8 C23.8 27.8 24.7 26.5 24.9 25.8 C25 25.6 25.3 24.9 25.6 24.4 C25.9 23.8 26.2 23.2 26.2 23.1 C26.2 23 26.3 22.7 26.5 22.5 C26.6 22.3 26.9 21.8 27 21.4 C27.1 21.1 27.4 20.5 27.6 20.2 C27.8 19.9 28 19.5 28 19.4 C28 19.3 28.2 18.7 28.5 18.2 C28.8 17.7 29.1 17 29.2 16.7 C29.4 16.3 29.6 16 29.6 15.8 C30 15.3 31.2 12.7 31.2 12.6 C31.2 12.5 31.3 12.2 31.5 12 C31.6 11.8 31.9 11.3 32 10.9 C32.1 10.5 32.3 10.1 32.4 10 C32.6 9.8 32.8 9.3 33 8.8 C33.2 8.3 33.4 7.7 33.6 7.5 C33.7 7.3 33.9 6.8 34 6.5 C34.1 6.1 34.4 5.6 34.6 5.2 C34.8 4.9 35 4.6 35 4.5 C35 4.2 36.6 3.1 37.5 2.9 C41 2.1 42.6 3.2 44 7.5 C44.2 8 44.4 8.6 44.5 8.8 C44.7 9.1 44.9 9.6 45 10 C45.1 10.4 45.3 10.9 45.4 11.1 C45.6 11.3 45.9 12 46.1 12.6 C47 15.2 47.3 16.1 47.7 16.7 C47.8 17.1 48 17.5 48 17.7 C48 17.8 48.2 18.4 48.5 18.9 C48.8 19.5 49 20 49 20.2 C49 20.3 49.2 20.8 49.4 21.3 C49.8 22 49.9 22.4 50.9 25.2 C51.7 27.3 52.5 27.7 53.2 26.3 C53.4 25.9 53.7 25.2 54 24.8 C54.2 24.4 54.6 23.6 54.9 23.1 C55.2 22.7 55.5 22.1 55.6 22 C55.8 21.8 56 21.5 56.1 21.4 C56.4 20.8 57.3 19.4 57.6 19.1 C57.7 18.9 58.1 18.4 58.4 18 C58.7 17.7 59.2 17 59.5 16.6 C60.1 15.7 60.8 14.9 61.6 14.1 C61.9 13.8 62.4 13.2 62.8 12.8 C63.4 12.2 64.5 11.1 66.2 9.6 C66.7 9.2 67.8 8.4 69.1 7.5 C69.4 7.3 69.8 7 70.2 6.7 C70.5 6.5 71.1 6.2 71.5 6 C71.9 5.8 72.4 5.5 72.5 5.4 C72.6 5.3 73 5.1 73.4 5 C73.8 4.9 74.3 4.7 74.6 4.5 C74.9 4.3 75.4 4.1 75.8 4 C76.2 3.9 76.9 3.7 77.4 3.5 C79.4 2.7 85.9 2.5 107.9 2.8 C115.3 2.9 116 2.9 116.5 3.2 C116.8 3.4 117.4 3.7 117.8 3.9 C118.8 4.4 120.5 6.1 120.9 7 C121.7 9 121.8 9.4 121.9 10.5 C122.2 14.2 120.4 18.5 117.3 21.7 L116 23 L116.1 23.8 C116.1 24.2 116.3 25 116.5 25.4 C117.5 27.6 116.9 33.6 115.5 35.7 C115.4 35.9 115.1 36.3 115 36.7 C113.1 40.2 111 42.6 109.3 43.1 C109.1 43.2 108.8 43.3 108.6 43.5 C107.6 44.4 105.6 44.5 96.4 44.6 L87.7 44.7 L87 44.3 C84.3 43 83 39.8 84.3 37.8 C84.5 37.5 84.8 37 84.9 36.8 C86 34.8 86.6 34.7 95.9 34.7 C105.1 34.7 104.1 34.9 106.4 31.9 C107.9 29.9 107.8 27 106.2 27 C105.7 27 85.5 27 85.2 27 C85.1 27 84.7 27.3 84.3 27.6 C83.7 28.2 83.2 28.7 81.8 30.7 C81.3 31.3 80.4 32.8 79.9 33.8 C79.7 34.1 79.5 34.6 79.4 34.8 C79.1 35.2 78.3 37.1 78 38.2 C77.8 38.8 77.5 39.7 77.4 40.2 C77.2 40.8 77 41.8 76.9 42.4 C76.6 44.3 76.6 44.3 71.9 44.4 C69.8 44.5 67.9 44.5 67.8 44.6 C67.7 44.6 67.3 44.5 67 44.4 Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. PONTE COM O BOOTSTRAP 5.3
   O painel (style#wc-theme-color, impresso DEPOIS desta folha) é quem define
   --bs-primary, --bs-secondary, --bs-body-bg, --bs-body-color, --bs-link-color
   e --bs-border-color; zz-wey-palette.css dá os defaults. Aqui NÃO se redefine
   nenhum deles — só o que o painel não conhece: fonte, anel de foco, raios e os
   tokens do tema que precisam viver em :root para trocar no escuro.
   ========================================================================== */

:root, [data-bs-theme='light'] {
  --bs-body-font-family: var(--wb-font-body);
  --bs-body-font-size: var(--wb-fs-base);
  --bs-body-line-height: var(--wb-lh-base);

  --bs-border-radius: var(--wb-radius-md);
  --bs-border-radius-sm: var(--wb-radius-sm);
  --bs-border-radius-lg: var(--wb-radius-lg);
  --bs-border-radius-xl: var(--wb-radius-xl);

  --bs-focus-ring-color: color-mix(in srgb, var(--wb-green-700) 45%, transparent);
  --bs-focus-ring-width: 3px;

  /* Tokenizados para não precisarem de seletor descendente no escuro */
  --wb-badge-bg: var(--wb-green-100);
  --wb-badge-fg: var(--wb-green-700);
  --wb-icone-bg: var(--wb-green-100);
  --wb-icone-fg: var(--wb-green-700);
}

/* Contextos escuros. Antes isto dependia de o autor lembrar de escrever
   data-bs-theme="dark" na section; quem esquecia recebia número verde-900
   sobre fundo verde-900 (1,1:1). As classes de bloco entram na mesma lista
   e passam a carregar os próprios tokens.
   No escuro a voz secundária é o verde-300 (8,75:1), não um cinza. É o que
   mantém o bloco dentro da marca sem inventar uma quarta cor.
   Aqui PODE-SE redefinir --bs-body-color/--bs-link-color: é escopo de bloco,
   não :root — o painel continua mandando no claro. */
[data-bs-theme='dark'],
.wb-hero, .wb-section--anchor, .wb-section--black, .wb-footer {
  --bs-body-color: var(--wb-bone);
  --bs-body-bg: var(--wb-green-900);
  --bs-border-color: rgba(var(--wb-bone-rgb), .16);
  --bs-link-color: var(--wb-green-300);
  --bs-link-hover-color: var(--wb-bone);
  --bs-emphasis-color: var(--wb-bone);
  --bs-danger: var(--wb-danger-on-dark);
  --wb-surface: var(--wb-green-900);
  --wb-surface-raised: var(--wb-green-800);
  --wb-surface-sunken: var(--wb-green-950);
  --wb-border: rgba(var(--wb-bone-rgb), .16);
  --wb-border-strong: rgba(var(--wb-bone-rgb), .30);
  --wb-text: var(--wb-bone);
  --wb-heading: var(--wb-bone);
  --wb-text-muted: var(--wb-green-300);
  --wb-text-accent: var(--wb-green-300);
  --wb-shadow-lg: 0 18px 48px -14px rgba(0,0,0,.7);
  --wb-badge-bg: rgba(var(--wb-bone-rgb), .12);
  --wb-badge-fg: var(--wb-bone);
  --wb-icone-bg: rgba(var(--wb-bone-rgb), .10);
  --wb-icone-fg: var(--wb-green-300);
}

/* ==========================================================================
   3. BASE E TIPOGRAFIA
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--wb-font-body);
  color: var(--wb-text);
  background-color: var(--wb-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O index.php raiz imprime `*{font-family:'<SITE_FONT_NAME>'}` (a fonte do
   painel) ANTES desta folha. Por ser seletor universal (especificidade zero) a
   fonte do painel vence a herança do body em todo elemento sem font-family
   própria — p, li, a, td, input… — e o corpo do site sairia na fonte errada.
   :where() zera a especificidade: mesma arma, ordem posterior. Tudo dentro do
   wrapper do tema volta a herdar; os glifos de ícone (.bi e o Nioicon dos
   widgets do core) ficam de fora porque a fonte deles É o ícone. */
:where(.wc-wey *:not(.bi, .icon, .ni, [class^="bi-"], [class*=" bi-"])) { font-family: inherit; }

h1, h2, h3, .wb-display, .wb-h1, .wb-h2, .wb-h3 {
  font-family: var(--wb-font-display);
  font-weight: 700;
  line-height: var(--wb-lh-snug);
  letter-spacing: -.028em;
  /* Segue o token de título do contexto, não uma cor fixa. Com a cor
     travada em verde-900 o h1 da hero saía verde sobre verde (1,1:1); no
     escuro --wb-heading vira o off-white junto com --wb-text. */
  color: var(--wb-heading);
  text-wrap: balance;
}

/* Entrelinha explícita: o dashlite.css grava 1.1 em h1–h6 e o original herda
   o 1.2 do Bootstrap — sem isto cada .wb-etapa__t saía 2px mais baixo. */
h4, h5, h6 { font-family: var(--wb-font-body); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; color: var(--wb-heading); }

.wb-display { font-size: var(--wb-fs-display); line-height: var(--wb-lh-tight); letter-spacing: -.045em; }
h1, .wb-h1 { font-size: var(--wb-fs-h1); }
h2, .wb-h2 { font-size: var(--wb-fs-h2); }
h3, .wb-h3 { font-size: var(--wb-fs-h3); }
h4 { font-size: var(--wb-fs-h4); }

/* Link solto (fora de .wb-prose): o wc-agency.css pinta `a` com --ag-accent,
   que aqui É o verde-900 — link da cor do texto. Devolve a voz de apoio. */
a { color: var(--wb-text-accent); text-decoration: none; }
a:hover { color: var(--wb-green-800); }
[data-bs-theme='dark'] a:hover, .wb-hero a:hover, .wb-section--anchor a:hover, .wb-section--black a:hover { color: var(--wb-bone); }

.wb-lead {
  font-size: var(--wb-fs-lg); line-height: 1.58;
  color: var(--wb-text-muted); max-width: 60ch; text-wrap: pretty;
}
.wb-muted  { color: var(--wb-text-muted); }
.wb-accent { color: var(--wb-text-accent); }

/* Todo dado numérico em tabular. Carga e repetição são lidas em coluna:
   se o dígito muda de largura, a comparação entre semanas se perde. */
.wb-num, .wb-stat__value, .wb-serie__carga, table { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. ESTRUTURA
   ========================================================================== */

.wb-container { width: 100%; max-width: var(--wb-container); margin-inline: auto; padding-inline: var(--wb-space-5); }
.wb-container--narrow { max-width: 760px; }
.wb-section { padding-block: var(--wb-section-y); }

.wb-section--sunken { background: var(--wb-surface-sunken); }

/* Blocos âncora. O verde-600 tem 5,01:1 no off-white mas só 2,87:1 sobre a
   marca — quem fala no escuro é o verde-300. Redefinir o token aqui evita
   depender de o autor lembrar da regra. */
.wb-section--anchor { background: var(--wb-green-900); color: var(--wb-bone); }
.wb-section--black  { background: var(--wb-black);     color: var(--wb-bone); }

/* Âncora sob cabeçalho fixo. Escopado a seções e títulos — aplicar a todo
   [id] faria o navegador rolar também ao focar um input do formulário. */
section[id], article[id], [id].wb-section,
h1[id], h2[id], h3[id], :target { scroll-margin-top: var(--wb-anchor-offset); }

/* Sobrelinha. A regra vertical à esquerda cita o traço que sai do W no
   monograma; não é um traço decorativo genérico. */
.wb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--wb-space-3);
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--wb-text-accent); margin-bottom: var(--wb-space-4);
}
.wb-eyebrow::before { content:''; width:22px; height:1px; background: currentColor; flex:none; }

.wb-rule { height:1px; border:0; background: var(--wb-border); opacity:1; }

/* ==========================================================================
   5. MARCA — monograma e moldura de ícone
   ========================================================================== */

/* O monograma. Sempre em cor sólida herdada do contexto; nunca sobre foto
   sem o scrim do hero por baixo. Altura mínima de 18px: abaixo disso o vão
   entre os dois bojos do B fecha e a letra vira uma mancha. */
.wb-logo {
  display: block; flex: none;
  width: auto; height: 24px; aspect-ratio: 125 / 47;
  background-color: currentColor;
  -webkit-mask: var(--wb-logo-mask) center / contain no-repeat;
          mask: var(--wb-logo-mask) center / contain no-repeat;
  color: var(--wb-text);
}
.wb-logo--sm { height: 18px; }
.wb-logo--lg { height: 40px; }
.wb-logo--xl { height: clamp(56px, 9vw, 96px); }
.wb-logo--bone { color: var(--wb-bone); }

/* --------------------------------------------------------------------------
   MOLDURA DE ÍCONE — três cantos redondos, um reto
   O monograma mistura duas gramáticas: os vértices do W são angulares e
   cortados a bisel; os bojos do B são inteiramente redondos. A moldura
   repete essa mistura em vez de ser mais um retângulo arredondado.
   -------------------------------------------------------------------------- */

.wb-icone {
  position: relative; flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--wb-radius-cut);
  background: var(--wb-icone-bg);
  color: var(--wb-icone-fg);
  transition: background var(--wb-dur-base) var(--wb-ease),
              color var(--wb-dur-base) var(--wb-ease);
}
.wb-icone--solid { background: var(--wb-text); color: var(--wb-surface); }
.wb-icone--line  { background: transparent; border: 1px solid var(--wb-border-strong); color: var(--wb-icone-fg); }
.wb-icone--lg { width: 62px; height: 62px; }
.wb-icone--sm { width: 34px; height: 34px; border-radius: var(--wb-radius-md) var(--wb-radius-md) var(--wb-radius-md) 2px; }

/* ==========================================================================
   6. BOTÕES
   (A devolução da COR contra o `.btn{color:#fff !important}` do reset.css do
   core mora no bloco I-a, no fim do arquivo — precisa da mesma arma.)
   ========================================================================== */

.btn {
  /* inline-flex centra ícone e texto no mesmo eixo — o vertical-align do
     Bootstrap Icons deixa o glifo caído em relação ao texto do botão.
     O gap espaça ícone e rótulo mesmo quando o rótulo é nó de texto solto,
     caso em que seletores :first-child/:last-child não enxergam nada. */
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  --bs-btn-font-family: var(--wb-font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: var(--wb-fs-sm);
  /* O dashlite.css fixa --bs-btn-line-height em 1.25rem (20px) e todo botão
     saía 4px mais baixo que o original (Bootstrap puro: 1.5). */
  --bs-btn-line-height: 1.5;
  --bs-btn-padding-y: .8rem;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-border-radius: var(--wb-radius-pill);
  letter-spacing: .005em;
  transition: transform var(--wb-dur-fast) var(--wb-ease),
              box-shadow var(--wb-dur-base) var(--wb-ease),
              background-color var(--wb-dur-fast) linear,
              color var(--wb-dur-fast) linear;
}
.btn:active { transform: translateY(1px); }

/* PRIMÁRIO — verde da marca preenchendo, off-white escrevendo (14,4:1).
   Aqui não é preciso hairline: o preenchimento sozinho já tem 14,4:1 contra
   o fundo, muito acima dos 3:1 da WCAG 1.4.11. É a vantagem de ter uma cor
   de marca escura — uma marca clara (um ouro, um amarelo) precisaria de um
   fio de contorno só para o botão existir sobre o branco. */
.btn-wb-primary {
  --bs-btn-color: var(--wb-bone);
  --bs-btn-bg: var(--wb-green-900);
  --bs-btn-border-color: var(--wb-green-900);
  --bs-btn-hover-color: var(--wb-bone);
  --bs-btn-hover-bg: var(--wb-green-800);
  --bs-btn-hover-border-color: var(--wb-green-800);
  --bs-btn-active-bg: var(--wb-green-950);
  --bs-btn-active-border-color: var(--wb-green-950);
  --bs-btn-active-color: var(--wb-bone);
  --bs-btn-disabled-bg: var(--wb-green-200);
  --bs-btn-disabled-border-color: var(--wb-green-200);
  --bs-btn-disabled-color: var(--wb-green-500);
}
.btn-wb-primary {
  position: relative; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 46%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(var(--wb-green-900-rgb), .2);
}
.btn-wb-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 14px 30px -10px rgba(var(--wb-green-900-rgb), .5),
    0 0 0 1px color-mix(in srgb, var(--wb-green-500) 30%, transparent);
}
.btn-wb-primary:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(var(--wb-green-900-rgb), .25); }
/* Facho de luz que varre o botão no hover — o único brilho da página,
   reservado para a ação primária. */
.btn-wb-primary::after {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: -70%; width: 55%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); opacity: 0; pointer-events: none;
  transition: left var(--wb-dur-slow) var(--wb-ease), opacity var(--wb-dur-fast) linear;
}
.btn-wb-primary:hover::after { left: 130%; opacity: 1; }

/* No bloco âncora o primário inverte: off-white preenchendo, verde escrevendo. */
[data-bs-theme='dark'] .btn-wb-primary,
.wb-hero .btn-wb-primary, .wb-footer .btn-wb-primary,
.wb-section--anchor .btn-wb-primary,
.wb-section--black .btn-wb-primary {
  --bs-btn-color: var(--wb-green-900);
  --bs-btn-bg: var(--wb-bone);
  --bs-btn-border-color: var(--wb-bone);
  --bs-btn-hover-color: var(--wb-green-900);
  --bs-btn-hover-bg: var(--wb-white);
  --bs-btn-hover-border-color: var(--wb-white);
  --bs-btn-active-bg: var(--wb-green-200);
  --bs-btn-active-border-color: var(--wb-green-200);
  --bs-btn-active-color: var(--wb-green-900);
  /* Desabilitado sobre superfície escura: translúcido, lendo como "ainda
     falta preencher" em vez de botão desbotado. */
  --bs-btn-disabled-bg: rgba(var(--wb-bone-rgb), .14);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-color: rgba(var(--wb-bone-rgb), .55);
}
[data-bs-theme='dark'] .btn-wb-primary:hover,
.wb-hero .btn-wb-primary:hover, .wb-footer .btn-wb-primary:hover,
.wb-section--anchor .btn-wb-primary:hover,
.wb-section--black .btn-wb-primary:hover {
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--wb-green-950) 85%, transparent), 0 0 24px -6px rgba(var(--wb-bone-rgb), .25);
}
/* Sobre o botão claro, o facho branco some — vira uma passagem de sombra. */
[data-bs-theme='dark'] .btn-wb-primary::after,
.wb-hero .btn-wb-primary::after, .wb-footer .btn-wb-primary::after,
.wb-section--anchor .btn-wb-primary::after,
.wb-section--black .btn-wb-primary::after {
  background: linear-gradient(100deg, rgba(var(--wb-green-900-rgb), 0) 0%, rgba(var(--wb-green-900-rgb), .14) 50%, rgba(var(--wb-green-900-rgb), 0) 100%);
}

/* CONTORNO — secundária */
.btn-wb-outline {
  --bs-btn-color: var(--wb-green-800);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--wb-border-strong);
  --bs-btn-hover-color: var(--wb-green-900);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--wb-green-700);
  --bs-btn-active-bg: var(--wb-green-100);
  --bs-btn-active-color: var(--wb-green-900);
  --bs-btn-active-border-color: var(--wb-green-700);
}
.btn-wb-outline:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(var(--wb-green-900-rgb), .35); }
.btn-wb-outline:active { transform: translateY(1px); box-shadow: none; }

[data-bs-theme='dark'] .btn-wb-outline,
.wb-hero .btn-wb-outline, .wb-footer .btn-wb-outline,
.wb-section--anchor .btn-wb-outline,
.wb-section--black .btn-wb-outline {
  --bs-btn-color: var(--wb-bone);
  --bs-btn-border-color: rgba(var(--wb-bone-rgb), .34);
  --bs-btn-hover-color: var(--wb-green-900);
  --bs-btn-hover-bg: var(--wb-bone);
  --bs-btn-hover-border-color: var(--wb-bone);
  --bs-btn-active-bg: var(--wb-green-200);
  --bs-btn-active-color: var(--wb-green-900);
  --bs-btn-bg: rgba(var(--wb-bone-rgb), .05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
[data-bs-theme='dark'] .btn-wb-outline:hover,
.wb-hero .btn-wb-outline:hover, .wb-footer .btn-wb-outline:hover,
.wb-section--anchor .btn-wb-outline:hover,
.wb-section--black .btn-wb-outline:hover {
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--wb-green-950) 80%, transparent);
}

/* Micro-movimento dos ícones dentro de botões */
.btn .bi { transition: transform var(--wb-dur-base) var(--wb-ease); }
.btn:hover .bi-arrow-right { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .btn .bi { transition: none; }
  .btn-wb-primary:hover, .btn-wb-outline:hover { transform: none; }
  .btn-wb-primary:hover::after { opacity: 0; }
}

/* TEXTO — terciária, para "ver todos", "voltar" */
.btn-wb-ghost {
  --bs-btn-color: var(--wb-green-700);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--wb-green-900);
  --bs-btn-hover-bg: var(--wb-green-100);
  --bs-btn-active-bg: var(--wb-green-200);
  --bs-btn-active-color: var(--wb-green-900);
}
[data-bs-theme='dark'] .btn-wb-ghost,
.wb-hero .btn-wb-ghost, .wb-footer .btn-wb-ghost,
.wb-section--anchor .btn-wb-ghost, .wb-section--black .btn-wb-ghost {
  --bs-btn-color: var(--wb-green-300);
  --bs-btn-hover-color: var(--wb-bone);
  --bs-btn-hover-bg: rgba(var(--wb-bone-rgb), .08);
  --bs-btn-active-bg: rgba(var(--wb-bone-rgb), .14);
  --bs-btn-active-color: var(--wb-bone);
}

/* WHATSAPP — canal real de entrada da consultoria, merece token próprio.
   #128C4A tem 3,80:1 no off-white: passa nos 3:1 de componente, mas o texto
   dentro dele é branco (4,32:1 contra o preenchimento), nunca o off-white.
   Hover e ativo escurecem a marca por color-mix em vez de hex fixo. */
.btn-wb-whats {
  --bs-btn-color: var(--wb-whats-fg);
  --bs-btn-bg: var(--wb-whats);
  --bs-btn-border-color: var(--wb-whats);
  --bs-btn-hover-color: var(--wb-whats-fg);
  --bs-btn-hover-bg: color-mix(in srgb, var(--wb-whats) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--wb-whats) 88%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--wb-whats) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--wb-whats) 78%, #000);
  --bs-btn-active-color: var(--wb-whats-fg);
}

.btn-lg { --bs-btn-padding-y: 1rem; --bs-btn-padding-x: 2rem; --bs-btn-font-size: var(--wb-fs-base); }
.btn-sm { --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1.05rem; --bs-btn-font-size: var(--wb-fs-xs); }

.wb-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: var(--wb-fs-sm);
  color: var(--wb-text-accent); text-decoration: none;
}
.wb-link-arrow svg { transition: transform var(--wb-dur-base) var(--wb-ease); }
.wb-link-arrow:hover { color: var(--wb-green-800); }
.wb-link-arrow:hover svg { transform: translateX(4px); }
[data-bs-theme='dark'] .wb-link-arrow:hover { color: var(--wb-bone); }

/* ==========================================================================
   7. A SÉRIE — assinatura do sistema
   --------------------------------------------------------------------------
   Todo sistema tem o objeto que o público reconhece antes de ler o rótulo.
   Aqui é o registro de série — o artefato que a metodologia produz.
   Barra superior identifica o exercício; o número grande é carga × reps; a
   escada abaixo é a proximidade da falha.
   Regra: a série só aparece onde há dado real de aluna. Fora disso é adesivo.
   ========================================================================== */

.wb-serie {
  display: flex; flex-direction: column;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-md);
  overflow: hidden; min-width: 210px;
  box-shadow: var(--wb-shadow-sm);
}
.wb-serie__bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--wb-green-900); padding: 5px 11px;
  font-family: var(--wb-font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wb-green-300);
}
.wb-serie__bar strong { color: var(--wb-bone); font-weight: 500; }
.wb-serie__body { padding: .7rem .9rem .8rem; }
.wb-serie__carga {
  font-family: var(--wb-font-mono); font-weight: 700;
  font-size: clamp(1.45rem, 3.6vw, 1.9rem);
  letter-spacing: -.02em; line-height: 1;
  color: var(--wb-green-900);
}
.wb-serie__carga small { font-size: .5em; font-weight: 400; color: var(--wb-green-600); letter-spacing: .04em; }
.wb-serie__meta {
  font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wb-green-600); margin-top: .45rem;
}
[data-bs-theme='dark'] .wb-serie, .wb-serie[data-bs-theme='dark'] { background: var(--wb-green-800); border-color: var(--wb-border); }
[data-bs-theme='dark'] .wb-serie__bar, .wb-serie[data-bs-theme='dark'] .wb-serie__bar { background: var(--wb-green-950); }
[data-bs-theme='dark'] .wb-serie__carga, .wb-serie[data-bs-theme='dark'] .wb-serie__carga { color: var(--wb-bone); }
[data-bs-theme='dark'] .wb-serie__carga small,
[data-bs-theme='dark'] .wb-serie__meta,
.wb-serie[data-bs-theme='dark'] .wb-serie__carga small,
.wb-serie[data-bs-theme='dark'] .wb-serie__meta { color: var(--wb-green-300); }

/* Entrada de série: mesma peça, editável (diário de treino / diagnóstico) */
.wb-serie__input {
  font-family: var(--wb-font-mono); font-weight: 700;
  font-size: clamp(1.45rem, 3.6vw, 1.9rem); letter-spacing: -.02em;
  color: var(--wb-green-900); background: transparent; border: 0;
  width: 100%; padding: 0;
}
.wb-serie__input::placeholder { color: var(--wb-green-300); }
.wb-serie__input:focus { outline: 0; }
.wb-serie:focus-within { border-color: var(--wb-green-700); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-700) 22%, transparent), var(--wb-shadow-sm); }

/* --- Escada de intensidade -----------------------------------------------
   O sistema não tem cor de alerta para "pesado". Intensidade é profundidade:
   quanto mais perto da falha, mais escuro o degrau. Cinco degraus = RIR 4→0.
   Cada degrau também muda de altura, então o dado sobrevive à daltonia e ao
   modo de alto contraste. (O helper wc_wey_escada() marca os degraus com
   data-on; o zz-wey.js os acende em cascata com .is-on.) */
.wb-escada { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.wb-escada__d {
  width: 8px; border-radius: 2px 2px 1px 1px;
  background: var(--wb-green-200);
  transition: background var(--wb-dur-base) var(--wb-ease);
}
.wb-escada__d:nth-child(1) { height: 40%; }
.wb-escada__d:nth-child(2) { height: 55%; }
.wb-escada__d:nth-child(3) { height: 70%; }
.wb-escada__d:nth-child(4) { height: 85%; }
.wb-escada__d:nth-child(5) { height: 100%; }
.wb-escada__d.is-on:nth-child(1) { background: var(--wb-green-400); }
.wb-escada__d.is-on:nth-child(2) { background: var(--wb-green-500); }
.wb-escada__d.is-on:nth-child(3) { background: var(--wb-green-600); }
.wb-escada__d.is-on:nth-child(4) { background: var(--wb-green-700); }
.wb-escada__d.is-on:nth-child(5) { background: var(--wb-green-900); }
[data-bs-theme='dark'] .wb-escada__d, .wb-serie[data-bs-theme='dark'] .wb-escada__d { background: rgba(var(--wb-bone-rgb), .14); }
[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(1), .wb-serie[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(1) { background: var(--wb-green-500); }
[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(2), .wb-serie[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(2) { background: var(--wb-green-400); }
[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(3), .wb-serie[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(3) { background: var(--wb-green-300); }
[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(4), .wb-serie[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(4) { background: var(--wb-green-200); }
[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(5), .wb-serie[data-bs-theme='dark'] .wb-escada__d.is-on:nth-child(5) { background: var(--wb-bone); }

/* ==========================================================================
   8. CARDS
   ========================================================================== */

.wb-card {
  position: relative; height: 100%;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-6);
  transition: transform var(--wb-dur-base) var(--wb-ease),
              box-shadow var(--wb-dur-base) var(--wb-ease),
              border-color var(--wb-dur-base) var(--wb-ease);
}
.wb-card:hover { transform: translateY(-3px); border-color: var(--wb-green-400); box-shadow: var(--wb-shadow-lg); }
.wb-card__title { font-size: var(--wb-fs-h4); font-weight: 600; margin: var(--wb-space-4) 0 var(--wb-space-2); }
.wb-card__text  { color: var(--wb-text-muted); font-size: var(--wb-fs-sm); margin: 0; }
[data-bs-theme='dark'] .wb-card:hover { border-color: var(--wb-green-500); }

/* PILAR — técnica, progressão, intensidade. São três e sempre serão três:
   a numeração é real, não decorativa. */
.wb-pilar {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-cut);   /* o mesmo canto cortado dos planos */
  padding: var(--wb-space-5);
  transition: border-color var(--wb-dur-base) var(--wb-ease),
              box-shadow var(--wb-dur-base) var(--wb-ease),
              transform var(--wb-dur-base) var(--wb-ease);
}
.wb-pilar:hover { border-color: var(--wb-green-400); box-shadow: var(--wb-shadow-lg); transform: translateY(-3px); }
.wb-pilar:hover .wb-icone { background: var(--wb-text); color: var(--wb-surface); }
/* O número em escala de marca-d'água: numeração editorial, não rótulo.
   Primeiro filho do card, então tudo que vem depois pinta por cima. */
.wb-pilar__agua {
  position: absolute; top: -.85rem; right: .5rem;
  font-family: var(--wb-font-display); font-weight: 700; font-size: 4.75rem;
  letter-spacing: -.05em; line-height: 1; color: var(--wb-green-100);
  user-select: none;
  transition: color var(--wb-dur-base) var(--wb-ease);
}
.wb-pilar:hover .wb-pilar__agua { color: var(--wb-green-200); }
.wb-pilar__title { font-size: var(--wb-fs-h4); font-weight: 600; margin: var(--wb-space-4) 0 .35rem; line-height: 1.3; }
.wb-pilar__text  { font-size: var(--wb-fs-sm); color: var(--wb-text-muted); margin: 0 0 var(--wb-space-4); }
/* A régua de rodapé amarra o pilar ao instrumento que o mede — é a resposta
   curta à pergunta "como isso é acompanhado na prática?". */
.wb-pilar__medida {
  margin-top: auto; margin-bottom: 0; padding-top: var(--wb-space-4);
  border-top: 1px solid var(--wb-border);
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wb-text-muted);
}
.wb-pilar__medida .bi { font-size: 12px; color: var(--wb-text-accent); }

/* FECHO DAS CAUSAS — a conclusão da seção de diagnóstico em faixa própria.
   As três causas usam o cartão-pilar (mesmo componente do método, com
   "Sinal" no rodapé em vez de "Critério"); o fecho inverte para o verde-900
   e aponta o caminho — o único elemento escuro da seção. */
.wb-causa-fecho {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wb-space-4);
  padding: var(--wb-space-5) var(--wb-space-6);
  background:
    radial-gradient(90% 120% at 12% -20%, color-mix(in srgb, var(--wb-green-500) 35%, transparent) 0%, transparent 58%),
    var(--wb-green-900);
  border-radius: var(--wb-radius-cut);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--wb-green-950) 55%, transparent);
}
.wb-causa-fecho__n {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--wb-green-300);
  margin-bottom: .55rem;
}
.wb-causa-fecho__n .bi { font-size: 12px; }
.wb-causa-fecho__t { font-family: var(--wb-font-display); font-weight: 700; font-size: var(--wb-fs-h3); letter-spacing: -.02em; color: var(--wb-bone); margin: 0 0 .3rem; }
.wb-causa-fecho__d { font-size: var(--wb-fs-sm); color: var(--wb-green-300); margin: 0; max-width: 58ch; }
.wb-causa-fecho .wb-link-arrow { color: var(--wb-green-300); flex: none; }
.wb-causa-fecho .wb-link-arrow:hover { color: var(--wb-bone); }

/* PLANO — cartão de oferta */
.wb-plano {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-cut);   /* canto cortado: a assinatura da marca */
  padding: var(--wb-space-6);
  transition: border-color var(--wb-dur-base) var(--wb-ease),
              box-shadow var(--wb-dur-base) var(--wb-ease),
              transform var(--wb-dur-base) var(--wb-ease);
}
.wb-plano:hover { border-color: var(--wb-green-400); box-shadow: var(--wb-shadow-lg); transform: translateY(-4px); }

/* O plano em destaque inverte o bloco inteiro em vez de ganhar uma cor de
   realce — o sistema não tem cor de realce. Ele redefine os tokens de
   superfície, então tudo dentro (selo, moldura, ícone da lista) acompanha. */
.wb-plano--destaque {
  background: var(--wb-green-900);
  border-color: var(--wb-green-900);
  --wb-surface: var(--wb-green-900);
  --wb-text: var(--wb-bone);
  --wb-heading: var(--wb-bone);
  --wb-text-muted: var(--wb-green-300);
  --wb-text-accent: var(--wb-green-300);
  --wb-badge-bg: rgba(var(--wb-bone-rgb), .14);
  --wb-badge-fg: var(--wb-bone);
  --wb-border: rgba(var(--wb-bone-rgb), .16);
  --wb-border-strong: rgba(var(--wb-bone-rgb), .30);
  color: var(--wb-bone);
  overflow: hidden;
  background-image:
    radial-gradient(120% 80% at 28% -8%, color-mix(in srgb, var(--wb-green-500) 35%, transparent) 0%, transparent 58%);
  box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--wb-green-950) 60%, transparent), var(--wb-shadow-lg);
}
/* A rampa da marca no teto do card em destaque — a mesma régua que fecha a
   hero e abre o rodapé, aqui apontando o formato mais escolhido. */
.wb-plano--destaque::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--wb-rampa-grad);
}
.wb-plano--destaque:hover { border-color: var(--wb-green-900); }

/* Chips de checagem: o ícone da lista ganha corpo em vez de flutuar solto */
.wb-plano__lista .bi {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--wb-green-100); color: var(--wb-green-700);
}
.wb-plano--destaque .wb-plano__lista .bi { background: rgba(var(--wb-bone-rgb), .14); color: var(--wb-green-300); }

@media (prefers-reduced-motion: reduce) { .wb-plano:hover, .wb-pilar:hover { transform: none; } }

.wb-plano__topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 24px; }
.wb-plano__modo {
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--wb-text-muted);
}
.wb-plano__nome {
  font-family: var(--wb-font-display); font-weight: 700;
  font-size: var(--wb-fs-h3); letter-spacing: -.025em;
  color: var(--wb-text); margin: var(--wb-space-3) 0 0;
}
/* Uma linha dizendo para quem o plano é. Sem ela o visitante compara preço
   contra preço, que é a única leitura que não ajuda ninguém a escolher. */
.wb-plano__para { font-size: var(--wb-fs-sm); color: var(--wb-text-muted); margin: .5rem 0 0; min-height: 3.1em; }

/* O valor não é publicado. O slot que o preço ocuparia passa a carregar o
   formato do trabalho — duração do ciclo, frequência do ajuste, modalidade.
   É o que diferencia os planos entre si quando o número não está lá, e evita
   que o card vire uma lista solta encostada no título.
   Altura mínima para as listas dos três começarem na mesma linha. */
.wb-plano__formato { margin: var(--wb-space-5) 0 0; padding-top: var(--wb-space-4); border-top: 1px solid var(--wb-border); min-height: 5.6rem; }
.wb-plano__cond { display: block; font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--wb-text-muted); }
.wb-plano__fmt { font-size: var(--wb-fs-base); font-weight: 500; color: var(--wb-text); margin: .5rem 0 0; line-height: 1.4; }

.wb-plano__lista { list-style: none; padding: 0; margin: var(--wb-space-5) 0; display: grid; gap: .65rem; }
.wb-plano__lista li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--wb-fs-sm); color: var(--wb-text-muted); }
.wb-plano__lista svg { flex: none; margin-top: .18rem; color: var(--wb-text-accent); }
.wb-plano__lista li em { font-style: normal; color: var(--wb-text); font-weight: 500; }
.wb-plano .btn { margin-top: auto; }
.wb-plano__nota { font-size: var(--wb-fs-xs); color: var(--wb-text-muted); margin: var(--wb-space-3) 0 0; text-align: center; }

/* DEPOIMENTO */
.wb-depo {
  height: 100%; background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-5);
}
.wb-depo__texto { font-size: var(--wb-fs-base); margin: 0 0 var(--wb-space-4); text-wrap: pretty; }
.wb-depo__quem { display: flex; align-items: center; gap: .85rem; font-size: var(--wb-fs-sm); }
.wb-depo__nome { font-weight: 600; }
.wb-depo__tempo { font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); color: var(--wb-text-muted); letter-spacing: .06em; }
/* A moldura de ícone da marca em miniatura: três cantos redondos, um reto.
   Enquanto os depoimentos são anônimos, a caixa leva a silhueta; quando
   houver foto autorizada, basta pôr um <img class="wb-depo__foto"> no lugar. */
.wb-depo__foto {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--wb-radius-md) var(--wb-radius-md) var(--wb-radius-md) 2px;
  background:
    radial-gradient(90% 70% at 30% 10%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(170deg, var(--wb-green-100) 0%, var(--wb-green-300) 100%);
  color: var(--wb-green-700); font-size: 1.5rem; line-height: 0;
  object-fit: cover;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 0 1px var(--wb-border),
    0 4px 10px -4px rgba(var(--wb-green-900-rgb), .3);
}

/* ==========================================================================
   9. NÚMEROS
   ========================================================================== */

.wb-stat__value {
  font-family: var(--wb-font-display); font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  line-height: 1; letter-spacing: -.05em;
  color: var(--wb-text);
}
.wb-stat__label {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs);
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--wb-text-muted); margin-top: var(--wb-space-2);
}

/* PROGRESSÃO — barra semana a semana. É a única "barra de progresso" da
   marca e mede carga, não conclusão de tarefa. */
.wb-prog { display: grid; gap: .55rem; }
.wb-prog__linha { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: .75rem; align-items: center; }
.wb-prog__sem { font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); letter-spacing: .1em; color: var(--wb-text-muted); text-transform: uppercase; }
.wb-prog__trilho { height: 8px; border-radius: var(--wb-radius-pill); background: var(--wb-green-100); overflow: hidden; }
.wb-prog__barra { height: 100%; border-radius: inherit; background: var(--wb-green-900); transition: width var(--wb-dur-slow) var(--wb-ease); }
.wb-prog__val { font-family: var(--wb-font-mono); font-size: var(--wb-fs-sm); font-weight: 500; color: var(--wb-text); }
[data-bs-theme='dark'] .wb-prog__trilho { background: rgba(var(--wb-bone-rgb), .14); }
[data-bs-theme='dark'] .wb-prog__barra { background: var(--wb-bone); }
/* A linha de fechamento do ciclo: o número que a leitura das barras entrega */
.wb-prog__delta {
  display: flex; align-items: center; gap: .5rem;
  margin: var(--wb-space-4) 0 0; padding-top: var(--wb-space-4);
  border-top: 1px solid var(--wb-border);
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wb-text);
}
.wb-prog__delta .bi { font-size: 12px; color: var(--wb-text-accent); }

/* ==========================================================================
   NA PRÁTICA — o quadro de dados da página
   --------------------------------------------------------------------------
   A malha técnica da hero volta aqui, porque esta é a seção onde o papel
   milimetrado vira conteúdo: séries, cargas e barras de ciclo. O card do
   ciclo carrega a rampa no teto — é a prova central da seção.
   (A máscara usa #000 → transparente: só o canal alfa importa, não é cor.)
   ========================================================================== */

.wb-pratica { position: relative; isolation: isolate; }
.wb-pratica::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--wb-bone-rgb), .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wb-bone-rgb), .04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(110% 100% at 72% 40%, #000 0%, rgba(0,0,0,.4) 48%, transparent 74%);
          mask-image: radial-gradient(110% 100% at 72% 40%, #000 0%, rgba(0,0,0,.4) 48%, transparent 74%);
}
.wb-pratica > .wb-container { position: relative; z-index: 1; }

.wb-serie {
  transition: transform var(--wb-dur-base) var(--wb-ease),
              box-shadow var(--wb-dur-base) var(--wb-ease);
}
.wb-serie:hover { transform: translateY(-3px); box-shadow: var(--wb-shadow-lg); }

.wb-card--prova { overflow: hidden; }
.wb-card--prova::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--wb-rampa-grad);
}
@media (prefers-reduced-motion: reduce) { .wb-serie:hover { transform: none; } }

/* ==========================================================================
   10. FORMULÁRIOS
   ========================================================================== */

.form-label {
  font-size: var(--wb-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--wb-green-700); margin-bottom: .4rem;
}
[data-bs-theme='dark'] .form-label { color: var(--wb-green-300); }
.form-control, .form-select {
  /* Raio e entrelinha EXPLÍCITOS: o dashlite.css grava `border-radius: 4px;
     line-height: 1.25rem` direto no seletor, então a variável --bs-border-radius
     nunca chegava a agir e o campo saía com 4px de canto e 46px de alto (o
     original tem 9px e 50px). */
  --bs-border-radius: var(--wb-radius-md);
  border-radius: var(--wb-radius-md);
  line-height: 1.5;
  border-color: var(--wb-border-strong);
  padding: .75rem 1rem; font-size: var(--wb-fs-base);
  background-color: var(--wb-surface-raised);
  color: var(--wb-text);
  transition: border-color var(--wb-dur-fast) linear, box-shadow var(--wb-dur-fast) linear;
}
/* A seta do <select>. O wc-agency.css escreve `background: var(--ag-surface)`
   em .form-select (e de novo no :focus) — o atalho apaga o background-image do
   chevron do Bootstrap e o select saía sem seta. Devolve a imagem (as
   variáveis são as do próprio dashlite.css) e o espaço à direita para ela. */
.form-select, .form-select:focus {
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px;
  padding-right: 3rem;
}
/* No painel escuro (diagnóstico) o traço do chevron é o off-white da marca.
   O hex mora dentro do SVG: é guarda do Bootstrap, a mesma exceção do
   .accordion-button::after (bloco 13). */
[data-bs-theme='dark'] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F2F5F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-control:focus, .form-select:focus {
  border-color: var(--wb-green-700); background-color: var(--wb-surface-raised);
  color: var(--wb-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-700) 20%, transparent);
}
.form-control::placeholder { color: var(--wb-green-400); }
[data-bs-theme='dark'] .form-control, [data-bs-theme='dark'] .form-select { background-color: rgba(var(--wb-bone-rgb), .06); }
[data-bs-theme='dark'] .form-control:focus, [data-bs-theme='dark'] .form-select:focus {
  border-color: var(--wb-green-300); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-300) 25%, transparent); background-color: rgba(var(--wb-bone-rgb), .09);
}
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--wb-danger); }
.invalid-feedback { font-size: var(--wb-fs-xs); font-weight: 600; }
.form-check-input:checked { background-color: var(--wb-green-900); border-color: var(--wb-green-900); }
.form-check-input:focus { border-color: var(--wb-green-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-green-700) 25%, transparent); }
[data-bs-theme='dark'] .form-check-input:checked { background-color: var(--wb-bone); border-color: var(--wb-bone); }

/* Escolha em bloco — objetivo, frequência, tempo de treino */
.wb-choice { position: relative; display: block; }
.wb-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; margin: 0; }
.wb-choice__box {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: var(--wb-space-4) var(--wb-space-2);
  border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius-md);
  font-size: var(--wb-fs-sm); font-weight: 500; color: var(--wb-green-700);
  background: var(--wb-surface-raised);
  transition: border-color var(--wb-dur-fast) var(--wb-ease), background var(--wb-dur-fast) var(--wb-ease), color var(--wb-dur-fast) var(--wb-ease);
}
.wb-choice input:checked + .wb-choice__box {
  border-color: var(--wb-green-900); background: var(--wb-green-900);
  color: var(--wb-bone); font-weight: 600;
}
.wb-choice input:focus-visible + .wb-choice__box { outline: 3px solid color-mix(in srgb, var(--wb-green-700) 50%, transparent); outline-offset: 2px; }
[data-bs-theme='dark'] .wb-choice__box { background: transparent; color: var(--wb-bone); }
[data-bs-theme='dark'] .wb-choice input:checked + .wb-choice__box { background: var(--wb-bone); color: var(--wb-green-900); border-color: var(--wb-bone); }

/* ==========================================================================
   11. SELOS
   ========================================================================== */

.wb-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--wb-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .68rem; border-radius: var(--wb-radius-pill);
  background: var(--wb-badge-bg); color: var(--wb-badge-fg);
  border: 1px solid transparent;
}
.wb-badge--line  { background: transparent; border-color: var(--wb-border-strong); color: var(--wb-text-muted); }
.wb-badge--solid { background: var(--wb-text); color: var(--wb-surface); }
.wb-badge--dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* Credencial: CREF e formação. Nunca dentro de um selo genérico — é a única
   informação da página que precisa ser verificável. */
.wb-cref {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--wb-text-muted);
}
.wb-cref strong { color: var(--wb-text); font-weight: 500; }

/* ==========================================================================
   12. CABEÇALHO, ILHA FLUTUANTE E RODAPÉ
   ========================================================================== */

body:has(.wb-nav__island) { --wb-anchor-offset: calc(var(--wb-nav-h) + var(--wb-space-5)); }

.wb-nav {
  position: fixed; inset: 0 0 auto; z-index: 1040;
  padding: var(--wb-space-4) var(--wb-space-4) 0;
  transition: padding var(--wb-dur-slow) var(--wb-ease);
  pointer-events: none;
}
/* Vidro da ilha: o off-white a 90% + blur saturado; a borda branca é luz,
   não marca. */
.wb-nav__island {
  pointer-events: auto;
  width: 100%; max-width: var(--wb-container); margin-inline: auto;
  background: rgba(var(--wb-bone-rgb), .90);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--wb-radius-xl);
  box-shadow: var(--wb-shadow-lg);
  overflow: hidden;
  transition: max-width var(--wb-dur-slow) var(--wb-ease),
              border-radius var(--wb-dur-slow) var(--wb-ease),
              background var(--wb-dur-base) linear;
}
.wb-nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wb-space-4);
  padding: .7rem var(--wb-space-5);
  transition: padding var(--wb-dur-slow) var(--wb-ease);
}
.wb-nav__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.wb-nav__brand .wb-logo { height: 22px; }
.wb-nav.is-stuck .wb-nav__brand .wb-logo { height: 20px; transition: height var(--wb-dur-slow) var(--wb-ease); }
.wb-nav__brand-name {
  display: block; font-family: var(--wb-font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.02em; color: var(--wb-green-900); line-height: 1;
}
.wb-nav__brand-sub {
  display: block; font-family: var(--wb-font-mono); font-size: 8px; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; color: var(--wb-green-600); margin-top: 2px;
}
/* O menu encosta à direita; o CTA é o último item da própria lista. */
.wb-nav__bar nav { margin-left: auto; }
.wb-nav__links { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.wb-nav__links .btn { margin-left: .6rem; }
.wb-nav__links a:not(.btn) {
  position: relative; display: block; padding: .5rem .8rem;
  border-radius: var(--wb-radius-pill);
  font-size: var(--wb-fs-sm); font-weight: 500; color: var(--wb-green-700);
  text-decoration: none; transition: color var(--wb-dur-fast) linear;
}
.wb-nav__links a:not(.btn)::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .28rem; height: 1.5px;
  background: var(--wb-green-900); transform: scaleX(0); transform-origin: left;
  transition: transform var(--wb-dur-base) var(--wb-ease);
}
.wb-nav__links a:not(.btn):hover { color: var(--wb-green-900); }
.wb-nav__links a:not(.btn):hover::after, .wb-nav__links a[aria-current='page']::after { transform: scaleX(1); }
.wb-nav__links a[aria-current='page'] { color: var(--wb-green-900); }
.wb-nav__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.wb-nav__toggle {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--wb-border-strong); color: var(--wb-green-900);
  cursor: pointer;
}
.wb-nav__toggle:hover { background: var(--wb-green-100); }

.wb-nav.is-stuck { padding-top: var(--wb-space-2); }
.wb-nav.is-stuck .wb-nav__island { background: rgba(var(--wb-bone-rgb), .97); box-shadow: var(--wb-shadow-md); }
.wb-nav.is-stuck .wb-nav__bar { padding-block: .45rem; }
.wb-nav--dock.is-stuck { padding: 0; }
.wb-nav--dock.is-stuck .wb-nav__island {
  max-width: 3000px; border-radius: 0; border-color: transparent;
  border-bottom-color: var(--wb-border); box-shadow: var(--wb-shadow-sm);
}
@media (max-width: 991.98px) {
  .wb-nav { padding-inline: var(--wb-space-3); }
  .wb-nav__bar { padding-inline: var(--wb-space-4); }
  .wb-nav__island { border-radius: var(--wb-radius-lg); }
}

/* Cabeçalho simples (páginas internas) — mantido do design system; o tema
   usa a ilha em todas as rotas, então esta peça fica disponível, não em uso. */
.wb-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(var(--wb-bone-rgb), .9); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--wb-dur-base) linear, box-shadow var(--wb-dur-base) linear;
}
.wb-header.is-stuck { border-bottom-color: var(--wb-border); box-shadow: var(--wb-shadow-sm); }

/* Rodapé — o mais profundo da escala. O preto vem do painel
   (SITE_THEME_FOOTER_BG → --wc-footer-bg → --wb-black). */
.wb-footer {
  position: relative; isolation: isolate; overflow: hidden;
  /* O texto-base segue o painel (SITE_THEME_FOOTER_TEXT → --wc-footer-text), e
     as vozes secundária e de apoio do bloco também: se o painel clarear o fundo
     do rodapé, o corpo não fica preso ao off-white. A voz FORTE (chamada,
     títulos, marca) continua no off-white — este rodapé é desenhado escuro. */
  color: var(--wc-footer-text, var(--wb-bone));
  --wb-text-muted: var(--wb-footer-text);
  --wb-text-accent: var(--wb-footer-link);
  background:
    radial-gradient(96% 80% at 10% -10%, color-mix(in srgb, var(--wb-green-800) 60%, transparent) 0%, transparent 58%),
    radial-gradient(70% 56% at 90% 110%, rgba(var(--wb-green-900-rgb), .55) 0%, rgba(var(--wb-green-900-rgb), 0) 62%),
    var(--wb-black);
  padding-block: var(--wb-space-8) var(--wb-space-6);
}
/* Rampa no teto do rodapé — espelho da régua que fecha a hero. A página
   abre e fecha com a mesma assinatura. (Marcação: wc_wey_rampa('wb-footer__rampa', 8);
   as cores dos degraus vêm de .wb-rampa, bloco I-e.) */
.wb-footer__rampa {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: flex; height: 3px;
}
.wb-footer__rampa span { flex: 1; }
/* A mesma malha técnica da hero, aqui ancorada no canto oposto. */
.wb-footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--wb-bone-rgb), .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wb-bone-rgb), .04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(100% 92% at 86% 8%, #000 0%, rgba(0,0,0,.35) 48%, transparent 74%);
          mask-image: radial-gradient(100% 92% at 86% 8%, #000 0%, rgba(0,0,0,.35) 48%, transparent 74%);
}
/* Monograma em escala de página, meio submerso no pé do bloco. */
.wb-footer__marca {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: 0; transform: translate(-50%, 36%);
  width: min(1080px, 94vw); aspect-ratio: 125 / 47;
  background: linear-gradient(180deg, rgba(var(--wb-bone-rgb), .055) 0%, rgba(var(--wb-bone-rgb), .012) 78%);
  -webkit-mask: var(--wb-logo-mask) center / contain no-repeat;
          mask: var(--wb-logo-mask) center / contain no-repeat;
}
.wb-footer .wb-container { position: relative; z-index: 1; }

/* Chamada final: a última chance da página de converter. */
.wb-footer__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wb-space-5);
  padding-bottom: var(--wb-space-7); margin-bottom: var(--wb-space-7);
  position: relative;
}
/* Divisor-fio: a régua chapada vira um fio que nasce e morre transparente,
   com o verde da marca respirando no meio — luz, não burocracia. */
.wb-footer__cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--wb-bone-rgb), 0) 0%,
    color-mix(in srgb, var(--wb-green-500) 55%, transparent) 18%,
    rgba(var(--wb-bone-rgb), .3) 50%,
    color-mix(in srgb, var(--wb-green-500) 55%, transparent) 82%,
    rgba(var(--wb-bone-rgb), 0) 100%);
  box-shadow: 0 1px 14px color-mix(in srgb, var(--wb-green-500) 28%, transparent);
}
.wb-footer__chamada {
  font-family: var(--wb-font-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.08;
  color: var(--wb-bone); margin: 0;
}

/* Links do rodapé na cor do painel (SITE_THEME_FOOTER_LINK), com o verde-300
   como padrão. */
.wb-footer a:not(.btn) { color: var(--wb-footer-link); text-decoration: none; transition: color var(--wb-dur-fast) linear; }
.wb-footer a:not(.btn):hover { color: var(--wb-bone); text-decoration: underline; text-underline-offset: 3px; }
.wb-footer__t {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); text-transform: uppercase;
  letter-spacing: .16em; color: var(--wb-green-400); margin-bottom: var(--wb-space-4);
}
/* Bloco (não inline) e quebra em qualquer ponto: na coluna Contato do celular
   (col-6, ~190px) o e-mail e o @ do Instagram são palavras sem espaço e, em
   inline-flex, estouravam a coluna e eram cortados pelo overflow do rodapé.
   O ícone alinha ao topo com um recuo que o centra na PRIMEIRA linha: uma
   linha só fica igual ao original, duas linhas não o deixam no meio. */
.wb-footer__link { display: flex; align-items: flex-start; gap: .6rem; max-width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.wb-footer__link .bi {
  flex: 0 0 auto; margin-top: .37rem;
  font-size: 14px; color: var(--wb-green-500);
  transition: color var(--wb-dur-fast) linear, transform var(--wb-dur-base) var(--wb-ease);
}
.wb-footer__link:hover .bi { color: var(--wb-green-300); transform: translateX(2px); }

.wb-footer__base {
  position: relative; margin-top: var(--wb-space-7);
  padding-top: var(--wb-space-5); font-size: var(--wb-fs-xs); color: var(--wb-green-400);
  /* três colunas: legal · botão ao centro · crédito (as laterais têm a mesma largura para o botão cair no meio exato) */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--wb-space-4) var(--wb-space-5);
}
.wb-footer__legal { display: flex; flex-direction: column; gap: .35rem; }
.wb-footer__cidade { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-green-500); }
.wb-footer__cidade .bi { font-size: 11px; }
/* O mesmo fio, meio tom abaixo: hierarquia entre os dois divisores. */
.wb-footer__base::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--wb-bone-rgb), 0) 0%,
    color-mix(in srgb, var(--wb-green-500) 38%, transparent) 18%,
    rgba(var(--wb-bone-rgb), .2) 50%,
    color-mix(in srgb, var(--wb-green-500) 38%, transparent) 82%,
    rgba(var(--wb-bone-rgb), 0) 100%);
}
/* Botão redondo "voltar ao topo", ao centro do pé: só o ícone (o rótulo vai em aria-label/title). */
.wb-footer__topo {
  justify-self: center;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(var(--wb-bone-rgb), .22); color: var(--wb-bone) !important;
  background: rgba(var(--wb-bone-rgb), .05); font-size: 1.05rem; text-decoration: none;
  transition: background var(--wb-dur-fast) linear, border-color var(--wb-dur-fast) linear, transform var(--wb-dur-base) var(--wb-ease);
}
.wb-footer__topo .bi { transition: transform var(--wb-dur-base) var(--wb-ease); }
.wb-footer__topo:hover { background: rgba(var(--wb-bone-rgb), .12); border-color: rgba(var(--wb-bone-rgb), .5); transform: translateY(-2px); }
.wb-footer__topo:hover .bi { transform: translateY(-2px); }
.wb-footer__topo:focus-visible { outline: 2px solid var(--wb-green-400); outline-offset: 3px; }

/* ==========================================================================
   13. ACCORDION (dúvidas)
   Guarda do Bootstrap. O acordeão REAL do tema é <details> (widget .wc-faq,
   vestido no bloco I-i); isto só impede um .accordion perdido de sair azul.
   O SVG do chevron fica com o traço da marca-padrão gravado — é guarda, não
   componente — e inverte por filtro no escuro.
   ========================================================================== */

.accordion { --bs-accordion-border-color: var(--wb-border); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-green-700) 22%, transparent); }
.accordion-item { background: transparent; border-left: 0; border-right: 0; }
.accordion-button {
  font-family: var(--wb-font-body); font-weight: 600; font-size: var(--wb-fs-base);
  color: var(--wb-text); background: transparent; padding: 1.15rem .25rem;
}
.accordion-button:not(.collapsed) { color: var(--wb-green-900); background: transparent; box-shadow: none; }
[data-bs-theme='dark'] .accordion-button:not(.collapsed) { color: var(--wb-bone); }
.accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2312271B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  width: 1rem; height: 1rem; background-size: 1rem;
}
[data-bs-theme='dark'] .accordion-button::after { filter: invert(1) brightness(1.6); }
.accordion-body { color: var(--wb-text-muted); font-size: var(--wb-fs-sm); padding: 0 .25rem 1.25rem; max-width: 68ch; }

/* ==========================================================================
   14. HERO
   --------------------------------------------------------------------------
   Duas variantes, e a diferença importa. A hero sem foto não leva scrim: um
   scrim escurecendo uma cor chapada só suja o verde e achata o bloco. Ela
   usa a própria rampa como estrutura — 800 no canto de luz, 900 no corpo,
   950 no pé. É a tese do sistema aplicada à maior superfície da página.
   A hero com foto (.wb-hero--media) leva o scrim, e ele não é estética: sem
   ele o texto off-white depende da foto que o cliente subir.
   ========================================================================== */

.wb-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--wb-bone);
  background:
    radial-gradient(118% 88% at 14% -6%, var(--wb-green-800) 0%, color-mix(in srgb, var(--wb-green-800) 0%, transparent) 58%),
    radial-gradient(72% 64% at 82% 18%, color-mix(in srgb, var(--wb-green-600) 38%, transparent) 0%, transparent 62%),
    radial-gradient(60% 52% at 74% 96%, color-mix(in srgb, var(--wb-green-950) 85%, transparent) 0%, transparent 70%),
    linear-gradient(178deg, var(--wb-green-900) 0%, var(--wb-green-900) 54%, var(--wb-green-950) 100%);
}
/* Malha técnica: papel milimetrado da planilha de treino, quase subliminar.
   O mask concentra a malha no quadrante da figura e a dissolve antes de
   alcançar o texto, para não competir com a leitura. */
.wb-hero--figura::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--wb-bone-rgb), .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wb-bone-rgb), .045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(110% 100% at 78% 34%, #000 0%, rgba(0,0,0,.4) 45%, transparent 72%);
          mask-image: radial-gradient(110% 100% at 78% 34%, #000 0%, rgba(0,0,0,.4) 45%, transparent 72%);
}
/* Régua da rampa no pé da hero: os degraus reais do sistema, na ordem, do
   claro ao escuro. Ela existe porque a página é sobre isso — em um site
   comum de treinador, remova. (Marcação: wc_wey_rampa('wb-hero__rampa', 10).) */
.wb-hero__rampa {
  position: absolute; inset: auto 0 0; z-index: 0;
  display: flex; height: 3px;
}
.wb-hero__rampa span { flex: 1; }

.wb-hero__media { position: absolute; inset: 0; z-index: -2; }
.wb-hero__media img, .wb-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.wb-hero--media::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wb-green-950) 84%, transparent) 0%, color-mix(in srgb, var(--wb-green-950) 52%, transparent) 45%, color-mix(in srgb, var(--wb-green-950) 92%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--wb-green-950) 80%, transparent) 0%, color-mix(in srgb, var(--wb-green-950) 8%, transparent) 62%);
}
.wb-hero__inner { position: relative; z-index: 1; padding-block: clamp(8rem, 18vw, 12rem) clamp(3.5rem, 8vw, 6rem); }
.wb-hero .wb-lead { color: var(--wb-green-200); }

/* --------------------------------------------------------------------------
   FICHA — tira de especificação (rótulo em mono, valor em corpo)
   Substitui a fileira de pílulas onde o conteúdo é factual e desigual em
   tamanho. Pílula serve para estado curto ("Vagas abertas"); ficha serve
   para dado que precisa de rótulo — CREF, modalidade, cidade, tipografia.
   -------------------------------------------------------------------------- */
.wb-ficha { display: flex; flex-wrap: wrap; gap: 0; }
.wb-ficha__item { padding: 0 var(--wb-space-5) 0 0; margin-right: var(--wb-space-5); border-right: 1px solid var(--wb-border); }
.wb-ficha__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.wb-ficha__r {
  display: block; font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--wb-text-muted); margin-bottom: .35rem;
}
.wb-ficha__v { display: block; font-size: var(--wb-fs-sm); font-weight: 500; color: var(--wb-text); }
@media (max-width: 575.98px) {
  .wb-ficha { flex-direction: column; gap: var(--wb-space-4); }
  .wb-ficha__item { border-right: 0; margin-right: 0; padding-right: 0; }
}

/* ==========================================================================
   15. PROCESSO — as etapas do acompanhamento
   A numeração aqui é real: as etapas acontecem nessa ordem.
   ========================================================================== */

/* Linha do tempo: cada número mora num chip com a moldura da marca (três
   cantos redondos, um reto) e um conector tracejado desce até o próximo —
   as etapas se leem como um percurso, não como linhas de tabela. */
.wb-etapas { counter-reset: etapa; display: grid; gap: 0; }
.wb-etapa {
  counter-increment: etapa; position: relative;
  display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--wb-space-4);
  padding: 0 0 var(--wb-space-6);
}
.wb-etapa:last-child { padding-bottom: 0; }
.wb-etapa::before {
  content: counter(etapa, decimal-leading-zero);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--wb-radius-md) var(--wb-radius-md) var(--wb-radius-md) 2px;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  box-shadow: var(--wb-shadow-sm);
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-sm); font-weight: 500;
  letter-spacing: .06em; color: var(--wb-text-accent);
  position: relative; z-index: 1;
  transition: background var(--wb-dur-base) var(--wb-ease),
              color var(--wb-dur-base) var(--wb-ease),
              border-color var(--wb-dur-base) var(--wb-ease);
}
.wb-etapa:not(:last-child)::after {
  content: ''; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 1.5px;
  background: repeating-linear-gradient(180deg,
    var(--wb-border-strong) 0 4px, transparent 4px 10px);
}
.wb-etapa:hover::before { background: var(--wb-green-900); border-color: var(--wb-green-900); color: var(--wb-bone); }
.wb-etapa__t { font-weight: 600; font-size: var(--wb-fs-h4); margin: .35rem 0 .3rem; }
.wb-etapa__d { color: var(--wb-text-muted); font-size: var(--wb-fs-sm); margin: 0; max-width: 62ch; }

/* ==========================================================================
   16. TABELA
   ========================================================================== */

.wb-tabela { width: 100%; border-collapse: collapse; font-size: var(--wb-fs-sm); }
.wb-tabela th, .wb-tabela td { padding: .95rem 1.15rem; text-align: left; border-bottom: 1px solid var(--wb-border); }
.wb-tabela thead th {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--wb-text-muted);
  border-bottom-color: var(--wb-border-strong);
}
.wb-tabela tbody tr:hover { background: var(--wb-green-50); }
[data-bs-theme='dark'] .wb-tabela tbody tr:hover { background: rgba(var(--wb-bone-rgb), .05); }
.wb-tabela td:not(:first-child), .wb-tabela th:not(:first-child) { text-align: center; }
.wb-tabela tbody th[scope='row'] { font-weight: 600; color: var(--wb-text); }
.wb-tabela__sim { color: var(--wb-green-700); }
[data-bs-theme='dark'] .wb-tabela__sim { color: var(--wb-green-300); }
.wb-tabela__nao { color: var(--wb-green-400); }

/* Moldura: a comparação vira um card do sistema em vez de linhas soltas
   flutuando na seção. O canto cortado é o mesmo dos planos acima dela. */
.wb-tabela-moldura {
  /* Posicionada de propósito: as células trazem <span class="visually-hidden">
     (position:absolute) e, sem um ancestral posicionado, o bloco contentor deles
     é a viewport — eles escapavam do overflow-x da moldura e do clip do .ag-wrap
     e esticavam a página até a largura real da tabela (559px a 390px de tela,
     rolagem horizontal na home do celular; o index.html original tem o mesmo
     estouro pela mesma causa). Contidos aqui, a moldura os recorta. */
  position: relative;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-cut);
  box-shadow: var(--wb-shadow-sm);
  /* overflow-x: auto (do table-responsive) promove o eixo Y de visible
     para auto — e 1px de estouro vira barra de rolagem no Windows.
     O eixo vertical nunca precisa rolar aqui. */
  overflow-y: hidden;
}
.wb-tabela-moldura .wb-tabela { margin-bottom: 0; }
.wb-tabela-moldura thead th { background-color: var(--wb-green-25); }
.wb-tabela-moldura tbody tr:last-child th,
.wb-tabela-moldura tbody tr:last-child td { border-bottom: 0; }
/* O wrapper mantém overflow-x: auto (scroll no mobile), então os cantos
   são arredondados célula a célula em vez de com overflow: hidden. */
.wb-tabela-moldura thead th:first-child { border-top-left-radius: calc(var(--wb-radius-lg) - 1px); }
.wb-tabela-moldura thead th:last-child { border-top-right-radius: calc(var(--wb-radius-lg) - 1px); }
.wb-tabela-moldura tbody tr:last-child th:first-child { border-bottom-left-radius: 2px; }
.wb-tabela-moldura tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--wb-radius-lg) - 1px); }

/* O check ganha corpo de chip; o traço de ausência continua mudo. */
.wb-tabela__sim .bi {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wb-green-100); color: var(--wb-green-700);
  font-size: 1rem;
}

/* A coluna do formato mais escolhido carrega a rampa no teto e um banho de
   verde — o mesmo apontamento do card em destaque, agora na comparação.
   Duas formas de marcar a coluna: a classe .is-destaque (a home a põe, em th e
   td, no formato marcado como destaque no PAINEL) ou, quando a tabela não traz
   a classe, a 3ª coluna fixa do design system original. O :has() impede as
   duas marcas de acenderem ao mesmo tempo. */
.wb-tabela--planos .is-destaque,
.wb-tabela--planos:not(:has(.is-destaque)) thead th:nth-child(3),
.wb-tabela--planos:not(:has(.is-destaque)) tbody td:nth-child(3) { background-color: color-mix(in srgb, var(--wb-green-500) 10%, transparent); }
.wb-tabela--planos thead th.is-destaque,
.wb-tabela--planos:not(:has(.is-destaque)) thead th:nth-child(3) {
  color: var(--wb-green-800);
  background-image: var(--wb-rampa-grad);
  background-size: 100% 3px; background-repeat: no-repeat; background-position: top;
}
.wb-tabela--planos td.is-destaque.wb-tabela__sim .bi,
.wb-tabela--planos:not(:has(.is-destaque)) tbody td:nth-child(3).wb-tabela__sim .bi {
  background: var(--wb-green-700); color: var(--wb-bone);
}

/* ==========================================================================
   17. ESTADOS
   ========================================================================== */

.wb-vazio {
  text-align: center; padding: var(--wb-space-8) var(--wb-space-5);
  border: 1px dashed var(--wb-border-strong); border-radius: var(--wb-radius-lg);
  color: var(--wb-text-muted);
}
.wb-vazio__t { font-family: var(--wb-font-display); font-weight: 700; font-size: var(--wb-fs-h3); color: var(--wb-text); margin: var(--wb-space-4) 0 .4rem; }
.wb-vazio p { font-size: var(--wb-fs-sm); max-width: 42ch; margin-inline: auto; }
.wb-vazio .wb-icone { margin-inline: auto; }

.wb-skeleton {
  background: linear-gradient(90deg, var(--wb-green-100) 25%, var(--wb-green-200) 50%, var(--wb-green-100) 75%);
  background-size: 200% 100%; border-radius: var(--wb-radius-sm);
  animation: wb-shimmer 1.4s linear infinite;
}
@keyframes wb-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wb-skeleton { animation: none; } }

/* ==========================================================================
   18. AÇÃO FIXA (mobile) — o WhatsApp sempre a um toque
   O espaço que ela ocupa NÃO fica no padding do body (o body é off-white e
   sobrava uma faixa clara sob o rodapé preto): mora no rodapé e é exportado
   aos flutuantes do core em --wc-dock-bottom — ver bloco I-n.
   ========================================================================== */

.wb-acao-fixa {
  position: fixed; inset: auto 0 0; z-index: 1035;
  display: none; gap: .5rem; padding: .6rem var(--wb-space-4) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(var(--wb-bone-rgb), .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--wb-border);
}
/* Os dois botões dividiam a barra meio a meio e "Fazer o diagnóstico" quebrava
   em duas linhas a 390px (herança do original, que no celular estoura a tela).
   O WhatsApp encolhe ao próprio conteúdo e cede a sobra ao diagnóstico. */
.wb-acao-fixa .btn { flex: 1; white-space: nowrap; }
.wb-acao-fixa .btn-wb-whats { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .wb-acao-fixa { display: flex; }
}
/* Telas muito estreitas: menos recuo lateral para os dois caberem sem quebrar. */
@media (max-width: 379.98px) { .wb-acao-fixa .btn { --bs-btn-padding-x: 1.1rem; } }

/* ==========================================================================
   19. ACESSIBILIDADE E MOVIMENTO
   ========================================================================== */

:focus-visible { outline: 3px solid var(--wb-green-700); outline-offset: 2px; border-radius: 3px; }
[data-bs-theme='dark'] :focus-visible, .wb-section--anchor :focus-visible, .wb-section--black :focus-visible,
.wb-footer :focus-visible { outline-color: var(--wb-green-300); }

.wb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--wb-green-900); color: var(--wb-bone);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--wb-radius-md) 0; font-weight: 600;
}
.wb-skip:focus { left: 0; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Revelação no scroll: 12px e opacidade. Nada de escala nem rotação — a
   marca é de precisão, não de efeito.
   O estado ESCONDIDO só existe sob html.wb-js (classe que o zz-wey.js põe na
   1ª linha): sem JS — ou com o script bloqueado — a página nasce visível.
   [data-entra] é a timeline de entrada do GSAP: só a opacidade inicial, sem
   transition (uma transition CSS brigaria com o tween frame a frame); .is-in
   é o fallback que o JS aplica quando não há GSAP ou há reduced-motion. */
.wb-reveal { transition: opacity var(--wb-dur-slow) var(--wb-ease), transform var(--wb-dur-slow) var(--wb-ease); }
html.wb-js .wb-reveal { opacity: 0; transform: translateY(12px); }
html.wb-js .wb-reveal.is-in { opacity: 1; transform: none; }
html.wb-js [data-entra] { opacity: 0; }
html.wb-js [data-entra].is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  /* Sem movimento, nada fica escondido à espera de animação. */
  html.wb-js .wb-reveal, html.wb-js [data-entra] { opacity: 1; transform: none; }
}

::selection { background: var(--wb-green-900); color: var(--wb-bone); }
[data-bs-theme='dark'] ::selection, .wb-section--anchor ::selection { background: var(--wb-bone); color: var(--wb-green-900); }

@media (forced-colors: active) {
  .wb-icone, .wb-card, .wb-pilar, .wb-serie, .wb-plano, .wb-post, .wb-ed, .wb-faq-chip { border: 1px solid CanvasText; }
  .wb-escada__d.is-on { background: Highlight; forced-color-adjust: none; }
  .wb-rampa span { background: CanvasText; forced-color-adjust: none; }
}

/* (A impressão mora no bloco I-o, no fim do arquivo, junto das peças do
   framework que também precisam sumir no papel.) */

/* ==========================================================================
   20. GUARDAS DO BOOTSTRAP
   Variantes que o Bootstrap entrega e o tema precisa vestir para não
   aparecerem azuis no meio de uma página verde.
   ========================================================================== */

.badge { font-family: var(--wb-font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; border-radius: var(--wb-radius-pill); padding: .35em .7em; }
.text-bg-primary { background-color: var(--wb-green-900) !important; color: var(--wb-bone) !important; }
.text-bg-secondary { background-color: var(--wb-green-600) !important; color: var(--wb-bone) !important; }
.text-bg-light { background-color: var(--wb-green-100) !important; color: var(--wb-green-900) !important; }

.alert { border-radius: var(--wb-radius-md); border-width: 1px; font-size: var(--wb-fs-sm); }
.alert-primary { --bs-alert-bg: var(--wb-green-100); --bs-alert-border-color: var(--wb-green-200); --bs-alert-color: var(--wb-green-800); }
/* Fundos de estado derivados da própria cor de estado sobre o branco do card —
   o original trazia tons fixos de rosa e creme que não seguiriam o painel. */
.alert-danger  { --bs-alert-bg: color-mix(in srgb, var(--wb-danger) 8%, var(--wb-white)); --bs-alert-border-color: color-mix(in srgb, var(--wb-danger) 22%, var(--wb-white)); --bs-alert-color: var(--wb-danger); }
.alert-warning { --bs-alert-bg: color-mix(in srgb, var(--wb-warning) 8%, var(--wb-white)); --bs-alert-border-color: color-mix(in srgb, var(--wb-warning) 24%, var(--wb-white)); --bs-alert-color: var(--wb-warning); }
.alert-success { --bs-alert-bg: color-mix(in srgb, var(--wb-success) 8%, var(--wb-white)); --bs-alert-border-color: color-mix(in srgb, var(--wb-success) 24%, var(--wb-white)); --bs-alert-color: var(--wb-success); }

.progress { background: var(--wb-green-100); border-radius: var(--wb-radius-pill); height: 8px; }
.progress-bar { background: var(--wb-green-900); }
.spinner-border, .spinner-grow { color: var(--wb-green-700); }

.nav-tabs { --bs-nav-tabs-border-color: var(--wb-border); }
.nav-tabs .nav-link { color: var(--wb-text-muted); font-weight: 500; font-size: var(--wb-fs-sm); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--wb-text); border-bottom-color: var(--wb-border-strong); }
.nav-tabs .nav-link.active { color: var(--wb-green-900); background: transparent; border-bottom-color: var(--wb-green-900); }
[data-bs-theme='dark'] .nav-tabs .nav-link.active { color: var(--wb-bone); border-bottom-color: var(--wb-bone); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--wb-green-400); font-size: var(--wb-fs-sm); }
.page-link { color: var(--wb-green-700); border-color: var(--wb-border); }
.page-item.active .page-link { background: var(--wb-green-900); border-color: var(--wb-green-900); color: var(--wb-bone); }

.modal-content { border: 0; border-radius: var(--wb-radius-lg); box-shadow: var(--wb-shadow-lg); background: var(--wb-surface-raised); }
.modal-header, .modal-footer { border-color: var(--wb-border); }
.tooltip-inner { background: var(--wb-green-900); color: var(--wb-bone); border-radius: var(--wb-radius-sm); font-size: var(--wb-fs-xs); }
.tooltip .tooltip-arrow::before { border-top-color: var(--wb-green-900); }
.toast { border-radius: var(--wb-radius-md); border-color: var(--wb-border); }

.dropdown-menu { --bs-dropdown-border-color: var(--wb-border); --bs-dropdown-border-radius: var(--wb-radius-md); --bs-dropdown-link-active-bg: var(--wb-green-900); --bs-dropdown-link-hover-bg: var(--wb-green-100); box-shadow: var(--wb-shadow-md); }
.list-group-item { border-color: var(--wb-border); background: var(--wb-surface-raised); color: var(--wb-text); }

.form-switch .form-check-input:checked { background-color: var(--wb-green-900); border-color: var(--wb-green-900); }
.form-range::-webkit-slider-thumb { background: var(--wb-green-900); }
.form-range::-moz-range-thumb { background: var(--wb-green-900); }

/* ==========================================================================
   21. TEXTO LONGO — v1.1, acrescentado para o blog
   ========================================================================== */

/* --------------------------------------------------------------------------
   .wb-prose — escopo de leitura longa
   REGRA OBRIGATÓRIA: link em texto corrido é sublinhado, sem exceção.
   O link do sistema é o verde-600 e o corpo é o verde-900 — 2,87:1 entre os
   dois, abaixo dos 3:1 que a WCAG 1.4.1 exige quando só a cor distingue o
   link. Fora de texto corrido (menu, card, botão) o sublinhado é dispensável,
   porque ali a posição já distingue.
   (Marcadores de lista, tabelas do editor e o CTA gravado no corpo do post
   moram no bloco I-l: são o que o dashlite.css e o editor do painel exigem.)
   -------------------------------------------------------------------------- */

.wb-prose { font-size: 1.0625rem; line-height: 1.72; color: var(--wb-text); max-width: 68ch; }
.wb-prose > * + * { margin-top: 1.35em; }
.wb-prose p { margin: 0; text-wrap: pretty; }
.wb-prose h2 { font-size: var(--wb-fs-h3); margin-top: 2.4em; margin-bottom: 0; scroll-margin-top: var(--wb-anchor-offset); }
.wb-prose h3 { font-size: var(--wb-fs-h4); font-family: var(--wb-font-body); font-weight: 600; margin-top: 1.9em; margin-bottom: 0; }
.wb-prose h4 { font-size: 1.05rem; margin-top: 1.6em; margin-bottom: 0; }
.wb-prose h2 + p, .wb-prose h3 + p, .wb-prose h4 + p { margin-top: .7em; }
.wb-prose strong { font-weight: 600; }
.wb-prose a {
  color: var(--wb-text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--wb-green-400);
}
.wb-prose a:hover { color: var(--wb-green-800); text-decoration-color: currentColor; }
[data-bs-theme='dark'] .wb-prose a:hover { color: var(--wb-bone); }
.wb-prose ul, .wb-prose ol { padding-left: 1.15em; margin-block: 1.35em; }
.wb-prose li + li { margin-top: .5em; }
.wb-prose li::marker { color: var(--wb-green-500); }
.wb-prose blockquote {
  margin: 2em 0; padding: .1em 0 .1em 1.4em;
  border-left: 3px solid var(--wb-green-900);
  font-size: 1.15rem; line-height: 1.55; font-weight: 500;
}
.wb-prose blockquote p { margin: 0; }
[data-bs-theme='dark'] .wb-prose blockquote { border-left-color: var(--wb-bone); }
.wb-prose figure { margin: 2.2em 0; }
.wb-prose figure img { width: 100%; height: auto; border-radius: var(--wb-radius-md); display: block; }
.wb-prose figcaption {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); line-height: 1.5;
  letter-spacing: .04em; color: var(--wb-text-muted); margin-top: .8em;
  padding-left: .9em; border-left: 1px solid var(--wb-border-strong);
}
.wb-prose code {
  font-family: var(--wb-font-mono); font-size: .87em;
  background: var(--wb-green-100); padding: .12em .38em; border-radius: 4px;
}
.wb-prose hr { margin: 2.6em 0; border: 0; border-top: 1px solid var(--wb-border); }
.wb-prose > :first-child { margin-top: 0; }

/* Primeiro parágrafo do artigo, maior */
.wb-prose__abre { font-size: 1.22rem; line-height: 1.55; color: var(--wb-text-muted); }

/* --------------------------------------------------------------------------
   .wb-nota — comentário prático no meio do texto
   -------------------------------------------------------------------------- */
.wb-nota {
  margin: 2.2em 0; padding: var(--wb-space-5);
  background: var(--wb-surface-sunken);
  border-left: 3px solid var(--wb-green-900);
  border-radius: 0 var(--wb-radius-lg) var(--wb-radius-lg) 0;
  font-size: var(--wb-fs-sm); line-height: 1.62;
}
.wb-nota > * + * { margin-top: .8em; }
.wb-nota p { margin: 0; }
.wb-nota__r {
  display: block; font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--wb-text-accent); margin-bottom: .6rem;
}
[data-bs-theme='dark'] .wb-nota { border-left-color: var(--wb-bone); }

/* --------------------------------------------------------------------------
   ARTIGO — cabeça, meta e sumário
   -------------------------------------------------------------------------- */
.wb-artigo__cabeca { border-bottom: 1px solid var(--wb-border); padding-bottom: var(--wb-space-6); margin-bottom: var(--wb-space-6); }
.wb-artigo__titulo { font-size: var(--wb-fs-h1); margin: var(--wb-space-4) 0 0; letter-spacing: -.035em; }
.wb-artigo__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--wb-text-muted);
  margin-top: var(--wb-space-5);
}
.wb-artigo__meta span:not(:last-child)::after { content: '·'; margin-left: .55rem; opacity: .6; }
.wb-artigo__autor { display: flex; align-items: center; gap: .7rem; margin-top: var(--wb-space-5); }
.wb-artigo__autor-nome { font-weight: 600; font-size: var(--wb-fs-sm); }

/* Sumário fixo. O texto técnico longo é lido em salto; sem ele a leitora
   precisa rolar às cegas para achar a parte que interessa. */
.wb-sumario { font-size: var(--wb-fs-sm); }
.wb-sumario__t {
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--wb-text-muted);
  padding-bottom: .8rem; border-bottom: 1px solid var(--wb-border); margin-bottom: .9rem;
}
.wb-sumario ol { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: .1rem; }
.wb-sumario a {
  counter-increment: s; display: flex; gap: .7rem;
  padding: .42rem .6rem .42rem 0; border-radius: var(--wb-radius-sm);
  color: var(--wb-text-muted); text-decoration: none; line-height: 1.4;
}
.wb-sumario a::before { content: counter(s, decimal-leading-zero); font-family: var(--wb-font-mono); font-size: 10px; color: var(--wb-green-400); padding-top: .22em; flex: none; }
.wb-sumario a:hover { color: var(--wb-text); }
.wb-sumario a.is-ativo { color: var(--wb-text); font-weight: 600; }
.wb-sumario a.is-ativo::before { color: var(--wb-text-accent); }
@media (min-width: 992px) { .wb-sumario--fixo { position: sticky; top: calc(var(--wb-nav-h) + 1.5rem); } }

/* --------------------------------------------------------------------------
   CARD DE POST (saída de wc_wey_post_card(): o cartão inteiro é o <a>)
   -------------------------------------------------------------------------- */
.wb-post {
  display: flex; flex-direction: column; height: 100%;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-cut);
  padding: var(--wb-space-5);
  text-decoration: none; color: inherit;
  transition: transform var(--wb-dur-base) var(--wb-ease),
              border-color var(--wb-dur-base) var(--wb-ease),
              box-shadow var(--wb-dur-base) var(--wb-ease);
}
.wb-post:hover { transform: translateY(-3px); border-color: var(--wb-green-400); box-shadow: var(--wb-shadow-lg); color: inherit; }
.wb-post__cat { font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--wb-text-accent); }
.wb-post__t { font-family: var(--wb-font-display); font-weight: 700; font-size: 1.28rem; line-height: 1.2; letter-spacing: -.028em; color: var(--wb-text); margin: var(--wb-space-3) 0 0; text-wrap: balance; }
.wb-post__d { font-size: var(--wb-fs-sm); color: var(--wb-text-muted); margin: .7rem 0 0; }
.wb-post__meta { font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-text-muted); margin: var(--wb-space-5) 0 0; padding-top: var(--wb-space-3); border-top: 1px solid var(--wb-border); }
.wb-post--destaque { background: var(--wb-green-900); --wb-surface: var(--wb-green-900); --wb-text: var(--wb-bone); --wb-heading: var(--wb-bone); --wb-text-muted: var(--wb-green-300); --wb-text-accent: var(--wb-green-300); --wb-border: rgba(var(--wb-bone-rgb), .16); border-color: var(--wb-green-900); }
.wb-post--destaque:hover { border-color: var(--wb-green-900); }
.wb-post--destaque .wb-post__t { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* --------------------------------------------------------------------------
   CHAMADA NO FIM DO ARTIGO
   -------------------------------------------------------------------------- */
.wb-cta-artigo {
  margin-top: var(--wb-space-8);
  background: var(--wb-green-900); color: var(--wb-bone);
  --wb-surface: var(--wb-green-900); --wb-text: var(--wb-bone); --wb-heading: var(--wb-bone);
  --wb-text-muted: var(--wb-green-300); --wb-border: rgba(var(--wb-bone-rgb), .16);
  border-radius: var(--wb-radius-cut);
  padding: var(--wb-space-6);
}
.wb-cta-artigo h2 { font-size: var(--wb-fs-h3); margin: 0 0 .6rem; }
.wb-cta-artigo p { color: var(--wb-green-300); font-size: var(--wb-fs-sm); margin: 0 0 var(--wb-space-5); max-width: 52ch; }

/* ==========================================================================
   22. GALERIA
   O framework não carrega o Lightbox 3 (a galeria do post abre a imagem em
   nova aba, ver WcPosts::galleryHtml), então as regras .lb-* do original
   saíram — CSS morto com !important não paga o próprio peso. A grade de
   miniaturas fica; a saída do editor (.wc-gallery) veste-se dela no bloco I-k.
   ========================================================================== */

.wb-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wb-space-3); }
.wb-galeria__i { position: relative; display: block; overflow: hidden; border-radius: var(--wb-radius-md); aspect-ratio: 4 / 3; background: var(--wb-green-800); }
.wb-galeria__i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--wb-dur-slow) var(--wb-ease); }
.wb-galeria__i:hover img { transform: scale(1.04); }
.wb-galeria__i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--wb-green-950) 55%, transparent) 100%);
  opacity: 0; transition: opacity var(--wb-dur-base) var(--wb-ease);
}
.wb-galeria__i:hover::after { opacity: 1; }
.wb-galeria__i--alta { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* A variante alta tem duas grafias: no ITEM (.wb-galeria__i--alta, a do design
   system) ou no BLOCO (.wb-galeria--alta, o atalho do vocabulário do brief) —
   nesta, é o primeiro item que ocupa 2×2. Mesmo layout, mesma queda no celular. */
.wb-galeria--alta > .wb-galeria__i:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 767.98px) {
  .wb-galeria { grid-template-columns: repeat(2, 1fr); }
  .wb-galeria__i--alta,
  .wb-galeria--alta > .wb-galeria__i:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .wb-galeria__i:hover img { transform: none; } }

/* ==========================================================================
   23. CARROSSEL (Slick)
   ========================================================================== */

.wb-slider { margin-inline: calc(var(--wb-space-3) * -1); }
.wb-slider .slick-slide { height: auto; padding-inline: var(--wb-space-3); }
.wb-slider .slick-track { display: flex; align-items: stretch; }
.wb-slider .slick-list { padding-block: 4px; }

/* Sem o slick-theme.css, o <li> traz marcador de lista e o botão traz o
   número como texto — os dois precisam ser apagados aqui. O !important em
   display vence o `style="display:block"` que o Slick grava inline nos dots. */
.wb-slider .slick-dots { position: static; display: flex !important; justify-content: center; gap: .5rem; margin-top: var(--wb-space-5); padding: 0; margin-bottom: 0; list-style: none; }
.wb-slider .slick-dots li { width: auto; height: auto; margin: 0; display: block; }
.wb-slider .slick-dots li button {
  display: block; width: 26px; height: 4px; padding: 0; border: 0; cursor: pointer;
  font-size: 0; line-height: 0; color: transparent; overflow: hidden;
  border-radius: var(--wb-radius-pill); background: var(--wb-border-strong);
  transition: background var(--wb-dur-base) var(--wb-ease), width var(--wb-dur-base) var(--wb-ease);
}
.wb-slider .slick-dots li button::before { display: none; content: none; }
.wb-slider .slick-dots li button:hover { background: var(--wb-green-500); }
.wb-slider .slick-dots li.slick-active button { background: var(--wb-text); width: 44px; }

.wb-slider__nav { display: flex; gap: .5rem; }
.wb-slider__seta {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--wb-border-strong); color: var(--wb-text);
  cursor: pointer;
  transition: background var(--wb-dur-fast) var(--wb-ease), color var(--wb-dur-fast) var(--wb-ease);
}
.wb-slider__seta:hover { background: var(--wb-text); color: var(--wb-surface); }
.wb-slider__seta[aria-disabled='true'] { opacity: .35; pointer-events: none; }

/* ==========================================================================
   24. HERO EM DUAS COLUNAS (foto de recorte)
   --------------------------------------------------------------------------
   A camiseta preta encosta em 1,2:1 contra o verde-900 e a silhueta some.
   O halo atrás da figura não é brilho decorativo: é o que devolve a borda
   do ombro. Usa verde-800, o mesmo degrau da luz do gradiente da hero.
   ========================================================================== */

.wb-hero__grade { display: grid; grid-template-columns: 1fr; gap: var(--wb-space-6); align-items: end; }
@media (min-width: 992px) { .wb-hero__grade { grid-template-columns: 1.15fr .85fr; gap: var(--wb-space-7); } }

.wb-hero__figura { position: relative; justify-self: center; max-width: 460px; width: 100%; }
.wb-hero__figura::before {
  content: ''; position: absolute; z-index: 0;
  inset: 8% -14% -4% -14%;
  background: radial-gradient(58% 52% at 50% 46%, var(--wb-green-700) 0%, color-mix(in srgb, var(--wb-green-700) 42%, transparent) 42%, transparent 72%);
}
.wb-hero__figura img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
@media (max-width: 991.98px) {
  .wb-hero__figura { max-width: 320px; margin-top: var(--wb-space-6); }
}

/* ==========================================================================
   25. DEPOIMENTO EM CARROSSEL
   ========================================================================== */
.wb-depo--slide { min-height: 100%; }
.wb-depo__aspas { font-family: var(--wb-font-display); font-size: 2.6rem; line-height: .7; color: var(--wb-green-300); display: block; margin-bottom: .5rem; }
[data-bs-theme='dark'] .wb-depo__aspas { color: var(--wb-green-500); }

/* ==========================================================================
   26. MENU MOBILE
   A ilha não comporta seis links abaixo de 992px. Abaixo disso os links
   descem para dentro da própria ilha, que cresce — em vez de virar um painel
   sobreposto. Mantém a metáfora da ilha e evita travar o scroll do body.
   No framework a lista cresce (Blog, Loja, Cursos, páginas do painel…), então
   a lista aberta tem teto em altura de tela e rola por conta própria.
   ========================================================================== */

@media (max-width: 991.98px) {
  .wb-nav__links {
    display: grid; gap: 0;
    max-height: 0; overflow: hidden;
    padding: 0 var(--wb-space-4);
    transition: max-height var(--wb-dur-slow) var(--wb-ease),
                padding var(--wb-dur-slow) var(--wb-ease);
  }
  .wb-nav__links.is-aberto {
    max-height: min(70vh, 480px); overflow: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-block: var(--wb-space-2) var(--wb-space-4);
  }
  .wb-nav__links a:not(.btn) { padding: .8rem .2rem; border-bottom: 1px solid var(--wb-border); border-radius: 0; }
  /* O último li é o CTA, oculto no mobile — o último item visível é o
     penúltimo, e é dele que a borda precisa sair. */
  .wb-nav__links li:last-child a,
  .wb-nav__links li:nth-last-child(2) a { border-bottom: 0; }
  .wb-nav__links a:not(.btn)::after { display: none; }
  .wb-nav nav { order: 3; flex: 1 0 100%; }
  /* O <nav> vira uma 2ª linha do flex mesmo recolhido (0px de altura), e o gap de 1rem
     da barra entrava como ESPAÇO ENTRE LINHAS: 11px de respiro em cima dos botões e
     27px embaixo. Zerar só o gap vertical devolve a simetria; o menu aberto traz o
     próprio respiro na margem. */
  .wb-nav__bar { flex-wrap: wrap; row-gap: 0; }
  .wb-nav__links.is-aberto { margin-top: var(--wb-space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-nav__links { transition: none; }
}

/* ==========================================================================
   27. ÍCONES — Bootstrap Icons 1.13.1
   Substitui os SVGs soltos. Ganho real: um vocabulário fechado de ~2.000
   ícones com peso e grade consistentes, em vez de desenhos avulsos com
   espessuras diferentes. A fonte é carregada uma vez (ab-wey-icons.css,
   servida localmente) e escala por font-size.
   ========================================================================== */

.bi { line-height: 1; vertical-align: -.125em; }
.wb-icone .bi { font-size: 1.15rem; }
.wb-icone--lg .bi { font-size: 1.5rem; }
.wb-icone--sm .bi { font-size: .85rem; }
.btn .bi { font-size: 1.05em; line-height: 1; }
.wb-link-arrow .bi { transition: transform var(--wb-dur-base) var(--wb-ease); }
.wb-link-arrow:hover .bi { transform: translateX(4px); }
.wb-plano__lista .bi { flex: none; margin-top: .18rem; color: var(--wb-text-accent); font-size: .95rem; }
.wb-ficha__r .bi { font-size: 1.05em; margin-right: .35rem; vertical-align: -.1em; }

/* ==========================================================================
   28. ILHA v2 — dois andares
   --------------------------------------------------------------------------
   O andar de cima carrega o que a marca precisa dizer antes de qualquer
   navegação: registro profissional e canal de contato. Ele permanece
   visível durante a rolagem — credencial e contato acompanham a leitura
   inteira; só a barra de menu encolhe ao fixar.
   ========================================================================== */

.wb-nav__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wb-space-4);
  padding: 0 var(--wb-space-5);
  max-height: 44px; overflow: hidden;
  border-bottom: 1px solid var(--wb-border);
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wb-text-muted);
}
.wb-nav__topo-item { display: inline-flex; align-items: center; gap: .45rem; padding-block: .8rem; }
.wb-nav__topo-item .bi { font-size: 12px; color: var(--wb-text-accent); }
.wb-nav__topo a { color: var(--wb-text-muted); text-decoration: none; transition: color var(--wb-dur-fast) linear; }
.wb-nav__topo a:hover { color: var(--wb-text); }
.wb-nav__canais { display: flex; align-items: center; gap: var(--wb-space-4); }

@media (max-width: 767.98px) { .wb-nav__topo { display: none; } }

/* Botão de menu com troca de ícone */
.wb-nav__toggle { position: relative; }
.wb-nav__toggle .bi { position: absolute; font-size: 1.05rem; transition: opacity var(--wb-dur-fast) linear, transform var(--wb-dur-base) var(--wb-ease); }
.wb-nav__toggle .bi-x-lg { opacity: 0; transform: rotate(-90deg); }
.wb-nav__toggle[aria-expanded='true'] .bi-list { opacity: 0; transform: rotate(90deg); }
.wb-nav__toggle[aria-expanded='true'] .bi-x-lg { opacity: 1; transform: none; }

/* Estado ativo mais legível: a régua vira um traço cheio e o peso sobe */
.wb-nav__links a[aria-current] { color: var(--wb-green-900); font-weight: 600; }
.wb-nav__links a[aria-current]::after { transform: scaleX(1); }

/* ==========================================================================
   29. HERO v2 — arco de marca por trás da figura
   --------------------------------------------------------------------------
   O arco não é ornamento: é a moldura de ícone da marca em escala grande —
   cantos redondos com um canto reto embaixo à esquerda, o mesmo contraste
   entre os vértices angulares do W e os bojos redondos do B. Ele resolve
   dois problemas de uma vez: dá borda à camiseta preta (1,2:1 contra o
   verde-900) e ancora a figura no bloco em vez de deixá-la flutuando.
   ========================================================================== */

.wb-hero__figura { position: relative; justify-self: center; width: 100%; max-width: 480px; }

.wb-hero__arco {
  position: absolute; z-index: 0;
  left: 4%; right: 4%; top: 4%; bottom: 0;
  background:
    radial-gradient(110% 76% at 32% -4%, color-mix(in srgb, var(--wb-green-500) 50%, transparent) 0%, transparent 56%),
    linear-gradient(170deg, var(--wb-green-700) 0%, var(--wb-green-800) 62%, var(--wb-green-900) 100%);
  border-radius: 999px 999px var(--wb-radius-xl) 4px;
  box-shadow:
    inset 0 1px 0 rgba(var(--wb-bone-rgb), .16),
    inset 0 -40px 60px -40px color-mix(in srgb, var(--wb-green-950) 70%, transparent),
    0 34px 70px -34px color-mix(in srgb, var(--wb-green-950) 90%, transparent);
}
/* Anel de eco: a mesma moldura, um passo maior, só o traço. Dá profundidade
   sem adicionar cor nova. */
.wb-hero__arco::before {
  content: ''; position: absolute; inset: -14px;
  border: 1px solid rgba(var(--wb-bone-rgb), .13);
  border-radius: 999px 999px calc(var(--wb-radius-xl) + 8px) 4px;
}
.wb-hero__arco::after {
  content: ''; position: absolute; inset: -28px;
  border: 1px dashed rgba(var(--wb-bone-rgb), .07);
  border-radius: 999px 999px calc(var(--wb-radius-xl) + 16px) 4px;
}
.wb-hero__figura::before {
  content: ''; position: absolute; z-index: 0;
  inset: 6% -16% -4% -16%;
  background: radial-gradient(58% 52% at 50% 44%, color-mix(in srgb, var(--wb-green-500) 62%, transparent) 0%, transparent 70%);
  filter: blur(2px);
}
.wb-hero__figura img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }

/* Marca-d'água: o logotipo em escala de bloco, atravessando o arco atrás do
   tronco. Tinta quase transparente — textura de marca, não segundo logo. */
.wb-hero__marca {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 15%; transform: translateX(-50%);
  width: 148%; aspect-ratio: 125 / 47;
  background: linear-gradient(180deg, rgba(var(--wb-bone-rgb), .10) 0%, rgba(var(--wb-bone-rgb), .03) 100%);
  -webkit-mask: var(--wb-logo-mask) center / contain no-repeat;
          mask: var(--wb-logo-mask) center / contain no-repeat;
}

.wb-hero__serie { position: absolute; z-index: 2; bottom: 8%; left: -10%; width: 200px; }
@media (max-width: 1199.98px) { .wb-hero__serie { left: -4%; width: 178px; } }
@media (max-width: 991.98px) {
  .wb-hero__figura { max-width: 380px; margin-top: var(--wb-space-6); }
  .wb-hero__serie { left: -2%; bottom: 4%; width: 168px; }
}
@media (max-width: 575.98px) {
  .wb-hero__serie { display: none; }
  .wb-hero__figura { max-width: 300px; }
  .wb-hero__arco::after { display: none; }
}

/* A figura encosta na base do bloco em vez de flutuar no meio dele */
.wb-hero__grade { align-items: end; }
.wb-hero--figura .wb-hero__inner { padding-bottom: 0; }

/* Chamada de rolagem */
.wb-hero__rolar {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--wb-green-300); text-decoration: none;
}
.wb-hero__rolar .bi { animation: wb-descer 2.4s var(--wb-ease) infinite; }
@keyframes wb-descer { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .wb-hero__rolar .bi { animation: none; } }

/* ==========================================================================
   FIGURA DO QUEM SOU — o mesmo arco da hero, em tinta clara
   A hero apresenta a figura sobre o verde-900; aqui ela reaparece sobre o
   off-white. Mesma moldura, mesma marca-d'água, gramática invertida: o que
   lá era luz sobre escuro, aqui é tinta sobre claro.
   ========================================================================== */

.wb-sobre__figura { position: relative; max-width: 440px; margin-inline: auto; }
.wb-sobre__arco {
  position: absolute; z-index: 0;
  left: 4%; right: 4%; top: 4%; bottom: 0;
  background:
    radial-gradient(110% 76% at 32% -4%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(170deg, var(--wb-green-100) 0%, var(--wb-green-200) 62%, var(--wb-green-300) 100%);
  border-radius: 999px 999px var(--wb-radius-xl) 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 26px 52px -26px rgba(var(--wb-green-900-rgb), .4);
}
.wb-sobre__arco::before {
  content: ''; position: absolute; inset: -14px;
  border: 1px solid rgba(var(--wb-green-900-rgb), .14);
  border-radius: 999px 999px calc(var(--wb-radius-xl) + 8px) 4px;
}
.wb-sobre__arco::after {
  content: ''; position: absolute; inset: -28px;
  border: 1px dashed rgba(var(--wb-green-900-rgb), .09);
  border-radius: 999px 999px calc(var(--wb-radius-xl) + 16px) 4px;
}
.wb-sobre__marca {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 15%; transform: translateX(-50%);
  width: 148%; aspect-ratio: 125 / 47;
  background: linear-gradient(180deg, rgba(var(--wb-green-900-rgb), .08) 0%, rgba(var(--wb-green-900-rgb), .02) 100%);
  -webkit-mask: var(--wb-logo-mask) center / contain no-repeat;
          mask: var(--wb-logo-mask) center / contain no-repeat;
}
.wb-sobre__figura img {
  position: relative; z-index: 1; width: 100%; height: auto; display: block;
  filter: drop-shadow(0 20px 32px rgba(var(--wb-green-900-rgb), .32));
  /* O corte reto do recorte dissolve antes de encostar na borda do arco
     (máscara: só o alfa importa, #000 aqui não é cor). */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
}
@media (max-width: 991.98px) { .wb-sobre__figura { max-width: 340px; } }
@media (max-width: 575.98px) { .wb-sobre__figura { max-width: 300px; } .wb-sobre__arco::after { display: none; } }

/* ==========================================================================
   FORMULÁRIO DO DIAGNÓSTICO — o ponto de conversão vira um card da marca
   --------------------------------------------------------------------------
   O formulário deixa de flutuar solto no bloco âncora e ganha superfície
   própria: painel elevado, canto cortado e a rampa no teto — a mesma
   assinatura do plano em destaque e da coluna destacada da tabela.
   As sete perguntas são numeradas em mono, fechando com o "Sete perguntas"
   prometido na coluna ao lado.
   ========================================================================== */

.wb-diag {
  position: relative; overflow: hidden;
  counter-reset: pergunta;
  background:
    radial-gradient(120% 90% at 24% -10%, color-mix(in srgb, var(--wb-green-500) 22%, transparent) 0%, transparent 55%),
    var(--wb-surface-raised);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-cut);
  padding: var(--wb-space-6);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--wb-green-950) 80%, transparent);
}
.wb-diag::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--wb-rampa-grad);
}
/* Rótulo em voz de especificação: mono, uppercase, numerado 01–07 */
.wb-diag .form-label {
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--wb-green-300);
  margin-bottom: .5rem;
}
.wb-diag .form-label::before {
  counter-increment: pergunta;
  content: counter(pergunta, decimal-leading-zero) ' · ';
  color: var(--wb-green-500);
}
@media (max-width: 575.98px) { .wb-diag { padding: var(--wb-space-5) var(--wb-space-4); } }

/* ==========================================================================
   I. INTEGRAÇÃO COM O FRAMEWORK (Ragazzo Control Panel · tema wc_wey)
   O que o design system do cliente não previa: o reset.css do core, o
   dashlite.css de 48 mil linhas, a ilha fixa sobre páginas internas, os
   widgets globais (newsletter, FAQ, comentários, galeria), as páginas de
   módulo herdadas (.ag-*) e os flutuantes do core (WhatsApp, LGPD, chat).
   Sub-blocos a–o, na ordem do brief.
   ========================================================================== */

/* --- I-a. Cor dos botões (obrigatório) ------------------------------------
   _cdn/bootcss/reset.css declara `.btn{background:#888;color:#fff !important;
   padding:7px 12px;margin-top:2px;text-shadow:1px 1px #555}` para TODO botão
   do site — carregado antes de tudo, e o !important vence qualquer
   --bs-btn-color por mais tarde que ele venha. Sem este bloco o primário
   invertido do herói (off-white preenchendo) saía com texto branco sobre
   off-white e o contorno virava botão invisível. Devolver a cor exige a mesma
   arma: são os únicos !important de cor do tema, apontando para as variáveis
   do próprio Bootstrap, então cada variante (.btn-wb-*) segue mandando. */
.btn { color: var(--bs-btn-color) !important; text-shadow: none; margin-top: 0; }
.btn:hover, .btn:focus-visible { color: var(--bs-btn-hover-color) !important; }
.btn:active, .btn.active, .btn.show { color: var(--bs-btn-active-color) !important; }
.btn:disabled, .btn.disabled { color: var(--bs-btn-disabled-color) !important; }

/* --- I-b. Utilitário .gap-N ----------------------------------------------
   O dashlite.css define .gap-N duas vezes: a do Bootstrap (gap) e, no fim do
   arquivo, um "espaçador" `.gap-2{height:.75rem}` que força ALTURA em qualquer
   flex com gap — um d-flex.gap-2 de botões ficava com 12px de alto. Devolve a
   escala do BS5 (0/.25/.5/1/1.5/3rem) e solta a altura. */
.gap-0 { gap: 0 !important; height: auto; }
.gap-1 { gap: .25rem !important; height: auto; }
.gap-2 { gap: .5rem !important; height: auto; }
.gap-3 { gap: 1rem !important; height: auto; }
.gap-4 { gap: 1.5rem !important; height: auto; }
.gap-5 { gap: 3rem !important; height: auto; }
/* Mesmo problema nos utilitários de margem, padding e gutter: o dashlite.css
   recalibra a escala (*-1 = .375rem, *-2 = .75rem, *-5 = 2.75rem; o Bootstrap
   é .25 / .5 / 3rem), tudo com !important. O herói saía 16px mais baixo, os
   links do rodapé mais espaçados, o .g-5 4px mais estreito. Devolve a escala
   do BS5 nos sufixos que as páginas usam (3 e 4 já coincidem: 1rem / 1.5rem). */
.mt-1 { margin-top: .25rem !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.ms-2 { margin-left: .5rem !important; }
.me-2 { margin-right: .5rem !important; }
.pt-2 { padding-top: .5rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.p-2  { padding: .5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.p-5  { padding: 3rem !important; }
.g-2, .gx-2 { --bs-gutter-x: .5rem; }
.g-2, .gy-2 { --bs-gutter-y: .5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }
.g-5, .gy-5 { --bs-gutter-y: 3rem; }

/* --- I-c. Corpo e wrapper -------------------------------------------------
   O body já está no bloco 3 (fonte, cor e superfície do design system; vence
   o body{Segoe UI} do wc-agency.css por ordem de carga). O wrapper .ag-wrap
   também carrega .wc-shop, que o wc-agency.css pinta com --ag-bg/--ag-text —
   mesma especificidade, esta folha vem depois.
   Antes do conteúdo, o .ag-wrap acumula só elementos FORA do fluxo (skip
   link, ilha fixa, modais dos widgets, barra fixa). Os espaços em branco do
   HTML entre eles não colapsam — cada elemento posicionado deixa um marcador
   inline no contexto de linha do wrapper — e o navegador monta uma caixa de
   linha anônima de uma entrelinha (~26px) ANTES da primeira seção. Era essa
   caixa que abria a faixa clara no topo do site: o herói escuro começava
   26px abaixo e o fundo do wrapper aparecia por cima dele. Zerar a
   entrelinha do wrapper mata a caixa; os filhos recebem a do corpo de volta. */
.ag-wrap { background: var(--wb-surface); color: var(--wb-text); line-height: 0; }
.ag-wrap > * { line-height: var(--wb-lh-base); }

/* --- I-d. Ilha sobre páginas internas ------------------------------------
   A ilha é position:fixed e não empurra o fluxo. Nas páginas internas o
   header imprime .wb-nav-spacer, que reserva a altura medida pelo JS
   (--wb-nav-h = ilha + padding-top da .wb-nav). A página cuja PRIMEIRA seção
   já reserva o topo marca essa seção com .wb-hero-top: o espaçador some e a
   seção sobe até o topo, no mesmo respiro do blog.html do cliente
   (padding-top: calc(var(--wb-nav-h) + 4rem)). O !important é necessário:
   páginas herdadas redefinem o padding da própria hero em <style> inline,
   aplicado depois desta folha. */
.wb-nav-spacer { height: calc(var(--wb-nav-h, 76px) + var(--wb-space-5)); }
body:has(.wb-hero-top) .wb-nav-spacer { display: none; }
.wb-hero-top { padding-top: calc(var(--wb-nav-h, 76px) + 4rem) !important; }
/* Hero de mídia (widget de slide como herói): a foto sobe inteira atrás da
   ilha — nada a reservar. */
.wcslide.wb-hero-top { padding-top: 0 !important; }
/* --- I-d2. Widgets com herói próprio (conta e pedido) ----------------------
   /conta e /pedido não montam a hero no tema: o widget imprime o próprio herói
   full-bleed e injeta a folha dele DEPOIS desta (account.css / cart.css), com
   `.wc-acc-shell / .wc-cart-shell { padding-top: 0 !important }` — mesma
   especificidade de .wb-hero-top, carregada depois → venceria, e a hero
   nascia por baixo da ilha. A section leva .wb-topo-widget em vez de
   .wb-hero-top: o espaçador some (a hero sobe até o topo e fica ATRÁS da
   ilha, como na home) e quem compensa a altura da ilha é o próprio herói do
   widget, com o respiro que ele já usa (clamp) somado a --wb-nav-h. Dois
   seletores de classe vencem a folha do widget independente da ordem.
   Telas sem herói (login/cadastro/recuperar/sair e carrinho vazio) ganham o
   mesmo respiro do blog (+4rem) para o card não nascer sob a ilha. */
body:has(.wb-topo-widget) .wb-nav-spacer { display: none; }
.wb-topo-widget .wc-acc-hero,
.wb-topo-widget .wc-cart-hero { padding-top: calc(var(--wb-nav-h, 76px) + clamp(1.75rem, 3vw, 2.75rem)); }
.wb-topo-widget .wc-acc-auth,
.wb-topo-widget .wc-cart > .wc-cart-plain:first-child { padding-top: calc(var(--wb-nav-h, 76px) + 4rem); }
/* Campus (/campus → _ead): o wrapper .wc_ead leva o mesmo marcador. Cada tela
   tem o próprio herói full-bleed com padding em clamp na folha base
   (_ead/wc_ead.css, carregada ANTES desta) — aqui só se soma --wb-nav-h ao
   respiro que ele já tem. .wc_ead.wb-topo-widget sobe a especificidade acima
   de `.wc_ead .cmp-*`; validar/certificado usam <style> inline com #id, por
   isso o seletor repete o id. */
.wc_ead.wb-topo-widget .cmp-hero--bleed,
.wc_ead.wb-topo-widget .cmp-coursehero--bleed { padding-top: calc(var(--wb-nav-h, 76px) + clamp(2rem, 4vw, 3rem)); }
.wc_ead.wb-topo-widget .cmp-lessonhead--bleed { padding-top: calc(var(--wb-nav-h, 76px) + clamp(1.75rem, 4vw, 2.5rem)); }
.wc_ead.wb-topo-widget .cmp-auth { padding-top: calc(var(--wb-nav-h, 76px) + clamp(2.5rem, 6vw, 4.5rem)); }
.wb-topo-widget #wc-validar .vb-hero,
.wb-topo-widget #wc-cert-page .wc-cert-hero { padding-top: calc(var(--wb-nav-h, 76px) + clamp(2.25rem, 5vw, 3.5rem)); }
/* Envelope do herói em slides (WEY_HERO_SLIDES=1: o index.php imprime
   <div class="wb-hero-slide" id="topo"> em volta do widget). Chão no verde da
   marca — o mesmo do .wb-hero — para o bloco nascer escuro antes da primeira
   foto carregar; a ilha é reservada pela própria skin (--wcs-nav-h). */
.wb-hero-slide { position: relative; isolation: isolate; background: var(--wb-green-900); color: var(--wb-bone); line-height: var(--wb-lh-base); }

/* Logo do painel na ilha (no lugar do monograma por máscara). Encolhe junto
   com a barra ao fixar. */
.wb-nav__logo { display: block; width: auto; max-height: 30px; transition: max-height var(--wb-dur-slow) var(--wb-ease); }
.wb-nav.is-stuck .wb-nav__logo { max-height: 26px; }
/* Ações da ilha (conta, carrinho): o mesmo botão redondo do toggle. */
.wb-nav__ico {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--wb-border-strong); color: var(--wb-green-900);
  text-decoration: none; cursor: pointer;
  transition: background var(--wb-dur-fast) linear, border-color var(--wb-dur-fast) linear;
}
.wb-nav__ico:hover { background: var(--wb-green-100); color: var(--wb-green-900); border-color: var(--wb-green-700); }
.wb-nav__ico .bi { font-size: 1.05rem; }
/* Contador do carrinho: pastilha em mono no canto superior direito do botão. */
.wb-nav__badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-green-900); color: var(--wb-bone);
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500; line-height: 1;
  box-shadow: 0 0 0 2px var(--wb-bone);
}
.wb-nav__badge:empty { display: none; }
/* Telas muito estreitas: a marca cede espaço às ações e ao toggle. */
@media (max-width: 359.98px) {
  .wb-nav__brand > span:last-child { display: none; }
  .wb-nav__logo { max-height: 26px; }
  .wb-nav__actions { gap: .35rem; }
}

/* --- I-e. A rampa como componente ----------------------------------------
   O original pintava cada <span> com um hex inline (style="background:#…"),
   o que furaria a regra de cor por token e a paleta do painel. Agora a
   marcação é wc_wey_rampa($classe, $n) — só spans vazios — e a cor de cada
   degrau vem daqui, por posição: 10 spans = 100 → 950 (herói), 8 spans =
   100 → 800 (rodapé, plano em destaque, tabela). */
.wb-rampa { display: flex; width: 100%; height: 3px; }
.wb-rampa span { flex: 1; display: block; min-width: 0; }
.wb-rampa span:nth-child(1)  { background: var(--wb-green-100); }
.wb-rampa span:nth-child(2)  { background: var(--wb-green-200); }
.wb-rampa span:nth-child(3)  { background: var(--wb-green-300); }
.wb-rampa span:nth-child(4)  { background: var(--wb-green-400); }
.wb-rampa span:nth-child(5)  { background: var(--wb-green-500); }
.wb-rampa span:nth-child(6)  { background: var(--wb-green-600); }
.wb-rampa span:nth-child(7)  { background: var(--wb-green-700); }
.wb-rampa span:nth-child(8)  { background: var(--wb-green-800); }
.wb-rampa span:nth-child(9)  { background: var(--wb-green-900); }
.wb-rampa span:nth-child(10) { background: var(--wb-green-950); }

/* --- I-f. Rodapé: marca, descrição, newsletter e crédito -----------------
   (A base do rodapé — fundo, malha, monograma, chamada e fios — está no
   bloco 12; aqui entram as peças que só existem no framework.) */
.wb-footer__brand { display: inline-flex; align-items: center; color: var(--wb-bone); text-decoration: none; }
.wb-footer__brand .wb-logo { color: var(--wb-bone); }
.wb-footer__logo { display: block; width: auto; max-height: 40px; }
.wb-footer__desc { color: var(--wb-footer-text); font-size: var(--wb-fs-sm); line-height: 1.6; max-width: 38ch; }

/* Newsletter (WEY_FOOTER_NEWSLETTER=1): chamada à esquerda, formulário à
   direita, o mesmo divisor-fio da chamada final embaixo. */
.wb-footer__news {
  position: relative;
  display: grid; gap: var(--wb-space-5); align-items: center;
  padding-bottom: var(--wb-space-7); margin-bottom: var(--wb-space-7);
}
@media (min-width: 992px) { .wb-footer__news { grid-template-columns: .85fr 1.7fr; gap: var(--wb-space-6); } }
.wb-footer__news::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--wb-bone-rgb), 0) 0%,
    color-mix(in srgb, var(--wb-green-500) 38%, transparent) 18%,
    rgba(var(--wb-bone-rgb), .2) 50%,
    color-mix(in srgb, var(--wb-green-500) 38%, transparent) 82%,
    rgba(var(--wb-bone-rgb), 0) 100%);
}
.wb-footer__news-title { font-family: var(--wb-font-display); font-size: var(--wb-fs-h3); letter-spacing: -.02em; color: var(--wb-bone); margin: 0; max-width: 28ch; }
.wb-footer__news-form { min-width: 0; }

/* O widget é global (_cdn/widgets/newsletter) e chega com o visual neutro
   dele. Aqui veste a linguagem do tema — campos de vidro sobre o preto e o
   botão primário invertido (off-white preenchendo, verde escrevendo), o
   mesmo par do herói. Escopado ao rodapé para não afetar o widget noutro
   lugar. O rótulo é a moldura do campo: o ícone (Nioicon, do core) vira
   adorno absoluto dentro do input e o padding-left abre o espaço dele. */
.wb-footer .jwc_newsletter_row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.wb-footer .jwc_newsletter_field { position: relative; display: block; flex: 1 1 130px; min-width: 0; margin: 0; }
.wb-footer .jwc_newsletter_field > .icon {
  position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
  font-size: 1rem; line-height: 1; color: var(--wb-green-500);
  transition: color var(--wb-dur-fast) linear;
}
.wb-footer .jwc_newsletter_field:focus-within > .icon { color: var(--wb-green-300); }
/* O campo de WhatsApp tem o placeholder mais longo — cresce um pouco mais. */
.wb-footer .jwc_newsletter_field:nth-of-type(3) { flex-grow: 1.3; }
.wb-footer .jwc_newsletter_field input {
  width: 100%;
  background: rgba(var(--wb-bone-rgb), .06);
  border: 1px solid rgba(var(--wb-bone-rgb), .18);
  border-radius: var(--wb-radius-pill);   /* mesmo raio do botão: a linha lê como um conjunto */
  color: var(--wb-bone);
  font-family: var(--wb-font-body); font-size: var(--wb-fs-sm);
  padding: .8rem 1.3rem .8rem 2.9rem;
  transition: border-color var(--wb-dur-fast) linear, background var(--wb-dur-fast) linear, box-shadow var(--wb-dur-base) var(--wb-ease);
}
.wb-footer .jwc_newsletter_field input::placeholder { color: rgba(var(--wb-bone-rgb), .45); }
.wb-footer .jwc_newsletter_field input:focus {
  outline: 0;
  background: rgba(var(--wb-bone-rgb), .1);
  border-color: var(--wb-green-300);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-300) 22%, transparent);
}
.wb-footer .jwc_newsletter_btn {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .8rem 1.6rem;
  border-radius: var(--wb-radius-pill);
  border: 1px solid var(--wb-bone);
  background: var(--wb-bone); color: var(--wb-green-900);
  font-family: var(--wb-font-body); font-weight: 600; font-size: var(--wb-fs-sm);
  cursor: pointer;
  transition: background var(--wb-dur-fast) linear, transform var(--wb-dur-fast) var(--wb-ease), box-shadow var(--wb-dur-base) var(--wb-ease);
}
.wb-footer .jwc_newsletter_btn .icon { font-size: 1rem; color: var(--wb-green-700); }
.wb-footer .jwc_newsletter_btn:hover { background: var(--wb-white); transform: translateY(-2px); box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--wb-green-950) 85%, transparent); }
.wb-footer .jwc_newsletter_btn:active { transform: translateY(0); }
.wb-footer .jwc_newsletter_msg { font-size: var(--wb-fs-xs); margin-top: .6rem; color: var(--wb-footer-text); }
.wb-footer .jwc_newsletter_msg:empty { display: none; }
.wb-footer .jwc_newsletter_msg.is-err { color: var(--wb-danger-on-dark); }
.wb-footer .jwc_newsletter_msg.is-ok  { color: var(--wb-green-300); }
/* Recompensa de inscrição (Marketing › Recompensa): o widget imprime o cartão
   com o visual neutro dele (fundo branco, selo na cor da marca) num <style>
   inline; aqui ele vira um cartão compacto na linguagem do rodapé — vidro sobre
   o preto, off-white escrevendo, o selo no par invertido do botão (off-white
   preenchendo, verde escrevendo) e a nota em verde-300. Só aparece quando a
   recompensa está ativa (arquivo enviado ou cupom válido). O layout (flex,
   colunas do selo e do texto) é repetido aqui para o cartão não depender do
   <style> do widget. */
.wb-footer .jwc_newsletter_reward {
  position: relative; overflow: hidden; text-align: left;
  display: flex; align-items: center; gap: .85rem;
  margin: 0 0 .9rem; padding: .65rem .95rem .65rem .8rem;
  border-radius: var(--wb-radius-lg);
  background: rgba(var(--wb-bone-rgb), .06);
  border: 1px solid rgba(var(--wb-bone-rgb), .18);
  box-shadow: none; color: var(--wb-bone);
}
.wb-footer .jwc_newsletter_reward::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--wb-green-500); }
.wb-footer .jwc-rw__badge {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  min-width: 54px; height: 54px; margin-left: .1rem; padding: 0 .5rem;
  border-radius: var(--wb-radius-md);
  background: var(--wb-bone); color: var(--wb-green-900); box-shadow: none;
}
.wb-footer .jwc-rw__badge b { font-family: var(--wb-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.wb-footer .jwc-rw__badge i { font-family: var(--wb-font-mono); font-style: normal; text-transform: uppercase; margin-top: .2rem; font-size: .55rem; font-weight: 600; letter-spacing: .12em; color: var(--wb-green-700); opacity: 1; }
.wb-footer .jwc-rw__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.wb-footer .jwc-rw__badge .icon { font-size: 1.45rem; color: var(--wb-green-800); }
.wb-footer .jwc-rw__title { font-family: var(--wb-font-body); font-weight: 600; font-size: var(--wb-fs-sm); line-height: 1.3; color: var(--wb-bone); }
.wb-footer .jwc-rw__note { display: inline-flex; align-items: center; gap: .32rem; font-size: var(--wb-fs-xs); font-weight: 500; color: var(--wb-green-300); }
.wb-footer .jwc-rw__note .icon { color: var(--wb-green-500); }
@media (max-width: 575.98px) {
  .wb-footer .jwc_newsletter_reward { gap: .65rem; padding: .6rem .7rem .6rem .65rem; }
  .wb-footer .jwc-rw__badge { min-width: 48px; height: 48px; }
}
/* Campo reprovado na saída (o zz-wey.js marca aria-invalid no blur). Atributo
   em vez de classe: não colide com o estado que os widgets escrevem. */
.wb-footer .jwc_newsletter_field input[aria-invalid="true"] {
  border-color: var(--wb-danger-on-dark);
  background: color-mix(in srgb, var(--wb-danger) 14%, transparent);
}
.wb-footer .jwc_newsletter_field:has(input[aria-invalid="true"]) > .icon { color: var(--wb-danger-on-dark); }
/* Celular: um campo por linha. Emparelhados, os placeholders truncam antes
   de o usuário saber o que digitar. */
@media (max-width: 575.98px) {
  .wb-footer .jwc_newsletter_field,
  .wb-footer .jwc_newsletter_field:nth-of-type(3) { flex: 1 1 100%; }
  .wb-footer .jwc_newsletter_btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wb-footer .jwc_newsletter_btn:hover { transform: none; } }

/* Crédito da agência (wc_agency_credit → .wc-dev-credit-line): coluna direita do
   pé, em destaque — "Desenvolvido por" em mono pequeno em cima, o nome (ou a logo)
   da agência embaixo, na cor clara. O helper devolve texto + <a>: o flex em coluna
   separa os dois sem mexer no helper. */
.wb-footer__credit { justify-self: end; text-align: right; }
.wb-footer__credit .wc-dev-credit {
  display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
  font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-green-500);
}
.wb-footer__credit .wc-dev-credit a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--wb-font-display); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; text-transform: none;
  color: var(--wb-bone) !important; text-decoration: none;
  padding-bottom: .15rem; border-bottom: 1px solid rgba(var(--wb-bone-rgb), .3);
  transition: border-color var(--wb-dur-fast) linear, color var(--wb-dur-fast) linear;
}
.wb-footer__credit .wc-dev-credit a::after { content: '\f144'; font-family: 'bootstrap-icons'; font-size: .8rem; font-weight: 400; opacity: .7; } /* bi-arrow-up-right */
.wb-footer__credit .wc-dev-credit a:hover { border-color: var(--wb-bone); }
.wb-footer__credit .wc-dev-credit-logo { height: 26px !important; }
@media (max-width: 767.98px) {
  .wb-footer__base { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--wb-space-5); }
  .wb-footer__topo { order: -1; }
  .wb-footer__legal { align-items: center; }
  .wb-footer__credit { justify-self: center; text-align: center; }
  .wb-footer__credit .wc-dev-credit { align-items: center; }
}

/* --- I-g. Páginas internas: cabeça, migalha, paginação, editorias, busca --- */

/* Cabeça de página interna (blog, contato, faq, CMS): eyebrow + h1 + lead,
   na 1ª seção, que já carrega .wb-hero-top e por isso reserva o topo sozinha. */
/* Sem override de padding-bottom: a cabeça respira o mesmo --wb-section-y da
   .wb-section (112px no desktop), como no blog.html do cliente — ali é a seção
   SEGUINTE que zera o próprio topo (.pt-0). Para a página que esqueceu o .pt-0
   numa seção seguinte de MESMO fundo, o zero entra por aqui; senão o respiro
   dobrava (224px). Fundo diferente (sunken/anchor/black) fica de fora: a troca
   de cor pede o padding próprio. */
.wb-page-head + .wb-section:not(.wb-section--sunken, .wb-section--anchor, .wb-section--black) { padding-top: 0; }
.wb-page-head .wb-h1, .wb-page-head h1 { max-width: 20ch; margin: 0; }
.wb-page-head .wb-lead { margin: var(--wb-space-4) 0 0; }
.wb-page-head .wb-crumb { margin-bottom: var(--wb-space-5); }
/* Cabeça centrada (contato, ajuda): tudo no eixo, largura de leitura. */
.wb-page-head--centro { text-align: center; }
.wb-page-head--centro .wb-h1, .wb-page-head--centro h1, .wb-page-head--centro .wb-lead,
.wb-page-head--centro .wb-icone { margin-inline: auto; }
.wb-page-head--centro .wb-crumb { justify-content: center; }

/* Migalha em mono: substitui o .breadcrumb do Bootstrap. Título longo encurta
   em reticências em vez de quebrar a linha. */
.wb-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--wb-text-muted);
  margin-bottom: var(--wb-space-5);
}
.wb-crumb a { color: var(--wb-text-muted); text-decoration: none; transition: color var(--wb-dur-fast) linear; }
.wb-crumb a:hover { color: var(--wb-text); }
.wb-crumb > span[aria-hidden] { color: var(--wb-green-400); }
.wb-crumb [aria-current] { color: var(--wb-text-accent); }
.wb-crumb a, .wb-crumb [aria-current] { max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Paginação em pílulas; a ativa inverte para o verde-900. <span> serve para
   as reticências e para o "Anterior/Próxima" desligados. */
.wb-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem;
  margin-top: var(--wb-space-7);
}
.wb-pagination a, .wb-pagination span {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 42px; height: 42px; padding: 0 .9rem;
  border-radius: var(--wb-radius-pill); border: 1px solid var(--wb-border-strong);
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-sm); font-weight: 500;
  color: var(--wb-text-muted); text-decoration: none;
  transition: border-color var(--wb-dur-fast) linear, color var(--wb-dur-fast) linear, background var(--wb-dur-fast) linear;
}
.wb-pagination span { border-style: dashed; }
.wb-pagination a:hover { border-color: var(--wb-green-700); color: var(--wb-text); }
.wb-pagination a.is-active, .wb-pagination a[aria-current='page'] {
  background: var(--wb-green-900); border-color: var(--wb-green-900); color: var(--wb-bone);
}

/* Editorias do blog: a fileira de selos --line do blog.html, agora links com
   o contador em mono. A ativa é o selo --solid (texto preenchendo, superfície
   escrevendo) — inverte sozinha no escuro. */
.wb-blog-eds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--wb-space-5); }
.wb-ed {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--wb-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .8rem; border-radius: var(--wb-radius-pill);
  border: 1px solid var(--wb-border-strong); background: transparent;
  color: var(--wb-text-muted); text-decoration: none;
  transition: transform var(--wb-dur-base) var(--wb-ease), border-color var(--wb-dur-fast) linear,
              color var(--wb-dur-fast) linear, background var(--wb-dur-fast) linear;
}
.wb-ed .bi { font-size: 12px; color: var(--wb-text-accent); }
.wb-ed b {
  font-weight: 500; font-size: 10px; line-height: 1;
  padding: .2rem .45rem; border-radius: var(--wb-radius-pill);
  background: var(--wb-badge-bg); color: var(--wb-badge-fg);
}
.wb-ed:hover { transform: translateY(-1px); border-color: var(--wb-green-700); color: var(--wb-text); }
.wb-ed.is-active { background: var(--wb-text); border-color: var(--wb-text); color: var(--wb-surface); }
.wb-ed.is-active .bi { color: inherit; }
.wb-ed.is-active b { background: rgba(var(--wb-bone-rgb), .18); color: inherit; }
@media (prefers-reduced-motion: reduce) { .wb-ed:hover { transform: none; } }

/* Busca em pílula (ícone + input transparente + botão) — /artigos e /faq.
   O form leva também .ag-blog-search, o hook do scripts.js que redireciona
   para /artigos/busca/<termo>. */
.wb-busca, .wb-faq-busca {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; max-width: 560px;
  padding: .3rem .35rem .3rem 1.15rem;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-pill);
  transition: border-color var(--wb-dur-fast) linear, box-shadow var(--wb-dur-base) var(--wb-ease);
}
.wb-busca:focus-within, .wb-faq-busca:focus-within {
  border-color: var(--wb-green-700);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-700) 20%, transparent);
}
.wb-busca > .bi, .wb-busca > .icon, .wb-faq-busca > .bi, .wb-faq-busca > .icon { flex: none; font-size: 1.05rem; color: var(--wb-text-accent); }
.wb-busca input, .wb-faq-busca input {
  flex: 1 1 auto; min-width: 0; width: auto;
  border: 0; outline: 0; background: transparent;
  padding: .6rem 0;
  font-family: var(--wb-font-body); font-size: var(--wb-fs-base); color: var(--wb-text);
}
.wb-busca input::placeholder, .wb-faq-busca input::placeholder { color: var(--wb-green-400); }
/* O X do WebKit duplicaria o nosso botão de limpar */
.wb-busca input::-webkit-search-cancel-button, .wb-faq-busca input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.wb-busca .btn { flex: none; }
.wb-busca button:not(.btn), .wb-faq-busca__limpar {
  flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--wb-green-900); color: var(--wb-bone);
  transition: background var(--wb-dur-fast) linear, color var(--wb-dur-fast) linear;
}
.wb-busca button:not(.btn):hover { background: var(--wb-green-800); }
.wb-faq-busca__limpar { background: var(--wb-green-100); color: var(--wb-green-800); }
.wb-faq-busca__limpar:hover { background: var(--wb-green-900); color: var(--wb-bone); }
.wb-faq-busca__limpar[hidden] { display: none; }
/* No escuro (cabeça em bloco âncora): vidro em vez de card branco. */
[data-bs-theme='dark'] .wb-busca, [data-bs-theme='dark'] .wb-faq-busca {
  background: rgba(var(--wb-bone-rgb), .08); border-color: rgba(var(--wb-bone-rgb), .24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
[data-bs-theme='dark'] .wb-busca:focus-within, [data-bs-theme='dark'] .wb-faq-busca:focus-within {
  border-color: var(--wb-green-300); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-300) 22%, transparent);
}
[data-bs-theme='dark'] .wb-busca input::placeholder, [data-bs-theme='dark'] .wb-faq-busca input::placeholder { color: rgba(var(--wb-bone-rgb), .55); }
[data-bs-theme='dark'] .wb-busca button:not(.btn), [data-bs-theme='dark'] .wb-faq-busca__limpar { background: var(--wb-bone); color: var(--wb-green-900); }

/* --- I-h. Formulário de contato (/contato) --------------------------------
   Back-end: _cdn/widgets/contact/contact.ajax.php (wc_send_contact). O campo
   é pílula com o ícone dentro; o textarea é o único de canto grande (pílula
   não serve para texto multilinha). */
.wb-contact-form { display: grid; gap: var(--wb-space-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .wb-contact-form { grid-template-columns: 1fr 1fr; } }
.wb-field { display: block; min-width: 0; }
.wb-field--full { grid-column: 1 / -1; }
.wb-field__label {
  display: block; margin-bottom: .45rem;
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--wb-text-muted);
}
.wb-field__wrap { position: relative; display: block; }
.wb-field__wrap > .bi {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
  font-size: 1rem; line-height: 1; color: var(--wb-green-400);
  transition: color var(--wb-dur-fast) linear;
}
.wb-field:focus-within .wb-field__wrap > .bi { color: var(--wb-text-accent); }
.wb-field input, .wb-field textarea, .wb-field select {
  width: 100%; display: block;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-pill);
  color: var(--wb-text);
  font-family: var(--wb-font-body); font-size: var(--wb-fs-base);
  padding: .85rem 1.3rem;
  transition: border-color var(--wb-dur-fast) linear, box-shadow var(--wb-dur-base) var(--wb-ease);
}
/* Com ícone à esquerda, o texto começa depois dele */
.wb-field__wrap > .bi ~ input, .wb-field__wrap > .bi ~ select { padding-left: 2.9rem; }
.wb-field textarea { border-radius: var(--wb-radius-lg); min-height: 8.5rem; line-height: 1.6; resize: vertical; }
.wb-field__wrap:has(> textarea) > .bi { display: none; }
.wb-field input::placeholder, .wb-field textarea::placeholder { color: var(--wb-green-400); }
.wb-field input:focus, .wb-field textarea:focus, .wb-field select:focus {
  outline: 0;
  border-color: var(--wb-green-700);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-700) 20%, transparent);
}
.wb-field input[aria-invalid="true"], .wb-field textarea[aria-invalid="true"] { border-color: var(--wb-danger); }
.wb-field:has([aria-invalid="true"]) .wb-field__wrap > .bi { color: var(--wb-danger); }
.wb-field:has([aria-invalid="true"]) .wb-field__label { color: var(--wb-danger); }
/* Captcha de soma: campo curto — a resposta tem 1 ou 2 dígitos e um campo de
   largura cheia para isso parece que falta algo. A conta vai no rótulo, em
   mono (é número que se lê com atenção). */
.wb-field--captcha .wb-field__wrap { max-width: 15rem; }
.wb-field--captcha input { font-family: var(--wb-font-mono); letter-spacing: .04em; }
.wb-field--captcha .wb-field__label strong, .wb-field--captcha .wb-field__label b { font-weight: 500; color: var(--wb-text-accent); text-transform: none; letter-spacing: .02em; }
.wb-field__nota { display: block; margin-top: .4rem; font-size: var(--wb-fs-xs); color: var(--wb-text-muted); }

.wb-form__msg { margin: var(--wb-space-4) 0 0; font-size: var(--wb-fs-sm); font-weight: 600; }
.wb-form__msg:empty { display: none; }
.wb-form__msg.is-err { color: var(--wb-danger); }
.wb-form__msg.is-ok {
  color: var(--wb-success);
  display: flex; align-items: flex-start; gap: .5rem;
  padding: var(--wb-space-4);
  border: 1px solid color-mix(in srgb, var(--wb-success) 35%, transparent);
  border-radius: var(--wb-radius-md);
  background: color-mix(in srgb, var(--wb-success) 8%, transparent);
}
/* Enviando: o rótulo some e um anel gira no lugar. ::before, porque o ::after
   do primário já é o facho de luz. O !important é o par do I-a — sem ele a
   cor devolvida ao .btn venceria o transparente. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading .bi { opacity: 0; }
.btn.is-loading::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--bs-btn-color) 30%, transparent);
  border-top-color: var(--bs-btn-color);
  animation: wb-girar .8s linear infinite;
}
@keyframes wb-girar { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) { .wb-contact-form .btn { width: 100%; } }

/* --- I-i. Central de ajuda (/faq) e o acordeão do widget -------------------
   Regra que atravessa o bloco: nada do filtro é obrigatório para ler a
   página. A busca só existe sob html.wb-js (a página é legível sem ela) e os
   chips são <button>, que sem JS o navegador simplesmente ignora. */
.wb-faq-busca { display: none; margin: var(--wb-space-6) auto 0; max-width: 620px; padding-left: 1.25rem; }
html.wb-js .wb-faq-busca { display: flex; }

/* Coluna estreita de propósito: resposta é texto corrido, e 900px é o limite
   antes de a linha ficar cansativa de varrer. */
.wb-container.wb-faq-wrap { max-width: 900px; }

.wb-faq-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--wb-space-5); }
.wb-faq-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem;
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-pill);
  font-family: var(--wb-font-body); font-size: var(--wb-fs-sm); font-weight: 600;
  color: var(--wb-text); cursor: pointer;
  transition: border-color var(--wb-dur-fast) linear, background var(--wb-dur-fast) linear,
              color var(--wb-dur-fast) linear, transform var(--wb-dur-fast) var(--wb-ease);
}
.wb-faq-chip .bi, .wb-faq-chip .icon { font-size: 1rem; color: var(--wb-text-accent); }
.wb-faq-chip:hover { border-color: var(--wb-green-700); transform: translateY(-1px); }
.wb-faq-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--wb-green-700) 55%, transparent); outline-offset: 2px; }
/* Ativo: o verde-900 preenche, o off-white escreve — o par do primário. */
.wb-faq-chip.is-ativo { background: var(--wb-green-900); border-color: var(--wb-green-900); color: var(--wb-bone); box-shadow: var(--wb-shadow-anchor); }
.wb-faq-chip.is-ativo .bi, .wb-faq-chip.is-ativo .icon { color: var(--wb-green-300); }
.wb-faq-chip__n {
  font-family: var(--wb-font-mono); font-size: 11px; font-weight: 500; line-height: 1;
  padding: .2rem .45rem; border-radius: var(--wb-radius-pill);
  background: var(--wb-green-100); color: var(--wb-green-700);
}
.wb-faq-chip.is-ativo .wb-faq-chip__n { background: rgba(var(--wb-bone-rgb), .16); color: var(--wb-bone); }
@media (prefers-reduced-motion: reduce) { .wb-faq-chip:hover { transform: none; } }

.wb-faq-conta {
  margin: 0 0 var(--wb-space-4);
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--wb-text-muted);
}
.wb-faq-conta:empty { display: none; }
.wb-faq-conta strong { color: var(--wb-text-accent); font-weight: 500; }

/* Sem resultado / sem conteúdo */
.wb-faq-vazio {
  text-align: center;
  padding: var(--wb-space-7) var(--wb-space-5);
  background: var(--wb-surface-sunken);
  border: 1px dashed var(--wb-border-strong);
  border-radius: var(--wb-radius-lg);
}
.wb-faq-vazio[hidden] { display: none; }
.wb-faq-vazio .wb-icone { margin-inline: auto; }
.wb-faq-vazio h2, .wb-faq-vazio .wb-vazio__t { font-size: var(--wb-fs-h3); margin: var(--wb-space-4) 0 var(--wb-space-2); }
.wb-faq-vazio [data-wb-faq-term] { color: var(--wb-text-accent); }
.wb-faq-vazio p { color: var(--wb-text-muted); font-size: var(--wb-fs-sm); max-width: 46ch; margin: 0 auto; }
.wb-faq-vazio__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: var(--wb-space-5); }
@media (max-width: 575.98px) { .wb-faq-vazio__acoes .btn { width: 100%; } }

/* O acordeão: widget global .wc-faq (contrato em _cdn/widgets/faq/faq.base.css).
   1) MECÂNICA para a variante ESTÁTICA — a home sem módulo imprime a mesma
   marcação por wc_wey_faq_static_html(), mas sem passar por faq.php, que é
   quem carrega o faq.base.css; então o <details> precisa da mecânica aqui.
   Escopado à --static para não duplicar o base quando o widget real existe. */
.wc-faq--static { display: block; width: 100%; margin: 0 auto; }
.wc-faq--static .wc-faq__list { display: flex; flex-direction: column; }
.wc-faq--static .wc-faq__item { overflow: hidden; }
.wc-faq--static .wc-faq__item[hidden] { display: none; }
.wc-faq--static .wc-faq__q { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; user-select: none; }
.wc-faq--static .wc-faq__q::-webkit-details-marker { display: none; }
.wc-faq--static .wc-faq__q::marker { content: ""; }
.wc-faq--static .wc-faq__q-text { flex: 1 1 auto; }
.wc-faq--static .wc-faq__chev { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.wc-faq--static .wc-faq__item[open] > .wc-faq__q .wc-faq__chev { transform: rotate(180deg); }
.wc-faq--static .wc-faq__a > :first-child { margin-top: 0; }
.wc-faq--static .wc-faq__a > :last-child { margin-bottom: 0; }

/* 2) VISUAL — para o widget real E para a estática. Escopo .wc-wey (a classe
   do wrapper .ag-wrap aberto no header): a skin do widget (skins/<tema>.css,
   ou default.css quando não há skin wc_wey) é impressa no <body>, DEPOIS
   desta folha — com uma classe a mais, a roupa do tema vence a dela.
   A forma é a do acordeão do index.html do cliente (bloco 13): cada pergunta
   é uma LINHA chapada — fundo transparente, só o fio superior (e o inferior no
   último item), pergunta com padding 1.15rem .25rem, chevron de 1rem sem
   caixa, resposta em --wb-fs-sm na voz secundária e coluna de 68ch. Nada de
   cartão, raio, sombra nem moldura de ícone. Onde a skin do widget escreve o
   mesmo estado com seletor mais pesado (item aberto + hover, contexto escuro),
   a lista de seletores abaixo repete o caminho dela para vencer por
   especificidade, não por !important. */
.wc-wey .wc-faq { color: var(--wb-text); font-family: var(--wb-font-body); }
.wc-wey .wc-faq__head { margin-bottom: var(--wb-space-5); }
.wc-wey .wc-faq__title { font-family: var(--wb-font-display); font-size: var(--wb-fs-h3); font-weight: 700; letter-spacing: -.028em; color: var(--wb-heading); }
.wc-wey .wc-faq__title .icon, .wc-wey .wc-faq__title .bi { color: var(--wb-text-accent); font-size: 1.15rem; }
.wc-wey .wc-faq__sub { color: var(--wb-text-muted); font-size: var(--wb-fs-sm); }
.wc-wey .wc-faq__list { gap: 0; }
.wc-wey .wc-faq__item {
  position: relative;
  background: transparent;
  border: 0; border-top: 1px solid var(--wb-border);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.wc-wey .wc-faq__item:last-child { border-bottom: 1px solid var(--wb-border); }
/* A rampa fina que a skin põe no teto do item aberto não pertence à linha chapada. */
.wc-wey .wc-faq__item::before { display: none; }
.wc-wey .wc-faq__item:hover, .wc-wey .wc-faq__item[open] { border-color: var(--wb-border); box-shadow: none; }
.wc-wey .wc-faq__q {
  padding: 1.15rem .25rem; gap: 1rem;
  background: transparent;
  font-family: var(--wb-font-body); font-size: var(--wb-fs-base); font-weight: 600; line-height: 1.35;
  color: var(--wb-text);
  transition: color var(--wb-dur-fast) linear;
}
/* Aberta (e no hover) a pergunta escreve no verde da marca, como o
   .accordion-button:not(.collapsed) do original; no escuro, off-white. */
.wc-wey .wc-faq__q:hover, .wc-wey .wc-faq__item[open] > .wc-faq__q { color: var(--wb-green-900); }
.wc-wey [data-bs-theme='dark'] .wc-faq__q:hover, .wc-wey [data-bs-theme='dark'] .wc-faq__item[open] > .wc-faq__q,
.wc-wey .wb-section--anchor .wc-faq__q:hover, .wc-wey .wb-section--anchor .wc-faq__item[open] > .wc-faq__q,
.wc-wey .wb-section--black .wc-faq__q:hover, .wc-wey .wb-section--black .wc-faq__item[open] > .wc-faq__q { color: var(--wb-bone); }
/* Teclado: <summary> é focável e precisa mostrar onde está. */
.wc-wey .wc-faq__q:focus-visible { outline: 3px solid color-mix(in srgb, var(--wb-green-700) 55%, transparent); outline-offset: -3px; border-radius: var(--wb-radius-sm); }
/* Destaque da busca. A margem negativa devolve o que o padding empurrou. */
.wc-wey .wc-faq__q mark { background: color-mix(in srgb, var(--wb-green-500) 30%, transparent); color: inherit; border-radius: 3px; padding: .06em .14em; margin: 0 -.14em; }
/* Chevron: 1rem, sem caixa, na cor da marca (off-white no escuro — o token
   --wb-faq-chev inverte por contexto, sem repetir a lista de seletores). Os
   caminhos com [open] e :hover repetem os da skin para vencê-la. */
.wc-wey .wc-faq { --wb-faq-chev: var(--wb-green-900); }
.wc-wey [data-bs-theme='dark'] .wc-faq, .wc-wey .wb-section--anchor .wc-faq, .wc-wey .wb-section--black .wc-faq,
.wc-wey .wb-hero .wc-faq, .wc-wey .wb-footer .wc-faq, .wc-wey .wc-faq[data-bs-theme='dark'] { --wb-faq-chev: var(--wb-bone); }
.wc-wey .wc-faq__chev,
.wc-wey .wc-faq__q:hover .wc-faq__chev,
.wc-wey .wc-faq__item[open] .wc-faq__chev,
.wc-wey .wc-faq__item[open] .wc-faq__q:hover .wc-faq__chev,
.wc-wey [data-bs-theme='dark'] .wc-faq__q:hover .wc-faq__chev,
.wc-wey .wb-section--anchor .wc-faq__q:hover .wc-faq__chev,
.wc-wey .wb-section--black .wc-faq__q:hover .wc-faq__chev {
  width: 1rem; height: 1rem;
  border-radius: 0; box-shadow: none;
  background: transparent; color: var(--wb-faq-chev);
  transition: transform var(--wb-dur-base) var(--wb-ease);
}
.wc-wey .wc-faq__chev::before { display: none; }
.wc-wey .wc-faq__chev .icon, .wc-wey .wc-faq__chev .bi { position: static; font-size: 1rem; line-height: 1; }
.wc-wey .wc-faq__a {
  padding: 0 .25rem 1.25rem; max-width: 68ch;
  font-size: var(--wb-fs-sm); line-height: var(--wb-lh-base); color: var(--wb-text-muted);
}
.wc-wey .wc-faq__a a { color: var(--wb-text-accent); text-decoration: underline; text-underline-offset: 2px; }
.wc-wey .wc-faq__a a:hover { color: var(--wb-green-800); }
.wc-wey [data-bs-theme='dark'] .wc-faq__a a:hover { color: var(--wb-bone); }
@media (prefers-reduced-motion: reduce) { .wc-wey .wc-faq__chev, .wc-wey .wc-faq__q { transition: none; } }

/* --- I-j. Comentários (widget global, com a roupa do tema) -----------------
   O widget expõe tokens próprios (--wcc-*) no topo do .comments — então aqui
   não se briga com seletor nenhum: redefine-se os tokens e o resto acompanha
   (o .btn_blue já usa --wcc-primary como fundo, com texto branco — 14:1 sobre
   o verde-900, sem precisar de !important). Sobram três ajustes que os tokens
   não alcançam: o cabeçalho, os campos e o raio dos botões.
   Escopo: .wb-comentarios — o wrapper que a página e o artigo põem em volta
   do require, para não vazar noutro tema. */
.wb-comentarios .comments,
.wb-comentarios .comment_login_box {
  --wcc-primary: var(--wb-green-900);
  --wcc-primary-rgb: var(--wb-green-900-rgb);
  --wcc-head: var(--wb-heading);
  --wcc-text: var(--wb-text);
  --wcc-muted: var(--wb-text-muted);
  --wcc-border: var(--wb-border);
  --wcc-line: var(--wb-border-strong);
  --wcc-soft: var(--wb-surface-sunken);
  --wcc-radius: var(--wb-radius-md);
}
/* Cabeçalho: mesma família dos títulos de seção (o widget entrega um h1 que,
   no meio de uma página, é um h1 a mais — o tamanho aqui o devolve ao papel
   de subtítulo). */
.wb-comentarios .comments > header h1 {
  font-family: var(--wb-font-display); font-size: var(--wb-fs-h3); font-weight: 700;
  letter-spacing: -.028em; color: var(--wb-heading);
}
.wb-comentarios .comments > header h1 span {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wb-text-accent);
}
/* Campos: o mesmo desenho do formulário da /contato — o widget vem com raio
   de 6px e foco azul do DashLite. */
.wb-comentarios .comments form textarea,
.wb-comentarios .comments form select,
.wb-comentarios .comments form input {
  border-radius: var(--wb-radius-md);
  border-color: var(--wb-border-strong);
  background: var(--wb-surface-raised); color: var(--wb-text);
  font-family: var(--wb-font-body);
  padding: .8rem 1rem;
}
.wb-comentarios .comments form textarea:focus,
.wb-comentarios .comments form select:focus,
.wb-comentarios .comments form input:focus {
  border-color: var(--wb-green-700);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-700) 20%, transparent);
}
.wb-comentarios .comments form label span {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--wb-text-muted);
}
/* Botões: pílula para os dois — enviar preenchido (verde-900 via token),
   cancelar em contorno. */
.wb-comentarios .comments_form_actions .btn_blue,
.wb-comentarios .comments_form_actions .btn_red {
  border-radius: var(--wb-radius-pill); padding: .7rem 1.4rem; font-weight: 600; font-family: var(--wb-font-body);
}
.wb-comentarios .comments_form_actions .btn_blue:hover { filter: none; background: var(--wb-green-800); }
.wb-comentarios .comments_form_actions .btn_red:hover { border-color: var(--wb-danger); color: var(--wb-danger) !important; }

/* --- I-k. Mídia do artigo: tabela do editor, abertura, compartilhar, tags,
       galeria -------------------------------------------------------------- */

/* Tabelas do corpo do post (o PHP embrulha cada <table> em .wb-tabela-wrap):
   rolagem própria — em 360px não cabem de outro jeito — e cabeçalho em mono. */
.wb-tabela-wrap {
  overflow-x: auto; margin: 1.6rem 0;
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg);
  background: var(--wb-surface-raised);
  -webkit-overflow-scrolling: touch;
}
.wb-tabela-wrap table, .wb-prose table { width: 100%; border-collapse: collapse; font-size: var(--wb-fs-sm); }
.wb-tabela-wrap table { min-width: 460px; margin: 0; }
.wb-prose th, .wb-prose td, .wb-tabela-wrap th, .wb-tabela-wrap td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--wb-border); vertical-align: top; }
.wb-prose thead th, .wb-prose tr:first-child th, .wb-tabela-wrap thead th, .wb-tabela-wrap tr:first-child th {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--wb-text-muted);
  background: var(--wb-green-25); border-bottom-color: var(--wb-border-strong);
}
.wb-prose tbody th, .wb-tabela-wrap tbody th { font-weight: 600; color: var(--wb-text); }
.wb-prose tr:last-child td, .wb-prose tr:last-child th,
.wb-tabela-wrap tr:last-child td, .wb-tabela-wrap tr:last-child th { border-bottom: 0; }
.wb-tabela-wrap tbody tr:hover { background: var(--wb-green-50); }

/* Mídia de abertura (capa ou vídeo via WcPosts::videoEmbed → .ag-embed-el) */
.wb-post-media { margin: 0 0 var(--wb-space-6); border-radius: var(--wb-radius-cut); overflow: hidden; background: var(--wb-green-900); }
.wb-post-media img { width: 100%; height: auto; display: block; margin: 0; border-radius: 0; }
.wb-post-media iframe, .wb-post-media video, .wb-post-media .ag-embed-el { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; }
.wb-post-media .embed-container { padding-bottom: 56.25%; }

/* Compartilhar: círculos de contorno; no hover o verde-900 preenche. O botão
   [data-share-copy] copia o link (o JS troca bi-link-45deg → bi-check-lg). */
.wb-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wb-post-share__rot {
  display: inline-flex; align-items: center; gap: .4rem; margin-right: .3rem;
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wb-text-muted);
}
.wb-post-share a, .wb-post-share button {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--wb-border-strong);
  background: var(--wb-surface-raised); color: var(--wb-text-muted);
  cursor: pointer; text-decoration: none;
  transition: transform var(--wb-dur-base) var(--wb-ease), background var(--wb-dur-fast) linear,
              border-color var(--wb-dur-fast) linear, color var(--wb-dur-fast) linear;
}
.wb-post-share .bi { font-size: 1rem; }
.wb-post-share a:hover, .wb-post-share button:hover {
  transform: translateY(-2px); border-color: var(--wb-green-900);
  background: var(--wb-green-900); color: var(--wb-bone);
}
.wb-post-share [data-share-copy] .bi-check-lg { color: inherit; }
/* Copiado: o zz-wey.js liga .is-copiado por 1,8s — o botão fica preenchido
   (o mesmo par do hover) para o feedback não depender só da troca do ícone. */
.wb-post-share [data-share-copy].is-copiado { background: var(--wb-green-900); border-color: var(--wb-green-900); color: var(--wb-bone); }
/* Celular estreito: rótulo + cinco círculos de 40px não cabem em 342px e o
   quinto (copiar) caía sozinho na 2ª linha. O rótulo ganha a linha própria e
   os cinco ícones ficam alinhados. */
@media (max-width: 479.98px) { .wb-post-share__rot { flex-basis: 100%; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .wb-post-share a:hover, .wb-post-share button:hover { transform: none; } }

/* Tags do post: o selo --line como link */
.wb-post-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.wb-post-tags a {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--wb-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .68rem; border-radius: var(--wb-radius-pill);
  border: 1px solid var(--wb-border-strong); color: var(--wb-text-muted); text-decoration: none;
  transition: border-color var(--wb-dur-fast) linear, color var(--wb-dur-fast) linear;
}
.wb-post-tags a:hover { border-color: var(--wb-green-700); color: var(--wb-text); }

/* Galeria do editor (WcPosts::galleryHtml) vestida como .wb-galeria */
.wc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wb-space-3); margin: 2.2em 0; }
.wc-gallery-item { position: relative; display: block; overflow: hidden; border-radius: var(--wb-radius-md); aspect-ratio: 4 / 3; background: var(--wb-green-800); }
.wc-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; transition: transform var(--wb-dur-slow) var(--wb-ease); }
.wc-gallery-item:hover img { transform: scale(1.04); }
a.wc-gallery-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--wb-green-950) 55%, transparent) 100%);
  opacity: 0; transition: opacity var(--wb-dur-base) var(--wb-ease);
}
a.wc-gallery-item:hover::after { opacity: 1; }
.wc-gallery-video { grid-column: span 2; aspect-ratio: 16 / 9; }
.wc-gallery-video iframe, .wc-gallery-video video, .wc-gallery-video-el { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767.98px) { .wc-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .wc-gallery-item:hover img { transform: none; } }

/* --- I-l. Prosa do editor -------------------------------------------------
   O corpo do post vem do editor do painel, então o alvo são as tags cruas.
   Uma armadilha justifica metade do bloco: o dashlite.css zera
   `ol, ul { list-style: none }` no fim do arquivo, e sem restaurar o marcador
   toda lista de artigo lê como uma pilha de parágrafos. O tipo precisa ir
   também no <li>: herdar do <ul> não basta quando o reset já zerou a cadeia. */
.wb-prose ul, .wb-prose ul > li { list-style: disc; }
.wb-prose ol, .wb-prose ol > li { list-style: decimal; }
.wb-prose ul ul, .wb-prose ul ul > li { list-style: circle; }
.wb-prose img { max-width: 100%; height: auto; border-radius: var(--wb-radius-md); }
.wb-prose iframe { max-width: 100%; }
/* pre/kbd/samp voltam à mono: a regra de herança de fonte do bloco 3 os faria
   herdar a fonte do corpo. */
.wb-prose pre, .wb-prose kbd, .wb-prose samp { font-family: var(--wb-font-mono); font-size: .87em; }
/* CTA legado dentro do conteúdo (.ag-cta gravado no corpo do post pelo
   painel): vira o cartão verde-900 do tema sem exigir reedição de artigo. O
   botão inverte (off-white preenchendo) e precisa do !important porque o
   wc-agency.css fixa `color:#fff !important` em .ag-btn--primary/--ghost. */
.wb-prose .ag-cta {
  position: relative; overflow: hidden;
  background: var(--wb-green-900); background-image: none;
  border-radius: var(--wb-radius-cut); padding: clamp(1.8rem, 4vw, 2.6rem); text-align: center;
  margin: 2.6rem 0 .6rem;
  --wb-text: var(--wb-bone); --wb-heading: var(--wb-bone); --wb-text-muted: var(--wb-green-300);
}
.wb-prose .ag-cta::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--wb-rampa-grad); }
.wb-prose .ag-cta h2, .wb-prose .ag-cta h3 { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--wb-bone); }
.wb-prose .ag-cta p { color: var(--wb-green-300); font-size: var(--wb-fs-sm); max-width: 54ch; margin: 0 auto var(--wb-space-5); }
.wb-prose .ag-cta .ag-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wb-bone); color: var(--wb-green-900) !important;
  border: 1px solid var(--wb-bone); border-radius: var(--wb-radius-pill);
  padding: .8rem 1.6rem; font-weight: 600; font-size: var(--wb-fs-sm); text-decoration: none;
  box-shadow: none;
  transition: transform var(--wb-dur-fast) var(--wb-ease), background var(--wb-dur-fast) linear;
}
.wb-prose .ag-cta .ag-btn:hover { transform: translateY(-2px); background: var(--wb-white); color: var(--wb-green-900) !important; filter: none; }
@media (prefers-reduced-motion: reduce) { .wb-prose .ag-cta .ag-btn:hover { transform: none; } }

/* --- I-m. Páginas herdadas (.ag-*): a identidade Wey sobre a estrutura do
       wc-agency.css (produtos, cursos, planos, pesquisa, favoritos, conta,
       pedido, campus). Só o que muda a voz: pílula verde-900, mono nos
       eyebrows, display nos títulos, raio e borda do sistema. --------------- */
.ag-container { max-width: var(--wb-container); padding: 0 var(--wb-space-5); }
.ag-section { padding: var(--wb-section-y) 0; }
.ag-btn { font-family: var(--wb-font-body); font-weight: 600; font-size: var(--wb-fs-sm); letter-spacing: .005em; border-radius: var(--wb-radius-pill); transition: transform var(--wb-dur-fast) var(--wb-ease), background var(--wb-dur-fast) linear, border-color var(--wb-dur-fast) linear, box-shadow var(--wb-dur-base) var(--wb-ease); }
.ag-btn--primary { background: var(--wb-green-900); border-color: var(--wb-green-900); color: var(--wb-bone) !important; box-shadow: 0 1px 2px rgba(var(--wb-green-900-rgb), .2); }
.ag-btn--primary:hover { background: var(--wb-green-800); border-color: var(--wb-green-800); color: var(--wb-bone) !important; filter: none; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(var(--wb-green-900-rgb), .5); }
.ag-btn--ghost { background: transparent; border-color: var(--wb-border-strong); }
.ag-btn--ghost:hover { background: var(--wb-green-100); border-color: var(--wb-green-700); }
.ag-btn--sm { border-radius: var(--wb-radius-pill); }
.ag-eyebrow {
  font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); font-weight: 500;
  letter-spacing: .18em; color: var(--wb-text-accent);
  background: transparent; border: 0; padding: 0; border-radius: 0;
}
.ag-section-title, .ag-page-hero h1 { font-family: var(--wb-font-display); font-weight: 700; letter-spacing: -.028em; line-height: var(--wb-lh-snug); color: var(--wb-heading); }
.ag-page-hero { background: var(--wb-surface-sunken); }
.ag-page-hero::before { display: none; }   /* o blob índigo do tema herdado */
.ag-page-hero p { color: var(--wb-text-muted); }
.ag-tile, .ag-card { background: var(--wb-surface-raised); border-color: var(--wb-border); border-radius: var(--wb-radius-lg); }
.ag-tile:hover, .ag-card:hover { border-color: var(--wb-green-400); box-shadow: var(--wb-shadow-lg); transform: translateY(-3px); }
.ag-card h3, .ag-tile-body h3 { color: var(--wb-heading); }
.ag-card p, .ag-tile-meta { color: var(--wb-text-muted); }
.ag-card-ico { background: var(--wb-icone-bg); color: var(--wb-icone-fg); border: 0; border-radius: var(--wb-radius-cut); }
.ag-tile-cover { background: var(--wb-green-100); }
.ag-tile-tag { background: rgba(var(--wb-green-900-rgb), .82); font-family: var(--wb-font-mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ag-card-link { color: var(--wb-text-accent); }
.ag-pill { border-radius: var(--wb-radius-pill); border-color: var(--wb-border-strong); color: var(--wb-text-muted); font-size: var(--wb-fs-sm); }
.ag-pill:hover, .ag-pill.is-active { background: var(--wb-green-900); border-color: var(--wb-green-900); }
.ag-crumb { font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.ag-search { border-radius: var(--wb-radius-pill); border-color: var(--wb-border-strong); box-shadow: none; }
.ag-search:focus-within { border-color: var(--wb-green-700); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-green-700) 20%, transparent); }
.ag-search > .icon { color: var(--wb-text-accent); }
.ag-empty { color: var(--wb-text-muted); border: 1px dashed var(--wb-border-strong); border-radius: var(--wb-radius-lg); }
.ag-empty em { color: var(--wb-text-accent); }
@media (prefers-reduced-motion: reduce) { .ag-btn--primary:hover, .ag-tile:hover, .ag-card:hover { transform: none; } }

/* --- I-n. Flutuantes do core (WhatsApp, banner LGPD, chat de IA) ------------
   Todos leem --wc-dock-bottom, o espaço que o tema reserva embaixo; aqui vale
   a altura da barra .wb-acao-fixa (bloco 18) só no celular, onde ela existe.
   O espaço reservado mora DENTRO do rodapé, não no padding do body: o body é
   off-white e sobrava uma faixa clara embaixo do rodapé preto com a barra
   boiando nela. Crescendo o rodapé, o que fica atrás da barra é a cor dele.
   O WhatsApp flutuante é escondido no celular de propósito: a barra já tem o
   WhatsApp, e dois botões verdes na mesma área do polegar competem. `body .`
   porque o estilo do flutuante é impresso pelo core DEPOIS desta folha. */
body { --wc-float-z: 1030; }
@media (max-width: 767.98px) {
  body { --wc-dock-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); --wc-float-stack: 0px; }
  .wb-footer { padding-bottom: calc(var(--wb-space-6) + var(--wc-dock-bottom)); }
  body .wc-wa-float { display: none; }
}

/* --- I-o. Impressão -------------------------------------------------------
   Cromo, flutuantes e movimento saem; blocos escuros viram papel; o destino
   dos links externos vira texto (numa ficha impressa, o link é a informação).
   #fff/#000/#555 aqui são tinta e papel, não cor de marca. */
@media print {
  .wb-nav, .wb-nav-spacer, .wb-acao-fixa, .wb-header, .wb-skip, .wb-hero__rolar,
  .wb-slider__nav, .wb-post-share, .wb-busca, .wb-faq-busca, .wb-faq-chips,
  .wc-wa-float, .wcai, .wc-consent { display: none !important; }
  body, .ag-wrap { background: #fff; color: #000; font-size: 11pt; }
  .wb-hero, .wb-section--anchor, .wb-section--black, .wb-footer,
  .wb-plano--destaque, .wb-post--destaque, .wb-cta-artigo, .wb-causa-fecho, .wb-prose .ag-cta {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
    --wb-text: #000; --wb-heading: #000; --wb-text-muted: #444; --wb-bone: #000;
  }
  .wb-hero-top, .wb-hero__inner,
  .wb-topo-widget .wc-acc-hero, .wb-topo-widget .wc-cart-hero,
  .wb-topo-widget .wc-acc-auth, .wb-topo-widget .wc-cart-plain,
  .wc_ead.wb-topo-widget .cmp-hero--bleed, .wc_ead.wb-topo-widget .cmp-coursehero--bleed, .wc_ead.wb-topo-widget .cmp-lessonhead--bleed,
  .wc_ead.wb-topo-widget .cmp-auth, .wb-topo-widget #wc-validar .vb-hero, .wb-topo-widget #wc-cert-page .wc-cert-hero { padding-top: var(--wb-space-6) !important; }
  .wb-section { padding-block: var(--wb-space-6); break-inside: avoid; }
  .wb-card, .wb-pilar, .wb-plano, .wb-post, .wb-serie, .wb-depo, .wb-diag, .wb-tabela-moldura { box-shadow: none !important; break-inside: avoid; }
  html.wb-js .wb-reveal, html.wb-js [data-entra] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  a[href^="#"]::after, .wb-nav a::after, .wb-footer a::after { content: none; }
}

/* ==========================================================================
   R. AJUSTES FINOS DO RESPONSIVO (auditoria em 390px e 820px, 2026-09-05)
   Cada regra abaixo corrige algo MEDIDO no navegador emulado; nada aqui muda o
   desktop. Fica no fim do arquivo para vencer os blocos originais pela cascata.
   ========================================================================== */

/* Herói empilhado: entre a ficha e o retrato sobravam 112px (pb-5 da coluna de
   texto + gap da grade + margem da figura). No desktop o pb-5 alinha a coluna de
   texto com a base do retrato ao lado; empilhado ele só abre buraco. */
@media (max-width: 991.98px) {
  .wb-hero__grade > .pb-5 { padding-bottom: 0 !important; }
  .wb-hero__figura { margin-top: 0; }
}

/* Cabeçalhos de seção (título | lead) e pares de coluna: o gutter vertical de
   3rem do g-5 é o certo lado a lado, mas empilhado no celular vira um vão. */
@media (max-width: 767.98px) {
  .wb-section .row.g-5 { --bs-gutter-y: 1.5rem; }
}

/* Tabela comparativa no celular: rola na horizontal dentro da moldura, mas a
   coluna do "Inclui" some assim que se rola — fica grudada (sticky) e as células
   apertam para as três colunas de formato caberem quase inteiras em 390px. */
@media (max-width: 767.98px) {
  .wb-tabela th, .wb-tabela td { padding: .75rem .6rem; }
  .wb-tabela thead th { font-size: 9px; letter-spacing: .06em; white-space: normal; line-height: 1.3; }
  .wb-tabela tbody th[scope='row'] { font-size: .82rem; line-height: 1.3; min-width: 8.5rem; }
  .wb-tabela__sim .bi { width: 22px; height: 22px; font-size: .85rem; }
  .wb-tabela th:first-child, .wb-tabela td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--wb-surface-raised);
    box-shadow: 1px 0 0 var(--wb-border);
  }
  .wb-tabela-moldura thead th:first-child { background: var(--wb-green-25); }
}

/* Escolhas do diagnóstico: rótulos de duas linhas ("Menos de 1 ano") deixavam
   as três caixas da linha com alturas diferentes. Agora a caixa preenche a
   célula e centra o texto; no celular o corpo encolhe para caber em uma linha. */
.wb-choice { height: 100%; }
.wb-choice__box { height: 100%; justify-content: center; text-align: center; }
@media (max-width: 575.98px) {
  .wb-choice__box { font-size: .82rem; padding: .8rem .4rem; line-height: 1.25; }
}

/* Linha do resultado do ciclo: em coluna estreita ela quebra; quebrar com
   respiro entre as linhas em vez de colar a seta no texto. */
.wb-prog__delta { flex-wrap: wrap; row-gap: .25rem; }

/* Selo nunca quebra ("MAIS ESCOLHIDO" virava duas linhas no cartão de 250px do
   tablet); se não couber ao lado do modo, a linha do topo do cartão dobra. */
.wb-badge { white-space: nowrap; }
.wb-plano__topo { flex-wrap: wrap; row-gap: .5rem; }

/* ==========================================================================
   S. Ilha: menu mais compacto e submenu do "Método" (2026-09-07)
   O menu quebrava em duas linhas ("Por que você / parou", "Na / prática") e o
   CTA também: fonte um degrau menor, menos padding e nowrap em todos os itens.
   O item que aponta para #metodo (wc_wey_nav → children) ganha um submenu com
   os três critérios (Técnica, Progressão, Intensidade), cada um levando ao seu
   cartão (id metodo-<slug>). Desktop: abre por hover/foco ou pela seta; celular:
   lista recolhida dentro do menu, aberta pela seta.
   ========================================================================== */
.wb-nav__links li { white-space: nowrap; }
.wb-nav__links a:not(.btn) { font-size: .8rem; padding: .45rem .6rem; letter-spacing: -.005em; }
.wb-nav__links a:not(.btn)::after { left: .6rem; right: .6rem; bottom: .22rem; }
.wb-nav__links .btn { margin-left: .4rem; white-space: nowrap; }
@media (min-width: 992px) {
  /* Só no desktop: no celular a barra precisa de row-gap 0 e o <nav> ocupa a linha inteira (bloco R). */
  .wb-nav__bar { gap: var(--wb-space-3); }
  .wb-nav__bar nav { flex: 0 1 auto; min-width: 0; }
  /* A ilha recorta os filhos (overflow hidden, pelo raio); o submenu precisa sair dela.
     O andar de cima não tem fundo próprio, então nada vaza pelos cantos. */
  .wb-nav__island { overflow: visible; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .wb-nav__links a:not(.btn) { font-size: .76rem; padding: .4rem .45rem; }
  .wb-nav__links a:not(.btn)::after { left: .45rem; right: .45rem; }
}

/* Item pai: link + seta lado a lado */
.wb-nav__item { position: relative; }
.wb-nav__pai { display: flex; align-items: center; }
.wb-nav__pai > a { padding-right: .2rem !important; }
.wb-nav__pai > a::after { right: .2rem !important; }
.wb-nav__caret {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--wb-green-700);
  cursor: pointer; font-size: .7rem; line-height: 1; margin-right: .2rem;
  transition: transform var(--wb-dur-base) var(--wb-ease), background var(--wb-dur-fast) linear;
}
.wb-nav__caret:hover { background: var(--wb-green-100); color: var(--wb-green-900); }
.wb-nav__caret:focus-visible { outline: 2px solid var(--wb-green-600); outline-offset: 1px; }
.has-sub.is-open .wb-nav__caret,
.has-sub:hover .wb-nav__caret { transform: rotate(180deg); }

/* Submenu */
.wb-nav__sub { list-style: none; margin: 0; padding: 0; }
.wb-nav__sub a:not(.btn) { display: block; white-space: nowrap; }
.wb-nav__sub a:not(.btn)::after { display: none; }

@media (min-width: 992px) {
  .wb-nav__sub {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 5;
    min-width: 11.5rem; padding: .35rem;
    background: rgba(var(--wb-bone-rgb), .98);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-md);
    box-shadow: var(--wb-shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--wb-dur-fast) linear, transform var(--wb-dur-base) var(--wb-ease), visibility 0s linear var(--wb-dur-base);
  }
  /* Ponte invisível entre o item e a caixa: o mouse não "cai" ao descer. */
  .wb-nav__sub::before { content: ''; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
  .has-sub:hover .wb-nav__sub,
  .has-sub:focus-within .wb-nav__sub,
  .has-sub.is-open .wb-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .wb-nav__sub a:not(.btn) { padding: .5rem .7rem; border-radius: var(--wb-radius-sm); font-size: .8rem; }
  .wb-nav__sub a:not(.btn):hover { background: var(--wb-green-100); }
  .wb-nav__sub li { white-space: normal; }
}

@media (max-width: 991.98px) {
  .wb-nav__item { display: block; }
  .wb-nav__pai { justify-content: space-between; }
  .wb-nav__pai > a { flex: 1; }
  .wb-nav__caret { width: 36px; height: 36px; font-size: .8rem; margin: 0; color: var(--wb-green-900); }
  .wb-nav__sub { display: none; padding: 0 0 .4rem .9rem; border-bottom: 1px solid var(--wb-border); }
  .has-sub.is-open .wb-nav__sub { display: block; }
  .wb-nav__pai { border-bottom: 1px solid var(--wb-border); }
  .wb-nav__pai > a { border-bottom: 0 !important; }
  .wb-nav__sub a:not(.btn) { padding: .55rem .2rem; border-bottom: 0; font-size: .85rem; color: var(--wb-green-700); }
  .wb-nav__sub a:not(.btn)::before { content: '—'; margin-right: .5rem; color: var(--wb-green-600); }
  .wb-nav__links a:not(.btn) { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-nav__sub, .wb-nav__caret { transition: none; }
}

/* ==========================================================================
   T. O APLICATIVO (treino.io) — laranja só nos detalhes (2026-09-07, v3)
   Seção clara, na escala do site; o laranja do app aparece onde ele pertence:
   filete no topo, eyebrow, ícones, halo e a tela ilustrativa. A tela segue a
   interface REAL do aluno no treino.io (print do cliente): fundo quase preto,
   laranja nos acentos, pontos vermelho/amarelo/verde para aquecimento,
   preparatórias e válidas, campos de peso/reps com borda laranja e o botão
   "Concluir série". Tudo marcação fixa (exemplo, não dado).
   ========================================================================== */
:root {
  --wb-app:      #F26B1D;   /* laranja do app */
  --wb-app-deep: #B4470B;   /* laranja como texto pequeno sobre claro (5,1:1) */
  --wb-app-soft: #FFEDE2;   /* fundo de ícone */
  --wb-app-line: #FFD3B8;   /* borda suave */
  --wb-app-bg:   #121212;   /* fundo da tela do app */
  --wb-app-bg2:  #1C1C1C;   /* cartão dentro da tela */
  --wb-app-bg3:  #262626;   /* pílula */
  --wb-app-txt:  #F4F4F4;
  --wb-app-mut:  #A3A3A3;
  --wb-app-aq:   #E5484D;   /* aquecimento */
  --wb-app-prep: #F5C542;   /* preparatórias */
  --wb-app-val:  #3DBE6A;   /* válidas */
}
.wb-section--app {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(55% 60% at 78% 45%, rgba(242,107,29,.16) 0%, rgba(242,107,29,.06) 45%, transparent 72%),
    var(--wb-surface, var(--wb-green-50));
}
.wb-section--app::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, transparent 0%, var(--wb-app) 30%, var(--wb-app) 70%, transparent 100%);
  opacity: .9;
}
.wb-section--app::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--wb-green-900-rgb), .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wb-green-900-rgb), .05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(45% 70% at 78% 50%, #000 0%, rgba(0,0,0,.4) 55%, transparent 80%);
          mask-image: radial-gradient(45% 70% at 78% 50%, #000 0%, rgba(0,0,0,.4) 55%, transparent 80%);
}
.wb-section--app > .wb-container { position: relative; z-index: 1; }
.wb-section--app .wb-eyebrow { color: var(--wb-app-deep); }
.wb-section--app .wb-eyebrow::before { background: var(--wb-app); height: 2px; }

.wb-app__lista { list-style: none; padding: 0; margin: var(--wb-space-5) 0 0; display: grid; gap: 1rem; }
.wb-app__lista li { display: flex; gap: .95rem; align-items: flex-start; }
.wb-app__ico {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--wb-radius-md) var(--wb-radius-md) var(--wb-radius-md) 2px;
  background: var(--wb-app-soft); color: var(--wb-app-deep); font-size: 1.15rem;
  border: 1px solid var(--wb-app-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.wb-app__lista strong { display: block; font-weight: 600; letter-spacing: -.01em; color: var(--wb-text); }
.wb-app__txt { display: block; font-size: var(--wb-fs-sm); color: var(--wb-text-muted); margin-top: .15rem; max-width: 46ch; }
.wb-app__nota {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--wb-font-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wb-text-muted); max-width: 30ch; line-height: 1.5;
}
.wb-app__nota::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wb-app); flex: none; box-shadow: 0 0 0 4px var(--wb-app-soft); }

/* ---- A tela (palco + chip + tela escura) ---- */
.wb-app__palco { position: relative; max-width: 400px; margin-inline: auto; padding: 2.4rem 1.25rem 1.75rem; }
.wb-app__palco::before {
  content: ''; position: absolute; inset: 8% 4% 6% 4%; z-index: -1; border-radius: 40%;
  background: radial-gradient(closest-side, rgba(242,107,29,.30), rgba(242,107,29,.10) 60%, transparent 100%);
  filter: blur(18px);
}
.wb-app__tela {
  position: relative; padding: 1rem 1rem 1.05rem;
  background: var(--wb-app-bg); color: var(--wb-app-txt);
  border-radius: 30px; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 34px 60px -28px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.55);
  transform: rotate(-2deg);
  font-family: var(--wb-font-body, inherit);
}
.wb-app__topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin: .1rem .1rem .9rem; }
.wb-app__voltar {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem .3rem .5rem;
  background: var(--wb-app); color: #fff; border-radius: 8px; font-weight: 700; font-size: .72rem;
}
.wb-app__tempo { text-align: center; line-height: 1; }
.wb-app__tempo small { display: block; font-size: 9px; color: var(--wb-app-mut); letter-spacing: .04em; margin-bottom: .15rem; }
.wb-app__tempo b { font-family: var(--wb-font-mono); font-size: .95rem; font-weight: 700; letter-spacing: -.02em; }
.wb-app__marca { font-family: var(--wb-font-display); font-weight: 800; font-size: .9rem; letter-spacing: -.035em; color: var(--wb-app); justify-self: end; }
.wb-app__ex { text-align: center; margin-bottom: .8rem; }
.wb-app__ex strong { display: block; font-family: var(--wb-font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: .5rem; }
.wb-app__video {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem;
  background: var(--wb-app-bg3); border: 1px solid rgba(255,255,255,.08); border-radius: var(--wb-radius-pill);
  color: var(--wb-app); font-weight: 600; font-size: .78rem;
}
.wb-app__plano { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .45rem; text-align: center; font-size: .78rem; color: var(--wb-app-mut); }
.wb-app__plano li { display: grid; justify-items: center; line-height: 1.25; }
.wb-app__plano li > span:first-of-type { color: var(--wb-app-txt); display: inline-flex; align-items: center; gap: .35rem; }
.wb-app__plano li i { display: none; }
.wb-app__plano li > span:first-of-type::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wb-app-val); }
.wb-app__plano li:nth-child(1) > span:first-of-type::before { background: var(--wb-app-aq); }
.wb-app__plano li:nth-child(2) > span:first-of-type::before { background: var(--wb-app-prep); }
.wb-app__plano b { color: var(--wb-app-txt); font-weight: 700; }
.wb-app__series { background: var(--wb-app-bg2); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: .8rem .8rem .8rem; }
.wb-app__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: .75rem; }
.wb-app__chips span {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem;
  background: var(--wb-app-bg3); border: 1.5px solid transparent; border-radius: var(--wb-radius-pill);
  font-size: .72rem; font-weight: 600; color: var(--wb-app-txt);
}
.wb-app__chips span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--wb-app-val); }
.wb-app__chips span.is-aq::before { background: var(--wb-app-aq); }
.wb-app__chips span.is-prep::before { background: var(--wb-app-prep); }
.wb-app__chips span.is-feita { opacity: .55; }
.wb-app__chips span.is-atual { border-color: var(--wb-app); opacity: 1; box-shadow: 0 0 0 3px rgba(242,107,29,.18); }
.wb-app__campos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.wb-app__campo {
  display: grid; justify-items: center; gap: .1rem; padding: .6rem .5rem .55rem;
  border: 1.5px solid var(--wb-app); border-radius: 14px; background: var(--wb-app-bg);
}
.wb-app__campo small { font-size: 10px; color: var(--wb-app-mut); }
.wb-app__campo b { font-family: var(--wb-font-mono); font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.wb-app__btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%;
  background: var(--wb-app); color: #fff; border-radius: var(--wb-radius-pill);
  padding: .7rem 1rem; font-weight: 700; font-size: .9rem; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 12px 24px -12px rgba(242,107,29,.9);
}
.wb-app__obs { margin: .85rem .15rem 0; padding-left: .7rem; border-left: 3px solid var(--wb-app); }
.wb-app__obs span { display: block; font-weight: 700; font-size: .8rem; margin-bottom: .2rem; }
.wb-app__obs p { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--wb-app-mut); }
/* chip flutuante: a evolução que o app registra */
.wb-app__chip {
  position: absolute; right: .35rem; top: .1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem .55rem .65rem;
  background: var(--wb-green-900); color: var(--wb-bone);
  border-radius: var(--wb-radius-md) var(--wb-radius-md) var(--wb-radius-md) 2px;
  box-shadow: 0 18px 36px -18px rgba(var(--wb-green-900-rgb), .7);
  font-family: var(--wb-font-mono); font-size: 11px; letter-spacing: .04em;
  transform: rotate(2deg);
}
.wb-app__chip i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wb-app); color: #fff; font-size: .75rem; }
.wb-app__chip b { font-weight: 600; color: #fff; }
.wb-app__chip small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--wb-green-300); }
.wb-app__legenda { text-align: center; font-size: var(--wb-fs-xs); color: var(--wb-text-muted); margin: .6rem 0 0; }
@media (max-width: 991.98px) {
  .wb-app__palco { padding-inline: .5rem; margin-top: .5rem; }
  .wb-app__tela { transform: none; }
  .wb-app__chip { right: .75rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .wb-app__tela, .wb-app__chip { transform: none; } }

/* ==========================================================================
   U. CALCULADORA DE ÁGUA — página /calculadora-de-agua (2026-09-07)
   Ferramenta pública (SEO): formulário à esquerda, resultado à direita, no
   mesmo vocabulário dos cartões de registro (mono para números). O cálculo é
   100% no navegador (zz-wey.js, wbAgua).
   ========================================================================== */
.wb-agua__card {
  height: 100%; background: var(--wb-surface-raised); border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-cut); padding: var(--wb-space-6);
}
.wb-agua__card--res { background: var(--wb-green-900); color: var(--wb-bone); border-color: transparent; }
.wb-agua__t { font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--wb-text-accent); margin: 0 0 var(--wb-space-4); }
.wb-agua__card--res .wb-agua__t { color: var(--wb-green-300); }
.wb-agua__campo { margin-bottom: var(--wb-space-5); }
.wb-agua__campo:last-child { margin-bottom: 0; }
.wb-agua__campo .form-label { font-weight: 600; font-size: var(--wb-fs-sm); }
.wb-agua__peso { position: relative; max-width: 220px; }
.wb-agua__peso input { padding-right: 3rem; font-family: var(--wb-font-mono); font-size: 1.25rem; font-weight: 600; }
.wb-agua__peso span { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-family: var(--wb-font-mono); font-size: 12px; color: var(--wb-text-muted); }
.wb-agua__opcoes { display: grid; gap: .5rem; }
.wb-agua__opcoes--2 { grid-template-columns: 1fr 1fr; }
.wb-agua__op { position: relative; }
.wb-agua__op input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wb-agua__op span {
  display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem;
  border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius-md);
  font-size: var(--wb-fs-sm); line-height: 1.3; transition: border-color var(--wb-dur-fast) linear, background var(--wb-dur-fast) linear;
}
.wb-agua__op span small { font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .06em; color: var(--wb-text-muted); }
.wb-agua__op input:checked + span { border-color: var(--wb-green-900); background: var(--wb-green-100); }
.wb-agua__op input:focus-visible + span { outline: 2px solid var(--wb-green-600); outline-offset: 2px; }
.wb-agua__total { font-family: var(--wb-font-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.05em; }
.wb-agua__total small { font-family: var(--wb-font-mono); font-size: 1rem; font-weight: 500; letter-spacing: .04em; margin-left: .35rem; color: var(--wb-green-300); }
.wb-agua__faixa { font-family: var(--wb-font-mono); font-size: var(--wb-fs-xs); letter-spacing: .08em; color: var(--wb-green-300); margin: .6rem 0 0; }
.wb-agua__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: var(--wb-space-5) 0; }
.wb-agua__stat { background: rgba(var(--wb-bone-rgb), .08); border: 1px solid rgba(var(--wb-bone-rgb), .12); border-radius: var(--wb-radius-md); padding: .8rem .9rem; }
.wb-agua__stat b { display: block; font-family: var(--wb-font-mono); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.wb-agua__stat span { display: block; font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--wb-green-300); margin-top: .15rem; }
.wb-agua__dia { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.wb-agua__dia li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center; font-size: var(--wb-fs-sm); color: var(--wb-green-300); }
.wb-agua__dia li b { font-family: var(--wb-font-mono); font-weight: 600; color: var(--wb-bone); }
.wb-agua__barra { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(var(--wb-bone-rgb), .12); overflow: hidden; }
.wb-agua__barra i { display: block; height: 100%; width: 0; background: var(--wb-green-400); transition: width var(--wb-dur-slow) var(--wb-ease); }
.wb-agua__vazio { color: var(--wb-green-300); font-size: var(--wb-fs-sm); margin: 0; }
.wb-agua__card--res[data-ok="0"] .wb-agua__cheio { display: none; }
.wb-agua__card--res[data-ok="1"] .wb-agua__vazio { display: none; }
.wb-agua__aviso { font-size: var(--wb-fs-xs); color: var(--wb-green-300); margin: var(--wb-space-5) 0 0; }
.wb-agua__tabela { width: 100%; border-collapse: collapse; font-size: var(--wb-fs-sm); }
.wb-agua__tabela th, .wb-agua__tabela td { padding: .65rem .8rem; border-bottom: 1px solid var(--wb-border); text-align: left; vertical-align: top; }
.wb-agua__tabela th { font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-text-muted); font-weight: 500; }
.wb-agua__tabela td:last-child { font-family: var(--wb-font-mono); white-space: nowrap; }
.wb-prose--agua h2 { font-size: var(--wb-fs-h3); margin: 2.2em 0 .6em; letter-spacing: -.02em; }
.wb-prose--agua h2:first-child { margin-top: 0; }
@media (max-width: 575.98px) {
  .wb-agua__opcoes--2 { grid-template-columns: 1fr; }
  .wb-agua__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V. FERRAMENTA — chamada da home para a calculadora de água (2026-09-07)
   Um painel só, no canto cortado da marca: copy + botão à esquerda, à direita
   a amostra do resultado (cartão escuro, mono, como na página). Gotas de água
   desenhadas em CSS no canto do cartão — o único ornamento.
   ========================================================================== */
.wb-section--ferramenta { background: var(--wb-surface, var(--wb-green-50)); }
.wb-ferr {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--wb-space-7);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--wb-surface-raised);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-cut);
  box-shadow: var(--wb-shadow-md);
}
.wb-ferr__t { font-size: var(--wb-fs-h2); letter-spacing: -.03em; margin: 0 0 var(--wb-space-4); max-width: 18ch; }
.wb-ferr__d { color: var(--wb-text-muted); font-size: var(--wb-fs-lg); margin: 0 0 var(--wb-space-5); max-width: 52ch; text-wrap: pretty; }
.wb-ferr__acao { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.wb-ferr__nota { font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-text-muted); }

.wb-ferr__amostra {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  padding: var(--wb-space-5) var(--wb-space-6);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--wb-green-500) 40%, transparent) 0%, transparent 60%),
    var(--wb-green-900);
  color: var(--wb-bone); border-radius: var(--wb-radius-cut);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--wb-green-950) 60%, transparent);
  transition: transform var(--wb-dur-base) var(--wb-ease), box-shadow var(--wb-dur-base) var(--wb-ease);
}
.wb-ferr__amostra:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -24px color-mix(in srgb, var(--wb-green-950) 75%, transparent); color: var(--wb-bone); }
.wb-ferr__amostra:focus-visible { outline: 2px solid var(--wb-green-400); outline-offset: 3px; }
.wb-ferr__amostra-t { display: block; font-family: var(--wb-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-green-300); margin-bottom: .9rem; }
.wb-ferr__num { display: block; font-family: var(--wb-font-display); font-weight: 700; font-size: clamp(3rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.wb-ferr__num small { font-family: var(--wb-font-mono); font-size: .95rem; font-weight: 500; letter-spacing: .04em; color: var(--wb-green-300); margin-left: .4rem; }
.wb-ferr__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: var(--wb-space-5); position: relative; z-index: 1; }
.wb-ferr__stats > span { display: block; padding: .6rem .65rem; background: rgba(var(--wb-bone-rgb), .08); border: 1px solid rgba(var(--wb-bone-rgb), .12); border-radius: var(--wb-radius-md); font-family: var(--wb-font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wb-green-300); }
.wb-ferr__stats b { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; color: var(--wb-bone); margin-bottom: .1rem; text-transform: none; }
/* gotas: os 14 copos do exemplo em fila, os 9 primeiros "cheios" — lê-se como progresso do dia */
.wb-ferr__gotas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--wb-space-5); }
.wb-ferr__gotas i { width: 9px; height: 9px; border-radius: 50% 50% 50% 2px; background: rgba(var(--wb-bone-rgb), .16); }
.wb-ferr__gotas i:nth-child(-n+9) { background: var(--wb-green-400); }
@media (max-width: 991.98px) {
  .wb-ferr { grid-template-columns: 1fr; gap: var(--wb-space-5); }
  .wb-ferr__t { max-width: none; }
}
@media (max-width: 575.98px) {
  .wb-ferr__stats { gap: .4rem; }
  .wb-ferr__stats > span { padding: .5rem .45rem; }
  .wb-ferr__stats b { font-size: .9rem; letter-spacing: -.03em; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .wb-ferr__amostra:hover { transform: none; } }