/* fix-wa — ajustes de 26/09. Carregado depois do styles.css, então vence por ordem.
   Fase 1 (Zouti × Deu ROI): a superfície deixa de ser plástico opaco e vira
   vidro sobre luz. Layout intocado; só troca de superfície. Tokens em fix-base.css.
   UM glow na seção inteira: o "Voltou em venda" da recuperação. */

/* ==========================================================================
   0 · A LUZ ATRÁS: sem algo pra desfocar o vidro não aparece. Um brilho de
   marca bem baixo, que nasce e morre em transparente (nenhuma aresta).
   ========================================================================== */
#whatsapp { isolation: isolate; }
#whatsapp::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 22%; bottom: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 38% at 50% 34%, rgba(60, 230, 160, .075), transparent 70%),
        radial-gradient(30% 30% at 20% 82%, rgba(60, 230, 160, .06), transparent 72%),
        radial-gradient(30% 28% at 84% 80%, rgba(83, 189, 235, .035), transparent 72%);
}

/* moldura de TODOS os fragmentos da seção: vidro, anel, molde, véu */
#whatsapp .frag {
    background-color: var(--surface);
    background-image: var(--veil), var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
#whatsapp .frag-bar {
    background: rgba(255, 255, 255, .02);
    border-bottom-color: rgba(255, 255, 255, .06);
}
#whatsapp .frag-title { font-family: var(--display); }

/* ==========================================================================
   1 · O CONSTRUTOR DE FLUXO
   O palco tem tamanho fixo em px: os cartões ficam onde foram postos e as
   ligações são desenhadas por JS medindo os nós de verdade. Quando a moldura
   é mais estreita que o palco, quem rola é o canvas, não a página.
   ========================================================================== */
#frag-waf .waf-canvas {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    /* poço rebaixado dentro do vidro: translúcido, a luz de trás atravessa */
    background-color: rgba(0, 0, 0, .26);
    background-image:
        radial-gradient(900px 340px at 30% 0%, rgba(60, 230, 160, .09), transparent 64%),
        radial-gradient(520px 260px at 92% 96%, rgba(60, 230, 160, .05), transparent 70%),
        radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px;
    box-shadow: none;
}
#frag-waf .waf-stage {
    position: relative;
    width: 1080px;
    height: 402px;
    margin: 0 auto;
    flex: none;
}
#frag-waf .waf-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#frag-waf .waf-edges .e { stroke-width: 2; opacity: .92; }

/* os cartões: vidro que desfoca a grade de pontos atrás */
#frag-waf .waf-node {
    background-color: rgba(18, 24, 22, .46);
    background-image: var(--veil), var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold-soft), var(--drop);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
#frag-waf .waf-node:hover {
    transform: translateY(-2px);
    box-shadow: var(--ring-strong), var(--mold-soft), 0 32px 56px -24px rgba(0, 0, 0, 1);
}
/* cabeçalho: a cor do tipo vira vidro tingido, não tinta chapada */
#frag-waf .waf-node header {
    --hc: var(--c-trigger);
    padding: 9px 12px;
    border-radius: var(--r-box) var(--r-box) 0 0;
    letter-spacing: -.005em;
    color: #fff;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--hc) 62%, transparent), color-mix(in srgb, var(--hc) 34%, transparent));
    box-shadow: none;
}
#frag-waf .t-message header   { --hc: var(--c-message); }
#frag-waf .t-delay header     { --hc: var(--c-delay); }
#frag-waf .t-condition header { --hc: var(--c-condition); }
#frag-waf .t-action header    { --hc: var(--c-action); color: #FFF6D6; }
#frag-waf .waf-node header svg { color: color-mix(in srgb, var(--hc) 45%, #fff); }
#frag-waf .waf-stat { background: rgba(0, 0, 0, .3); box-shadow: none; }
#frag-waf .t-action .waf-stat { background: rgba(0, 0, 0, .3); }

#frag-waf .waf-body { padding: 11px 12px; }
#frag-waf .waf-body small { margin-top: 5px; color: #8A8A96; }
#frag-waf .waf-port { padding: 8px 12px; border-top-color: rgba(255, 255, 255, .06); }
/* a bolinha da porta e a de entrada ficam com um halo para a linha "encostar" */
#frag-waf .waf-port i { background: var(--bg); box-shadow: 0 0 0 3px rgba(5, 10, 8, .85); }
#frag-waf .waf-node:not(.t-trigger)::before { background: var(--bg); border-color: #56566A; box-shadow: 0 0 0 3px rgba(5, 10, 8, .85); }
/* a porta "btn" herdava o .btn global dos botões da página (centralizada, negrito,
   raio 11px, borda em volta): volta a ser uma porta como as outras */
#frag-waf .waf-port.btn {
    justify-content: flex-start; gap: 6px;
    font-weight: inherit; line-height: inherit; letter-spacing: inherit; white-space: normal;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    cursor: default; transition: none;
}
#frag-waf .waf-hint {
    bottom: 14px;
    background: rgba(255, 255, 255, .04);
    background-image: var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: transparent;
    box-shadow: var(--ring), var(--mold-soft);
}
#frag-waf .waf-fab {
    background: var(--brand-grad-lit);
    color: #F2FFF9;
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .3), var(--mold-soft), 0 14px 26px -12px rgba(0, 0, 0, .9);
}

/* ==========================================================================
   2 · O TRIO: mesma altura, mesmo acabamento, nenhum vazio
   ========================================================================== */
#whatsapp .wa-trio { gap: 16px; margin-top: 16px; align-items: stretch; }
#whatsapp .wa-trio > .frag { display: flex; flex-direction: column; }
#whatsapp .wa-trio > .frag > .frag-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#whatsapp .wa-trio > .frag > .wa-chat { flex: 1 1 auto; }
#whatsapp .wa-trio .frag-bar { padding: 12px 16px; }

/* cartão interno: vidro mais leve (camada secundária) */
#whatsapp .wa-kpi,
#whatsapp .wa-bc-grid > div {
    border-color: transparent;
    border-radius: var(--r-card);
    background-color: rgba(255, 255, 255, .02);
    background-image: linear-gradient(267deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring), var(--mold-soft);
}

/* ---- Recuperação ---- */
#whatsapp .wa-kpis.one { grid-template-columns: minmax(0, 1fr); }
#whatsapp .wa-trio .wa-kpi { padding: 13px 14px; }
/* O FOCO DA SEÇÃO: o dinheiro que voltou. Único glow do #whatsapp. */
#frag-rec .wa-kpi {
    background-color: rgba(60, 230, 160, .045);
    background-image:
        radial-gradient(120% 90% at 0% 0%, rgba(60, 230, 160, .16), transparent 62%),
        var(--glass-grad);
    box-shadow: var(--ring-brand), var(--mold), var(--glow);
}
#whatsapp .wa-kpis.one .wa-kpi b { font-size: 30px; letter-spacing: -.035em; }
#frag-rec .wa-kpi span { color: #8FDCBB; }
#whatsapp .wa-kpi small { line-height: 1.45; color: #8A8A96; }

/* a linha do retorno: uma frase, não um card com número solto */
#whatsapp .wa-ret {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--r-card);
    background-color: rgba(255, 255, 255, .02);
    background-image: var(--veil), linear-gradient(267deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring), var(--mold-soft);
}
#whatsapp .wa-ret b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); letter-spacing: -.015em; line-height: 1.35; }
#whatsapp .wa-ret span { display: block; margin-top: 4px; font-size: 11.5px; color: #8A8A96; }
#whatsapp .wa-funil { margin-top: 14px; }
/* barras: trilho de vidro com molde; o preenchimento é luz, e só o fim é marca */
#whatsapp .wa-funil li i {
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .045);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04);
}
#whatsapp .wa-funil li i::after {
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .34));
    box-shadow: none;
}
#whatsapp .wa-funil li.fim i::after { background: var(--brand-grad-lit); }

/* ---- Disparo em massa ---- */
#whatsapp .wa-bc-name { font-size: 14.5px; letter-spacing: -.015em; font-family: var(--display); }
#whatsapp .pill-st.warn {
    border-color: transparent;
    background: color-mix(in srgb, var(--warn) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 34%, transparent);
}
#whatsapp .wa-bc-sub { margin-top: 7px; font-size: 12px; line-height: 1.5; color: #8A8A96; }
#whatsapp .wa-bc-sub b { color: var(--text-2); font-weight: 600; }
#whatsapp .wa-bc-bar {
    margin-top: 13px; height: 8px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .045);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04);
}
#whatsapp .wa-bc-bar .ok { background: var(--brand-grad-lit); box-shadow: none; }
#whatsapp .wa-bc-nums { margin-top: 8px; font-size: 11.5px; color: #8A8A96; }
#whatsapp .wa-bc-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    margin-top: 13px;
}
#whatsapp .wa-bc-grid > div { min-width: 0; padding: 10px 12px; }
#whatsapp .wa-bc-grid span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
#whatsapp .wa-bc-grid b { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; color: var(--text); }
#whatsapp .wa-bc-grid b.pos { color: var(--pos); }
#whatsapp .wa-bc-lim { margin-top: auto; padding-top: 13px; border-top-color: rgba(255, 255, 255, .06); color: #8A8A96; }
#whatsapp .wa-bc-lim b { color: var(--text-2); font-weight: 600; }

/* ---- Conversas: identidade do WhatsApp, acabamento de vidro.
        As mensagens encostam no rodapé, como num app de verdade ---- */
#whatsapp .wa-chat {
    padding: 0; gap: 0;
    background-color: rgba(11, 20, 26, .62);
    background-image:
        radial-gradient(90% 60% at 50% 110%, rgba(0, 92, 75, .22), transparent 70%),
        radial-gradient(rgba(233, 237, 239, .035) 1px, transparent 1px);
    background-size: auto, 18px 18px;
}
#whatsapp .wa-chat-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: rgba(31, 44, 51, .55);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: none;
}
#whatsapp .wa-chat-head i {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #4A6D7A, #34525D); color: #E9EDEF;
    box-shadow: var(--mold-soft), 0 0 0 1px rgba(255, 255, 255, .08);
    font-style: normal; font-size: 13px; font-weight: 600;
}
#whatsapp .wa-chat-head span { display: block; min-width: 0; }
#whatsapp .wa-chat-head b { display: block; font-size: 12.5px; font-weight: 600; color: #E9EDEF; }
#whatsapp .wa-chat-head small { display: block; font-size: 10.5px; color: #8696A0; }

/* balões: as cores do WhatsApp, com molde e anel; raio 12 (o canto da cauda é a assinatura do app) */
#whatsapp .wa-chat .b-bub { margin: 0 14px; border-radius: var(--r-card); }
#whatsapp .wa-chat .b-bub.me {
    border-bottom-right-radius: 4px;
    background: linear-gradient(180deg, #0A6B58, #005446);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), var(--mold-soft), 0 10px 20px -14px rgba(0, 0, 0, .9);
}
#whatsapp .wa-chat .b-bub.you,
#whatsapp .wa-chat .b-wa-typing {
    background: rgba(32, 44, 51, .78);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), var(--mold-soft), 0 10px 20px -14px rgba(0, 0, 0, .9);
}
#whatsapp .wa-chat .b-bub.you { border-bottom-left-radius: 4px; }
#whatsapp .wa-chat .b-wa-typing { border-radius: var(--r-card); }
#whatsapp .wa-chat .b-bub:first-of-type { margin-top: auto; }
#whatsapp .wa-chat .b-bub + .b-bub, #whatsapp .wa-chat .b-wa-typing { margin-top: 8px; }
#whatsapp .wa-chat .b-wa-typing { margin-left: 14px; }
#whatsapp .wa-chat-paid {
    align-self: center;
    margin: 12px 14px 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 11.5px; color: #7BE3B6;
    background: rgba(60, 230, 160, .1);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(60, 230, 160, .3);
    opacity: 0; transform: translateY(8px);
    transition: opacity .34s var(--ease), transform .34s var(--ease);
}
#whatsapp .wa-chat-paid.in { opacity: 1; transform: none; }
#whatsapp .wa-chat-paid svg { width: 13px; height: 13px; }
#whatsapp .wa-chat-paid b { color: #C8F6E2; font-weight: 600; }
#whatsapp .wa-chat-foot {
    margin: 14px;
    border-radius: var(--r-pill);
    background: rgba(42, 57, 66, .5);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
    color: #93A3AC;
}

/* ==========================================================================
   3 · MOBILE (o palco vira lista; as ligações somem e os cartões empilham)
   ========================================================================== */
@media (max-width: 900px) {
    #frag-waf .waf-canvas { overflow: visible; display: block; }
    #frag-waf .waf-stage { width: auto; height: auto; display: grid; padding-bottom: 14px; }
    #frag-waf .waf-edges { display: none; }
    /* relative (pro traço ::after) + left/top inline do palco = o cartão andava
       272–848px pra direita e a página ganhava scroll lateral. Zera o deslocamento. */
    #frag-waf .waf-node { position: relative; left: auto !important; top: auto !important; width: auto; margin: 12px 14px 0; }
    #frag-waf .waf-node::before { display: none; }
    /* sem SVG no celular, a ligação vira um traço curto entre os cartões */
    #frag-waf .waf-node:not(:last-of-type)::after {
        content: ''; position: absolute; left: 50%; bottom: -12px;
        width: 2px; height: 12px; margin-left: -1px;
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .2) 0 4px, transparent 4px 8px);
    }
    #frag-waf .waf-hint, #frag-waf .waf-fab { display: none; }
    #whatsapp::before { top: 14%; }
}
@media (max-width: 620px) {
    #whatsapp .wa-trio { gap: 12px; }
    #whatsapp .wa-kpis.one .wa-kpi b { font-size: 26px; }
    #whatsapp .wa-ret b { font-size: 13.5px; }
    #whatsapp .wa-bc-grid { gap: 7px; }
    #whatsapp .wa-bc-grid > div { padding: 9px 10px; }
    #whatsapp .wa-bc-grid b { font-size: 16px; }
}