.fa-wrap {
  --fa-accent: #ff672f; --fa-accent-soft: #ff9a62; --fa-danger: #ff6b62;
  --fa-success: #55c985; --fa-warning: #e9b949; --fa-surface: #131211;
  --fa-surface-raised: #1b1917; --fa-border: rgba(255,255,255,.1);
  --fa-border-strong: rgba(255,255,255,.17); --fa-text: #f7f3ef;
  --fa-muted: #b8aea7; --fa-muted-2: #8f847d;
  width: min(100%,1600px); margin: 0 auto; padding: 8px 0 48px;
  color: var(--fa-text); font-size: 16px;
}
.product-panel-body:has(.fa-wrap) { max-width:none; margin:0; padding:clamp(16px,2vw,32px); background:#0b0b0a; }

/* Produto e indicadores essenciais no primeiro enquadramento. */
.fa-hero { position:relative; margin-bottom:22px; padding:clamp(22px,3vw,42px); overflow:hidden;
  border:1px solid var(--fa-border); border-radius:26px;
  background:radial-gradient(circle at 8% 10%,rgba(255,103,47,.09),transparent 30%),linear-gradient(145deg,#181512 0%,#11100f 58%,#15120f 100%);
  box-shadow:0 22px 55px rgba(0,0,0,.24); }
.fa-hero-inner { display:grid; grid-template-columns:minmax(360px,.92fr) minmax(480px,1.08fr);
  grid-template-areas:"identity summary" "toggle summary"; gap:18px clamp(32px,4vw,72px); align-items:stretch; }
.fa-hero-identity { grid-area:identity; display:grid; grid-template-columns:minmax(180px,.9fr) minmax(240px,1.1fr); gap:clamp(20px,2.5vw,38px); align-items:center; }
.fa-hero-copy { min-width:0; }
.fa-eyebrow { display:block; margin-bottom:12px; color:var(--fa-accent-soft); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.fa-hero h2 { margin:0; color:var(--fa-text); font-size:clamp(1.7rem,2.6vw,3rem); font-weight:850; line-height:1.05; letter-spacing:-.02em; overflow-wrap:break-word; word-break:break-word; }
.fa-hero p { margin:18px 0 0; color:var(--fa-muted); font-size:.95rem; line-height:1.55; }
.fa-hero-media { --tiltX:0deg; --tiltY:0deg; width:100%; aspect-ratio:1; max-width:340px; justify-self:end; position:relative; overflow:hidden;
  border:1px solid var(--fa-border-strong); border-radius:22px; background:#080807; box-shadow:0 18px 38px rgba(0,0,0,.36);
  transform:perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)); transition:transform 180ms ease-out,border-color 180ms ease; }
.fa-hero-media:hover { border-color:rgba(255,154,98,.36); }
.fa-hero-img { width:100%; height:100%; object-fit:contain; padding:5%; }
.fa-hero-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--fa-muted); font-size:.85rem; font-weight:700; text-align:center; padding:16px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px); }
.fa-hero-placeholder[hidden] { display:none; }

.fa-hero-summary { grid-area:summary; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fa-kpi,.fa-data-status { min-width:0; padding:20px; border:1px solid var(--fa-border); border-radius:16px; background:rgba(255,255,255,.035); }
.fa-kpi { display:flex; flex-direction:column; justify-content:center; }
.fa-kpi-primary { border-color:rgba(255,103,47,.32); background:rgba(255,103,47,.09); }
.fa-kpi span,.fa-data-status b { color:var(--fa-muted); font-size:.72rem; font-weight:750; letter-spacing:.055em; text-transform:uppercase; }
.fa-kpi strong { margin-top:8px; color:var(--fa-text); font-size:clamp(1.65rem,2.3vw,2.7rem); line-height:1; letter-spacing:-.04em; word-break:keep-all; hyphens:none; }
.fa-kpi-primary strong { color:var(--fa-accent-soft); }
.fa-kpi strong.fa-kpi-pending { color:var(--fa-warning); font-size:clamp(1.15rem,1.6vw,1.65rem); letter-spacing:.01em; }
.fa-kpi small,.fa-data-status small { margin-top:8px; color:var(--fa-muted-2); font-size:.78rem; line-height:1.35; }
.fa-data-status { grid-column:1/-1; display:flex; align-items:center; gap:12px; }
.fa-data-status div { display:flex; flex-direction:column; }
.fa-status-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--fa-warning); box-shadow:0 0 0 5px rgba(233,185,73,.11); }

.fa-toggle { grid-area:toggle; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.fa-toggle button { min-height:48px; padding:10px 14px; display:flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--fa-border); border-radius:12px; background:rgba(255,255,255,.025); color:var(--fa-muted);
  font-size:.86rem; font-weight:750; cursor:pointer; transition:color 160ms ease,border-color 160ms ease,background 160ms ease; }
.fa-toggle button:hover { color:var(--fa-text); border-color:var(--fa-border-strong); }
.fa-toggle button.active { color:var(--fa-text); border-color:rgba(255,103,47,.58); background:rgba(255,103,47,.1); }
.fa-toggle button img { width:28px; height:28px; border-radius:7px; object-fit:cover; }

/* 9 abas (CL-MIS-0003): celular sempre rola horizontal (nunca quebra a
   página); desktop pode quebrar em 2 linhas só se a largura real não couber. */
.fa-nav { position:sticky; top:59px; z-index:1; display:flex; flex-wrap:nowrap; gap:4px; margin-bottom:22px; padding:7px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--fa-border); border-radius:14px; background:rgba(15,14,13,.94); backdrop-filter:blur(14px); }
.fa-nav button { min-width:max-content; padding:10px 18px; border:0; border-radius:9px; background:transparent; color:var(--fa-muted); font-size:.88rem; font-weight:750; cursor:pointer; transition:color 160ms ease,background 160ms ease; }
.fa-nav button:hover { color:var(--fa-text); }
.fa-nav button.active { color:#fff; background:var(--fa-accent); }
.fa-nav button:focus-visible { outline:2px solid var(--fa-accent-soft); outline-offset:-2px; }
.fa-nav-curto { display:none; }
.fa-nav-full { display:inline; }
@media (min-width:701px) {
  .fa-nav { flex-wrap:wrap; overflow-x:visible; }
}
.fa-section { display:none; }
.fa-section.active { display:block; max-width:1480px; margin:0 auto; }

.fa-principal { margin-bottom:16px; padding:clamp(20px,2.2vw,32px); border:1px solid var(--fa-border); border-radius:18px; background:var(--fa-surface); }
.fa-nums { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; margin-bottom:20px; overflow:hidden; border:1px solid var(--fa-border); border-radius:14px; background:var(--fa-border); }
.fa-num { min-height:118px; padding:20px; display:flex; flex-direction:column; justify-content:center; background:var(--fa-surface-raised); }
.fa-num .l { color:var(--fa-muted-2); font-size:.7rem; font-weight:750; line-height:1.35; letter-spacing:.055em; text-transform:uppercase; }
.fa-num .v { margin-top:8px; color:var(--fa-text); font-size:1.75rem; font-weight:820; line-height:1.1; letter-spacing:-.035em; }
.fa-num .v.o { color:var(--fa-accent-soft); }
.fa-num .v.small { font-size:1.2rem; }
.fa-explain { max-width:1120px; padding-top:16px; border-top:1px solid var(--fa-border); color:var(--fa-muted); font-size:.95rem; line-height:1.65; }
.fa-explain b,.fa-alert b,.fa-body h4 { color:var(--fa-text); }

.fa-alert,.fa-agente { margin-bottom:16px; padding:17px 19px; display:flex; gap:12px; align-items:flex-start;
  border:1px solid rgba(233,185,73,.3); border-left-width:3px; border-radius:12px; background:rgba(233,185,73,.055);
  color:var(--fa-muted); font-size:.92rem; line-height:1.6; }
.fa-alert.crit { border-color:rgba(255,107,98,.35); background:rgba(255,107,98,.055); }
.fa-alert.info { border-color:rgba(85,201,133,.35); background:rgba(85,201,133,.055); }
.fa-alert>div,.fa-agente p { max-width:1120px; }
.fa-agente { border-color:rgba(255,103,47,.35); background:rgba(255,103,47,.055); }
.fa-agente .ico { display:none; }
.fa-agente .l { margin-bottom:5px; color:var(--fa-accent-soft); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.fa-agente p { margin:0; }
.fa-tag { display:inline-block; margin-left:6px; padding:3px 8px; border:1px solid currentColor; border-radius:999px; font-size:.65rem; font-weight:800; line-height:1.2; text-transform:uppercase; }
.fa-tag.pend { color:var(--fa-danger); background:rgba(255,107,98,.08); }
.fa-tag.info { color:var(--fa-warning); background:rgba(233,185,73,.08); }
.fa-tag.ok { color:var(--fa-success); background:rgba(85,201,133,.08); }

.fa-more summary { width:fit-content; margin:2px 0 14px; padding:9px 14px; list-style:none; border:1px solid var(--fa-border-strong); border-radius:10px; background:var(--fa-surface); color:var(--fa-muted); font-size:.82rem; font-weight:750; cursor:pointer; }
.fa-more summary::-webkit-details-marker { display:none; }
.fa-more summary::after { content:"+"; margin-left:9px; color:var(--fa-accent-soft); }
.fa-more[open] summary::after { content:"−"; }
.fa-body { margin-bottom:16px; padding:clamp(18px,2vw,28px); overflow-x:auto; border:1px solid var(--fa-border); border-radius:14px; background:var(--fa-surface); color:var(--fa-muted); font-size:.9rem; line-height:1.6; }
.fa-body h4 { margin:0 0 8px; font-size:.9rem; }
.fa-body p { max-width:1120px; margin:0 0 14px; }
.fa-body table { width:100%; min-width:560px; border-collapse:collapse; }
.fa-body th,.fa-body td { padding:11px 12px; border-bottom:1px solid var(--fa-border); text-align:left; }
.fa-body th { color:var(--fa-muted-2); font-size:.68rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.fa-regioes { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.fa-regiao-btn { padding:9px 16px; border:1px solid var(--fa-border); border-radius:999px; background:var(--fa-surface); color:var(--fa-muted); font-size:.84rem; font-weight:750; cursor:pointer; }
.fa-regiao-btn.active { color:var(--fa-text); border-color:rgba(255,103,47,.55); background:rgba(255,103,47,.1); }

/* Concorrência (CL-MIS-0005): cards com hierarquia clara — nunca "ver fonte"
   genérico, sempre o nome real do domínio. */
.fa-concorrente-card { margin-bottom:14px; padding:16px 18px; border:1px solid var(--fa-border); border-radius:14px; background:var(--fa-surface); }
.fa-concorrente-topo { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fa-concorrente-topo h4 { margin:0; color:var(--fa-text); font-size:.95rem; }
.fa-concorrente-preco { color:var(--fa-accent-soft); font-weight:800; font-size:1.05rem; white-space:nowrap; }
.fa-concorrente-produto { margin:8px 0 0; color:var(--fa-muted); font-size:.85rem; }
.fa-concorrente-meta { margin:4px 0 0; color:var(--fa-muted-2); font-size:.78rem; }
.fa-concorrente-tags { margin:8px 0 0; }
.fa-concorrente-obs { margin:6px 0 0; color:var(--fa-muted); font-size:.82rem; }
.fa-concorrente-fonte { margin:8px 0 0; font-size:.82rem; }
.fa-concorrente-fonte a { color:var(--fa-accent-soft); }

/* Fornecedor (CL-MIS-0005): blocos em vez de parede de texto. */
.fa-fornecedor-blocos { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; margin-bottom:16px; overflow:hidden; border:1px solid var(--fa-border); border-radius:14px; background:var(--fa-border); }
.fa-fornecedor-bloco { display:flex; flex-direction:column; gap:6px; padding:16px; background:var(--fa-surface-raised); }
.fa-fornecedor-bloco .l { color:var(--fa-muted-2); font-size:.68rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.fa-fornecedor-bloco .v { color:var(--fa-text); font-size:.9rem; font-weight:700; }
.fa-fornecedor-bloco .v.pend { color:var(--fa-warning); font-weight:750; }

/* Histórico (CL-MIS-0005): preço e custo lado a lado no desktop. */
.fa-historico-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px) { .fa-historico-grid { grid-template-columns:1fr; } }

/* Decisão (CL-MIS-0005): cards empilhados no celular, tabela no desktop. */
.fa-decisao-cards { display:none; flex-direction:column; gap:10px; }
.fa-decisao-card { padding:14px; border:1px solid var(--fa-border); border-radius:12px; background:var(--fa-surface); color:var(--fa-muted); font-size:.85rem; line-height:1.6; }
.fa-decisao-card b { color:var(--fa-text); }

/* Divergência de custo — mesmo visual de alerta crítico, com destaque extra. */
.fa-divergencia { border-width:1px 1px 1px 4px; }

/* Caminho dos dados (Resumo, CL-MIS-0002) — trilha horizontal legível, sem
   caminho absoluto de disco (só nome de arquivo/aba/campo). */
.fa-caminho-lista { display:flex; flex-direction:column; gap:14px; }
.fa-caminho { padding:12px 0; border-bottom:1px solid var(--fa-border); }
.fa-caminho:last-child { border-bottom:0; }
.fa-caminho-indicador { margin-bottom:8px; color:var(--fa-text); font-size:.85rem; font-weight:750; }
.fa-caminho-trilha { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; color:var(--fa-muted); font-size:.82rem; line-height:1.5; }
.fa-caminho-trilha span[aria-hidden] { color:var(--fa-accent-soft); }

/* Subáreas de Mercado (Fornecedor/Mercado brasileiro/Concorrentes/
   Conhecimento/Fontes) — CSS-only tabs, sem depender do motor compartilhado
   (renderPainelProdutoModelo não é tocado por esta missão). */
.fa-sub-radio { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.fa-sub-nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; padding:5px; border:1px solid var(--fa-border); border-radius:12px; background:rgba(255,255,255,.02); }
.fa-sub-tab { padding:8px 14px; border-radius:8px; color:var(--fa-muted); font-size:.82rem; font-weight:750; cursor:pointer; transition:color 150ms ease,background 150ms ease; }
.fa-sub-tab:hover { color:var(--fa-text); }
.fa-sub-panel { display:none; }
#faSubFornecedor:checked ~ .fa-sub-nav label[for="faSubFornecedor"],
#faSubBrasil:checked ~ .fa-sub-nav label[for="faSubBrasil"],
#faSubConcorrentes:checked ~ .fa-sub-nav label[for="faSubConcorrentes"],
#faSubConhecimento:checked ~ .fa-sub-nav label[for="faSubConhecimento"],
#faSubFontes:checked ~ .fa-sub-nav label[for="faSubFontes"] { color:#fff; background:var(--fa-accent); }
#faSubFornecedor:checked ~ [data-panel="fornecedor"],
#faSubBrasil:checked ~ [data-panel="brasil"],
#faSubConcorrentes:checked ~ [data-panel="concorrentes"],
#faSubConhecimento:checked ~ [data-panel="conhecimento"],
#faSubFontes:checked ~ [data-panel="fontes"] { display:block; }
.fa-sub-tab:focus-visible { outline:2px solid var(--fa-accent-soft); outline-offset:2px; }

/* Gráfico Venda × Perda — barras HTML/CSS puras, sem CDN/dependência nova. */
.fa-chart-vp { display:flex; flex-direction:column; gap:18px; margin-bottom:18px; }
.fa-chart-grupo { display:flex; flex-direction:column; gap:8px; }
.fa-chart-titulo { color:var(--fa-text); font-size:.85rem; font-weight:750; }
.fa-chart-linha { display:grid; grid-template-columns:64px 1fr 100px; gap:10px; align-items:center; }
.fa-chart-rotulo { color:var(--fa-muted-2); font-size:.75rem; font-weight:700; text-transform:uppercase; }
.fa-chart-trilha { height:14px; border-radius:7px; background:rgba(255,255,255,.06); overflow:hidden; }
.fa-chart-barra { height:100%; border-radius:7px; min-width:4px; }
.fa-chart-valor { color:var(--fa-text); font-size:.82rem; font-weight:750; text-align:right; }

/* Conteúdo sempre visível; movimento não é dependência. */
.fa-reveal { opacity:1; transform:none; }

@media (max-width:1150px) {
  .fa-hero-inner { grid-template-columns:1fr; grid-template-areas:"identity" "summary" "toggle"; }
  .fa-hero-identity { grid-template-columns:minmax(220px,.85fr) minmax(260px,1.15fr); }
  .fa-hero-media { justify-self:center; max-width:300px; }
}
@media (max-width:700px) {
  /* CL-MIS-0005: hero compacto — abas devem ficar visíveis sem rolagem
     vertical inicial. Foto ~96px, título menor, 2 KPIs por vez (rolagem
     horizontal com snap), status em faixa fina, toggle compacto. */
  .product-panel-body:has(.fa-wrap) { padding:16px; }
  .fa-wrap { padding-top:0; }
  .fa-hero { padding:12px; border-radius:18px; }
  .fa-hero-inner { gap:10px; grid-template-areas:"identity" "toggle" "summary"; grid-template-columns:1fr; }
  .fa-hero-identity { grid-template-columns:72px 1fr; gap:12px; text-align:left; align-items:center; }
  .fa-eyebrow { display:none; }
  .fa-hero h2 { font-size:1.35rem; line-height:1.1; }
  .fa-hero p { margin-top:6px; font-size:.78rem; }
  .fa-hero-media { order:0; width:96px; max-width:96px; border-radius:12px; justify-self:start; }
  .fa-hero-cod { font-size:.85em; }
  .fa-hero-summary { grid-auto-flow:column; grid-auto-columns:calc(50% - 6px); grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; }
  .fa-kpi,.fa-data-status { scroll-snap-align:start; }
  .fa-kpi,.fa-data-status { padding:10px; }
  .fa-data-status { grid-column:auto; flex-wrap:nowrap; }
  .fa-kpi strong { font-size:1.25rem; }
  .fa-kpi strong.fa-kpi-pending { font-size:.9rem; }
  .fa-kpi span,.fa-data-status b { font-size:.62rem; }
  .fa-toggle { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fa-toggle button { min-height:38px; padding:8px 10px; font-size:.8rem; }
  .fa-toggle button img { width:20px; height:20px; }
  .fa-nav { top:0; position:static; margin-inline:-16px; border-right:0; border-left:0; border-radius:0; }
  .fa-nav button { padding:10px 14px; }
  .fa-nav-full { display:none; }
  .fa-nav-curto { display:inline; }
  .fa-nums { grid-template-columns:1fr; }
  .fa-num { min-height:100px; }
  .fa-alert,.fa-agente { padding:15px; }
  .fa-chart-linha { grid-template-columns:48px 1fr 76px; gap:6px; }
  .fa-chart-valor { font-size:.72rem; }
  .fa-caminho-trilha { font-size:.76rem; }
  .fa-decisao-tabela table { display:none; }
  .fa-decisao-cards { display:flex; }
  .fa-fornecedor-blocos { grid-template-columns:1fr 1fr; }
}
@media (min-width:701px) {
  .fa-decisao-cards { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .fa-hero-media,.fa-toggle button,.fa-nav button { transition:none; }
  .fa-hero-media { transform:none; }
}