/* ==========================================================================
   TLIMM — "Veja o Tlimm trabalhando" (demonstração animada das funções)
   Usado na página inicial e nas páginas /para. Depende das variáveis
   de cor/fonte de landing-v2.css.
   ========================================================================== */

.tf-sec{overflow:hidden}
.tf{display:grid;grid-template-columns:minmax(0,1fr) 600px;grid-template-areas:"lista palco";gap:36px;align-items:center;margin-top:52px}
.tf-lista{grid-area:lista;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tf-item{position:relative;border-radius:18px;border:1px solid var(--line2);background:var(--card);overflow:hidden;transition:border-color .3s,background .3s}
.tf-item.on{border-color:var(--line);background:linear-gradient(135deg,rgba(242,201,76,.09),rgba(242,201,76,.02)),var(--card)}
.tf-bt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;align-items:flex-start;width:100%;padding:14px 18px}
.tf-bt:focus-visible{outline:2px solid var(--gold-b);outline-offset:-2px;border-radius:18px}
.tf-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:rgba(242,201,76,.1);transition:transform .3s}
.tf-item.on .tf-ic{transform:scale(1.08);background:rgba(242,201,76,.2)}
.tf-txt{display:flex;flex-direction:column;gap:4px;min-width:0;padding-top:2px}
.tf-txt b{font:600 17px/1.25 var(--f-body);color:var(--text)}
.tf-desc{display:none;color:var(--dim);font-size:14.5px;line-height:1.5}
.tf-desc strong{color:var(--gold-b);font-weight:600}
.tf-item.on .tf-desc{display:block;animation:tfDesc .45s ease}
@keyframes tfDesc{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tf-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-b))}
.tf-item:not(.on) .tf-prog{width:0!important;transition:none!important}

/* palco + celular */
.tf-palco{grid-area:palco;position:relative;display:flex;justify-content:center;padding:20px 0}
.tf-glow{position:absolute;inset:-10% -20%;background:radial-gradient(ellipse 50% 45% at 50% 50%,rgba(242,201,76,.18),transparent 70%);pointer-events:none}
.tf-phone{position:relative;width:300px;height:620px;border-radius:46px;background:#050505;padding:11px;box-shadow:0 50px 100px -20px rgba(0,0,0,.85),0 0 0 1.5px #2a2620,inset 0 0 0 1.5px #1a1714}
.tf-ilha{position:absolute;top:20px;left:50%;width:92px;height:26px;margin-left:-46px;background:#000;border-radius:16px;z-index:20}
.tf-tela{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#141210;font-family:var(--f-body);color:var(--text)}
.tf-toasts{position:absolute;inset:0;pointer-events:none}
.tf-toast{position:absolute;display:flex;align-items:center;gap:10px;max-width:190px;padding:11px 15px;border-radius:16px;background:rgba(28,24,19,.94);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.55);font-size:13.5px;line-height:1.3;color:var(--text);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .4s,transform .4s}
.tf-toast b{display:block;font-size:14px}
.tf-toast .e{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(98,195,112,.16);font-size:16px}
.tf-toast.vis{opacity:1;transform:none}
.tf-toast.l{left:0}.tf-toast.r{right:0}
.tf-legenda{display:none}

/* ---------- elementos das telas ---------- */
.tf-s{position:absolute;inset:0;display:flex;flex-direction:column;padding:56px 16px 18px;gap:9px;animation:tfIn .45s ease}
@keyframes tfIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.tf-sb{position:absolute;top:16px;left:26px;right:24px;display:flex;justify-content:space-between;font:600 12.5px var(--f-body);z-index:19}
.tf-o{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.tf-o.vis{opacity:1;transform:none}
.tf-lbl{font:600 10.5px var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.tf-biz{display:flex;gap:10px;align-items:center}
.tf-av{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:600 19px var(--f-display);color:#1A1300;background:linear-gradient(180deg,#F7D766,#D4A91F)}
.tf-biz b{display:block;font:600 15.5px var(--f-display)}.tf-biz span{font-size:11px;color:var(--faint)}
.tf-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 12px;border-radius:13px;background:#1E1B17;border:1.5px solid #2E2A24;font-size:13px;transition:border-color .25s,background .25s,transform .2s}
.tf-row b{display:block;font-weight:600}.tf-row small{font-size:10.5px;color:var(--faint)}
.tf-row em{font-style:normal;font:500 12px var(--f-mono);color:var(--gold-b);white-space:nowrap;text-align:right}
.tf-row.sel{border-color:var(--gold-b);background:rgba(242,201,76,.11)}
.tf-tap{animation:tfTap .5s ease}
@keyframes tfTap{0%{transform:scale(1)}40%{transform:scale(.95)}100%{transform:scale(1)}}
.tf-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tf-slot{text-align:center;padding:9px 0;border-radius:10px;background:#1E1B17;border:1.5px solid #2E2A24;font:500 12px var(--f-mono)}
.tf-slot.x{color:#57514a;text-decoration:line-through}
.tf-slot.sel{border-color:var(--gold-b);background:rgba(242,201,76,.15);color:var(--gold-b)}
.tf-btn{margin-top:auto;text-align:center;padding:13px;border-radius:13px;background:linear-gradient(180deg,#F2C94C,#D4A91F);color:#1A1300;font:600 12px var(--f-label);letter-spacing:.07em;text-transform:uppercase}
.tf-campo{border-radius:11px;background:#1E1B17;border:1px solid #2E2A24;padding:8px 11px;font-size:12px}
.tf-campo small{display:block;color:var(--faint);font-size:10.5px;margin-bottom:2px}
.tf-cursor::after{content:"|";animation:tfPisca 1s step-end infinite;color:var(--gold-b);margin-left:1px}
@keyframes tfPisca{50%{opacity:0}}

/* bottom sheet de opções */
.tf-sheet{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 18px;background:#221E18;border-radius:22px 22px 0 0;box-shadow:0 -20px 40px rgba(0,0,0,.6);transform:translateY(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:12;display:flex;flex-direction:column;gap:7px}
.tf-sheet.vis{transform:none}
.tf-sheet h4{margin:0 0 4px;font:600 15px var(--f-display)}
.tf-veu{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s;z-index:11}
.tf-veu.vis{opacity:1}

/* whatsapp */
.tf-wa{position:absolute;inset:0;display:flex;flex-direction:column;background:#0b141a;animation:tfIn .45s ease}
.tf-wah{display:flex;gap:10px;align-items:center;padding:52px 14px 11px;background:#1f2c33}
.tf-wah .tf-av{border-radius:50%;width:36px;height:36px;font-size:16px}
.tf-wah b{display:block;font-size:14px}.tf-wah span{font-size:11px;color:#8fd19e}
.tf-wab{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.tf-msg{max-width:85%;padding:8px 11px 6px;border-radius:12px;font-size:13px;line-height:1.38;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .3s,transform .3s}
.tf-msg.vis{opacity:1;transform:none}
.tf-msg.c{align-self:flex-start;background:#202c33;border-top-left-radius:3px}
.tf-msg.p{align-self:flex-end;background:#005c4b;border-top-right-radius:3px}
.tf-msg i{display:block;text-align:right;font-style:normal;font-size:9.5px;opacity:.6;margin-top:2px}
.tf-msg .bot{display:block;font:600 9.5px var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:#9be3a8;margin-bottom:3px}
.tf-lnk{margin-top:7px;background:rgba(0,0,0,.25);border-radius:9px;padding:8px;display:flex;gap:8px;align-items:center}
.tf-lnk img{width:30px;height:30px;border-radius:7px}
.tf-lnk b{display:block;font-size:12px}.tf-lnk span{font-size:10.5px;opacity:.75;word-break:break-all}
.tf-dig{align-self:flex-end;background:#005c4b;border-radius:12px;padding:10px 12px;display:none;gap:4px}
.tf-dig.vis{display:flex}
.tf-dig i{width:6px;height:6px;border-radius:50%;background:#cfe;animation:tfDig 1s infinite}
.tf-dig i:nth-child(2){animation-delay:.15s}.tf-dig i:nth-child(3){animation-delay:.3s}
@keyframes tfDig{0%,100%{opacity:.3}50%{opacity:1}}
.tf-wain{display:flex;gap:8px;align-items:flex-end;padding:8px 10px 14px}
.tf-wain div{flex:1;min-height:36px;border-radius:18px;background:#202c33;padding:9px 12px;font-size:12.5px;line-height:1.35;color:#e9edef}
.tf-wain span{flex:none;width:36px;height:36px;border-radius:50%;background:#00a884;display:grid;place-items:center;font-size:15px}

/* pix */
.tf-qr{align-self:center;width:150px;height:150px;padding:10px;border-radius:14px;background:#fff;position:relative}
.tf-qr svg{width:100%;height:100%;display:block}
.tf-ok{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:#141210;opacity:0;transition:opacity .4s;padding:20px}
.tf-ok.vis{opacity:1}
.tf-ok svg{width:96px;height:96px}
.tf-ok b{font:600 21px var(--f-display)}
.tf-ok .v{font:500 34px var(--f-mono);color:var(--ok)}
.tf-ok span{font-size:12px;color:var(--dim)}

/* notificação push */
.tf-push{position:absolute;top:10px;left:10px;right:10px;z-index:21;display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:18px;background:rgba(40,36,30,.97);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 30px rgba(0,0,0,.6);transform:translateY(-130%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tf-push.vis{transform:none}
.tf-push img{width:30px;height:30px;border-radius:8px}
.tf-push b{display:block;font-size:12.5px}.tf-push span{font-size:11.5px;color:var(--dim)}

/* agenda / tickets */
.tf-met{border-radius:14px;background:#1E1B17;border:1px solid #2E2A24;padding:11px 13px}
.tf-met small{display:block;font:600 9.5px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tf-met .v{font:500 24px var(--f-mono);color:var(--gold-b)}
.tf-tk{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#1E1B17;border:1px solid #2E2A24;font-size:12px}
.tf-tk .t{font:500 11.5px var(--f-mono);color:var(--gold-b);width:38px;flex:none}
.tf-tk .w{flex:1;min-width:0}.tf-tk .w b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-tk .w span{color:var(--faint);font-size:10.5px}
.tf-tk .st{font:500 10.5px var(--f-mono);color:var(--ok);white-space:nowrap}
.tf-tk.novo{border-color:var(--gold-b);background:rgba(242,201,76,.1)}
.tf-resp{margin-top:6px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:10.5px;line-height:1.45;color:var(--dim)}
.tf-resp b{color:var(--text)}
.tf-acoes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.tf-acoes span{text-align:center;padding:8px 0;border-radius:9px;font:600 10.5px var(--f-body);background:#2a251e;border:1px solid #3a342b}
.tf-acoes span.ok{background:rgba(98,195,112,.16);border-color:rgba(98,195,112,.4);color:#9fe0a9}

/* planos */
.tf-plano{border-radius:16px;padding:14px;background:linear-gradient(160deg,#2C2418,#16120D 75%);border:1px solid rgba(242,201,76,.4)}
.tf-plano small{font:600 9.5px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-b)}
.tf-plano b{display:block;font:600 18px var(--f-display);margin-top:4px}
.tf-plano .v{font:500 20px var(--f-mono);color:var(--gold-b);margin-top:2px}
.tf-dots{display:flex;gap:7px;margin-top:8px}
.tf-dots i{width:26px;height:26px;border-radius:50%;border:1.5px solid #3a342b;display:grid;place-items:center;font-style:normal;font-size:12px;transition:background .3s,border-color .3s}
.tf-dots i.on{background:var(--gold-b);border-color:var(--gold-b);color:#1A1300}
.tf-badge{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(98,195,112,.12);border:1px solid rgba(98,195,112,.35);font-size:12px;color:#bfe9c6}

/* caixa */
.tf-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tf-kpis .tf-met .v{font-size:15px}
.tf-kpis .tf-met.lucro{grid-column:1 / -1}
.tf-kpis .tf-met.lucro .v{color:var(--ok);font-size:26px}
.tf-up{font:600 11px var(--f-mono);color:var(--ok)}
.tf-barras{display:flex;align-items:flex-end;gap:7px;height:110px;padding:10px 10px 0;border-radius:14px;background:#1E1B17;border:1px solid #2E2A24}
.tf-barras i{flex:1;height:0;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#F2C94C,#8a6d12);transition:height .9s cubic-bezier(.2,.8,.2,1)}
.tf-barras i:last-child{background:linear-gradient(180deg,#7fe08c,#2f7a3a)}
.tf-ex{font-size:9.5px;color:var(--faint);text-align:center}

/* marketing */
.tf-arte{border-radius:16px;padding:16px;background:radial-gradient(ellipse at 100% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(150deg,#F7D766,#C9981A);color:#1A1300;text-align:center}
.tf-arte small{font:600 9.5px var(--f-label);letter-spacing:.16em;text-transform:uppercase}
.tf-arte b{display:block;font:600 21px/1.1 var(--f-display);margin:6px 0 10px}
.tf-arte .hs{display:flex;justify-content:center;gap:6px}
.tf-arte .hs span{padding:5px 9px;border-radius:999px;background:rgba(26,19,0,.85);color:#F2C94C;font:500 11px var(--f-mono)}
.tf-arte .nm{margin-top:10px;font:600 11px var(--f-body);opacity:.8}
.tf-barra{height:8px;border-radius:99px;background:#2a251e;overflow:hidden}
.tf-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#62C370,#9fe0a9);transition:width 2s linear}

/* equipe */
.tf-prof{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;background:#1E1B17;border:1.5px solid #2E2A24;transition:border-color .25s,background .25s}
.tf-prof .tf-av{width:38px;height:38px;border-radius:50%;font-size:16px}
.tf-prof b{display:block;font-size:13px}.tf-prof span{font-size:10.5px;color:var(--faint)}
.tf-prof.sel{border-color:var(--gold-b);background:rgba(242,201,76,.1)}

/* ---------- responsivo ---------- */
@media (max-width:1180px){ .tf{grid-template-columns:minmax(0,1fr) 520px} .tf-toast{max-width:165px} }
@media (max-width:980px){
  .tf{grid-template-columns:minmax(0,1fr);grid-template-areas:"lista" "palco" "legenda";gap:10px;margin-top:30px}
  .tf-lista{flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tf-lista::-webkit-scrollbar{display:none}
  .tf-item{flex:none;scroll-snap-align:center;border-radius:999px}
  .tf-bt{padding:8px 14px 8px 8px;align-items:center;gap:8px}
  .tf-ic{width:30px;height:30px;font-size:15px;border-radius:50%}
  .tf-txt b{font-size:13.5px;white-space:nowrap}
  .tf-item.on .tf-desc{display:none}
  .tf-legenda{grid-area:legenda;display:block;text-align:center;padding:4px 6px 0;min-height:76px}
  .tf-legenda b{display:block;font:600 19px/1.25 var(--f-display)}
  .tf-legenda span{display:block;margin-top:6px;color:var(--dim);font-size:14.5px;line-height:1.5}
  .tf-legenda strong{color:var(--gold-b)}
  .tf-toast,.tf-toast.l,.tf-toast.r{left:50%;right:auto;top:auto!important;bottom:6px;max-width:260px;width:max-content;font-size:12.5px;padding:9px 13px;transform:translate(-50%,12px) scale(.96)}
  .tf-toast.vis{transform:translate(-50%,0)}
}
@media (max-width:380px){ .tf-phone{transform:scale(.9);transform-origin:top center;margin-bottom:-60px} }
@media (prefers-reduced-motion:reduce){ .tf *{animation-duration:.01s!important;transition-duration:.01s!important} }