/* TáNaFila · "o anúncio que aprende" (26/10/2026). Peça interativa usada no site, na proposta, na demonstração e em /anuncio/.
   Marcação: <div data-ciclo></div> + ciclo.css + ciclo.js. Opcional: data-ciclo="escuro" para fundo escuro. */
.ciclo{--c-noite:#14161B;--c-noite2:#1C1F26;--c-noite3:#262A33;--c-papel:#F4F1EA;--c-senha:#F0582A;--c-brasa:#FFB547;--c-linho:#E4DED2;--c-grafite:#5A5F6B;--c-nevoa:#9AA0AB;--c-verde:#2E8B57;
  background:var(--c-branco,#fff);color:var(--c-noite);border-radius:28px;padding:22px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative;overflow:hidden}
.ciclo.escuro{background:var(--c-noite2);color:var(--c-papel);border:1px solid rgba(244,241,234,.08)}
.ci-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.ci-modo{display:inline-flex;background:var(--c-linho);border-radius:999px;padding:4px}
.escuro .ci-modo{background:var(--c-noite)}
.ci-modo button{all:unset;cursor:pointer;font:600 13px/1 Inter,sans-serif;padding:10px 14px;border-radius:999px;color:var(--c-grafite)}
.escuro .ci-modo button{color:var(--c-nevoa)}
.ci-modo button.on{background:#fff;color:var(--c-noite);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.escuro .ci-modo button.on{background:var(--c-senha);color:#fff}
.ci-modo button:focus-visible,.ci-bts button:focus-visible{outline:2px solid var(--c-senha);outline-offset:2px}
.ci-bts{display:flex;align-items:center;gap:8px}
.ci-bts .sem{font:400 22px/1 Anton,Impact,sans-serif;margin-right:6px}
.ci-bts .sem small{font:600 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c-nevoa);margin-right:6px}
.ci-bts button{all:unset;cursor:pointer;font:600 13px/1 Inter,sans-serif;padding:11px 16px;border-radius:999px;background:var(--c-senha);color:#fff;box-shadow:0 10px 24px -10px rgba(240,88,42,.7);transition:transform .15s}
.ci-bts button:hover{transform:translateY(-1px)}
.ci-bts button.sec{background:var(--c-linho);color:var(--c-noite);box-shadow:none}
.escuro .ci-bts button.sec{background:var(--c-noite3);color:var(--c-papel)}
.ci-bts button.sec.on{background:var(--c-verde);color:#fff}
.ci-bts button[disabled]{opacity:.5;cursor:default;transform:none}
.ci-svg{display:block;width:100%;height:auto;overflow:visible}
.ci-svg text{font-family:Inter,sans-serif}
.ci-svg .tt{font-family:Anton,Impact,sans-serif;font-size:22px}
.ci-rodape{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:6px;align-items:stretch}
.ci-passo{background:var(--c-papel);border-radius:18px;padding:14px 16px;font-size:15px;line-height:1.5;min-height:92px;display:flex;gap:12px;align-items:flex-start}
.escuro .ci-passo{background:var(--c-noite)}
.ci-passo .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--c-senha);color:#fff;display:grid;place-items:center;font:400 15px Anton,Impact,sans-serif}
.ci-passo b{display:block;font-weight:600;margin-bottom:2px}
.ci-passo span{color:var(--c-grafite)}
.escuro .ci-passo span{color:rgba(244,241,234,.72)}
.ci-passo.troca{animation:ci-troca .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ci-troca{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ci-medidor{background:var(--c-noite);color:var(--c-papel);border-radius:18px;padding:14px 16px}
.escuro .ci-medidor{background:var(--c-noite3)}
.ci-medidor small{display:block;font:600 11px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--c-nevoa)}
.ci-medidor .num{font:400 40px/1 Anton,Impact,sans-serif;margin:8px 0 6px}
.ci-medidor .num em{font-style:normal;color:var(--c-senha)}
.ci-medidor .num span{font:500 14px Inter,sans-serif;color:var(--c-nevoa);margin-left:4px}
.ci-semanas{display:flex;gap:6px;align-items:flex-end;height:46px;margin-top:8px}
.ci-semanas i{flex:1;background:var(--c-noite3);border-radius:6px 6px 3px 3px;position:relative;transition:height .6s cubic-bezier(.2,.8,.2,1);min-height:4px}
.escuro .ci-semanas i{background:var(--c-noite2)}
.ci-semanas i.v{background:var(--c-senha)}
.ci-semanas i.c{background:#5A5F6B}
.ci-semanas i b{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font:600 9.5px Inter,sans-serif;color:var(--c-nevoa)}
.ci-nota{font-size:11.5px;color:var(--c-nevoa);margin:20px 0 0}
@media (max-width:760px){.ciclo{padding:14px;border-radius:22px}.ci-rodape{grid-template-columns:1fr}.ci-top{justify-content:center}.ci-bts{width:100%;justify-content:center}}