/* Página /telas: resumo em slides das principais telas do app. Sem JavaScript vira uma faixa rolável; com js/telas.js ganha setas, pontos e teclado. */
.tl{padding-block:8px 56px}
.tl-stage{position:relative}
.tl-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 12px}
.tl-track::-webkit-scrollbar{display:none}
.tl-track:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:var(--radius)}
.tl-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.tl-slide figure{margin:0;background:var(--bg2);border-bottom:1px solid var(--line)}
.tl-slide img{display:block;width:100%;height:auto;aspect-ratio:1280/518}
.tl-slide figcaption{padding:8px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--card)}
.tl-txt{padding:4px 24px 26px;max-width:760px}
.tl-n{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink,#0A6DB3);margin:0 0 8px}
.tl-txt h2{font-size:clamp(22px,3.2vw,30px);line-height:1.2;margin:0 0 10px;color:var(--navy)}
.tl-txt p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.tl-txt p+p{margin-top:8px}
.tl-slide.fim{justify-content:center;align-items:flex-start;padding:clamp(28px,5vw,56px);gap:0;background:var(--navy2,#071B3D)}
.tl-slide.fim .tl-n{color:var(--teal)}
.tl-slide.fim h2{color:#fff;font-size:clamp(26px,4vw,38px);margin:0 0 12px}
.tl-slide.fim p{color:#C7D3E6;max-width:560px}
.tl-slide.fim .ctas{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
:root[data-theme="dark"] .tl-slide.fim{background:var(--dark-card)}
.tl-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.tl-pontos{display:flex;gap:8px;align-items:center}
.tl-pontos button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .15s,transform .15s}
.tl-pontos button[aria-current="true"]{background:var(--btn,#0A6DB3);transform:scale(1.25)}
.tl-pontos button:focus-visible,.tl-setas button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.tl-setas{display:flex;gap:8px}
.tl-setas button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:18px;cursor:pointer}
.tl-setas button:hover:not(:disabled){border-color:var(--blue)}
.tl-setas button:disabled{opacity:.4;cursor:default}
.tl-js .tl-setas,.tl-js .tl-pontos{display:flex}
.tl-nojs .tl-setas,.tl-nojs .tl-pontos{display:none}
@media(max-width:640px){.tl-txt{padding:2px 18px 22px}.tl-slide figcaption{font-size:12px}}
@media(prefers-reduced-motion:reduce){.tl-track{scroll-behavior:auto}}