/* TaskWork VNext HOME components (page 10084) — ported from TaskWork_Vibecode/site/assets/css/main.css,
   adapted to the live dark theme, scoped to the home content. Loaded only on the front page. */
:root{ --tw-teal:#3FB9AC; --tw-green:#54C99D; --tw-amber:#E6A94A; --tw-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* reset the generic section-card treatment on home (home uses its own component classes) */
.entry-content section,
.entry-content div:has(> h3){ background:none !important; border:0 !important; padding:var(--tw-space-0); margin:var(--tw-space-0); }
.entry-content h2::before{ display:none; }
.entry-content > *{ max-width:none; }

.entry-content .container{ max-width:1100px; margin-inline:auto; }

/* A8 fix (2026-07-09): pages already wrap wide tables in <div class="table-wrap" ...>
   (with an aria-label hinting "role horizontalmente") but no CSS ever defined the
   overflow behavior for that class, so tables (comparativos, matriz de impacto,
   metodologia, trust-center) overflowed the viewport horizontally on mobile instead
   of scrolling inside their wrapper. Single shared rule, no per-page markup change
   needed since the wrapper div is already present on every table on the site. */
.entry-content .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.entry-content .table-wrap table{ min-width:520px; }

/* Wave4 P0 fix 3 (2026-07-12): affordance de scroll horizontal para .table-wrap.
   overflow-x:auto ja funciona (fix A8 acima, confirmado ao vivo em metodologia e
   trust-center a 390px), mas nao ha nenhuma pista visual de que ha mais conteudo
   a direita - usuario so descobre por acidente. Fix: scroll shadow classico
   (tecnica Lea Verou), 2 camadas de gradiente CSS puro, sem JS, sem alterar
   overflow/max-width acima:
     - camada "cover": background-attachment:local (viaja junto com o CONTEUDO,
       nao com a viewport do wrapper) - solido na cor de fundo real -> transparente.
       Fica ancorada na borda direita do conteudo TOTAL (nao do wrapper visivel),
       entao so entra em cena quando o usuario rola ate o fim de fato.
     - camada "hint": background-attachment:scroll (fixa relativa ao proprio
       wrapper, sempre na borda direita visivel) - sombra escura sutil -> transparente.
       Fica sempre visivel exceto quando a camada "cover" a esta encobrindo.
   Resultado sem JS: hint aparece no load inicial (ha conteudo pra rolar) e se
   atenua/some conforme o usuario chega ao fim do scroll horizontal, porque o
   "cover" (preso ao fim real do conteudo) so alcanca a area visivel nesse ponto.
   Cor do cover = var(--tw-bg) #FFFAF6, confirmada ao vivo via getComputedStyle
   como o fundo real por tras de .table-wrap em ambas as rotas (nao ha card
   "raised" branco envolvendo a tabela nessas paginas). Fallback de var() com o
   hex literal para o caso (nao esperado) de --tw-bg nao estar definida no
   contexto. */
.entry-content .table-wrap{
	background-image:
		linear-gradient(to left, var(--tw-bg,#FFFAF6) 0%, rgba(255,250,246,0) 100%),
		linear-gradient(to left, rgba(34,19,24,.18) 0%, rgba(34,19,24,0) 100%);
	background-position: 100% 0, 100% 0;
	background-size: 32px 100%, 20px 100%;
	background-repeat: no-repeat, no-repeat;
	background-attachment: local, scroll;
}

/* ---------- HERO ---------- */
.entry-content .hero{ position:relative; padding:24px 0 60px; overflow:hidden; border-bottom:1px solid var(--tw-line); margin-bottom:var(--tw-space-2); }
.entry-content .hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 90% at 92% 2%, rgba(157,146,255,.10), transparent 55%),
             radial-gradient(60% 80% at 0% 100%, rgba(255,91,97,.08), transparent 50%); } /* Onda Clara: glows escurecidos p/ dark bg (.20/.16) ficavam pesados sobre creme; reduzidos */
.entry-content .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--tw-space-8); align-items:center; }
.entry-content .hero-copy{ display:flex; flex-direction:column; gap:var(--tw-space-5); }
.entry-content .hero h1{ font-size:clamp(2.6rem,5.2vw,4.3rem); line-height:1.04; margin:var(--tw-space-0); max-width:16ch; }
.entry-content .hero h1::after{ display:none; }
.entry-content .hero-highlight{ background:linear-gradient(90deg,var(--tw-magenta),var(--tw-coral));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.entry-content .lead{ font-size:1.3rem; line-height:1.55; color:var(--tw-text-muted); max-width:54ch; margin:var(--tw-space-0); }
.entry-content .eyebrow{ display:inline-block; font-weight:800; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:#C2273F; margin:var(--tw-space-0); } /* Onda Clara: era var(--tw-coral-lt) #FF8A8E */
/* A6 fix (2026-07-09): eyebrow-row pairs an .eyebrow label with a .badge-avail tag
   (e.g. "RECURSOS" + "Disponível"); both are display:inline-block with margin:0, so
   with no whitespace between the two <span> tags in markup they visually run together
   ("RecursosDisponível"). Same eyebrow-row+badge-avail pattern is reused across many
   vNext hub/detail pages, so this is a shared CSS fix rather than a per-page content edit. */
.entry-content .eyebrow-row{ display:flex; align-items:center; gap:var(--tw-space-2); flex-wrap:wrap; }
.entry-content .badge-avail{ display:inline-block; }

/* ---------- buttons ---------- */
.entry-content .btn{ display:inline-flex; align-items:center; gap:var(--tw-space-2); padding:13px 26px; border-radius:999px;
  font-weight:700; text-decoration:none; border:1px solid transparent; transition:transform .15s ease,background .15s ease; }
.entry-content .btn:hover{ transform:translateY(-2px); }
/* P1-05 (2026-07-11): glow deixa de ser incondicional em .btn-primary — vira
   modificador opt-in .btn--emphasis, aplicado no máx 1x por viewport/seção
   principal (ver p1-specs/cta-hierarchy.md). .btn-primary sozinho mantém o
   gradiente de marca (reconhecibilidade) mas perde a sombra colorida. */
.entry-content .btn-primary{
  background:linear-gradient(135deg,var(--tw-magenta),var(--tw-coral)); color:#fff;
  box-shadow:none; /* era 0 12px 30px rgba(217,11,89,.35) incondicional */
  transition:transform .15s ease,box-shadow .2s ease,background .15s ease;
}
.entry-content .btn-primary.btn--emphasis{
  box-shadow:0 12px 30px rgba(217,11,89,.35); /* o glow antigo, agora reservado ao CTA dominante */
}
.entry-content .btn-primary.btn--emphasis:hover{
  box-shadow:0 16px 38px rgba(217,11,89,.42);
}
.entry-content .btn-ghost,.entry-content .btn-secondary{ background:transparent; color:var(--tw-text-strong); border-color:rgba(34,19,24,.24); } /* Onda Clara: era rgba(255,255,255,.24) */
.entry-content .btn-row{ display:flex; flex-wrap:wrap; gap:var(--tw-space-3); align-items:center; }

/* P1-05: .btn-invert / .btn-ghost-invert — usados no CTA de fechamento dentro
   de .cta-band (fundo vinho radial), sem definição CSS até agora (contraste
   medido ~2:1, herdava só a cor de link "#C2273F pensado para fundo claro" —
   achado 2.3 de cta-hierarchy.md). Fundo branco + texto vinho 700 dá >7:1;
   borda branca 2px + texto branco sobre vinho dá >4.5:1. */
.entry-content .cta-band .btn-invert{
  background:#fff; color:var(--tw-wine); font-weight:700; box-shadow:none; border-color:transparent;
}
.entry-content .cta-band .btn-invert:hover{
  background:#FFF4EE; transform:translateY(-2px);
}
.entry-content .cta-band .btn-invert.btn--emphasis{
  box-shadow:0 12px 30px rgba(0,0,0,.28); /* glow neutro, não coral — já está sobre fundo de marca */
}
.entry-content .cta-band .btn-invert.btn--emphasis:hover{
  box-shadow:0 16px 38px rgba(0,0,0,.34);
}
.entry-content .cta-band .btn-ghost-invert{
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.9);
}
.entry-content .cta-band .btn-ghost-invert:hover{
  background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px);
}
/* QA768 item 2 [2026-07-11]: /licencas/ usa .btn-secondary (fora do
   sistema .btn-invert/.btn-ghost-invert) no botao "Falar com um
   especialista" dentro do .cta-band final. .btn-secondary herda
   color:var(--tw-text-strong) (quase preto) pensado p/ fundo claro -
   sobre o gradiente vinho do cta-band da ~1.2:1 de contraste (quase
   invisivel). Alinha ao mesmo tratamento do .btn-ghost-invert (fundo
   transparente, borda e texto brancos, >4.5:1 sobre #73003E/#4B002B). */
.entry-content .cta-band .btn-secondary{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.9);
}
.entry-content .cta-band .btn-secondary:hover{
  background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){
  .entry-content .btn-primary:hover,
  .entry-content .cta-band .btn-invert:hover,
  .entry-content .cta-band .btn-secondary:hover,
  .entry-content .cta-band .btn-ghost-invert:hover{ transform:none; }
}

/* ---------- console (already dark in VNext) ---------- */
.entry-content .hero-art{ display:flex; justify-content:center; }
/* Onda Clara: mockup de console/terminal convertido de chrome escuro p/ chrome claro
   (não é footer/CTA mobile, então segue o flip geral). #131C22/#0E151A/#243039/#2B3A42
   viram branco/creme; texto claro (#CDD6DB/#B7C2C8/#FFD2D4) vira texto escuro/tokens. */
.entry-content .console{ width:100%; max-width:520px; background:#FFFFFF; border:1px solid rgba(34,19,24,.10); border-radius:22px;
  box-shadow:0 24px 60px rgba(34,19,24,.14); overflow:hidden; font-family:var(--tw-mono); }
.entry-content .console-bar{ display:flex; align-items:center; gap:var(--tw-space-2); padding:var(--tw-space-3) var(--tw-space-4); background:#FFF4EE; border-bottom:1px solid rgba(34,19,24,.10); }
.entry-content .console-bar .cdot{ width:11px; height:11px; border-radius:50%; background:#D8D2CE; }
.entry-content .console-bar .cdot:nth-child(1){ background:#FF5B61; }
.entry-content .console-bar .cdot:nth-child(2){ background:#E6A94A; }
.entry-content .console-bar .cdot:nth-child(3){ background:#54C99D; }
.entry-content .console-title{ margin-left:auto; font-size:.74rem; color:var(--tw-text-muted); letter-spacing:.04em; }
.entry-content .console-body{ padding:var(--tw-space-5); display:flex; flex-direction:column; gap:var(--tw-space-3); }
.entry-content .cline{ display:flex; gap:10px; align-items:center; font-size:.86rem; color:var(--tw-text); }
.entry-content .cline.human{ color:var(--tw-magenta); }
.entry-content .ctag{ flex-shrink:0; min-width:64px; text-align:center; padding:3px 8px; border-radius:6px;
  font-size:.72rem; font-weight:700; color:#0E151A; }
.entry-content .ctag.intake{ background:#9D92FF; }
.entry-content .ctag.classify{ background:#3FB9AC; }
.entry-content .ctag.route{ background:#FF5B61; }
.entry-content .ctag.human{ background:#FF8A8E; }
.entry-content .ctag.done{ background:#54C99D; }
.entry-content .console-foot{ padding:var(--tw-space-3) var(--tw-space-5); background:#FFF4EE; border-top:1px solid rgba(34,19,24,.10); display:flex; align-items:center; gap:10px; font-size:.74rem; color:var(--tw-text-muted); }
.entry-content .console-foot .bar{ flex:1; height:6px; border-radius:4px; background:rgba(34,19,24,.12); overflow:hidden; }
.entry-content .console-foot .bar > span{ display:block; height:100%; width:72%; background:#54C99D; }

/* ---------- chips / credibility ---------- */
.entry-content .hero-chips,.entry-content .chip-row{ display:flex; flex-wrap:wrap; gap:var(--tw-space-2); }
.entry-content .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:rgba(34,19,24,.05); border:1px solid var(--tw-line); font-size:.84rem; font-weight:600; color:var(--tw-text); } /* Onda Clara: era rgba(255,255,255,.05) */
.entry-content .chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--tw-coral); }
.entry-content .cred-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--tw-space-5); padding:var(--tw-space-5) var(--tw-space-6);
  background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:18px; margin:var(--tw-space-7) var(--tw-space-0); }
.entry-content .cred-bar p{ font-size:.9rem; color:var(--tw-text-muted); margin:var(--tw-space-0); }
.entry-content .badge,.entry-content .cred-bar svg{ height:52px; width:auto; }

/* ---------- sections / grids / cards ---------- */
.entry-content .section{ padding-block:64px; }
.entry-content .section-sm{ padding-block:44px; }
.entry-content .section-head{ max-width:760px; margin-bottom:var(--tw-space-7); }
.entry-content .grid{ display:grid; gap:18px; }
.entry-content .grid-2{ grid-template-columns:repeat(2,1fr); }
.entry-content .grid-3{ grid-template-columns:repeat(3,1fr); }
.entry-content .grid-4{ grid-template-columns:repeat(4,1fr); }
/* F2 rodada 2 (2026-07-10): grids com contagem de itens que nao fecha limpo num
   fixed grid-N (ex.: hub /recursos/ "Recursos por assunto" = 5 itens em grid-3,
   sobra buraco na 2a linha). auto-fit com minmax reflui o numero de colunas ao
   conteudo disponivel; usar como classe adicional (mantém grid-3/grid-4 nos
   grids que já fecham certo).
   Nota de verificacao ao vivo: minmax(280px,1fr) (valor original do ticket)
   ainda resolve para 3 colunas dentro do .container (max-width:1100px) - com
   5 itens isso deixa a MESMA lacuna na 2a linha (3o slot vazio), so que via
   grid em vez de via grid-3. Subido para 360px, que forca 2 colunas nesse
   container (2*360+18 caixa; 3*360+36 nao cabe) - com 5 itens vira 2/2/1
   (ultima linha com 1 card "sobrando" a direita, padrao comum e aceitavel de
   grid, bem menos quebrado visualmente que um buraco no meio da grade). */
.entry-content .grid-fit{ grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
.entry-content .card{ background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:16px; padding:26px; }
.entry-content .card h3{ color:var(--tw-text-strong); margin:0 0 10px; }
.entry-content .card p{ color:var(--tw-text-muted); font-size:.95rem; margin:var(--tw-space-0); }
.entry-content .card-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:var(--tw-space-4); color:#fff; font-weight:800; }
.entry-content .card-icon.violet{ background:var(--tw-wine); }
.entry-content .card-icon.teal{ background:var(--tw-coral); }
.entry-content .card-icon.wine{ background:var(--tw-wine); }
.entry-content .card-icon.dark{ background:#0E151A; }

/* ---------- kpi ---------- */
.entry-content .kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--tw-space-4); }
.entry-content .kpi{ background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:12px; padding:18px; }
.entry-content .kpi strong{ display:block; font-family:var(--tw-font-display); color:#C2273F; font-size:1.7rem; } /* Onda Clara: era var(--tw-coral-lt) #FF8A8E */
.entry-content .kpi span{ font-size:.85rem; color:var(--tw-text-muted); }

/* ---------- outcomes ---------- */
.entry-content .outcome-list{ display:flex; flex-direction:column; gap:var(--tw-space-4); }
.entry-content .outcome{ display:flex; gap:var(--tw-space-3); align-items:flex-start; }
.entry-content .outcome-icon{ flex-shrink:0; width:26px; height:26px; border-radius:999px; background:rgba(63,185,172,.22); color:#2C948A; display:grid; place-items:center; font-weight:800; font-size:.85rem; } /* Onda Clara: texto era #5fd0c0, ilegível sobre o chip claro */
.entry-content .outcome h4{ margin:0 0 2px; color:var(--tw-text-strong); }
.entry-content .outcome p{ color:var(--tw-text-muted); font-size:.92rem; margin:var(--tw-space-0); }

/* ---------- phases (QA768 item 6 [2026-07-11]) ----------
   .phase-list/.phase/.badge-num (ex.: /asana-ai/ai-studio/ "Programa em
   quatro niveis") nao tinham NENHUMA regra CSS em nenhum arquivo do site -
   .badge-num renderizava como <div> de bloco sem estilo (width:100%,
   sem fundo/cor/tamanho), so o numero solto acima do heading, sem nenhuma
   aparencia de badge. Estilo novo, alinhado a linguagem visual ja usada em
   .card-icon (quadrado colorido) e .outcome-icon (circulo), com as mesmas
   4 cores que .card-icon usa nos 4 steps da home (coral/violet/teal/wine). */
.entry-content .phase-list{ display:flex; flex-direction:column; gap:28px; }
.entry-content .phase{ display:flex; gap:18px; align-items:flex-start; }
.entry-content .phase h3{ margin:0 0 6px; color:var(--tw-text-strong); }
.entry-content .phase p{ color:var(--tw-text-muted); margin:var(--tw-space-0); }
.entry-content .badge-num{
  flex-shrink:0; width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; color:#fff; font-weight:800;
  font-family:var(--tw-font-display); font-size:1.05rem;
  background:linear-gradient(135deg,var(--tw-coral),var(--tw-magenta));
}
.entry-content .phase:nth-child(2) .badge-num{ background:var(--tw-violet); }
.entry-content .phase:nth-child(3) .badge-num{ background:var(--tw-teal); }
.entry-content .phase:nth-child(4) .badge-num{ background:var(--tw-wine); }
.entry-content .phase:nth-child(2) .badge-num,
.entry-content .phase:nth-child(3) .badge-num{ color:#0E151A; } /* a11y: mesmo fix de contraste do .card-icon.violet/.teal */

/* ---------- CTA band ---------- */
.entry-content .cta-band{ background:radial-gradient(120% 140% at 0% 0%, var(--tw-wine) 0%, #4B002B 60%);
  color:#fff; border-radius:24px; padding:var(--tw-space-8); margin:56px 0 8px; text-align:left; }
.entry-content .cta-band h2{ color:#fff; margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-2); }
.entry-content .cta-band p{ color:#EBD6E1; max-width:52ch; margin:0 0 18px; }

@media (max-width:880px){
  .entry-content .hero-grid{ grid-template-columns:1fr; gap:var(--tw-space-7); }
  .entry-content .grid-2,.entry-content .grid-3,.entry-content .grid-4,
  .entry-content .kpi-grid{ grid-template-columns:1fr; }
  .entry-content .cta-band{ padding:30px; }
  /* FIX P1 (2026-07-10): aperta o ritmo vertical do hero em mobile para
     liberar espaço antes do fold — ver bloco .tw-mobile-ctabar no fim do
     arquivo para o motivo (evidência: home-mobile-bottom-crop.png, chip
     "Base no Brasil · foco LATAM" nascendo atrás da barra fixa no
     primeiro paint em 375x812). Reduz só gap/padding, nenhum texto some.
     Medido via Playwright/375x812: o h1 usa .tw-word-carousel (palavras
     "execução|adoção|governança", larguras diferentes) e pode quebrar em
     2 ou 3 linhas — testado o pior caso (3 linhas) e ajustado padding-top
     (que de fato empurra o hero-copy pra cima) + gap até sobrar folga
     positiva mesmo nesse caso; padding-bottom só arruma o respiro da
     seção seguinte (não move os chips, que vêm antes dele no fluxo).
     !important necessário na home: taskwork-vnext-home.css (fora do
     escopo deste arquivo) tem uma regra mais específica
     `.page-id-10084 .entry-content > section:first-of-type{padding:...}`
     que, sem isto, venceria por especificidade e anularia o aperto. */
  .entry-content .hero{ padding-top:12px !important; padding-bottom:16px !important; }
  .entry-content .hero-copy{ gap:6px !important; }
}

/* ---------- SVG sizing guard (unsized inline svgs were filling containers) ---------- */
.entry-content svg{ width:1.25em; height:1.25em; vertical-align:middle; flex:0 0 auto; }
.entry-content svg.caret{ width:20px; height:20px; color:#C2273F; transition:transform .2s ease; } /* Onda Clara: era var(--tw-coral-lt) #FF8A8E, abaixo do 3:1 p/ ícone não-textual sobre claro */
.entry-content .card-icon svg{ width:22px; height:22px; }
.entry-content .badge,.entry-content .cred-bar svg{ width:auto; height:52px; }
.entry-content .hero-art svg{ width:100%; height:auto; max-width:520px; }

/* ---------- tabs as accordion (no JS): show panels, style headers ---------- */
.entry-content .tabs{ display:flex; flex-direction:column; gap:14px; }
.entry-content .tablist{ display:contents; }
.entry-content .tab-btn{ display:flex; align-items:center; justify-content:space-between; gap:var(--tw-space-3); width:100%;
  background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:12px; padding:15px 20px; color:var(--tw-text-strong);
  font-family:var(--tw-font-display); font-weight:700; font-size:1.05rem; text-align:left; }
.entry-content .tab-acc-label{ display:flex; align-items:center; gap:10px; }
.entry-content .tab-panel{ padding:4px 2px 10px; }
.entry-content .tab-panel:not(.is-active){ display:block; } /* no JS → show all */

/* ---------- forms (VNext mock forms .form-card) ---------- */
.entry-content .form-card{ background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:14px; max-width:480px; }
.entry-content .form-card label{ display:flex; flex-direction:column; gap:6px; font-size:.84rem; font-weight:600; color:var(--tw-text-strong); }
.entry-content .form-card input,.entry-content .form-card select,.entry-content .form-card textarea{
  background:#FFF4EE; border:1px solid var(--tw-line); border-radius:10px; padding:11px 14px; color:var(--tw-text-strong); font-size:1rem; font-family:inherit; width:100%; } /* Onda Clara: campo era #0E151A/#EAF0F3 (escuro) */
.entry-content .form-card input::placeholder,.entry-content .form-card textarea::placeholder{ color:var(--tw-text-muted); } /* Onda Clara: era #7d8a92 */
.entry-content .form-card input:focus,.entry-content .form-card select:focus,.entry-content .form-card textarea:focus{ outline:2px solid var(--tw-coral); outline-offset:1px; border-color:var(--tw-coral); }
.entry-content .form-card button,.entry-content .form-card [type=submit]{ background:linear-gradient(135deg,var(--tw-magenta),var(--tw-coral)); color:#fff; border:0; border-radius:999px; padding:13px 26px; font-weight:700; cursor:pointer; margin-top:var(--tw-space-1); }
.entry-content .form-card button:hover{ filter:brightness(1.05); }
/* QA768 item 4 [2026-07-11]: .form-card[data-mock-form] (ex.: /asana-ai/ai-studio/
   #solicitar) e 100% decorativo - markup nasce com .err (por campo),
   .form-alert[data-form-error] e .form-success[data-form-success] ja no HTML,
   mas NAO existe nenhum JS no site que escute [data-mock-form] pra alternar
   esses estados (grep em taskwork-vnext-motion.js confirma). Resultado: toda
   mensagem de erro aparece permanentemente, mesmo em campos nunca tocados, e
   o bloco de sucesso fica sempre renderizado junto ao formulario. Oculta os
   3 estados por padrao (mock sem backend = formulario so mostra os campos);
   se/quando o form ganhar validacao real, a mesma JS deve adicionar uma
   classe de estado (ex. .is-invalid / .is-submitted) pra reverter isto. */
.entry-content .form-card .err,
.entry-content .form-card .form-alert,
.entry-content .form-card .form-success{ display:none; }
/* generic input fallback outside form-card */
.entry-content input[type=text],.entry-content input[type=email],.entry-content select,.entry-content textarea{
  background:#FFF4EE; border:1px solid var(--tw-line); border-radius:10px; padding:11px 14px; color:var(--tw-text-strong); } /* Onda Clara: era #0E151A/#EAF0F3 (escuro) */

/* a11y: dark numerals/text on light icon tiles (white on violet/teal failed contrast) */
.entry-content .card-icon.teal{ color:#0E151A; } .entry-content .card-icon.violet{ color:#fff; }

/* ---------- legal-prose (Parte B: termos/msa/privacidade/iso-27001) ---------- */
.entry-content .legal-prose{ max-width:860px; margin:0 auto; padding:40px; }
.entry-content .legal-prose h2{ margin-top:2em; }
.entry-content .legal-prose h3{ margin-top:1.4em; }
.entry-content .legal-prose p,.entry-content .legal-prose li{ line-height:1.7; }
.entry-content .legal-prose ul,.entry-content .legal-prose ol{ padding-left:1.4em; }

/* Fix: contra-regra ao reset div:has(>h3) que matava o chrome dos cards com h3 (glossario/guia/onboarding) */
.entry-content div.card:has(> h3), .entry-content a.card:has(> h3){background:var(--tw-raised) !important;border:1px solid var(--tw-line) !important;border-radius:16px;padding:26px}
.entry-content div.card:has(> .card-icon), .entry-content a.card:has(> .card-icon){background:var(--tw-raised) !important;border:1px solid var(--tw-line) !important;border-radius:16px;padding:26px}

/* Hero sem arte (paginas juridicas): copy ocupa a largura de leitura em vez de meia-coluna */
.entry-content .hero-grid:not(:has(.hero-art)):not(:has(.tw-photo)):not(:has(.tw-hero-visual)){display:block}
.entry-content .hero-grid:not(:has(.hero-art)):not(:has(.tw-photo)):not(:has(.tw-hero-visual)) .hero-copy{max-width:860px}

/* Blindagem sem :has(): classes explicitas */
.entry-content .hero-solo{display:block}
.entry-content .hero-solo .hero-copy{max-width:860px}
.entry-content .card-panel{background:var(--tw-raised) !important;border:1px solid var(--tw-line) !important;border-radius:16px;padding:26px}

/* FIX B (2026-07-09): selos de credibilidade no footer vNext (marca/mapa do site) */
.footer-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.footer-badges .badge{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 14px;font-size:.78rem;color:rgba(255,255,255,.62)} /* Onda Clara: exceção — vive no footer escuro (fundo herdado de taskwork-vnext-footer.php); NÃO usar var(--tw-line)/var(--tw-text-muted), que agora resolvem p/ valores claros e ficariam invisíveis sobre o footer navy */

/* ==================================================================
   Fase 2 (2026-07-10): footer brand row — logo + copy institucional +
   badges + contato + social, acima do "Mapa do site". Vive dentro do
   mesmo <nav class="tw-sitemap"> (fundo escuro herdado do bloco inline
   em taskwork-vnext-footer.php); aqui só o layout/tipografia da faixa
   nova. 2 colunas no desktop, empilha no mobile; hairline separa da
   sitemap existente (que permanece intacta abaixo, sem alterações). */
/* Onda Clara: exceção — .tw-fbrand-* vive dentro do <nav class="tw-sitemap"> (footer,
   fundo escuro herdado do bloco inline em taskwork-vnext-footer.php, fora de escopo).
   As regras abaixo usavam var(--tw-line/--tw-text/--tw-text-muted/--tw-coral-lt) com
   fallback hardcoded — como essas custom properties SÃO definidas globalmente (só o
   fallback era dark-theme), o flip claro do :root vazaria pro footer e quebraria a
   legibilidade (bordas/texto claros-demais viram cinza-claro/quase-invisíveis sobre
   navy). Trocado var(...) pelos literais escuros (os mesmos valores que já eram usados
   como fallback) para manter o footer intacto, isolado do flip. */
.tw-fbrand{ font-family:inherit; }
.tw-fbrand-inner{
  max-width:1180px; margin:0 auto; padding:56px 24px 40px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:var(--tw-space-8);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tw-fbrand-left{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.tw-fbrand-logo{ height:40px; width:auto; display:block; }
.tw-fbrand-desc{ margin:var(--tw-space-0); max-width:46ch; font-size:.92rem; line-height:1.6; color:#A7B2B9; }
.tw-fbrand-badges.tw-fbrand-badges{ margin-top:var(--tw-space-0); }

.tw-fbrand-right{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:22px; }
.tw-fbrand-contact{ display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.tw-fbrand-contact-title{
  margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-1); font-family:var(--tw-font-display); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; font-size:.72rem; color:#FF8A8E;
}
.tw-fbrand-contact address{ font-style:normal; color:#DCE3E7; }
.tw-fbrand-contact a{ color:#A7B2B9; text-decoration:none; }
.tw-fbrand-contact a:hover{ color:#FF8A8E; }

.tw-fbrand-social{ display:flex; gap:var(--tw-space-4); }
.tw-fbrand-social a{ display:inline-flex; color:#A7B2B9; transition:color .15s ease; }
.tw-fbrand-social a:hover{ color:#FF8A8E; }
.tw-fbrand-social svg{ width:20px; height:20px; }

@media(max-width:768px){
  .tw-fbrand-inner{ grid-template-columns:1fr; gap:28px; padding:44px 20px 32px; }
  .tw-fbrand-left,.tw-fbrand-right{ align-items:flex-start; text-align:left; }
}

/* Mobile: cards nunca mais largos que o viewport */
.entry-content .card{box-sizing:border-box;min-width:0;max-width:100%}
.entry-content .grid{min-width:0}

@media(max-width:480px){.entry-content{overflow-x:hidden}}

/* Kill: borda coral global do Astra no content-area (moldura vista pelo stakeholder em tela larga) */
.content-area, .ast-container, #primary{border:0 !important}

/* ==================================================================
   DESIGN TOKENS UPGRADE — Onda G
   Diagnóstico (2 diretores de arte, benchmark Stripe/Resend/Superhuman):
   "cards sem elevação perceptível, sem sistema de profundidade,
   ritmo irregular". Ajustes de elevação, glow atmosférico, tabelas,
   FAQ, status pills, ritmo de seção e utilitário para Onda H.
   ================================================================== */

/* 1) ELEVAÇÃO REAL DOS CARDS — .045 era imperceptível, sobe p/ .07 +
   sombra real. Repete os seletores :has() das contra-regras existentes
   (mesma especificidade que as regras que precisa vencer + vem depois
   neste arquivo = vence). */
.entry-content .card,
.entry-content .card-panel,
.entry-content div.card:has(> h3), .entry-content a.card:has(> h3),
.entry-content div.card:has(> .card-icon), .entry-content a.card:has(> .card-icon){
  background:#FFFFFF !important; /* Onda Clara: era rgba(255,255,255,.07) — card claro real, per spec */
  border-color:rgba(34,19,24,.10) !important; /* Onda Clara: era rgba(255,255,255,.09) */
  box-shadow:0 8px 24px rgba(34,19,24,.10); /* Onda Clara: era rgba(0,0,0,.25) */
}

/* 2) MOCKUPS / HERO-ART EM DESTAQUE */
.entry-content .hero-art .card, .entry-content .hero-art > div{
  box-shadow:0 18px 44px rgba(34,19,24,.14); /* Onda Clara: era 0 24px 60px rgba(0,0,0,.4) */
}

/* 3) GLOW ATMOSFÉRICO (padrão Resend). .hero já é position:relative +
   overflow:hidden e .hero-grid já tem z-index:1, então o glow (z-index:-1)
   fica sempre atrás do conteúdo — texto não é coberto. */
.entry-content .hero{ position:relative; overflow:hidden; }
.entry-content .hero::after{
  content:""; position:absolute; top:-20%; right:-10%; width:55%; height:120%;
  /* Onda Clara: .16 -> .08 — glow escuro-tema ficava sujo sobre o creme */
  background:radial-gradient(closest-side, rgba(252,124,74,.08), transparent 70%);
  pointer-events:none; z-index:-1;
}

/* 4) TABELAS — zebra + header com underline de marca
   [rodada 2 - F5, 2026-07-10]: markup real dos comparativos (asana-vs-clickup
   e irmãs monday/jira/smartsheet, mesmo template) é table.tw > thead > tr +
   tbody > tr (sem th na tbody). O background em `tr` já é herdado visualmente
   pelos `td` sob border-collapse, mas fica frágil entre engines/zoom - aplica
   direto no `td` para garantir a zebra em qualquer navegador. thead th mantém
   o underline (thead so tem 1 tr, nunca cai no nth-child(even) da zebra). */
.entry-content table tr:nth-child(even) td{ background:rgba(34,19,24,.05); } /* Onda Clara: era rgba(255,255,255,.05) */
.entry-content table thead th,
.entry-content table tr:first-child th{ border-bottom:2px solid #CC3E38; }

/* 5) FAQ hairline — confirmado em /solucoes/assessment/: item = .acc-item,
   pergunta = .acc-trigger, resposta = .acc-panel. Hairline entre itens
   consecutivos (não no primeiro). */
.entry-content .acc-item + .acc-item{ border-top:1px solid rgba(34,19,24,.08); } /* Onda Clara: era rgba(255,255,255,.08) */

/* 6) STATUS PILLS — .badge-avail já existia só com display:inline-block */
.entry-content .badge-avail{
  background:rgba(52,199,123,.15); color:#2E9D77; border:1px solid rgba(52,199,123,.3);
  border-radius:999px; padding:var(--tw-space-1) var(--tw-space-3); font-size:.75rem;
} /* Onda Clara: texto era #5ee0a0, ilegível sobre o chip claro */
/* Nota Onda G: nenhuma classe de badge "Em breve" foi encontrada em produção
   (checado /, /recursos/, /solucoes/assessment/) — só existe .badge-avail
   (Disponível) e .badge (genérico do footer). Sem contraparte para versão
   cinza; revisitar se/quando a classe existir. */

/* 7) RITMO — .section/.section-sm em components.css estavam em 64px/44px
   (irregular vs. benchmark); normaliza para 96px topo/fundo e 56px no -sm. */
.entry-content .section{ padding-block:96px; }
.entry-content .section-sm{ padding-block:56px; }

/* 8) FOOTER — sitemap vNext (taskwork-vnext-footer.php) renderiza um
   <style> inline no hook astra_footer_before, que fica DEPOIS do <link>
   deste arquivo no DOM — por isso !important para garantir a vitória
   independente da ordem. Cores já eram fortes (h3 #fff, title coral);
   reforça + aumenta o espaçamento entre links (row-gap via margin-bottom). */
.tw-sitemap-col h3{ color:#fff !important; }
.tw-sitemap-title{ color:#FF8A8E !important; }
.tw-sitemap-col li{ margin-bottom:14px !important; }

/* 9) UTILITÁRIO para a Onda H: card em destaque com borda de marca */
.entry-content .card--featured{ border:1.5px solid rgba(252,124,74,.5) !important; }

/* 10) Onda H — /glossario/: cor rotativa nas eyebrows das seções temáticas +
   faixa alternada (section-alt) para dar ritmo visual a sequências longas
   de seções (glossario 6 seções; hub /solucoes/ 3 grids). */
.entry-content .eyebrow-violet{ color:var(--tw-violet-ink); } /* Onda Clara: era #a78bfa */
.entry-content .eyebrow-teal{ color:var(--tw-teal-ink); } /* Onda Clara: era #5eead4 */
.entry-content .eyebrow-wine{ color:var(--tw-wine-ink); } /* Onda Clara: era #FF8A8E */
/* F3 rodada 2 (2026-07-10): .02 era imperceptivel em /glossario/ (faixas
   section-alt sumiam visualmente) - mas a causa raiz nao era so o valor: a
   regra de reset do topo do arquivo (".entry-content section{background:none
   !important;border:0 !important;...}", linha ~6-7) zera IMPERATIVAMENTE
   qualquer background/border em qualquer <section>, e .section-alt e um
   <section> - por isso a v1 desta regra (sem !important) nunca teve efeito
   nenhum, confirmado via inspecao ao vivo (computed background ficava
   rgba(0,0,0,0) mesmo com a regra "aplicada"). Sobe para .035 + hairlines
   E adiciona !important para vencer o reset. */
.entry-content .section-alt{ background:rgba(34,19,24,.035) !important; border-top:1px solid rgba(34,19,24,.05) !important; border-bottom:1px solid rgba(34,19,24,.05) !important; } /* Onda Clara: era rgba(255,255,255,...) */

/* 11) Onda H — /asana-ai/: cards com padding excessivo em relação ao
   conteúdo (card "Como os dois se complementam" e card "Em breve" MCP/Dash). */
.entry-content .card-compact{ padding:var(--tw-space-5); }

/* ==================================================================
   RODADA 2 (2026-07-10) — 5 fixes finais, diretor de arte
   ================================================================== */

/* F4 — HOME (10084): hero tímido em telas largas (1920px). O clamp original
   (linha ~29, 2.6rem–4.3rem = 41.6–68.8px) fica pequeno em 1920px porque o
   termo vw (5.2vw) satura antes do teto. Sobe o teto para 76px e aperta o
   letter-spacing/line-height para leitura mais "editorial". Regra repetida
   aqui (mesma especificidade, depois no arquivo) vence a original por ordem
   de cascata — mantém a linha 29 intacta como fallback histórico. */
.entry-content .hero h1{ font-size:clamp(48px,4.6vw,76px); letter-spacing:-0.02em; line-height:1.05; }

/* ==================================================================
   ONDA VIDA (2026-07-10) — animações de entrada + micro-interações
   Persona: persona-diretor-criativo.md, princípio 3 ("movimento com
   propósito"). Progressive enhancement puro: o estado inicial oculto
   só existe sob html.tw-motion, classe que o novo
   taskwork-vnext-motion.js só adiciona quando (a) existe
   IntersectionObserver e (b) NÃO há prefers-reduced-motion. Sem JS
   (ex.: curl, crawler) ou com reduced-motion, o conteúdo já nasce
   com opacity:1/transform:none (display normal, zero risco de
   conteúdo invisível). Hero (.hero na home, .page-hero nas páginas
   internas) nunca é section>* nem grid>.card na marcação real do
   site (confirmado em home/pmo/solucoes/comparativos), então já fica
   fora do escopo dos seletores abaixo sem precisar de :not() extra —
   e o próprio motion.js também pula qualquer elemento dentro de
   .hero via closest(), como reforço.
   ================================================================== */

/* T1 — estado inicial oculto (só sob o gate html.tw-motion)
   ONDA VISUAL v2 (2026-07-10): translateY 16px->28px + leve scale .98->1,
   pedido explícito de "reveal mais evidente" nas sections do vNext. Hero
   segue de fora do escopo (mesma exclusão de sempre, ver nota acima). */
html.tw-motion .entry-content .section > *{
  opacity:0;
  transform:translateY(28px) scale(.98);
  transition:opacity .45s ease, transform .45s ease;
}
html.tw-motion .entry-content .grid > .card{
  opacity:0;
  transform:translateY(28px) scale(.98);
}
html.tw-motion .entry-content .section > *.tw-in,
html.tw-motion .entry-content .grid > .card.tw-in{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* rede de segurança adicional (o JS já não ativa tw-motion sob
   reduced-motion, mas blindamos o CSS também — princípio 7 da persona,
   "prefers-reduced-motion sempre"). */
@media (prefers-reduced-motion: reduce){
  html.tw-motion .entry-content .section > *,
  html.tw-motion .entry-content .grid > .card{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* T1 + T2 combinados — cards que são .card-hover/.card-panel dentro de um
   grid precisam do fade-de-entrada (opacity/transform) E da transição de
   hover (transform/border-color/box-shadow) no MESMO elemento. `transition`
   não soma entre regras concorrentes (a de maior especificidade vence a
   propriedade inteira) — por isso a lista unificada abaixo é a ÚNICA regra
   de `transition` para .card/.card-hover/.card-panel no arquivo, evitando
   que ".grid > .card" (0-0-3) troque a `transition` de ".card-hover"
   (0-0-2) e quebre a suavidade do hover. `transform` fica em .3s como
   meio-termo deliberado entre os .45s do fade-up e os .2s do hover (ainda
   dentro da faixa 300-400ms da persona para fade-up; ainda ágil o
   suficiente para um hover). */
.entry-content .card,
.entry-content .card-hover,
.entry-content .card-panel{
  transition:opacity .45s ease, transform .3s ease, border-color .2s ease, box-shadow .2s ease;
}

/* T2 — micro-interações de hover */
.entry-content .card-hover:hover,
.entry-content .card-panel:hover{
  transform:translateY(-3px);
  border-color:rgba(252,124,74,.35);
  box-shadow:0 14px 34px rgba(34,19,24,.16); /* Onda Clara: era rgba(0,0,0,.35) */
}
@media (prefers-reduced-motion: reduce){
  .entry-content .card-hover:hover,
  .entry-content .card-panel:hover{ transform:none; }
}

/* ==================================================================
   ONDA VIDA (2026-07-10) — T3, refinos rodada 2 dos diretores
   ================================================================== */

/* T3a — ritmo do hub /solucoes/: gaps entre bandas section-alt exagerados
   (96px herdado de .section). Reduz só as bandas alternadas; .section
   normal mantém 96px. */
.entry-content .section-alt{ padding-block:88px; }

/* T3b — chips/ícones .card-icon com pouco contraste (relatado em
   /para/pmo/). Hoje os três (violet/teal/wine) já são fundo SÓLIDO
   (var(--tw-violet) #9D92FF / var(--tw-teal) #3FB9AC / var(--tw-wine)
   #73003E) com texto de contraste garantido (violet/teal viram texto
   escuro #0E151A via regra já existente; wine mantém o branco padrão do
   .card-icon) — trocar para fundo translúcido pioraria o contraste sobre
   o navy da página. Por isso: mantém o fundo sólido e só ACRESCENTA borda
   + halo sutil (mesmos tons pedidos) para dar mais "força" ao tile sem
   arriscar legibilidade. .dark não é tocado. */
.entry-content .card-icon.violet{ border:1px solid rgba(115,0,62,.45); box-shadow:0 0 0 3px rgba(115,0,62,.12); }
.entry-content .card-icon.teal{ border:1px solid rgba(255,91,97,.45); box-shadow:0 0 0 3px rgba(255,91,97,.12); }
.entry-content .card-icon.wine{ border:1px solid rgba(255,138,142,.45); box-shadow:0 0 0 3px rgba(255,138,142,.12); }

/* T3c — coluna Asana em destaque nos 4 comparativos. Confirmado ao vivo
   (thead das 4 páginas): Asana é sempre a 2ª coluna
   (Critério|Asana|concorrente) → td:nth-child(2) está correto. DESVIO
   deliberado do seletor genérico sugerido: .table-wrap também aparece em
   /trust-center/ (coluna 2 = "Status") e /metodologia/ (coluna 2 =
   "Entregável principal") — nenhuma das duas é "Asana", então um seletor
   .entry-content .table-wrap td:nth-child(2) genérico pintaria um acento
   de marca sem sentido nessas tabelas. Escopo por body.page-id das 4
   páginas PT canônicas de comparativo (4336 clickup, 4338 monday, 10179
   smartsheet, 10180 jira; confirmado via get_permalink — todas em
   /comparativos/…, nenhuma /es/ ou /en/). */
body.page-id-4336 .entry-content .table-wrap td:nth-child(2),
body.page-id-4338 .entry-content .table-wrap td:nth-child(2),
body.page-id-10179 .entry-content .table-wrap td:nth-child(2),
body.page-id-10180 .entry-content .table-wrap td:nth-child(2){
  box-shadow:inset 3px 0 0 rgba(252,124,74,.5);
}

/* ONDA FINAL — T2: acento coral da coluna Asana ficou sutil demais (só o
   inset 3px, sem preenchimento). Reforça com um wash leve de fundo coral na
   coluna inteira, mantendo o inset como "trilho" mais forte na borda. Mesmo
   escopo page-id das 4 páginas canônicas (ver nota acima). */
body.page-id-4336 .entry-content .table-wrap td:nth-child(2),
body.page-id-4338 .entry-content .table-wrap td:nth-child(2),
body.page-id-10179 .entry-content .table-wrap td:nth-child(2),
body.page-id-10180 .entry-content .table-wrap td:nth-child(2){
  background:rgba(252,124,74,.06);
}

/* ==================================================================
   ONDA FINAL (2026-07-10) — T1: scorecard comparativo no hero-art dos
   4 comparativos (substitui o card-checklist genérico/img genérica de
   art-workgraph.svg reaproveitada nas 3 outras páginas). Reusa o padrão
   de "barra com width%" já existente no site (.console-foot .bar > span,
   página 10162/assessment) em vez de inventar um novo tipo de mecanismo
   visual. Editorial/factual: barras próximas (nunca esmaga o concorrente),
   cor coral = Asana, cinza neutro = concorrente. */
.entry-content .scorecard{ width:100%; max-width:480px; }
.entry-content .scorecard h3{ text-align:center; margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-5); }
.entry-content .scorecard-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; column-gap:14px; row-gap:14px; align-items:center; }
.entry-content .scorecard-tool-spacer{ display:block; }
.entry-content .scorecard-tool{ font-family:var(--tw-font-display); font-size:.82rem; font-weight:800; text-align:center; letter-spacing:.02em; }
.entry-content .scorecard-tool.sc-primary{ color:#C2273F; } /* Onda Clara: era var(--tw-coral-lt) #FF8A8E */
.entry-content .scorecard-tool.sc-secondary{ color:var(--tw-text-muted); }
.entry-content .scorecard-label{ font-size:.82rem; color:var(--tw-text-muted); font-weight:600; }
.entry-content .scorecard-bar{ height:10px; border-radius:999px; background:rgba(34,19,24,.10); overflow:hidden; } /* Onda Clara: era #243039 (trilho escuro) */
.entry-content .scorecard-fill{ display:block; height:100%; border-radius:999px; }
.entry-content .scorecard-fill.sc-primary{ background:linear-gradient(90deg,var(--tw-magenta),var(--tw-coral)); }
.entry-content .scorecard-fill.sc-secondary{ background:#6b7780; }
.entry-content .scorecard-foot{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--tw-line); font-size:.76rem; color:var(--tw-text-muted); text-align:center; }
@media (max-width:480px){
  .entry-content .scorecard-grid{ grid-template-columns:.85fr 1fr 1fr; column-gap:var(--tw-space-2); }
  .entry-content .scorecard-tool{ font-size:.72rem; }
}

/* ==================================================================
   ONDA FINAL (2026-07-10) — T3: capas de marca no "Do blog" (/recursos/,
   post 4367), substituindo as 6 <img> de thumbnail (todas fotos de banco
   de imagem genéricas) por capas geradas em CSS: gradiente por categoria
   + ícone SVG central, no mesmo padrão de stroke/viewBox dos .card-icon
   já usados no site (viewBox 24x24, stroke currentColor, stroke-width
   1.6-1.8). Categoria "automação" reaproveita literalmente o path do
   ícone-raio já usado em .card-icon.violet (Asana AI) nesta mesma página. */
.entry-content .blog-cover{ aspect-ratio:16/10; border-radius:10px; display:grid; place-items:center; margin-bottom:14px; position:relative; overflow:hidden; }
.entry-content .blog-cover svg{ width:56px; height:56px; color:#fff; opacity:.9; }
.entry-content .blog-cover-label{ position:absolute; left:14px; bottom:12px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.92); }
.entry-content .blog-cover.bc-teal{ background:linear-gradient(135deg,#123832,var(--tw-teal)); }
.entry-content .blog-cover.bc-wine{ background:linear-gradient(135deg,#2b0018,var(--tw-wine)); }
.entry-content .blog-cover.bc-violet{ background:linear-gradient(135deg,#33296b,var(--tw-violet)); }
.entry-content .blog-cover.bc-coral{ background:linear-gradient(135deg,var(--tw-magenta),var(--tw-coral)); }

/* ===== Footer copyright bar — paleta navy (polish 2026-07-10) ===== */
.ast-small-footer .ast-footer-overlay{background-color:#0E151A}
.ast-small-footer,.ast-small-footer a{color:rgba(255,255,255,.62)}
.ast-small-footer a:hover{color:#FC7C4A}
.ast-small-footer .ast-footer-overlay{padding-top:28px;padding-bottom:28px}

/* ==================================================================
   FASE 2 (2026-07-10) — footer sitemap curado: densidade tipográfica.
   Curadoria (taskwork-vnext-footer.php) reduz 7→5 colunas / ~80→~31
   links; aqui só o layout/tipografia mais compacta (bloco caía em
   ~1357px de altura no desktop, alvo ≤~420px). Mesmo motivo do item 8
   acima para o !important: o <style> inline em taskwork-vnext-footer.php
   (hook astra_footer_before) roda DEPOIS deste arquivo no DOM, então
   regras sem !important perdem para o inline mesmo com igual
   especificidade.
   ================================================================== */
.tw-sitemap-grid{ grid-template-columns:repeat(5,1fr) !important; gap:36px !important; } /* P2-02 (2026-07-11): 32->36, mais respiro entre as 5 colunas no desktop */
@media(max-width:900px){ .tw-sitemap-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:560px){ .tw-sitemap-grid{ grid-template-columns:repeat(2,1fr) !important; gap:8px 18px !important; } } /* validacao-externa #10 (11/07): 1 coluna gerava footer quilometrico no mobile; 2 colunas + touch targets 44px do bloco acima */
.tw-sitemap-col a{ font-size:14px !important; line-height:1.5 !important; }
.tw-sitemap-col li{ margin-bottom:10px !important; }
.tw-sitemap-title{ font-size:15px !important; font-weight:600 !important; margin-bottom:14px !important; }

/* ==================================================================
   P2-02 (2026-07-11) — Footer: touch targets >=44px em mobile/tablet
   (PRD TaskWork Visual 10/10 §11/P2-02, §13.5). Medido ao vivo antes
   desta mudança (Playwright, getBoundingClientRect em 390px real):
   link do sitemap = 18px de altura clicável, contato = 24.75px, ícone
   social = 20x20px, badge ISO = ~27px — todos muito abaixo de 44px.
   Fix: cada link vira uma caixa flex com min-height:44px (texto
   centralizado verticalmente), current bg/cor/underline preservados.
   min-height (não padding fixo) garante 44px de forma determinística
   independente de metrica de fonte/SO. Reduz margin-bottom do <li> pra
   0 no breakpoint pois a própria caixa de 44px já cria respiro visual
   suficiente entre links consecutivos (texto tem folga acima/abaixo
   dentro da caixa) — evita empilhar padding+margin e inflar demais a
   altura do footer no mobile. Escopo <=768px (mesmo breakpoint de
   .tw-fbrand-inner acima) por ser onde o footer é predominantemente
   navegado por toque; desktop/mouse não muda. !important pelo mesmo
   motivo dos blocos acima (vence o <style> inline que roda depois
   deste arquivo no DOM). Não remove nenhum link/rota, só a área de
   toque de cada um. */
@media(max-width:768px){
  .tw-sitemap-col a{
    display:flex !important; align-items:center !important; min-height:44px !important;
  }
  .tw-sitemap-col li{ margin-bottom:0 !important; }
  .tw-fbrand-contact a{
    display:flex !important; align-items:center !important; min-height:44px !important;
  }
  .tw-fbrand-social{ gap:4px !important; }
  .tw-fbrand-social a{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    min-height:44px !important; min-width:44px !important;
  }
  .footer-badges .badge{
    display:inline-flex !important; align-items:center !important; min-height:44px !important;
    box-sizing:border-box !important;
  }
}

/* P2-02 — badge ISO (<a class="badge">) ganha affordance de hover/cursor
   pra se diferenciar visualmente do badge estático "Asana Platinum..."
   (<span>), que não é clicável. Mesmo par de cores já usado nos links
   do footer (#A7B2B9 -> #FF8A8E), só que aplicado à borda/texto do chip
   em vez de texto solto. */
.footer-badges a.badge{ transition:border-color .15s ease,color .15s ease; }
.footer-badges a.badge:hover{ border-color:rgba(255,138,142,.6) !important; color:#FF8A8E !important; }

/* ===== Polish 2026-07-10: gradient-text banido -> coral solido ===== */
.entry-content .hero-highlight{ background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color:var(--tw-coral) !important; color:var(--tw-coral) !important; }

/* ===== Lote final polish (2026-07-10):
   1) /recursos/ — nota "Demonstrações e cases..." estava numa <section>
   solitária, flutuando sem contexto entre "Materiais por área" e a
   CTA band. Vira nota de rodapé anexada à seção anterior: hairline
   superior (border-top, não border-left — banido), fonte menor, cor
   muted, margem apertada. Sem section/container próprios.
   2) Comparativos (4336/4338/10179/10180) — card "Resposta rápida"
   tinha parágrafo (.lead, max-width:54ch) + <ul> empilhados em bloco,
   deixando a metade direita do card vazia (container é largo, texto
   não preenche). .tw-quickanswer-grid parte o conteúdo em 2 colunas
   no desktop (parágrafo à esquerda, bullets à direita) e empilha
   ≤900px, igual ao padrão de outras grids editoriais do site. */
.entry-content .section-footnote{ margin:var(--tw-space-5) var(--tw-space-0) var(--tw-space-0); padding-top:var(--tw-space-4); border-top:1px solid var(--tw-line);
  font-size:.85rem; line-height:1.5; color:var(--tw-text-muted); max-width:72ch; }

.entry-content .tw-quickanswer-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--tw-space-7); align-items:start; margin-top:var(--tw-space-4); }
.entry-content .tw-quickanswer-grid .lead{ max-width:none; }
.entry-content .tw-quickanswer-grid ul{ margin:var(--tw-space-0); }
@media (max-width:900px){
  .entry-content .tw-quickanswer-grid{ grid-template-columns:1fr; gap:var(--tw-space-5); }
}

/* F2 /metodologia/ 10/10 (2026-07-10): .card-icon base (sem modificador de cor)
   nunca teve background definido — violet/teal/wine/dark tem chip solido, mas
   o "01" default renderizava como texto branco sem circulo (confirmado via
   screenshot ao vivo em /#metodo e no /metodologia/ antigo). Fecha o gap com o
   mesmo gradiente coral/magenta ja usado no marcador de bullet (ul li::before,
   vnext-style.css) e no botao primario — mantem o sistema de cor consistente
   em vez de introduzir uma cor nova. Efeito colateral positivo: conserta o
   mesmo gap na Home (card "01" da secao Metodo) e nos 2 posts de blog que
   usam .card-icon sem classe de cor. */
.entry-content .card-icon{ background:linear-gradient(135deg,var(--tw-coral),var(--tw-magenta)); }

/* ==================================================================
   ONDA VISUAL v2 (2026-07-10) — camada de animação/componentes "mais
   viva". Contrato de classes para uso por outros executores (nomes
   exatos, não renomear). Progressive enhancement em tudo que precisa de
   JS: markup já nasce com o valor/estado final correto; JS só melhora.
   prefers-reduced-motion respeitado em tudo (via CSS media query aqui
   e/ou via guard de topo do taskwork-vnext-motion.js, que já intercepta
   webdriver/reduced-motion/sem-IntersectionObserver antes de qualquer
   novo comportamento rodar).
   ================================================================== */

/* ---------- .tw-photo — componente de foto ---------- */
.entry-content .tw-photo{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(34,19,24,.10); /* Onda Clara: era rgba(255,255,255,.09) */
  box-shadow:0 18px 44px rgba(34,19,24,.12); /* Onda Clara: era 0 24px 60px rgba(0,0,0,.6), per spec */
}
.entry-content .tw-photo img{ display:block; width:100%; height:auto; border-radius:inherit; }

/* --tilt: leve rotação que endireita no hover */
.entry-content .tw-photo--tilt{ transform:rotate(-1.5deg); transition:transform .35s ease; }
.entry-content .tw-photo--tilt:hover{ transform:rotate(0deg); }

/* --glow: halo coral atrás, mesma linguagem do .hero::after (rgba
   252,124,74 a 12%). Precisa overflow:visible para o halo não ser
   cortado pelo overflow:hidden base — a foto em si continua com
   cantos arredondados via border-radius:inherit no <img>. */
.entry-content .tw-photo--glow{ overflow:visible; }
.entry-content .tw-photo--glow::after{
  content:""; position:absolute; inset:-14%; z-index:-1;
  background:radial-gradient(closest-side, rgba(252,124,74,.08), transparent 70%); /* Onda Clara: .12 -> .08, mesma redução do .hero::after */
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .entry-content .tw-photo--tilt{ transition:none; }
}

/* QA768 item 1 [2026-07-11]: .tw-photo--glow::after com inset:-14% sangra
   ~101px de cada lado da foto (::after não é capturado por overflow-x:hidden
   ancestral, então o proprio scrollWidth do <body> cresce). Em single-column
   tablet/mobile (hero-art quase colado na borda do container, ~20px de folga
   a direita em 768px) esse sangramento estoura a viewport e gera overflow
   horizontal de ~80px (scrollWidth 848 em vez de 768), visto em /asana-ai/.
   Fix na causa: reduz o sangramento do halo para um valor fixo em px que
   cabe dentro da folga disponivel do container em telas <=1024px, sem tocar
   overflow-x:hidden (que so mascararia o sintoma). Halo continua visivel,
   soh mais contido. */
@media (max-width:1024px){
  .entry-content .tw-photo--glow::after{ inset:-14px; }
}

/* ---------- .tw-hero-media — container foto+texto no hero ---------- */
.entry-content .tw-hero-media{ display:grid; grid-template-columns:1fr; gap:var(--tw-space-7); align-items:center; }
@media (min-width:1024px){
  .entry-content .tw-hero-media{ grid-template-columns:1.05fr .95fr; gap:var(--tw-space-8); }
}

/* ---------- .tw-word-carousel — rotação de palavras no H1 ----------
   Markup: <span class="tw-word-carousel" data-words="planejar|executar|escalar">planejar</span>
   Sem JS (ou reduced-motion, via guard de topo do motion.js): a palavra
   inicial do markup fica fixa — já é a correta, zero risco de conteúdo
   ausente. Largura travada via JS (mede a maior palavra) para o layout
   não pular ao trocar de palavra. */
.entry-content .tw-word-carousel{
  display:inline-block; color:var(--tw-coral); white-space:nowrap; vertical-align:baseline;
}
.entry-content .tw-word-carousel .tw-wc-current{
  display:inline-block; transition:opacity .35s ease, transform .35s ease;
}
.entry-content .tw-word-carousel.tw-wc-out .tw-wc-current{ opacity:0; transform:translateY(-10px); }
.entry-content .tw-word-carousel.tw-wc-in .tw-wc-current{ opacity:0; transform:translateY(10px); transition:none; }
@media (prefers-reduced-motion:reduce){
  .entry-content .tw-word-carousel .tw-wc-current{ transition:none; }
}

/* ---------- .tw-logo-marquee — faixa de logos em loop ----------
   Markup (grupo duplicado no track p/ loop CSS-only seamless; 2ª cópia
   aria-hidden p/ leitores de tela):
   <div class="tw-logo-marquee">
     <div class="tw-marquee-track">
       <div class="tw-marquee-group">
         <img src="/logo-1.svg" alt="Cliente 1" loading="lazy">
         <img src="/logo-2.svg" alt="Cliente 2" loading="lazy">
       </div>
       <div class="tw-marquee-group" aria-hidden="true">
         <img src="/logo-1.svg" alt="" loading="lazy">
         <img src="/logo-2.svg" alt="" loading="lazy">
       </div>
     </div>
   </div>
   translateX(-50%) desloca exatamente a largura de 1 grupo (2 grupos
   idênticos = loop perfeito, sem salto visível). Puro CSS — não depende
   de JS para animar; pausa no hover; reduced-motion vira faixa estática
   com scroll horizontal (2º grupo escondido p/ não duplicar visualmente). */
.entry-content .tw-logo-marquee{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.entry-content .tw-logo-marquee .tw-marquee-track{
  display:flex; align-items:center; gap:var(--tw-space-8); width:max-content;
  animation:tw-marquee-scroll 28s linear infinite;
}
.entry-content .tw-logo-marquee:hover .tw-marquee-track{ animation-play-state:paused; }
.entry-content .tw-logo-marquee .tw-marquee-group{ display:flex; align-items:center; gap:var(--tw-space-8); flex-shrink:0; }
.entry-content .tw-logo-marquee .tw-marquee-group img,
.entry-content .tw-logo-marquee .tw-marquee-group svg{
  height:32px; width:auto; opacity:.7; filter:grayscale(1);
  transition:opacity .2s ease, filter .2s ease;
}
.entry-content .tw-logo-marquee .tw-marquee-group img:hover,
.entry-content .tw-logo-marquee .tw-marquee-group svg:hover{ opacity:1; filter:grayscale(0); }
@keyframes tw-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .entry-content .tw-logo-marquee{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    mask-image:none; -webkit-mask-image:none;
  }
  .entry-content .tw-logo-marquee .tw-marquee-track{ animation:none; }
  .entry-content .tw-logo-marquee .tw-marquee-group[aria-hidden="true"]{ display:none; }
}

/* ---------- .tw-counter — contador animado ----------
   Markup: <span class="tw-counter" data-target="150" data-suffix="+" data-duration="1600">150+</span>
   Conteúdo inicial já é o valor final (progressive enhancement: sem JS
   ou headless/reduced-motion via guard do motion.js, número certo fica
   parado, sem contar). tabular-nums evita micro-jitter de largura
   enquanto os dígitos mudam durante a contagem. */
.entry-content .tw-counter{ font-variant-numeric:tabular-nums; }

/* ---------- .tw-stagger — pai com filhos revelando em cascata ----------
   Integrado ao mesmo gate html.tw-motion do T1 (mesmos valores de
   translateY/scale da Onda Visual v2 acima); delay incremental por
   índice é aplicado via motion.js (mesmo padrão de .grid > .card). */
html.tw-motion .entry-content .tw-stagger > *{
  opacity:0;
  transform:translateY(28px) scale(.98);
  transition:opacity .45s ease, transform .45s ease;
}
html.tw-motion .entry-content .tw-stagger > *.tw-in{
  opacity:1;
  transform:translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  html.tw-motion .entry-content .tw-stagger > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ==================================================================
   FIX P1 (2026-07-10) — onda de correções visuais QA. Barra fixa mobile
   "Agendar Diagnóstico" (classe real: .tw-mobile-ctabar, injetada por
   wp-content/mu-plugins/taskwork-mobile-cta.php via wp_footer, NÃO por
   este arquivo) sobrepõe o fim do conteúdo em viewports <=921px (mesmo
   breakpoint em que a barra passa a display:block).

   Medição real (Playwright, 375x812, sem safe-area simulada):
     .tw-mobile-ctabar offsetHeight = 69px
     body padding-bottom já reservado pelo próprio mobile-cta.php = 74px
   O plugin usa `padding:10px 16px calc(10px + env(safe-area-inset-bottom))`
   no container da barra — só a parte de baixo do padding cresce com a
   safe-area (iPhones com home indicator, tipicamente +34px). Como o
   body{padding-bottom:74px} do plugin é um valor FIXO que não soma
   env(safe-area-inset-bottom), em aparelhos com safe-area a barra real
   fica maior que os 74px reservados e cobre o fim do conteúdo.
   Reforçamos aqui com a mesma altura medida (69px) + env() + 16px de
   respiro. !important é necessário: o <style> do mobile-cta.php é
   ecoado no wp_footer (depois deste <link> no <head>, logo depois no
   DOM) e tem a MESMA especificidade (seletor `body`) — sem !important
   a regra do plugin venceria por ordem de origem, não a nossa. */
@media (max-width:921px){
  body{ padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px) + 16px) !important; }
}


/* ---------- v2026.07.10.20 — hero vivo fixes (Fable) ---------- */
.entry-content .hero-copy .eyebrow{ width:fit-content; }
.entry-content .tw-word-carousel{ transition:width .3s ease; }
.entry-content .tw-hero-visual{ position:relative; }
.entry-content .tw-platinum-float{ position:absolute; left:-18px; bottom:26px; background:#fff; border-radius:14px; padding:10px 14px; box-shadow:0 16px 40px rgba(34,19,24,.18); transform:rotate(-1.5deg); z-index:2; } /* Onda Clara: sombra era rgba(0,0,0,.45), per spec */
.entry-content .tw-platinum-float img{ display:block; width:150px; height:auto; }
@media (max-width:640px){ .entry-content .tw-platinum-float{ left:10px; bottom:12px; padding:8px 10px; } .entry-content .tw-platinum-float img{ width:110px; } }


/* ---------- v2026.07.10.22 — header legado 1 linha + H1 carousel estável (Fable) ---------- */
.main-header-bar .site-branding img{ height:44px; width:auto !important; max-width:none !important; }
.main-header-bar .site-branding{ flex-shrink:0; }
.main-header-bar .main-header-container{ align-items:center; flex-wrap:nowrap; }
.main-header-bar ul.main-header-menu{ flex-wrap:nowrap; align-items:center; }
.main-header-bar .main-header-menu .menu-item, .main-header-bar .main-header-menu .menu-link{ white-space:nowrap; }
.main-header-bar .main-header-menu > .menu-item > .menu-link{ padding-left:14px; padding-right:14px; }
.main-header-bar .ast-masthead-custom-menu-items{ white-space:nowrap; flex-shrink:0; }
.entry-content .tw-nowrap{ white-space:nowrap; }
body.page-id-10084 .entry-content .hero h1{ font-size:clamp(2.75rem, 3.4vw, 4.05rem); }

/* v23: hero copy mais largo (botões lado a lado) */
@media (min-width:1024px){ .entry-content .tw-hero-media{ grid-template-columns:1.15fr .85fr; } }

/* v24: gap unico nos botoes do hero (margin antigo + gap = dupla contagem) */
.entry-content .btn-row .btn{ margin-right:0 !important; }

/* P0-09 header ------------------------------------------------------------
   Refinamento do header LEGADO do Astra (.main-header-bar/.main-header-
   container/.main-header-menu + .ast-masthead-custom-menu-items). Apenas
   CSS — zero mudança de markup/renderer, sem HFB, sem sticky novo, sem
   transparência, sem mega menu (PRD §13.2/13.3). Baseline medida via
   Playwright em taskwork.com.br antes deste patch: barra 88px,
   menu-link 16px/300/#334155, CTA 400/letter-spacing:2px/hover azul
   #5b6cff, current-menu-item/hover em #8C133E (regra a11y de
   taskwork-vnext-style.css, arquivo de outro dono nesta onda — por isso
   os seletores de estado abaixo levam prefixo extra de especificidade
   (.main-header-bar) + !important, para vencer aquela regra sem editá-la. */

/* 1) altura/respiro: 88px -> 80px, cortando só o padding EXTERNO da barra
   (não mexe na altura fixa interna de 64px que o Astra aplica ao
   .main-header-container, então o logo não corre risco de ser cortado).
   !important necessário: existe uma regra `.main-header-bar{padding:12px}`
   dentro do campo "Additional CSS" do Customizer do Astra (WP core
   imprime isso no wp_head na prioridade 101 — depois de qualquer
   stylesheet enfileirado, inclusive este arquivo), então mesma
   especificidade não basta; sem !important a nossa regra perde por
   ordem de origem. */
.main-header-bar{ padding-top:8px !important; padding-bottom:8px !important; }
/* logo: 44px já é retina (srcset 1x/2x confirmado ao vivo) e está dentro
   do range ótico 40-48px pedido no PRD — mantido sem alteração. */

/* 2) menu: tipografia, espaçamento e estados */
.main-header-bar .main-header-menu > .menu-item > .menu-link{
  font-size:15px; font-weight:500; color:#4A4550;
  padding-left:var(--tw-space-4); padding-right:var(--tw-space-4);
  transition:color .15s ease;
}
.main-header-bar .main-header-menu .menu-item:hover > .menu-link{
  color:#C2273F !important;
}
.main-header-bar .main-header-menu .current-menu-item > .menu-link,
.main-header-bar .main-header-menu .current-menu-ancestor > .menu-link{
  color:#C2273F !important; font-weight:600 !important;
  text-decoration:underline; text-underline-offset:8px;
  text-decoration-thickness:2px; text-decoration-color:#C2273F;
}

/* 3) focus-visible: itens do menu + CTA */
.main-header-bar .main-header-menu .menu-link:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px; border-radius:3px;
}
.ast-masthead-custom-menu-items .ast-custom-button-link:focus-visible .ast-button{
  outline:2px solid #C2273F; outline-offset:2px;
}

/* 4) CTA "Agendar Diagnóstico": harmoniza com .btn-primary (radius 999px
   já igual; peso 700; tracking reduzido de 2px pra .04em — "muito
   aberto" no legado; hover deixa de virar azul #5b6cff e passa a subir
   2px como .btn-primary, mesma família cromática coral/magenta). */
.ast-masthead-custom-menu-items .ast-button{
  background:linear-gradient(135deg,var(--tw-magenta),var(--tw-coral)) !important;
  border-color:transparent !important; color:#fff !important;
  font-weight:700 !important; letter-spacing:.04em !important;
  box-shadow:0 2px 8px rgba(217,11,89,.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ast-masthead-custom-menu-items .ast-button:hover{
  background:linear-gradient(135deg,var(--tw-magenta),var(--tw-coral)) !important;
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(217,11,89,.35);
}

/* 5) segurança de quebra 921-1100px: se o menu ficar apertado nessa
   faixa (medido com Playwright em 950/1024/1100), reduz o padding dos
   itens em vez de deixar quebrar em 2 linhas. */
@media (min-width:921px) and (max-width:1100px){
  .main-header-bar .main-header-menu > .menu-item > .menu-link{
    padding-left:var(--tw-space-3); padding-right:var(--tw-space-3);
  }
}

/* Gate F1: tw-photo--tilt sangra ~7px em tablet (overflow horizontal) — sem tilt <=920px */
@media (max-width:920px){ .entry-content .tw-photo--tilt{ transform:none; } }

/* ==================================================================
   P0-01 (2026-07-11) — TaskWork Operating System
   PRD-TaskWork-Visual-10-10 §P0-01/§6/§12.1/§14. Substitui a foto ESG no
   .tw-hero-visual da home (10084) por um objeto gráfico proprietário:
   5 camadas conectadas — Diagnóstico → Arquitetura → Adoção →
   Governança → Evolução — coroadas pelo selo Platinum (.tw-platinum-
   float, âncora existente, reposicionada no topo p/ este contexto). A
   foto ESG não desaparece: migrou pra banda "citação Platinum" logo
   abaixo do hero (ver .platinum-quote--photo, CSS colocado inline no
   <style> do post_content 10084, mesmo padrão do autor original daquele
   bloco).

   Teste do PRD (§12.1): "o comprador entende melhor o problema em 5
   segundos?" — cada camada tem label (Montserrat, --tw-font-display) +
   microcopy de 2-4 palavras, sem depender de leitura de parágrafo.

   Acessibilidade: role="img" + aria-label no container (markup) tratam
   o conjunto como uma imagem única e descrita; os nós internos (dots/
   labels/microcopy) não usam <h3> como filho direto de <div> — o reset
   ".entry-content div:has(> h3)" (linha ~7) zera background/border e
   este componente não pode cair nesse seletor nem precisar da
   contra-regra que os cards existentes usam.

   Estático (PRD §8.1): zero transição/animação de entrada — só
   transform/opacity em :hover, desligado sob prefers-reduced-motion. */

.entry-content .tw-ops-system{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  margin:0 auto;
  box-sizing:border-box;
}
.entry-content .tw-ops-title{
  margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-4);
  /* !important necessário: ".entry-content p{max-width:72ch}"
     (taskwork-vnext-style.css) vencia apesar de menor especificidade —
     mesmo padrão de late-print/!important já documentado noutros pontos
     deste arquivo (ex.: linha ~820, header legado vs Additional CSS do
     Astra). 230px fica curto o bastante p/ nunca entrar embaixo do selo
     Platinum (.tw-platinum-float, coroando o topo-direita, ver abaixo)
     — medido ao vivo: badge ocupa a partir de ~269px do início do
     sistema em 1440px; 230px deixa folga. */
  max-width:230px !important;
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tw-text-muted);
}
/* rail: grid de 2 colunas (dot fixo | card) — o dot fica numa coluna fixa
   para a linha de conexão atravessar os 5 dots com precisão, mesmo com
   os cards (coluna 2) recebendo o offset de profundidade abaixo. Evita o
   desalinhamento que aconteceria se dot+card fossem deslocados juntos
   (ex.: via flex + margin-left no mesmo item). */
.entry-content .tw-ops-rail{
  position:relative;
  display:grid;
  grid-template-columns:26px 1fr;
  column-gap:14px;
  row-gap:14px;
  align-items:center;
}
.entry-content .tw-ops-line{
  position:absolute;
  left:12px; top:22px; bottom:22px;
  width:2px;
  background:linear-gradient(180deg,var(--tw-wine),var(--tw-magenta),var(--tw-coral-lt),var(--tw-coral),var(--tw-magenta));
  opacity:.4;
  z-index:0;
}
.entry-content .tw-ops-dot{
  position:relative;
  z-index:1;
  justify-self:center;
  width:13px; height:13px;
  border-radius:50%;
  box-shadow:0 0 0 4px var(--tw-raised), 0 0 0 5px var(--tw-line);
}
.entry-content .tw-ops-dot--wine{ background:var(--tw-wine); }
.entry-content .tw-ops-dot--violet{ background:var(--tw-magenta); }
.entry-content .tw-ops-dot--teal{ background:var(--tw-coral-lt); }
.entry-content .tw-ops-dot--coral{ background:var(--tw-coral); }
.entry-content .tw-ops-dot--magenta{ background:var(--tw-magenta); }
.entry-content .tw-ops-layer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
  background:var(--tw-raised);
  border:1px solid var(--tw-line);
  border-radius:14px;
  padding:13px 18px;
  box-shadow:0 10px 26px rgba(34,19,24,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* profundidade: cards finos sobrepostos com offset crescente (PRD §14.3);
   só a coluna do card desloca — o dot (coluna 1) fica fixo na rail. */
.entry-content .tw-ops-layer--2{ margin-left:6px; }
.entry-content .tw-ops-layer--3{ margin-left:var(--tw-space-3); }
.entry-content .tw-ops-layer--4{ margin-left:18px; }
.entry-content .tw-ops-layer--5{ margin-left:var(--tw-space-6); }
.entry-content .tw-ops-layer:hover{
  transform:translateX(-5px);
  box-shadow:0 16px 36px rgba(34,19,24,.15);
  border-color:rgba(34,19,24,.16);
}
.entry-content .tw-ops-label{
  font-family:var(--tw-font-display);
  font-weight:800;
  font-size:.98rem;
  color:var(--tw-text-strong);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.entry-content .tw-ops-micro{
  font-size:.8rem;
  color:var(--tw-text-muted);
  font-weight:500;
}
@media (prefers-reduced-motion:reduce){
  .entry-content .tw-ops-layer{ transition:none; }
  .entry-content .tw-ops-layer:hover{ transform:none; }
}

/* selo Platinum coroando o sistema — reposiciona a âncora existente
   (.tw-platinum-float, default bottom-left p/ contexto de foto) pro
   topo, "coroando" as camadas, só quando o pai é o operating system
   (:has() já é padrão estabelecido neste arquivo, ver linha ~207). */
.entry-content .tw-hero-visual:has(.tw-ops-system) .tw-platinum-float{
  left:auto; right:-6px; bottom:auto; top:-16px;
  transform:rotate(3deg);
}
@media (max-width:640px){
  .entry-content .tw-ops-system{ max-width:none; }
  .entry-content .tw-ops-rail{ grid-template-columns:20px 1fr; column-gap:10px; row-gap:10px; }
  .entry-content .tw-ops-line{ left:9px; top:19px; bottom:19px; }
  .entry-content .tw-ops-dot{ width:11px; height:11px; }
  .entry-content .tw-ops-layer{ padding:11px 14px; }
  .entry-content .tw-ops-layer--2{ margin-left:3px; }
  .entry-content .tw-ops-layer--3{ margin-left:6px; }
  .entry-content .tw-ops-layer--4{ margin-left:9px; }
  .entry-content .tw-ops-layer--5{ margin-left:var(--tw-space-3); }
  .entry-content .tw-ops-label{ font-size:.9rem; }
  .entry-content .tw-hero-visual:has(.tw-ops-system) .tw-platinum-float{ right:0; top:-10px; }
}

/* ==================================================================
   P1-05 — onda de ritmo: .tw-editorial-break (só a DEFINIÇÃO; a
   aplicação no conteúdo é de outro executor, ver p1-specs). Seção de
   respiro entre blocos densos — eyebrow + frase grande, largura
   travada e centrada, fundo opcional levemente distinto do body.
   ================================================================== */
.entry-content .tw-editorial-break{
  max-width:720px; margin:64px auto; padding:var(--tw-space-8) var(--tw-space-7); text-align:center;
}
.entry-content .tw-editorial-break .eyebrow{ display:block; margin-bottom:var(--tw-space-4); }
.entry-content .tw-editorial-break p{
  font-family:var(--tw-font-display); font-weight:700; font-size:clamp(1.5rem,3.2vw,2.1rem);
  line-height:1.28; color:var(--tw-text-strong); margin:var(--tw-space-0); letter-spacing:-.01em;
}
/* --tinted: fundo opcional levemente distinto do body (--tw-bg), quando o
   bloco precisa de separação visual extra, ex. entre duas seções claras */
.entry-content .tw-editorial-break--tinted{
  background:var(--tw-raised); border-radius:24px; border:1px solid var(--tw-line);
}
@media (max-width:640px){
  .entry-content .tw-editorial-break{ padding:var(--tw-space-7) var(--tw-space-5); margin:44px auto; }
}

/* ==================================================================
   P1-05 — .tw-photo--warm / --technical / --editorial (P1-02 spec
   foto-tratamento.md §4): 3 modificadores de cor/contraste, combináveis
   com --tilt/--glow (base .tw-photo em torno da linha ~625, não muda).
   ================================================================== */

/* --warm: família BrandShoot — adoção, change management, rollout,
   /para/*, /setores/* */
.entry-content .tw-photo--warm img{
  filter:saturate(1.12) contrast(1.04) brightness(1.02);
}
.entry-content .tw-photo--warm{
  border-color:rgba(255,91,97,.22); /* --tw-coral a 22% — acento quente na borda */
}
.entry-content .tw-photo--warm::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 60%, rgba(217,11,89,.10) 100%); /* --tw-magenta sutil no rodapé */
}

/* --technical: família Dev IT — Asana AI, integração, migração,
   funcionalidades técnicas */
.entry-content .tw-photo--technical img{
  filter:saturate(.82) contrast(1.08) brightness(.98);
}
.entry-content .tw-photo--technical{
  border-color:rgba(157,146,255,.28); /* --tw-violet a 28% — acento de IA na borda */
  box-shadow:0 18px 44px rgba(34,19,24,.12), inset 0 0 0 1px rgba(157,146,255,.10);
}
.entry-content .tw-photo--technical::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,10,30,.14) 0%, transparent 40%); /* leve vinheta superior, tom frio */
}

/* --editorial: neutro — usado quando a foto é prova/contexto, não hero */
.entry-content .tw-photo--editorial img{
  filter:saturate(.94) contrast(1.0) grayscale(.06);
}
.entry-content .tw-photo--editorial{
  border-color:rgba(34,19,24,.14); /* neutro, mesma família do --tw-line */
  box-shadow:0 12px 30px rgba(34,19,24,.10); /* mais discreta que a base — não compete com hero */
}

/* estado comum aos 3 — legenda opcional */
.entry-content .tw-photo__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px 14px; font-size:.8125rem; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
/* os 3 modificadores são estáticos (filter/border, sem animação) — nada a
   desativar sob prefers-reduced-motion, documentado por exigência do §14.3 */

/* ==================================================================
   P0-07 (2026-07-11) — Sistema de heroes: quatro gramáticas visuais
   PRD-TaskWork-Visual-10-10 §P0-07/§6.1/§12.1. Os três diagramas
   estáticos (art-governance.svg, art-workgraph.svg, art-portfolio.svg,
   ver /wp-content/uploads/vnext-art/) se repetiam sem distinção entre
   famílias (20 páginas publicadas usam pelo menos um dos três, entre
   Soluções, Asana AI, Personas e até /sobre-a-asana/ e /trust-center/)
   — o comprador não consegue diferenciar o problema tratado só pela
   arte do hero. Esta onda define 4 modificadores .tw-family-art--* e
   aplica em 1 piloto por família (rollout completo é onda futura, após
   aprovação — PRD §12.1 "Propagar apenas após sign-off").

   Pilotos desta onda:
     --solucoes     /solucoes/implantacao/      (10155)
     --asana-ai     /asana-ai/ai-studio/         (10128)
     --personas     /para/diretoria/             (10167)
     --comparativos /comparativos/ (hub)         (4335)

   Acessibilidade (§8.2): mesmo padrão já validado pelo P0-01/tw-ops-
   system (home, 10084) — role="img" + aria-label descritivo no
   container .tw-family-art (consistência entre as peças do "sistema de
   heroes"), COM os labels/microcopy também como texto real visível no
   DOM (não é só alt-text escondido: quem enxerga lê os cartões, quem
   usa leitor de tela ouve o aria-label consolidado). Cada grafismo
   puramente decorativo (linhas, setas, dots de conexão) leva
   aria-hidden="true".

   Estático: zero animação de entrada (§8.1); único movimento é
   transform/opacity em :hover (mouse, desktop), desligado sob
   prefers-reduced-motion (§8.2), mesmo padrão do .tw-ops-system (P0-01).

   Base compartilhada entre as 4 gramáticas: container, kicker e reset de
   safety (evita herdar o reset ".entry-content div:has(> h3)" da linha
   ~7 — os nós internos não usam h3 como filho direto). */

.entry-content .tw-family-art{
  position:relative;
  z-index:1;
  width:100%;
  max-width:460px;
  margin:0 auto;
  box-sizing:border-box;
}
.entry-content .tw-family-art *{ box-sizing:border-box; }
.entry-content .tw-fa-kicker{
  display:block;
  margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-4);
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tw-text-muted);
}

/* ==================================================================
   Gramática 1 — SOLUÇÕES E IMPLANTAÇÃO
   Metáfora (§12.1): "camadas do sistema operacional de trabalho",
   variação COMPACTA do .tw-ops-system da home (P0-01/10084) — 3 camadas
   em vez de 5, rail vertical com trilho gradiente, mesma linguagem de
   dot+card em profundidade crescente. É a ÚNICA gramática que ecoa a
   home de propósito (mesma metáfora-mãe, versão condensada por página
   de serviço); as outras 3 são desenhos novos. Camadas usam as 3 fases
   reais do método já descrito na própria página (#metodo): Discovery,
   Workflow Design + Enable&Deploy (fundidas em "Arquitetura & Deploy"
   pra caber em 3) e Document&Optimize + change management ("Adoção &
   Governança").
   P0-07-propagação (2026-07-11): + modificador --4 (dot/layer), cor
   magenta (var(--tw-magenta), mesma família cromática wine/teal/coral
   já usada nos 3 primeiros dots — ver --tw-magenta em
   taskwork-vnext-style.css). Motivo: das 18 páginas legadas com os 3
   SVGs estáticos (art-governance/art-workgraph/art-portfolio), o SVG
   art-governance carregava 4 conteúdos (Plataforma → Desenho → Revisão
   → Operação) mas a gramática só suportava 3 camadas — o piloto
   (10155) resolveu fundindo 2 conteúdos em 1 camada; esta onda adiciona
   a capacidade de 4ª camada como opção nativa da gramática para casos
   em que o conteúdo real da página tem 4 estágios genuínos (não força
   consolidação artificial). Não quebra os usos existentes de 3 camadas
   (--2/--3 inalterados; --4 é aditivo). */
.entry-content .tw-family-art--solucoes .tw-fa-stack{
  position:relative;
  display:grid;
  grid-template-columns:24px 1fr;
  column-gap:14px;
  row-gap:14px;
  align-items:center;
}
.entry-content .tw-family-art--solucoes .tw-fa-line{
  position:absolute;
  left:11px; top:20px; bottom:20px;
  width:2px;
  background:linear-gradient(180deg,var(--tw-wine),var(--tw-teal),var(--tw-coral));
  opacity:.4;
  z-index:0;
}
.entry-content .tw-family-art--solucoes .tw-fa-dot{
  position:relative; z-index:1; justify-self:center;
  width:12px; height:12px; border-radius:50%;
  box-shadow:0 0 0 4px var(--tw-raised), 0 0 0 5px var(--tw-line);
}
.entry-content .tw-family-art--solucoes .tw-fa-dot--1{ background:var(--tw-wine); }
.entry-content .tw-family-art--solucoes .tw-fa-dot--2{ background:var(--tw-teal); }
.entry-content .tw-family-art--solucoes .tw-fa-dot--3{ background:var(--tw-coral); }
.entry-content .tw-family-art--solucoes .tw-fa-dot--4{ background:var(--tw-magenta); }
.entry-content .tw-family-art--solucoes .tw-fa-layer{
  position:relative; z-index:1;
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  background:var(--tw-raised); border:1px solid var(--tw-line);
  border-radius:14px; padding:13px 18px;
  box-shadow:0 10px 26px rgba(34,19,24,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.entry-content .tw-family-art--solucoes .tw-fa-layer--2{ margin-left:var(--tw-space-2); }
.entry-content .tw-family-art--solucoes .tw-fa-layer--3{ margin-left:var(--tw-space-4); }
.entry-content .tw-family-art--solucoes .tw-fa-layer--4{ margin-left:var(--tw-space-6); }
.entry-content .tw-family-art--solucoes .tw-fa-layer:hover{
  transform:translateX(-5px);
  box-shadow:0 16px 36px rgba(34,19,24,.15);
  border-color:rgba(34,19,24,.16);
}
.entry-content .tw-family-art--solucoes .tw-fa-layer strong{
  font-family:var(--tw-font-display); font-weight:800; font-size:.98rem;
  color:var(--tw-text-strong); letter-spacing:-.01em; white-space:nowrap;
}
.entry-content .tw-family-art--solucoes .tw-fa-layer span{
  font-size:.8rem; color:var(--tw-text-muted); font-weight:500;
}
@media (max-width:640px){
  .entry-content .tw-family-art--solucoes .tw-fa-stack{ grid-template-columns:18px 1fr; column-gap:10px; row-gap:10px; }
  .entry-content .tw-family-art--solucoes .tw-fa-line{ left:8px; top:18px; bottom:18px; }
  .entry-content .tw-family-art--solucoes .tw-fa-dot{ width:10px; height:10px; }
  .entry-content .tw-family-art--solucoes .tw-fa-layer{ padding:11px 14px; }
  .entry-content .tw-family-art--solucoes .tw-fa-layer--2{ margin-left:var(--tw-space-1); }
  .entry-content .tw-family-art--solucoes .tw-fa-layer--3{ margin-left:var(--tw-space-2); }
  .entry-content .tw-family-art--solucoes .tw-fa-layer--4{ margin-left:var(--tw-space-3); }
}
@media (prefers-reduced-motion:reduce){
  .entry-content .tw-family-art--solucoes .tw-fa-layer{ transition:none; }
  .entry-content .tw-family-art--solucoes .tw-fa-layer:hover{ transform:none; }
}

/* ==================================================================
   Gramática 2 — ASANA AI
   Metáfora (§12.1): "fluxo entre gatilho, agente, revisão humana e
   resultado" — nós HORIZONTAIS conectados (empilha em coluna <640px).
   Formato deliberadamente diferente da rail vertical da gramática 1 —
   nenhuma das duas pode ser confundida com a outra em thumbnail. O nó
   "revisão humana" ganha acento magenta, mesma convenção já usada no
   .console/.cline.human do sistema home (humano-no-loop = magenta). */
.entry-content .tw-family-art--asana-ai .tw-fa-flow{
  display:flex; align-items:stretch; gap:var(--tw-space-0);
}
.entry-content .tw-family-art--asana-ai .tw-fa-node{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--tw-space-2); padding:14px 10px;
  background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:14px;
  box-shadow:0 10px 26px rgba(34,19,24,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.entry-content .tw-family-art--asana-ai .tw-fa-node:hover{
  transform:translateY(-4px); box-shadow:0 16px 36px rgba(34,19,24,.15);
}
.entry-content .tw-family-art--asana-ai .tw-fa-node-ic{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--tw-violet); color:#0E151A; flex-shrink:0;
}
.entry-content .tw-family-art--asana-ai .tw-fa-node--human .tw-fa-node-ic{ background:var(--tw-magenta); color:#fff; }
.entry-content .tw-family-art--asana-ai .tw-fa-node-ic svg{ width:18px; height:18px; }
.entry-content .tw-family-art--asana-ai .tw-fa-node strong{
  font-family:var(--tw-font-display); font-weight:800; font-size:.86rem; color:var(--tw-text-strong);
}
.entry-content .tw-family-art--asana-ai .tw-fa-node span{
  font-size:.72rem; color:var(--tw-text-muted); font-weight:500; line-height:1.3;
}
.entry-content .tw-family-art--asana-ai .tw-fa-arrow{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:22px; color:var(--tw-text-muted);
}
.entry-content .tw-family-art--asana-ai .tw-fa-arrow svg{ width:16px; height:16px; }
@media (max-width:640px){
  .entry-content .tw-family-art--asana-ai .tw-fa-flow{ flex-direction:column; gap:6px; }
  .entry-content .tw-family-art--asana-ai .tw-fa-node{ flex-direction:row; text-align:left; padding:10px 14px; }
  .entry-content .tw-family-art--asana-ai .tw-fa-arrow{ width:auto; height:16px; transform:rotate(90deg); align-self:center; }
}
@media (prefers-reduced-motion:reduce){
  .entry-content .tw-family-art--asana-ai .tw-fa-node{ transition:none; }
  .entry-content .tw-family-art--asana-ai .tw-fa-node:hover{ transform:none; }
}

/* ==================================================================
   Gramática 3 — PERSONAS E PORTFÓLIO
   Metáfora (§12.1): "sinais executivos conectando trabalho a decisão"
   — 3 indicadores tipo mini-KPI (qualitativos, não numéricos: a própria
   página tem um review-callout dizendo "nenhuma métrica é exibida sem
   fonte e método definidos", então os sinais usam status/etiqueta, não
   percentuais inventados) + conector para uma caixa de "decisão". Reusa
   literalmente os 3 ícones já usados nos cards "Portfólio executivo /
   Goals estratégicos / Risco e governança" mais abaixo NESTA MESMA
   página (consistência interna), mas em layout de sinal→decisão nunca
   usado antes. Formato: linha de 3 cartões + seta para baixo + caixa de
   decisão — nem rail vertical (gram. 1) nem fluxo horizontal (gram. 2). */
.entry-content .tw-family-art--personas .tw-fa-signals{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.entry-content .tw-family-art--personas .tw-fa-signal{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--tw-space-2);
  background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:14px;
  padding:16px 10px;
  box-shadow:0 10px 26px rgba(34,19,24,.08);
}
.entry-content .tw-family-art--personas .tw-fa-signal-ic{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#0E151A;
}
.entry-content .tw-family-art--personas .tw-fa-signal-ic svg{ width:17px; height:17px; }
.entry-content .tw-family-art--personas .tw-fa-signal--1 .tw-fa-signal-ic{ background:var(--tw-wine); color:#fff; }
.entry-content .tw-family-art--personas .tw-fa-signal--2 .tw-fa-signal-ic{ background:var(--tw-violet); }
.entry-content .tw-family-art--personas .tw-fa-signal--3 .tw-fa-signal-ic{ background:var(--tw-teal); }
.entry-content .tw-family-art--personas .tw-fa-signal strong{
  font-family:var(--tw-font-display); font-weight:800; font-size:.82rem; color:var(--tw-text-strong);
}
.entry-content .tw-family-art--personas .tw-fa-signal-status{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; background:rgba(63,185,172,.18); color:#2C948A;
}
.entry-content .tw-family-art--personas .tw-fa-connector{
  display:flex; flex-direction:column; align-items:center; gap:6px; margin:14px 0;
  color:var(--tw-text-muted);
}
.entry-content .tw-family-art--personas .tw-fa-connector svg{ width:16px; height:16px; }
.entry-content .tw-family-art--personas .tw-fa-decision{
  display:flex; align-items:center; gap:var(--tw-space-3); justify-content:center;
  background:radial-gradient(120% 140% at 0% 0%, var(--tw-wine) 0%, #4B002B 100%);
  color:#fff; border-radius:14px; padding:14px 20px;
  box-shadow:0 14px 32px rgba(34,19,24,.18);
}
.entry-content .tw-family-art--personas .tw-fa-decision strong{
  font-family:var(--tw-font-display); font-weight:800; font-size:.92rem;
  /* P0-07 (2026-07-11, retoque rubrica): sem esta declaracao o label herdava
     .entry-content strong{color:var(--tw-text-strong)} (#221318, quase-preto,
     definido em taskwork-vnext-style.css) por cima do fundo radial-gradient
     wine escuro (--tw-wine #73003E -> #4B002B) do card .tw-fa-decision — a
     regra .entry-content strong tem especificidade (0,1,1) mas NAO e vencida
     por especificidade aqui porque a regra desta gramatica nunca declarava
     "color" pro <strong>, entao nada disputava a cascata e a regra global
     era a unica com "color" aplicavel. Contraste medido antes: ~1.5:1 (falha
     AA). Fix: branco explicito, igual ao .tw-fa-decision{color:#fff} do
     container pai — mesmo par ja vetado em AA no .cta-band deste arquivo
     (radial-gradient identico). Contraste depois: ~11.7:1 (wine) / ~15.7:1
     (#4B002B), acima do minimo 4.5:1. */
  color:#fff;
}
.entry-content .tw-family-art--personas .tw-fa-decision span{
  font-size:.72rem; color:#EBD6E1;
}
@media (max-width:640px){
  .entry-content .tw-family-art--personas .tw-fa-signals{ grid-template-columns:1fr; gap:var(--tw-space-2); }
  .entry-content .tw-family-art--personas .tw-fa-signal{ flex-direction:row; text-align:left; padding:10px 14px; }
}

/* ==================================================================
   Gramática 4 — COMPARATIVOS
   Metáfora (§12.1): "matriz de contexto, sem pódio ou vencedor
   universal" — 2 eixos (necessidade × contexto), ferramentas plotadas
   como pontos, SEM ranking/score/podium. Único grafismo dos 4 baseado
   em posicionamento absoluto (scatter), reforçando que é uma decisão de
   encaixe, não uma corrida. Posições são QUALITATIVAS (zonas, não dados
   medidos) e derivadas do texto editorial já publicado nesta mesma
   página (grid "Como comparamos" / cards de cada comparativo) — nenhum
   número novo é inventado. */
.entry-content .tw-family-art--comparativos .tw-fa-matrix{
  position:relative;
  width:100%; aspect-ratio:1/.82;
  background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:16px;
  box-shadow:0 10px 26px rgba(34,19,24,.08);
  padding:var(--tw-space-5);
}
.entry-content .tw-family-art--comparativos .tw-fa-matrix-grid{
  position:absolute; inset:20px;
  border-left:1px solid var(--tw-line); border-bottom:1px solid var(--tw-line);
}
.entry-content .tw-family-art--comparativos .tw-fa-matrix-grid::before,
.entry-content .tw-family-art--comparativos .tw-fa-matrix-grid::after{
  content:""; position:absolute; background:var(--tw-line); opacity:.5;
}
.entry-content .tw-family-art--comparativos .tw-fa-matrix-grid::before{ left:50%; top:0; bottom:0; width:1px; }
.entry-content .tw-family-art--comparativos .tw-fa-matrix-grid::after{ top:50%; left:0; right:0; height:1px; }
.entry-content .tw-family-art--comparativos .tw-fa-axis{
  position:absolute; font-size:.66rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tw-text-muted); white-space:nowrap;
}
.entry-content .tw-family-art--comparativos .tw-fa-axis--x-left{ left:20px; bottom:2px; }
.entry-content .tw-family-art--comparativos .tw-fa-axis--x-right{ right:20px; bottom:2px; }
.entry-content .tw-family-art--comparativos .tw-fa-axis--y-top{ left:2px; top:14px; writing-mode:vertical-rl; }
.entry-content .tw-family-art--comparativos .tw-fa-axis--y-bottom{ left:2px; bottom:22px; writing-mode:vertical-rl; }
.entry-content .tw-family-art--comparativos .tw-fa-tool{
  position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:var(--tw-space-1);
}
.entry-content .tw-family-art--comparativos .tw-fa-tool-dot{
  width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 3px var(--tw-raised), 0 0 0 4px var(--tw-line);
}
.entry-content .tw-family-art--comparativos .tw-fa-tool--asana .tw-fa-tool-dot{ background:linear-gradient(135deg,var(--tw-magenta),var(--tw-coral)); width:15px; height:15px; }
.entry-content .tw-family-art--comparativos .tw-fa-tool-label{
  font-size:.68rem; font-weight:700; color:var(--tw-text-strong); background:var(--tw-raised);
  padding:1px 6px; border-radius:6px; white-space:nowrap;
}
.entry-content .tw-family-art--comparativos .tw-fa-tool--asana .tw-fa-tool-label{ font-weight:800; }
@media (max-width:640px){
  .entry-content .tw-family-art--comparativos .tw-fa-matrix{ aspect-ratio:1/1.05; padding:var(--tw-space-4); }
  .entry-content .tw-family-art--comparativos .tw-fa-matrix-grid{ inset:16px; }
  .entry-content .tw-family-art--comparativos .tw-fa-axis{ font-size:.6rem; }
  .entry-content .tw-family-art--comparativos .tw-fa-tool-label{ font-size:.62rem; }
}

/* ==================================================================
   Reposicionamento de fotos-âncora existentes que saíram do hero para
   dar lugar às gramáticas (piloto 4335: foto de duas pessoas avaliando
   opções passa do hero para uma banda editorial logo abaixo — ver
   post_content, não removida). Sem CSS novo necessário: reusa
   .tw-photo/.tw-photo--tilt já definidos; apenas o markup mudou de
   seção. */

/* ==================================================================
   P2-01 (2026-07-11) — Focus-visible + pressed/selected consistentes
   PRD TaskWork Visual 10/10 §11/P2-01, §8.2. Mesmo padrão do header
   legado (P0-09, acima no arquivo): outline:2px solid #C2273F;
   outline-offset:2px — via :focus-visible (NUNCA :focus puro, senão
   clique de mouse também mostraria o anel). Cobre todo componente
   interativo restante do design system que ainda não tinha
   focus-visible/:active próprios: links de card, .btn-*, chip-link
   (defensivo — nenhuma instância publicada hoje usa <a class="chip">,
   mas a classe existe e é reaproveitável), acordeão FAQ .acc-item
   (.acc-trigger é <button aria-expanded>, confirmado ao vivo em
   /solucoes/assessment/ — 10162), tabs (.tab-btn[role="tab"]
   [aria-selected], confirmado ao vivo na home — 10084/10128/10129) e
   links do footer (tw-sitemap/tw-fbrand/footer-badges, arquivo de
   outro dono nesta onda — taskwork-vnext-footer.php — por isso os
   seletores aqui reaproveitam o mesmo !important documentado no bloco
   "FOOTER" mais acima, item 8/Fase 2, para vencer o <style> inline que
   roda depois deste arquivo no DOM).
   :active (pressed) usa translateY(1px) nos componentes que já sobem
   no hover (.btn/.tab-btn — "aperta" de volta) e filter:brightness()
   nos que não têm lift de hover (links de texto, footer, ícones
   sociais) — ambos os padrões pedidos no PRD ("translateY(1px) ou
   brightness"), escolhidos por família para não conflitar com a
   transição de hover já existente de cada componente.
   Verificado ao vivo (P1-08/P0-09): nem .tab-btn nem .acc-trigger têm
   JS de toggle em lugar nenhum do site (aria-selected/aria-expanded
   ficam estáticos ao clicar) — mesmo achado do backlog P1-08 para as
   tabs. As regras de estado aberto/selecionado abaixo (via atributo
   ARIA) são CSS puro, zero-risco: hoje não mudam nada renderizado
   (aria-expanded já nasce "false", aria-selected já nasce fixo no
   1º item), mas deixam o componente pronto para quando o JS de
   toggle for implementado (fora do escopo CSS-only do P2-01). */

/* 1) links de card (a.card / .card-hover / .card-panel) — hoje só tinham
   :hover (translateY(-3px)); focus-visible nunca existiu. */
.entry-content a.card:focus-visible,
.entry-content .card-hover:focus-visible,
.entry-content .card-panel:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px; border-radius:16px;
}
.entry-content a.card:active,
.entry-content .card-hover:active,
.entry-content .card-panel:active{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(34,19,24,.14);
}

/* 2) .btn-* — focus-visible comum a todas as variantes + pressed
   translateY(1px). !important necessário só no :active: verificado ao
   vivo (Playwright, home 10084) que
   ".page-id-10084 .entry-content > section:first-of-type a:hover"
   (taskwork-vnext-style.css, arquivo de outro dono nesta onda — Onda
   Clara) tem especificidade maior (0,4,2) que ".entry-content
   .btn:active" (0,3,0) e position:hover vence transform mesmo com
   :active simultâneo, cancelando o pressed do CTA/ghost do hero da
   home. Confirmado que SEM esse !important o :active funciona normal
   em qualquer outro botão/página (fora do hero da home) — mesmo padrão
   de especificidade cross-arquivo já documentado no bloco FOOTER acima
   (item 8/Fase 2). */
.entry-content .btn:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px;
}
.entry-content .btn:active{
  transform:translateY(1px) !important;
}
.entry-content .cta-band .btn-invert:focus-visible,
.entry-content .cta-band .btn-ghost-invert:focus-visible{
  outline:2px solid #fff; outline-offset:2px; /* fundo vinho: outline coral sumiria; branco garante >3:1 (regra 8.2, não-textual) */
}
.entry-content .cta-band .btn-invert:active,
.entry-content .cta-band .btn-ghost-invert:active{
  transform:translateY(1px);
}
.entry-content .form-card button:focus-visible,
.entry-content .form-card [type=submit]:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px;
}
.entry-content .form-card button:active,
.entry-content .form-card [type=submit]:active{
  filter:brightness(.94); transform:translateY(1px);
}
@media (prefers-reduced-motion: reduce){
  .entry-content a.card:active, .entry-content .card-hover:active, .entry-content .card-panel:active,
  .entry-content .btn:active,
  .entry-content .cta-band .btn-invert:active, .entry-content .cta-band .btn-ghost-invert:active,
  .entry-content .form-card button:active, .entry-content .form-card [type=submit]:active{
    transform:none;
  }
}

/* 3) chip-link — defensivo, cobre <a class="chip"> se/quando alguma
   página passar a usar chip como link (hoje .chip só existe como
   <span>, confirmado ao vivo — 10084/535/10193). */
.entry-content a.chip:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px;
}
.entry-content a.chip:active{
  filter:brightness(.95);
}

/* 4) acordeão FAQ — .acc-trigger (<button aria-expanded aria-controls>).
   Estado aberto mais evidente: tinta de fundo + texto coral + giro do
   caret (reaproveita .caret já existente, mesma seta usada em link-arrow/
   tab-btn). Sem seletor a mais: [aria-expanded="true"] já é o contrato
   ARIA do componente confirmado ao vivo. */
.entry-content .acc-trigger{ cursor:pointer; transition:color .15s ease, background-color .15s ease; }
.entry-content .acc-trigger:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px; border-radius:8px;
}
.entry-content .acc-trigger:active{
  filter:brightness(.96);
}
.entry-content .acc-trigger[aria-expanded="true"]{
  color:#C2273F; background:rgba(194,39,63,.06);
}
.entry-content .acc-trigger[aria-expanded="true"] .caret{
  transform:rotate(180deg);
}
@media (prefers-reduced-motion: reduce){
  .entry-content .acc-trigger{ transition:none; }
  .entry-content .acc-trigger[aria-expanded="true"] .caret{ transition:none; }
}

/* 5) tabs — .tab-btn[role="tab"][aria-selected]. Estado selecionado mais
   evidente: hairline inferior coral + peso 800 (mesma família cromática
   do current-menu-item do header, P0-09), reaproveitando a borda que o
   .tab-btn já tem em vez de introduzir uma nova. */
.entry-content .tab-btn{ transition:color .15s ease, border-color .15s ease; }
.entry-content .tab-btn:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px;
}
.entry-content .tab-btn:active{
  transform:translateY(1px);
}
.entry-content .tab-btn[aria-selected="true"]{
  color:#C2273F; border-color:#C2273F; font-weight:800;
  box-shadow:inset 0 -3px 0 #C2273F;
}
@media (prefers-reduced-motion: reduce){
  .entry-content .tab-btn{ transition:none; }
  .entry-content .tab-btn:active{ transform:none; }
}

/* 6) tw-area-map (/para/ hub, 10165) — o <style> inline do post_content
   já tem focus-visible próprio (confirmado ao vivo); espelha aqui só
   como rede de segurança consistente com o resto do design system, caso
   o bloco inline seja perdido numa edição futura de conteúdo. Mesmos
   valores, sem conflito. */
.entry-content .tw-am-node:focus-visible{
  outline:2px solid #C2273F; outline-offset:2px;
}
.entry-content .tw-am-node:active{
  transform:translateY(-1px);
}

/* 7) footer — taskwork-vnext-footer.php (outro dono nesta onda) roda seu
   <style> inline DEPOIS deste arquivo no DOM (mesmo motivo do item 8/
   Fase 2 acima); !important necessário para os seletores vencerem sem
   editar aquele arquivo. Fundo escuro (#0E151A) → outline branco, não
   coral (coral #C2273F sobre navy fica ~2.8:1, abaixo do 3:1 mínimo
   p/ contorno não-textual; branco garante >13:1). */
.tw-sitemap-col a:focus-visible,
.tw-fbrand-contact a:focus-visible,
.tw-fbrand-social a:focus-visible,
.footer-badges a.badge:focus-visible{
  outline:2px solid #fff !important; outline-offset:2px !important;
}
.tw-sitemap-col a:active,
.tw-fbrand-contact a:active,
.tw-fbrand-social a:active,
.footer-badges a.badge:active{
  filter:brightness(1.3) !important;
}

/* Small footer legado (.ast-small-footer, já com :hover em componentes.css
   acima) — mesmo tratamento de foco/pressed, fundo também navy. */
.ast-small-footer a:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}
.ast-small-footer a:active{
  filter:brightness(1.3);
}

/* P1-04 (2026-07-11) — .tw-story / .tw-story-step / .tw-story-rail: motion
   storytelling por etapas (PRD TaskWork Visual 10/10 §P1-04/§12.3 Big
   Swing C/§14.3). Aplicado SOBRE as classes de grid já existentes (ex.:
   `grid grid-4 tw-story`, `kpi-grid kpi-2 tw-stagger tw-story`) — não
   substitui layout nem remove os mecanismos de reveal genéricos já
   existentes (`.grid > .card`, `.tw-stagger > *`, ver taskwork-vnext-
   motion.js); .tw-story só ACRESCENTA a linha de progresso (rail) e a
   ênfase transitória do "passo ativo" por cima do que já revela cada
   card/kpi. Contrato de motion reutilizado (§14.4): html.tw-motion como
   gate, IntersectionObserver, uma execução por elemento, reduced-motion =
   estado final. Regras do Big Swing C (§12.3): sem scroll-jacking (JS só
   observa, nunca força scroll), sem animação de entrada de hero (não
   aplicado a .hero), estado final disponível sem JS (rail nasce 100%
   preenchida no HTML; markup abaixo é a única fonte de verdade sem JS).
   Markup do rail, inserido como 1º filho do grid (funciona em qualquer
   contagem de colunas via grid-column:1/-1, inclusive a pilha 1-coluna
   do breakpoint 880px):
   <div class="tw-story-rail" aria-hidden="true">
     <span class="tw-story-rail-fill" style="width:100%"></span>
   </div>
   initStory() (taskwork-vnext-motion.js) zera o fill para 0% só depois de
   passar o gate (mesmo princípio do scorecard-fill do P1-03) e o
   preenche de volta em incrementos de 1/N conforme cada .tw-story-step
   entra no viewport, com leve stagger por índice — mesmo se o grid
   inteiro entrar na mesma janela de scroll (linha única em desktop), o
   avanço ainda lê como sequência, não como flash simultâneo. */
.entry-content .tw-story-rail{
  grid-column:1 / -1;
  height:4px; border-radius:999px; background:var(--tw-line);
  margin:0 0 28px; overflow:hidden; display:block;
}
.entry-content .tw-story-rail-fill{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--tw-magenta),var(--tw-coral));
}

/* Ênfase do "passo ativo" — só box-shadow/border-color (nunca opacity/
   transform: essas duas já pertencem à regra de transition unificada de
   .card, ver comentário "T1 + T2 combinados" acima; disputar a mesma
   propriedade aqui reabriria aquele bug de especificidade). border-color
   precisa de !important por causa do reset global .entry-content
   div:has(> h3){border:0 !important} no topo do arquivo (gotcha #1 do
   PRD §14.5) — sem isso, a mudança de cor da borda seria silenciosamente
   descartada nos cards de /metodologia/ (que têm <h3> filho direto). */
.entry-content .tw-story-step.tw-story-active{
  border-color:var(--tw-coral) !important;
  box-shadow:0 0 0 3px rgba(252,124,74,.28), 0 18px 34px rgba(34,19,24,.14);
}
@media (prefers-reduced-motion:reduce){
  .entry-content .tw-story-rail-fill{ width:100% !important; }
  .entry-content .tw-story-step.tw-story-active{ box-shadow:none; border-color:var(--tw-line) !important; }
}

/* .kpi-grid.kpi-2 (pipeline Intake/Classificar/Rotear/Revisar, /asana-ai/
   10127) — achado ao implementar: o modificador `kpi-2` nunca teve
   `grid-template-columns` definido em nenhum arquivo do site (grep
   confirmado), então o kpi-grid caía no default `repeat(3,1fr)` do
   componente base com 4 itens, virando um layout 3+1 quebrado. Sem
   corrigir a contagem de colunas, o tw-story-rail (que atravessa a
   largura inteira da grid) ficaria acima de um "resto" solto na 2ª
   linha, quebrando a leitura sequencial que é o próprio objetivo do
   P1-04. Escopo mínimo: só quando .tw-story está presente (não altera
   nenhum outro uso pré-existente de .kpi-grid.kpi-2 no site).
   min-width:881px espelha o breakpoint existente (max-width:880px, linha
   ~181, que colapsa .kpi-grid para 1fr) — CONFIRMADO NECESSÁRIO por QA
   visual ao vivo (Playwright 390px): sem esta media query, esta regra
   (4 classes, mais específica que o seletor genérico `.entry-content
   .kpi-grid` do breakpoint) vencia mesmo dentro do @media(max-width:880px)
   e forçava 4 colunas de 1fr num container de 390px; o min-content das
   strings ("3. Rotear"/"Encaminha ao responsável certo.") não cabia,
   e a 3ª/4ª etapa ficavam cortadas pelo `.entry-content{overflow-x:
   hidden}` do próprio breakpoint (linha ~312) — invisíveis, sem gerar
   scroll horizontal detectável (por isso passava despercebido em
   checagem só de overflow=0). Escopar aqui a min-width:881px devolve a
   regra de colapso mobile pré-existente ao comando único, sem disputa de
   especificidade. */
@media (min-width:881px){
  .entry-content .kpi-grid.kpi-2.tw-story{ grid-template-columns:repeat(4,1fr); }
}


/* ---------- Componente .flow / .flow-node (diagrama de nós) ----------
   Estava SEM NENHUM estilo — achado nº1 da validação externa 11/07
   ("Solicitaçãoentra no fluxo"): strong+span inline concatenavam e o
   diagrama empilhava cru em 18 páginas. Legível sem JS. */
.entry-content .flow{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:12px;
  margin-top:20px;
}
.entry-content .flow-node{
  flex:1 1 150px; min-width:140px; max-width:230px;
  background:#FFFFFF; border:1px solid rgba(34,19,24,.10);
  border-radius:14px; padding:16px 14px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 6px 18px rgba(34,19,24,.05);
}
.entry-content .flow-node .n-ic{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(217,11,89,.08); color:var(--tw-magenta,#D90B59);
  margin-bottom:6px;
}
.entry-content .flow-node .n-ic svg{ width:18px; height:18px; }
.entry-content .flow-node strong{
  display:block; font-size:.95rem; line-height:1.3; color:#221318;
}
.entry-content .flow-node span{
  display:block; font-size:.82rem; line-height:1.45; color:#7A737C;
}
.entry-content .flow-arrow{
  align-self:center; flex:0 0 auto; color:#B9AFB4; font-size:1.1rem;
}
@media (max-width:640px){
  .entry-content .flow{ flex-direction:column; }
  .entry-content .flow-node{ max-width:none; }
  .entry-content .flow-arrow{ transform:rotate(90deg); }
}

/* Wave4 P2 fix v2 (2026-07-12, opcao B do dono): o fix anterior (offset -42px)
   so encolhia o sliver de repouso do button.cmplz-manage-consent (Complianz),
   mas o requisito real e visibilidade TOTAL + zero colisao com h1/h2/h3/p a
   scroll 0, 1440x900, nas 7 paginas. Um sliver nunca cumpre "totalmente
   visivel"; era preciso resolver de vez.
   Medicao ao vivo (Playwright, getBoundingClientRect, scroll0) das 6 paginas
   que renderizam o widget (a 7a, /politica-de-cookies-br/, nao inclui
   #cmplz-manage-consent no DOM - o Complianz suprime o botao flutuante em
   paginas que ja contem o shortcode de cookie-statement, comportamento
   nativo, nada a corrigir) mostrou que NENHUMA posicao puramente vertical
   dentro da faixa horizontal original (right:40px -> x 1091-1400px) e livre
   de colisao para todas as paginas ao mesmo tempo: /declaracao-de-privacidade/
   tem H2 "Encarregado de Protecao de Dados" em y 825-866 (x 211-1229) e
   /centro-de-preferencias/ tem H2 "Categorias de cookies" em y 761-801
   (x 191-1249) na MESMA faixa x - a folga vertical entre as duas (24px) e
   menor que a altura do botao (50px), entao nenhum offset unico evita as
   duas colisoes ficando no lado direito. E preciso mover para fora da coluna
   de conteudo.
   Decisao (variante 1 da opcao B, pilula compacta): reposiciona para o
   canto inferior ESQUERDO (left, nao right) porque a coluna de conteudo
   comeca em x=170-211 em todas as 7 paginas e o unico elemento h1-h3/p que
   se estende mais para a esquerda perto do fold e o H2 do /recursos/insights/
   o-que-e-asana/ (x >= 729) - ou seja, x < ~190 e vao livre em toda pagina
   auditada. Compacta via WRAP em 2 linhas (nao trunca nem troca o texto -
   mesmo "Gerenciar consentimento" de sempre, so quebra em "Gerenciar" /
   "consentimento" numa caixa de 132px) para nao violar WCAG 2.5.3
   (Label in Name) trocando o rotulo visivel por um diferente do nome
   acessivel. width 132px + padding 12px letqs*2 <= 190px de folga medida
   (right edge ~168px, 22px de margem da coluna de conteudo mais proxima,
   x=190). Altura sobe de 50 para 58px (via --cmplz-manage-consent-height,
   mesmo mecanismo de var nativa) pra caber 2 linhas com respiro.
   offset da var (--cmplz-manage-consent-offset) muda de negativo (esconde)
   para +16px (fixo, sempre visivel, 16px de respiro do rodape do viewport):
   testado contra o H2 mais alto que ainda cai na faixa x da coluna de
   conteudo (centro-de-preferencias, bottom=801) - com offset 16 o topo do
   botao fica em y=834, 33px abaixo do H2, sem overlap; e como o botao agora
   fica no gutter esquerdo (x 16-148), nem entra na faixa x desse H2
   (x>=191) de qualquer forma - dupla garantia.
   animation:none neutraliza mc_slideIn/mc_slideOut (o botao ja fica
   permanentemente visivel, o efeito peekaboo do plugin nao faz mais
   sentido e causaria um "pulo" visual estranho no hover se a var de offset
   ficasse positiva com a keyframe ainda ativa). Especificidade: todas as
   regras usam "#cmplz-manage-consent button.cmplz-manage-consent" (ID +
   classe + tipo) que e estritamente mais especifica que a regra nativa do
   plugin "#cmplz-manage-consent .cmplz-manage-consent" (ID + classe), MAIS
   !important em cada propriedade - dupla garantia de vitoria independente
   da ordem de carregamento do cookiebanner.css (injetado dinamicamente,
   fora da fila estatica do <head>, conforme documentado no fix anterior).
   Mobile (correcao pos-QA, ainda 2026-07-12): a 1a versao deste bloco
   aplicava display:flex !important sem media query e vazava pro mobile,
   reexibindo o widget la (QUEBRAVA a regra dura "mobile nao muda").
   Achado ao vivo: o display:none do mobile NAO vem do cookiebanner.css
   estatico nem do tema - vem de um 3o arquivo, CSS de banner gerado
   dinamicamente por Complianz (wp-content/uploads/complianz/css/
   banner-1-optin.css), injetado via <link> por JS (complianz.js,
   cmplz_load_manage_consent_container) DEPOIS do <head> estatico, contendo
   "@media (max-width: 768px) { #cmplz-manage-consent .cmplz-manage-consent
   { display: none; } }". Como display:flex!important tem prioridade sobre
   display:none sem !important, independente de especificidade, ele
   vencia mesmo dentro do breakpoint mobile. Fix: todo o bloco de
   reposicionamento/compactacao abaixo agora vive dentro de
   "@media (min-width: 769px)" (espelho exato do breakpoint 768px do
   Complianz) - no mobile o unico override ativo continua sendo as duas
   CSS vars em :root (offset/height), que sao inertes num elemento
   display:none e nao afetam o link "Gerenciar cookies" do rodape (revogacao
   mobile). Reverificado ao vivo: 390x844 volta a display:none, footer link
   intacto. */
:root {
  --cmplz-manage-consent-offset: 16px !important;
  --cmplz-manage-consent-height: 58px !important;
}
@media (min-width: 769px) {
  #cmplz-manage-consent button.cmplz-manage-consent {
    left: 16px !important;
    right: auto !important;
    width: 132px !important;
    min-width: 0 !important;
    max-width: 132px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--cmplz_banner_border_radius) !important;
    box-shadow: 0 4px 14px rgba(20,20,30,.14) !important;
    animation: none !important;
  }
  #cmplz-manage-consent button.cmplz-manage-consent:hover,
  #cmplz-manage-consent button.cmplz-manage-consent:focus {
    animation: none !important;
    box-shadow: 0 6px 20px rgba(20,20,30,.20) !important;
  }
  #cmplz-manage-consent button.cmplz-manage-consent:focus-visible {
    outline: 2px solid #C2273F !important;
    outline-offset: 2px !important;
  }
}

/* ===== Journey path — "Quatro formas" section (Hallmark 2026-07-25, Phase 2) ===== */
.entry-content .grid.journey{ grid-template-columns:1.5fr 1fr 1fr 1fr; align-items:start; position:relative; }
.entry-content .grid.journey::before{ content:""; position:absolute; top:48px; left:26px; right:26px; height:2px; background:linear-gradient(90deg,var(--tw-wine),var(--tw-magenta),var(--tw-coral)); opacity:.35; z-index:0; pointer-events:none; }
.entry-content .grid.journey > .card{ position:relative; z-index:1; }
.entry-content .grid.journey > .card:first-child{ border-top:3px solid var(--tw-coral); }
.entry-content .grid.journey > .card:not(:last-child)::after{ content:"\203A"; position:absolute; top:38px; right:-13px; z-index:2; font-size:22px; line-height:1; font-weight:700; color:var(--tw-magenta); opacity:.75; pointer-events:none; }
.entry-content .grid.journey > .card h3{ font-size:1.2rem; line-height:1.25; overflow-wrap:normal; }
@media (max-width:880px){
  .entry-content .grid.journey{ grid-template-columns:1fr; }
  .entry-content .grid.journey::before{ display:none; }
  .entry-content .grid.journey > .card:not(:last-child)::after{ display:none; }
  .entry-content .grid.journey > .card:first-child{ border-top:1px solid var(--tw-line); border-left:3px solid var(--tw-coral); }
}
/* ===== end Journey path ===== */

/* ===== Hallmark audit fixes M6 + M3 (2026-07-25) ===== */
/* M6 — hero headline no longer clips at narrow widths (was global clamp 48px min,
   container has no side gutter). Scale the H1 down + add a hero side gutter on mobile. */
@media (max-width:640px){
  .entry-content .hero{ padding-left:20px; padding-right:20px; }
  .entry-content .hero h1{ font-size:clamp(30px,8vw,42px); overflow-wrap:anywhere; }
}
/* M3 — "Para sua área" tab panels: drop the outer card chrome so the
   Goals/Portfolios/IA kpi cards sit on the surface (kill card-in-card).
   Scoped to .tab-inner so other .kpi-grid uses are untouched. */
.entry-content .tab-inner .card:has(> .kpi-grid){
  background:transparent; border:0; padding:0; box-shadow:none;
}
/* ===== end M6 + M3 ===== */

/* m3 — reset browser-default underline that bleeds onto card headings/body (2026-07-25) */
.entry-content a.card{ text-decoration:none; }

/* ===== Hero orbital — portado de produção (asana-geometry) 2026-07-25 ===== */
.entry-content .asana-geometry{--geo-x:0;--geo-y:0;position:relative;display:grid;place-items:center;min-height:540px;cursor:crosshair;isolation:isolate;width:100%}
.entry-content .asana-geometry::before{position:absolute;inset:10% 8%;z-index:-1;content:"";border-radius:44% 56% 46% 54%;background:radial-gradient(circle at 34% 24%,rgba(246,73,122,.28),transparent 34%),radial-gradient(circle at 70% 64%,rgba(255,196,94,.28),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,247,241,.3));filter:blur(4px);transform:translate3d(calc(var(--geo-x) * -18px),calc(var(--geo-y) * -18px),0) rotate(calc(var(--geo-x) * 10deg));animation:geometryBlob 12s ease-in-out infinite}
.entry-content .asana-geometry svg{width:min(760px,112%);overflow:visible;filter:drop-shadow(0 34px 48px rgba(80,29,45,.16));transform:translate3d(calc(var(--geo-x) * 18px),calc(var(--geo-y) * 18px),0) rotateX(calc(var(--geo-y) * -5deg)) rotateY(calc(var(--geo-x) * 7deg));transform-origin:center;transition:transform 120ms ease-out;will-change:transform}
.entry-content .geo-grid path,.entry-content .geo-grid circle,.entry-content .geo-orbit ellipse{fill:none;stroke:rgba(140,19,62,.12);stroke-width:1.2}
.entry-content .geo-orbit ellipse{stroke:rgba(246,73,122,.28);stroke-dasharray:8 16;transform-origin:380px 310px}
.entry-content .orbit-one{animation:geometryOrbit 18s linear infinite;transform-origin:380px 310px}
.entry-content .orbit-two{animation:geometryOrbit 22s linear infinite reverse;transform-origin:380px 310px}
.entry-content .geo-connector{fill:rgba(255,255,255,.32);stroke:url(#geoLine);stroke-width:2;stroke-linejoin:round;stroke-dasharray:780;animation:geometryTrace 5s ease-in-out infinite}
.entry-content .geo-flow{fill:none;stroke:url(#geoLine);stroke-width:4;stroke-linecap:round;stroke-dasharray:34 18;opacity:.55;animation:geometryDash 9s linear infinite}
.entry-content .geo-node{transform-box:fill-box;transform-origin:center}
.entry-content .geo-node.node-top{animation:geometryNodeTop 6s ease-in-out infinite}
.entry-content .geo-node.node-left{animation:geometryNodeLeft 6.6s ease-in-out infinite}
.entry-content .geo-node.node-right{animation:geometryNodeRight 7.2s ease-in-out infinite}
.entry-content .geo-halo{fill:rgba(255,255,255,.58);stroke:rgba(246,73,122,.16);stroke-width:1}
.entry-content .geo-core{fill:url(#geoGlowPink)}
.entry-content .node-left .geo-core{fill:url(#geoGlowOrange)}
.entry-content .node-right .geo-core{fill:#ff8a50}
.entry-content .geo-node text{fill:#fff;font-size:17px;font-weight:850;text-anchor:middle;pointer-events:none}
.entry-content .geo-satellites circle{fill:#ff8a50;opacity:.78;animation:geometryPulse 3.4s ease-in-out infinite}
.entry-content .geo-satellites circle:nth-child(2n){fill:#f6497a;animation-delay:.4s}
.entry-content .geo-satellites circle:nth-child(3n){fill:#ffc45e;animation-delay:.8s}
.entry-content .geometry-caption{position:absolute;right:4%;bottom:6%;max-width:280px;padding:15px 18px;border:1px solid var(--tw-line);border-radius:16px;background:var(--tw-raised);box-shadow:0 18px 40px -22px rgba(115,0,62,.35)}
.entry-content .geometry-caption span{display:block;color:#8c133e;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.entry-content .geometry-caption strong{display:block;color:#221319;font-size:.92rem;line-height:1.28;font-weight:700;margin-top:4px}
@keyframes geometryOrbit{to{transform:rotate(360deg)}}
@keyframes geometryPulse{0%,100%{opacity:.48;transform:scale(.92)}50%{opacity:1;transform:scale(1.15)}}
@keyframes geometryBlob{0%,100%{border-radius:44% 56% 46% 54%}50%{border-radius:58% 42% 56% 44%}}
@keyframes geometryNodeTop{50%{transform:translateY(-10px)}}
@keyframes geometryNodeLeft{50%{transform:translate(-8px,8px)}}
@keyframes geometryNodeRight{50%{transform:translate(10px,6px)}}
@keyframes geometryDash{to{stroke-dashoffset:-220}}
@keyframes geometryTrace{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:210}}
@media (max-width:880px){.entry-content .asana-geometry{min-height:400px}.entry-content .geometry-caption{right:50%;bottom:0;transform:translateX(50%);width:min(320px,92%);text-align:center}}
@media (prefers-reduced-motion:reduce){.entry-content .orbit-one,.entry-content .orbit-two,.entry-content .geo-connector,.entry-content .geo-flow,.entry-content .geo-node,.entry-content .geo-satellites circle,.entry-content .asana-geometry::before{animation:none!important}.entry-content .asana-geometry svg{transform:none!important}}
/* ===== end hero orbital ===== */

.entry-content .asana-geometry svg{height:auto;display:block}

/* ===== Header Astra restyle — editorial (2026-07-25) ===== */
.main-header-bar{border-bottom:1px solid var(--tw-line)}
.main-header-menu .menu-link{font-family:var(--tw-font-display);font-weight:600;transition:color .15s}
.main-header-menu > .menu-item > .menu-link:hover{color:var(--tw-magenta)}
.ast-desktop .main-header-menu .sub-menu,.main-header-menu .sub-menu{
  border:1px solid var(--tw-line)!important;border-radius:14px!important;
  box-shadow:0 20px 46px -22px rgba(115,0,62,.34)!important;padding:9px!important;
  background:var(--tw-raised)!important;min-width:252px!important}
.main-header-menu .sub-menu .menu-item{border:0!important}
.main-header-menu .sub-menu .menu-link{border-radius:9px!important;font-weight:600!important;font-size:.9rem!important;
  padding:9px 14px!important;line-height:1.25!important;transition:background .14s,color .14s,transform .14s!important}
.main-header-menu .sub-menu .menu-link:hover{background:var(--tw-bg)!important;color:var(--tw-magenta)!important;transform:translateX(3px)}
/* long menus (Soluções/Asana AI/Funcionalidades) → 2 colunas pra não virar lista gigante */
.main-header-menu .menu-item-has-children.menu-item > .sub-menu{column-gap:6px}
.main-header-menu .sub-menu.tw-cols2{column-count:2;column-gap:6px;min-width:460px!important}
/* ===== end header restyle ===== */