/* Ilustrações e telas desenhadas da prévia. Tudo em CSS/SVG, na paleta do site. */

/* ---------- logo que pulsa (equalizador) ---------- */
.eq .barra{animation:eq 1.6s ease-in-out infinite}
.eq .b2{animation-delay:-.4s}.eq .b3{animation-delay:-.9s}.eq .b4{animation-delay:-.2s}.eq .b5{animation-delay:-1.2s}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}

/* ---------- home: o ciclo da rádio ---------- */
.ciclo{position:relative;background:var(--verde);border-radius:26px;aspect-ratio:1/1.02;max-height:620px;width:100%;overflow:hidden;color:var(--papel)}
.ciclo svg.aneis{position:absolute;inset:0;width:100%;height:100%}
.ciclo .aneis circle{fill:none;stroke:rgba(246,247,242,.12)}
.ciclo .aneis .trilha{stroke:rgba(196,242,108,.35);stroke-dasharray:2 7}
.ciclo .giro{transform-origin:200px 176px;transform-box:view-box;animation:gira 14s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.ciclo .centro-eq{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--citrico);display:grid;place-items:center;color:var(--verde);box-shadow:0 0 0 14px rgba(196,242,108,.12),0 0 0 30px rgba(196,242,108,.05)}
.ciclo .centro-eq svg{width:40px;height:38px}
.ciclo .no{position:absolute;display:flex;gap:10px;align-items:center;background:#1c3a31;border:1px solid rgba(246,247,242,.14);border-radius:14px;padding:10px 14px 10px 10px;font-size:13px;line-height:1.25;white-space:nowrap}
.ciclo .no b{display:block;font-size:14.5px}
.ciclo .no small{color:#a9bdb2;font-size:12px}
.ciclo .no .icone-produto{width:34px;height:34px;border-radius:10px}
.ciclo .no .icone-produto svg{width:18px;height:18px}
.ciclo .n1{left:50%;top:14%;transform:translate(-50%,-50%)}
.ciclo .n2{right:4%;top:43%;transform:translateY(-50%)}
.ciclo .n3{left:50%;top:72%;transform:translate(-50%,-50%)}
.ciclo .n4{left:4%;top:43%;transform:translateY(-50%)}
.ciclo .rot-topo{position:absolute;left:22px;top:20px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#93a59c}
.ciclo .card-ar{position:absolute;left:18px;right:18px;bottom:18px;background:var(--papel);color:var(--tinta);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:13px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.ciclo .card-ar .vivo{width:10px;height:10px;border-radius:50%;background:#d8442f;box-shadow:0 0 0 4px rgba(216,68,47,.18);animation:vivo 1.4s ease-in-out infinite}
@keyframes vivo{50%{box-shadow:0 0 0 8px rgba(216,68,47,0)}}
.ciclo .card-ar b{display:block;font-size:13.5px}
.ciclo .card-ar small{color:var(--tinta-3)}
.progresso{height:4px;background:var(--papel-3);border-radius:2px;overflow:hidden;margin-top:6px}
.progresso i{display:block;height:100%;width:40%;background:var(--musgo);border-radius:2px;animation:toca 18s linear infinite}
@keyframes toca{from{width:4%}to{width:100%}}
@media (max-width:560px){.ciclo{aspect-ratio:auto;height:520px}.ciclo .no{padding:8px 10px 8px 8px;font-size:12px}.ciclo .no small{display:none}.ciclo .n2{right:3%}.ciclo .n4{left:3%}.ciclo .centro-eq{width:72px;height:72px;margin:-36px 0 0 -36px}}

/* ---------- telas genéricas ---------- */
.app{display:grid;grid-template-columns:150px 1fr;min-height:360px;font-size:12.5px}
.app .lateral{background:var(--papel);border-right:1px solid var(--linha);padding:14px 10px;display:grid;align-content:start;gap:2px}
.app .lateral .marca{font-size:14px;margin:0 6px 12px}
.app .lateral .marca svg{width:16px;height:15px}
.app .lateral a{display:block;padding:7px 9px;border-radius:7px;text-decoration:none;color:var(--tinta-2)}
.app .lateral a.ativo{background:var(--branco);color:var(--tinta);font-weight:600;box-shadow:inset 2px 0 0 var(--cor-produto,var(--musgo))}
.app .principal{padding:16px 18px;display:grid;gap:14px;align-content:start}
.app h6{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{border:1px solid var(--linha);border-radius:10px;padding:10px 12px}
.tile small{display:block;color:var(--tinta-3);font-size:11px}
.tile b{font-size:17px;letter-spacing:-.02em}
.tile .barrinha{height:4px;background:var(--papel-2);border-radius:2px;margin-top:7px;overflow:hidden}
.tile .barrinha i{display:block;height:100%;background:var(--p-smart);border-radius:2px}
.tabela{width:100%;border-collapse:collapse}
.tabela th{text-align:left;font-weight:500;color:var(--tinta-3);font-size:11px;padding:6px 8px;border-bottom:1px solid var(--linha)}
.tabela td{padding:8px;border-bottom:1px solid var(--papel-2);white-space:nowrap}
.tabela td.num{text-align:right;font-variant-numeric:tabular-nums}
.tabela tr.novo td{animation:entra 9s ease-in-out infinite}
@keyframes entra{0%,8%{background:#eef8dc}30%,100%{background:transparent}}
@media (max-width:640px){.app{grid-template-columns:1fr}.app .lateral{display:none}.tiles{grid-template-columns:1fr 1fr}.tiles .tile:last-child{display:none}.tabela .oculta{display:none}}

/* ---------- Tank: tela do ar ---------- */
.ar{color:#e8efe9;font-size:12.5px;padding:18px;display:grid;gap:14px}
.ar .topo{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ar .relogio{font-size:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ar .noar{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;background:#d8442f;color:#fff;padding:5px 10px;border-radius:6px}
.ar .noar i{width:7px;height:7px;border-radius:50%;background:#fff;animation:pisca 1.2s steps(2) infinite}
@keyframes pisca{50%{opacity:.2}}
.ar .tocando{background:#1a3830;border:1px solid #2c4c42;border-radius:12px;padding:14px}
.ar .tocando small{color:#93a59c;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ar .tocando b{display:block;font-size:17px;margin-top:4px}
.ar .tocando span{color:#a9bdb2}
.onda{display:flex;align-items:center;gap:2px;height:42px;margin-top:12px;position:relative}
.onda i{flex:1;background:#3d6457;border-radius:1px;min-width:2px}
.onda .cursor{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--citrico);left:0;animation:cursor 18s linear infinite}
@keyframes cursor{from{left:2%}to{left:98%}}
.ar .fila{display:grid;gap:6px}
.ar .item{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
.ar .item .h{color:#93a59c;font-variant-numeric:tabular-nums}
.ar .item .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar .item.break{background:rgba(196,106,43,.12);border-color:rgba(196,106,43,.35)}
.ar .tipo{font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.08);color:#cfdad3}
.ar .tipo.com{background:rgba(196,106,43,.25);color:#f3c39b}
.ar .tipo.hc{background:rgba(45,111,176,.3);color:#b7d3f0}
.ar .rodape-ar{display:flex;gap:16px;flex-wrap:wrap;color:#93a59c;font-size:11.5px}
.ar .rodape-ar b{color:#dfe8e2;font-weight:600}

/* ---------- Maestro: relógio ---------- */
.relogio-maestro{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:center;padding:20px}
.relogio-maestro svg{width:100%;height:auto}
.relogio-maestro .ponteiro{transform-origin:100px 100px;animation:gira 60s linear infinite}
.relogio-maestro ol{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:12.5px}
.relogio-maestro li{display:grid;grid-template-columns:44px 12px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;background:var(--papel)}
.relogio-maestro li .h{color:var(--tinta-3);font-variant-numeric:tabular-nums}
.relogio-maestro li i{width:10px;height:10px;border-radius:3px}
.relogio-maestro li .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relogio-maestro li.atual{background:#ece9f8;box-shadow:inset 2px 0 0 var(--p-maestro)}
@media (max-width:640px){.relogio-maestro{grid-template-columns:1fr}.relogio-maestro svg{max-width:220px;margin:0 auto}}

/* ---------- Signal ---------- */
.signal-ficha{padding:18px;display:grid;gap:14px;font-size:12.5px}
.signal-ficha .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.signal-ficha .cab b{font-size:16px;display:block}
.signal-ficha .cab small{color:var(--tinta-3)}
.horas{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:90px;padding-top:6px;border-bottom:1px solid var(--linha)}
.horas i{background:var(--p-signal);border-radius:3px 3px 0 0;opacity:.85;transform-origin:bottom;animation:sobe 1.2s ease-out both}
@keyframes sobe{from{transform:scaleY(0)}}
.eixo{display:flex;justify-content:space-between;color:var(--tinta-3);font-size:10.5px;margin-top:4px}
.deteccao{border:1px solid var(--linha);border-radius:10px;padding:10px 12px;display:grid;gap:8px}
.deteccao .onda i{background:#c9d7e6}
.deteccao .onda .marca-spot{position:absolute;top:-6px;bottom:-6px;left:38%;width:17%;border-radius:6px;background:rgba(45,111,176,.12);border:1.5px solid var(--p-signal);animation:acha 6s ease-in-out infinite}
@keyframes acha{0%,15%{opacity:0;transform:scaleX(.6)}30%,85%{opacity:1;transform:scaleX(1)}100%{opacity:0}}
.deteccao .linha-det{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.deteccao small{color:var(--tinta-3)}

/* ---------- console de compra (Find Audio) ---------- */
.console{display:grid;grid-template-columns:280px 1fr;font-size:13px;min-height:440px}
.console .filtros{background:var(--papel);border-right:1px solid var(--linha);padding:18px;display:grid;gap:16px;align-content:start}
.console .filtros h6{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.console .tags{display:flex;flex-wrap:wrap;gap:6px}
.console .tag{font:inherit;font-size:12.5px;padding:6px 10px;border-radius:8px;border:1px solid var(--linha);background:var(--branco);color:var(--tinta-2);cursor:pointer}
.console .tag[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:var(--papel)}
.console .tag[disabled]{opacity:.55;cursor:not-allowed}
.console input[type=range]{width:100%;accent-color:var(--verde)}
.console .valor{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.console .valor b{font-size:15px}
.console .resultado{padding:18px 20px;display:grid;gap:16px;align-content:start}
.console .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.console .kpi{border:1px solid var(--linha);border-radius:12px;padding:12px}
.console .kpi small{color:var(--tinta-3);font-size:11.5px;display:block}
.console .kpi b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.console .kpi.destaque{background:var(--verde);color:var(--papel);border-color:var(--verde)}
.console .kpi.destaque small{color:#a9bdb2}
.console .emissoras{display:grid;gap:6px}
.console .emissora{display:grid;grid-template-columns:1fr 90px 120px;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;background:var(--papel)}
.console .emissora .barra-dist{height:6px;border-radius:3px;background:var(--papel-3);overflow:hidden}
.console .emissora .barra-dist i{display:block;height:100%;background:var(--musgo);border-radius:3px;transition:width .4s}
.console .emissora .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.console .aviso{font-size:11.5px;color:var(--tinta-3)}
@media (max-width:820px){.console{grid-template-columns:1fr}.console .filtros{border-right:0;border-bottom:1px solid var(--linha)}}
@media (max-width:520px){.console .kpis{grid-template-columns:1fr 1fr}.console .kpi.destaque{grid-column:1/-1}.console .emissora{grid-template-columns:1fr 60px}.console .emissora .n{display:none}}

/* ---------- caminho do pedido (anunciar) ---------- */
.caminho{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.caminho .passo{background:rgba(255,255,255,.04);border:1px solid var(--linha-escura);border-radius:16px;padding:18px;position:relative}
.caminho .passo .quem{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--citrico)}
.caminho .passo b{display:block;margin-top:8px;font-size:16px}
.caminho .passo span{display:block;margin-top:6px;font-size:13.5px;color:#a9b9b0}
.caminho .passo:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--citrico);font-size:16px;z-index:1}
@media (max-width:980px){.caminho{grid-template-columns:1fr 1fr}.caminho .passo::after{display:none}}
@media (max-width:560px){.caminho{grid-template-columns:1fr}}

/* ---------- certificado (agências) ---------- */
.certificado{padding:18px;font-size:12.5px;display:grid;gap:12px}
.certificado .cab{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.certificado .cab b{display:block;font-size:15px}
.certificado .cab small{color:var(--tinta-3)}
.grade-ins{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.grade-ins i{aspect-ratio:1;border-radius:4px;background:#dcebc4;border:1px solid #c3dc9c}
.grade-ins i.sub{background:#fbefdc;border-color:#f0d9b5}
.grade-ins i.fut{background:var(--papel-2);border-color:var(--linha)}
.grade-ins i.agora{animation:marca 3s ease-in-out infinite}
@keyframes marca{0%,40%{background:var(--papel-2);border-color:var(--linha)}60%,100%{background:#dcebc4;border-color:#c3dc9c}}
.legenda-ins{display:flex;gap:14px;flex-wrap:wrap;color:var(--tinta-2);font-size:11.5px}
.legenda-ins span{display:inline-flex;align-items:center;gap:6px}
.legenda-ins i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- celular (parceiros) ---------- */
.celular{width:300px;max-width:100%;margin:0 auto;background:#0b1714;border-radius:42px;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.celular .tela-cel{background:var(--papel);border-radius:32px;overflow:hidden;color:var(--tinta);font-size:12.5px;min-height:560px;display:grid;grid-template-rows:auto 1fr auto}
.celular .status{display:flex;justify-content:space-between;padding:12px 22px 4px;font-size:11.5px;font-weight:600}
.celular .conteudo{padding:10px 18px;display:grid;gap:12px;align-content:start}
.celular .marca{font-size:15px}.celular .marca svg{width:16px;height:15px}
.celular h6{margin:4px 0 0;font-size:22px;letter-spacing:-.02em}
.celular .bloco{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:12px}
.celular .bloco small{display:block;color:var(--tinta-3);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.celular .bloco b{font-size:15px}
.celular .bloco.escuro-b{background:var(--verde);color:var(--papel);border-color:var(--verde)}
.celular .bloco.escuro-b small{color:#a9bdb2}
.celular .bloco.escuro-b b{font-size:26px;color:var(--citrico)}
.celular .abas{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linha);padding:10px 8px 16px;text-align:center;font-size:10.5px;color:var(--tinta-3)}
.celular .abas .ativa{color:var(--tinta);font-weight:600}

/* ---------- mapa do site ---------- */
.arvore{display:grid;gap:14px}
.arvore .ramo{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--linha)}
.arvore .ramo>div:first-child b{display:block;font-size:17px}
.arvore .ramo>div:first-child code{font-size:13px;color:var(--musgo)}
.arvore .ramo p{color:var(--tinta-2);font-size:15px}
@media (max-width:700px){.arvore .ramo{grid-template-columns:1fr;gap:6px}}
.decisao{border:1px solid var(--linha);background:var(--branco);border-radius:16px;padding:22px}
.decisao h4{font-size:17px;margin-bottom:8px}
.decisao p{font-size:15px;color:var(--tinta-2)}
.decisao .proposta{margin-top:10px;font-size:14px;color:var(--tinta);background:var(--papel);border-radius:10px;padding:10px 12px}
.decisao .proposta b{color:var(--musgo)}
@media (max-width:560px){.ciclo{height:560px}.ciclo .n3{top:65%}}
.relogio-maestro{grid-template-columns:170px 1fr;gap:16px;padding:16px}
.relogio-maestro li{grid-template-columns:38px 10px 1fr auto;gap:7px;font-size:12px}