/*
 * Ilustrações de "O produto por dentro" (partial site/partials/ilustracao.php).
 * Desenho da estrutura de cada tela, não print: blocos, linhas-esqueleto e chips.
 * Tudo em cqw (largura do palco), então a ilustração escala inteira em qualquer tela.
 */
.ilu { position:relative; aspect-ratio:16/10; container-type:inline-size; overflow:hidden; border-radius:28px; border:1px solid rgba(124,58,237,.14); background:radial-gradient(70% 90% at 85% 0%,rgba(167,139,250,.22),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(37,211,102,.10),transparent 60%),linear-gradient(180deg,#FFFFFF,#F7F5FD); box-shadow:0 60px 110px -50px rgba(76,29,149,.45),0 0 0 6px rgba(255,255,255,.55); }
.ilu::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(94,68,149,.16) 1px,transparent 1.2px); background-size:2.2cqw 2.2cqw; -webkit-mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 80%); mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 80%); pointer-events:none; }

.ilu-layer { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .55s ease; }
.ilu-layer.ativo { opacity:1; }
/* peças entram uma a uma quando o passo fica ativo */
.ilu-layer .pc { opacity:0; transform:translateY(2.2cqw) scale(.97); transition:opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d,0) * 90ms); }
.ilu-layer.ativo .pc { opacity:1; transform:none; }

.ilu-legenda { position:absolute; left:2.2cqw; bottom:2.2cqw; z-index:3; display:inline-flex; align-items:center; gap:.8cqw; max-width:calc(100% - 4.4cqw); padding:1cqw 1.8cqw 1cqw 1.4cqw; border-radius:999px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(24,24,27,.08); box-shadow:0 14px 30px -14px rgba(24,24,27,.4); font-size:max(11px,1.75cqw); font-weight:600; color:#18181B; white-space:nowrap; opacity:0; transform:translateY(8px); transition:opacity .4s .5s, transform .5s .5s; pointer-events:none; }
.ilu-legenda.ativo { opacity:1; transform:none; }
.ilu-legenda i { width:.9cqw; height:.9cqw; min-width:7px; min-height:7px; border-radius:99px; background:#7C3AED; box-shadow:0 0 0 .5cqw rgba(124,58,237,.16); }

/* peças básicas */
.il-card { position:absolute; background:#fff; border-radius:1.8cqw; border:1px solid rgba(24,24,27,.07); box-shadow:0 1px 0 rgba(24,24,27,.03),0 2.4cqw 5cqw -2.6cqw rgba(76,29,149,.35); padding:2cqw; }
.il-rot { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:max(6px,1.15cqw); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#A1A1AA; white-space:nowrap; }
.il-tit { font-family:'Sora',sans-serif; font-size:max(8px,1.8cqw); font-weight:700; letter-spacing:-.02em; color:#18181B; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.il-ln { display:block; height:.95cqw; border-radius:99px; background:#ECEAF3; }
.il-ln.f { height:.7cqw; background:#F3F2F7; }
.il-ln.esc { background:#DCD8E8; }
.il-chip { display:inline-flex; align-items:center; gap:.6cqw; border-radius:99px; padding:.55cqw 1.1cqw; font-size:max(6.5px,1.2cqw); font-weight:700; white-space:nowrap; line-height:1; }
.il-chip::before { content:''; width:.75cqw; height:.75cqw; border-radius:99px; background:currentColor; }
.il-chip.sem::before { display:none; }
.il-ok { background:#DCFCE7; color:#15803D; } .il-warn { background:#FEF3C7; color:#B45309; } .il-bad { background:#FEE2E2; color:#B91C1C; }
.il-pri { background:#F5F3FF; color:#6D28D9; } .il-mute { background:#F4F4F5; color:#71717A; }
.il-btn { display:inline-flex; align-items:center; border-radius:99px; padding:.6cqw 1.3cqw; font-size:max(6.5px,1.15cqw); font-weight:700; background:#7C3AED; color:#fff; line-height:1; white-space:nowrap; box-shadow:0 .8cqw 1.8cqw -.8cqw rgba(124,58,237,.8); }
.il-btn.cl { background:#fff; color:#6D28D9; border:1px solid #DDD6FE; box-shadow:none; }
.il-ic { display:grid; place-items:center; flex-shrink:0; width:3.6cqw; height:3.6cqw; border-radius:1cqw; background:#F5F3FF; color:#7C3AED; }
.il-ic svg { width:55%; height:55%; }
.il-av { flex-shrink:0; width:3.4cqw; height:3.4cqw; border-radius:99px; display:grid; place-items:center; font-size:max(8px,1.2cqw); font-weight:700; color:#fff; border:2px solid #fff; }
.il-trk { position:relative; height:1cqw; border-radius:99px; background:#F1EFF6; overflow:hidden; }
.il-trk > b { position:absolute; inset:0 auto 0 0; border-radius:99px; background:linear-gradient(90deg,#7C3AED,#A78BFA); }
.il-row { display:flex; align-items:center; gap:1.4cqw; }
.il-col { display:flex; flex-direction:column; gap:.8cqw; min-width:0; }

/* 1. Hoje */
.il-anel { width:13cqw; height:13cqw; }
.il-anel .arco { stroke-dasharray:0 100; transition:stroke-dasharray 1.4s .35s cubic-bezier(.2,.7,.2,1); }
.ilu-layer.ativo .il-anel .arco { stroke-dasharray:72 100; }
.il-barras { display:flex; align-items:flex-end; gap:.7cqw; height:10cqw; }
.il-barras span { flex:1; display:flex; align-items:flex-end; gap:.2cqw; height:100%; }
.il-barras i { flex:1; border-radius:.5cqw .5cqw .2cqw .2cqw; background:#E9E5F5; height:var(--o); transform-origin:bottom; transform:scaleY(0); transition:transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(.3s + var(--k) * 45ms); }
.il-barras i + i { background:linear-gradient(180deg,#8B5CF6,#7C3AED); height:var(--h); }
.ilu-layer.ativo .il-barras i { transform:scaleY(1); }

/* 2. Campanha por número */
.il-fila { display:flex; flex-direction:column; gap:.9cqw; }
.il-msg { height:2.4cqw; border-radius:1.2cqw 1.2cqw 1.2cqw .4cqw; background:#F3F0FB; border:1px solid #E7E1F7; }
.il-msg.v { background:#D9FDD3; border-color:#BDF0B4; border-radius:1.2cqw 1.2cqw .4cqw 1.2cqw; }
.il-pista .il-trk > b { transition:width 1.4s cubic-bezier(.2,.7,.2,1); width:0; }
.ilu-layer.ativo .il-pista .il-trk > b { width:var(--w); }
.il-pista.il-rodando .il-trk > b { background:linear-gradient(90deg,#7C3AED,#25D366); }
.il-pista.il-rodando .il-trk > b::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:il-brilho 1.6s infinite; }
.il-pista.il-cheia .il-trk > b { background:#F59E0B; }
@keyframes il-brilho { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

/* 3. Números */
.il-lista > div { padding:1.3cqw 0; border-top:1px solid #F1F0F4; }
.il-lista > div:first-child { border-top:0; }
.il-lista .alvo { margin:0 -1cqw; padding:1.3cqw 1cqw; border-radius:1.2cqw; background:#FFF7F7; box-shadow:inset 0 0 0 1px #FECACA; border-top-color:transparent; }
.il-pop::before { content:''; position:absolute; left:-1cqw; top:3cqw; width:2cqw; height:2cqw; background:#fff; border-left:1px solid rgba(24,24,27,.07); border-bottom:1px solid rgba(24,24,27,.07); transform:rotate(45deg); }

/* 4. Contas e BMs */
.il-bm.caiu { background:#FFFBFB; }
.il-no { position:absolute; display:grid; place-items:center; width:4.4cqw; height:4.4cqw; border-radius:99px; background:#fff; border:1px solid rgba(24,24,27,.08); box-shadow:0 1.2cqw 2.4cqw -1.2cqw rgba(76,29,149,.4); color:#1DAA61; }
.il-no svg { width:48%; height:48%; }
.il-no.morto { color:#D4D4D8; box-shadow:none; background:#FAFAFA; }
.il-fios path { fill:none; stroke-width:2.4; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.1s .45s ease; }
.ilu-layer.ativo .il-fios path { stroke-dashoffset:0; }
.il-spark path.l { stroke-dasharray:300; stroke-dashoffset:300; transition:stroke-dashoffset 1.6s .5s ease; }
.ilu-layer.ativo .il-spark path.l { stroke-dashoffset:0; }

/* 5. Inbox */
.il-conv { padding:1cqw; border-radius:1.2cqw; }
.il-conv.sel { background:#F5F3FF; }
.il-nl { width:1.9cqw; height:1.9cqw; border-radius:99px; background:#25D366; color:#fff; display:grid; place-items:center; font-size:max(7px,1cqw); font-weight:800; }
.il-bolha { max-width:70%; padding:1.2cqw 1.4cqw; border-radius:1.4cqw 1.4cqw 1.4cqw .4cqw; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05); }
.il-bolha.eu { margin-left:auto; background:#D9FDD3; border-radius:1.4cqw 1.4cqw .4cqw 1.4cqw; }
.il-digita { display:inline-flex; gap:.5cqw; padding:1.2cqw 1.4cqw; border-radius:1.4cqw 1.4cqw 1.4cqw .4cqw; background:#fff; }
.il-digita i { width:.8cqw; height:.8cqw; border-radius:99px; background:#A1A1AA; animation:il-digita 1.2s infinite; }
.il-digita i:nth-child(2) { animation-delay:.15s; } .il-digita i:nth-child(3) { animation-delay:.3s; }
@keyframes il-digita { 0%,60%,100% { transform:none; opacity:.5; } 30% { transform:translateY(-.5cqw); opacity:1; } }
.il-ia { border:1px solid #DDD6FE; background:linear-gradient(180deg,#FBFAFF,#F5F3FF); }
.il-online { position:absolute; right:-.1cqw; bottom:-.1cqw; width:1.1cqw; height:1.1cqw; border-radius:99px; background:#25D366; border:2px solid #fff; }

/* palco estreito (celular): a legenda sai, porque o texto acima do palco já explica o passo */
@container (max-width:560px) {
    .ilu-legenda { display:none; }
    .il-rot { letter-spacing:.06em; }
}

@media (prefers-reduced-motion:reduce) {
    .ilu-layer .pc, .il-barras i, .il-anel .arco, .il-pista .il-trk > b, .il-fios path, .il-spark path.l { transition:none !important; }
    .il-mov, .il-pista.il-rodando .il-trk > b::after, .il-digita i { animation:none !important; }
    .il-mov { display:none; }
}
.il-fios path.trac { stroke-dasharray:5 6; stroke-dashoffset:0; transition:none; }