/* Funil comercial (20/10/2026): faixa de 18 indicadores no desenho do painel de tráfego da Atem, o funil do
   Infoproduto e a conta de anúncios da Meta nas Configurações do site. Tokens --ax-* (web/TEMA.md); o verde-água
   não existe na paleta e fica escopado em .fu-faixa (--fu-agua), como pede o web/ECOSSISTEMA.md. */
.fu-faixa,.fu-grade{--fu-agua:#0E7C74;--fu-agua-s:#DDF3F0}
.fu-faixa{container-type:inline-size;margin:16px 0 20px;padding:18px 20px 20px;border-radius:var(--ax-raio-l);
  background:var(--ax-superficie-1);box-shadow:var(--ax-relevo),var(--ax-anel),var(--ax-sombra-1);color:var(--ax-texto)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fu-faixa,:root:not([data-theme="light"]) .fu-grade{--fu-agua:#5FD0C4;--fu-agua-s:rgba(95,208,196,.12)}}
:root[data-theme="dark"] .fu-faixa,:root[data-theme="dark"] .fu-grade{--fu-agua:#5FD0C4;--fu-agua-s:rgba(95,208,196,.12)}
.fu-faixa-cab h2{margin:0;font:650 17px/1.3 var(--ax-fonte);letter-spacing:-.015em;color:var(--ax-texto)}
.fu-faixa-cab p{margin:5px 0 14px;font:500 12px/1.55 var(--ax-fonte);color:var(--ax-texto-mudo);max-width:110ch}
.fu-k-fila{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.fu-k-fila+.fu-k-fila{margin-top:8px}
.fu-k{min-width:0;display:flex;flex-direction:column;gap:7px;padding:11px 12px 12px;border-radius:var(--ax-raio-m);background:var(--ax-superficie-2);box-shadow:var(--ax-anel)}
.fu-k-rot{font:600 10px/1.3 var(--ax-fonte);letter-spacing:.04em;text-transform:uppercase;color:var(--ax-texto-mudo);min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.fu-k-v{font:650 clamp(14px,1.25cqi,19px)/1.1 var(--ax-fonte);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;color:var(--ax-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fu-k-v.sem{color:var(--ax-texto-fraco);font-weight:500}
.fu-k-sub{font:500 11px/1.3 var(--ax-fonte);color:var(--ax-texto-mudo)}
.fu-k.ok{background:var(--ax-ok-suave);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ax-ok) 24%,transparent)}
.fu-k.ok .fu-k-v{color:var(--ax-ok)}
.fu-k.ok .fu-k-rot{color:color-mix(in srgb,var(--ax-ok) 70%,var(--ax-texto-mudo))}
.fu-k.agua{background:var(--fu-agua-s);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fu-agua) 24%,transparent)}
.fu-k.agua .fu-k-v{color:var(--fu-agua)}
.fu-k.agua .fu-k-rot{color:color-mix(in srgb,var(--fu-agua) 70%,var(--ax-texto-mudo))}
.fu-k.ok .fu-k-v.sem,.fu-k.agua .fu-k-v.sem{color:var(--ax-texto-fraco)}
@container (max-width:960px){.fu-k-fila{grid-template-columns:repeat(3,minmax(0,1fr))}.fu-k-v{font-size:18px}}
@container (max-width:560px){.fu-k-v{font-size:16px}.fu-k{padding:10px}}
@container (max-width:560px){.fu-k-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fu-k-fila{display:contents}}
@media (max-width:640px){.fu-faixa{padding:14px 12px 14px;margin:12px 0 16px}.fu-faixa-cab h2{font-size:15.5px}.fu-faixa-cab p{font-size:11.5px}}

/* quatro funis: no celular os botões quebram em duas linhas em vez de vazar */
.fu-tipos{flex-wrap:wrap;max-width:100%}
@media (max-width:640px){.fu-tipos{display:grid;grid-template-columns:1fr 1fr;width:100%}.fu-tipos button{padding:8px 12px}}

/* infoproduto: compras na coluna da direita */
.fu-c.infoproduto::before{background:var(--fu-agua,#0E7C74)}
.fu-c.reembolso::before{background:var(--ax-erro)}
.fu-c.reembolso .vl{color:var(--ax-texto-mudo);text-decoration:line-through}
.fu-c:not([data-lead]){cursor:default}
.fu-m-info{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg)}
.fu-info-tab a{color:var(--ax-acento)}

/* Configurações do site: conta de anúncios da Meta */
.fu-meta{margin-top:20px;max-width:640px}
.fu-meta-st{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.fu-meta-erro{color:var(--ax-erro)}

.fu-tile b{font-size:clamp(12.5px,1.05vw,16px);white-space:nowrap}

/* celular: barras do funil não ficam estreitas demais para o nome e os cinco números de baixo cabem */
@media screen and (max-width:640px){
  .fu-box{padding:18px 14px}
  .fu-barra{min-width:80%}
  .fu-barra .bar{padding:0 12px 0 12px}
  .fu-barra .bar .rot{letter-spacing:.08em}
  .fu-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fu-tile b{font-size:14px;overflow-wrap:anywhere}
  .fu-comp{grid-template-columns:minmax(0,1fr)}
}