/* Home — Diferenciais: tema escuro do design system (.theme-dark) sobre a estrutura .aud da seção
   "Tipos de clientes" (css/clientes.css). Ilustrações vetoriais animadas por js/stage.js. */

.aud.dif {
  background:
    radial-gradient(52rem 24rem at 92% -10%, color-mix(in srgb, var(--primitive-color-blue-600) 55%, transparent), transparent),
    radial-gradient(36rem 20rem at -10% 110%, color-mix(in srgb, var(--primitive-color-blue-600) 25%, transparent), transparent),
    var(--color-background);
  color: var(--color-foreground);
}
.aud.dif::before { background-image: radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1.2px); }
.dif .section__head h2 { color: var(--color-heading); }
.dif .aud-title .hl { background-image: linear-gradient(90deg, var(--color-accent), var(--primitive-color-blue-300)); }
.dif .aud-seg__bar { background: rgb(255 255 255 / 0.14); }
.dif .aud-seg__bar i { background: linear-gradient(90deg, var(--color-accent), var(--primitive-color-blue-300)); }

/* Texto à esquerda, ilustração à direita; no celular a ilustração vem primeiro */
.dif-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.dif-copy .aud-sub { max-width: 30rem; }
.dif-ill { min-width: 0; }
.dif-ill .ill { display: block; width: 100%; height: auto; max-height: 21rem; overflow: visible; font-family: var(--font-body); }
.dif-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
@media (max-width: 52rem) {
  .dif-grid { grid-template-columns: 1fr; gap: var(--primitive-spacing-3); }
  .dif-ill { order: -1; width: 100%; max-width: 24rem; margin-inline: auto; }
  .dif-ill .ill { max-height: 13.5rem; }
}

/* ===== Peças das ilustrações (tema escuro) ===== */
.dif-ill text { font-family: var(--font-body); }
.dif-ill .t-bold { font-family: var(--font-heading); font-weight: 700; }
.dif-ill .t-mono { font-family: var(--font-mono); }
.dif-ill .t-ink { fill: var(--color-heading); }
.dif-ill .t-muted { fill: var(--color-foreground-muted); }
.dif-ill .t-muted-dark { fill: var(--primitive-color-neutral-500); }
.dif-ill .t-white { fill: var(--primitive-color-neutral-0); }
.dif-ill .t-navy { fill: var(--primitive-color-navy-900); }
.dif-ill .t-ok { fill: var(--primitive-color-whatsapp-500); }
.dif-ill .f-card { fill: var(--color-surface); stroke: rgb(255 255 255 / 0.1); stroke-width: 1; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.35)); }
.dif-ill .f-bar, .dif-ill .f-side { fill: var(--color-surface-alt); }
.dif-ill .f-dot { fill: rgb(255 255 255 / 0.2); }
.dif-ill .gridline { stroke: color-mix(in srgb, var(--color-accent) 16%, transparent); stroke-width: 1; stroke-dasharray: 3 6; }
.dif-ill .wf { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-width: 1.2; stroke-dasharray: 4 4; }
.dif-ill .f-nav { fill: var(--primitive-color-navy-950); }
.dif-ill .f-hero { fill: var(--primitive-color-blue-600); }
.dif-ill .f-white { fill: var(--primitive-color-neutral-0); }
.dif-ill .f-white--dim { opacity: 0.7; }
.dif-ill .f-accent { fill: var(--color-accent); }
.dif-ill .f-soft { fill: var(--color-surface-alt); stroke: rgb(255 255 255 / 0.08); }
.dif-ill .f-line { fill: rgb(255 255 255 / 0.32); }
.dif-ill .f-line--dim { fill: rgb(255 255 255 / 0.16); }
.dif-ill .f-phone { fill: var(--primitive-color-navy-950); stroke: rgb(255 255 255 / 0.16); stroke-width: 1.5; }
.dif-ill .f-screen { fill: var(--color-surface); }
.dif-ill .f-brand { fill: var(--primitive-color-blue-600); }
.dif-ill .f-cursor { fill: var(--primitive-color-neutral-0); stroke: var(--primitive-color-navy-900); stroke-width: 1.2; stroke-linejoin: round; }
.dif-ill .f-chip { fill: var(--color-surface-alt); stroke: color-mix(in srgb, var(--color-accent) 45%, transparent); stroke-width: 1; }
.dif-ill .tap { fill: color-mix(in srgb, var(--color-accent) 35%, transparent); stroke: var(--color-accent); stroke-width: 2; opacity: 0; }
.dif-ill .ring { fill: none; stroke: color-mix(in srgb, var(--color-accent) 22%, transparent); stroke-width: 1; }
.dif-ill .st-accent { stop-color: var(--color-accent); }
.dif-ill .f-blip { fill: var(--color-surface); stroke: color-mix(in srgb, var(--color-accent) 60%, transparent); stroke-width: 1.5; }
.dif-ill .ping { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0; }
.dif-ill .f-track { fill: rgb(255 255 255 / 0.1); }
.dif-ill .f-meter { fill: var(--color-accent); }
.dif-ill .f-oksoft { fill: color-mix(in srgb, var(--primitive-color-whatsapp-500) 16%, transparent); stroke: color-mix(in srgb, var(--primitive-color-whatsapp-500) 45%, transparent); }
.dif-ill .f-lead { fill: color-mix(in srgb, var(--color-accent) 18%, transparent); stroke: color-mix(in srgb, var(--color-accent) 55%, transparent); stroke-width: 1; }
.dif-ill .f-row { fill: rgb(255 255 255 / 0.05); stroke: rgb(255 255 255 / 0.08); stroke-width: 1; }
.dif-ill .f-avatar { fill: rgb(255 255 255 / 0.2); }
.dif-ill .f-bubble { fill: var(--color-surface-alt); }
.dif-ill .f-ok { fill: var(--primitive-color-whatsapp-500); }
.dif-ill .f-wa { fill: var(--primitive-color-whatsapp-500); }
.dif-ill .f-wasoft { fill: color-mix(in srgb, var(--primitive-color-whatsapp-500) 30%, var(--primitive-color-neutral-0)); }
.dif-ill .f-chat { fill: var(--primitive-color-neutral-100); }
.dif-ill .tick { fill: none; stroke: var(--primitive-color-neutral-400); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dif-ill .tick--read { stroke: var(--primitive-color-blue-550); }
.dif-ill .ill-glyph { color: var(--color-accent); }
.dif-ill .g-accent { color: var(--color-accent); }
.dif-ill .g-white { color: var(--primitive-color-neutral-0); }
.dif-ill .g-navy { color: var(--primitive-color-navy-900); }
.dif-ill .dot-b { fill: var(--primitive-color-neutral-0); animation: dif-dot 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dif-ill .dot-b:nth-child(3) { animation-delay: 0.15s; }
.dif-ill .dot-b:nth-child(4) { animation-delay: 0.3s; }
@keyframes dif-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Ponto de origem das animações declarativas */
.dif-ill [data-a] { transform-box: fill-box; transform-origin: center; }
.dif-ill [data-a="grow"] { transform-origin: left center; }
.dif-ill [data-a="spin"] { transform-box: view-box; }
/* Elementos que só existem durante a animação ficam ocultos no estado estático */
.dif-ill [data-a="window"] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dif-ill .dot-b { animation: none; }
}