@layer components{.slides{--slide-gap:10px;--slide-w:calc(100vw - 76px);--slide-h:max(500px, calc(100svh - var(--header-h,76px) - 124px));--card-pad:20px;margin-top:clamp(28px,5vw,48px);position:relative}@media (min-width:900px){.slides{--slide-gap:24px;--slide-w:min(1040px, calc(100vw - 280px));--slide-h:clamp(540px, calc(100svh - var(--header-h,76px) - 100px), 720px);--card-pad:clamp(14px, calc((100svh - 692px) / 2), clamp(20px, 3vh, 48px))}}@media (min-width:1481px){.slides{max-width:1480px;margin-inline:auto}.slides-trilho{-webkit-mask-image:linear-gradient(90deg,#0000,#000 72px calc(100% - 72px),#0000);mask-image:linear-gradient(90deg,#0000,#000 72px calc(100% - 72px),#0000)}}.slides-trilho{gap:var(--slide-gap);padding-inline:calc((100% - var(--slide-w)) / 2);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-block:-22px -34px;padding-block:24px 60px;display:flex;position:relative;overflow:auto hidden}.slides-trilho::-webkit-scrollbar{display:none}.slide{flex:0 0 var(--slide-w);height:var(--slide-h);scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .52s var(--ease-stamp), transform .52s var(--ease-stamp);position:relative}.slide:not([data-ativo]){opacity:.7}.slide .cena-cabeca,.slide .cena-passos{transition:opacity .52s var(--ease-stamp)}.slide:not([data-ativo]) .cena-cabeca,.slide:not([data-ativo]) .cena-passos{opacity:0}.slide-card{border-radius:clamp(20px,2.6vw,32px);height:100%;box-shadow:0 18px 40px #0000002e}.slide-ir{z-index:2;cursor:pointer;background:0 0;border:0;border-radius:clamp(20px,2.6vw,32px);position:absolute;inset:0}@media (min-width:900px){.slide:not([data-ativo]){transform:scale(.95)}}.slides-barra{justify-content:center;align-items:center;gap:8px;display:flex}.slides-tabs{align-items:center;gap:6px;margin:0;padding:0;list-style:none;display:flex}.slides-tab{--passo-cor:var(--action);border:1px solid color-mix(in srgb, var(--passo-cor) 30%, transparent);background:color-mix(in srgb, var(--passo-cor) 14%, var(--bg));color:var(--passo-tinta,var(--passo-cor));letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:5px 14px 5px 8px;font-size:.8125rem;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.slides-tab[data-cor=streak]{--passo-cor:var(--streak)}.slides-tab[data-cor=xp]{--passo-cor:var(--xp)}.slides-tab[data-cor=heart]{--passo-cor:var(--heart)}.slides-tab{--passo-tinta:color-mix(in srgb, var(--passo-cor) 62%, black)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .slides-tab{--passo-tinta:var(--passo-cor)}}:root[data-theme=dark] .slides-tab{--passo-tinta:var(--passo-cor)}.slides-tab:not([data-on]){border-color:var(--outline);background:color-mix(in srgb, var(--text) 5%, var(--bg));color:color-mix(in srgb, var(--muted) 75%, var(--text))}.slides-tab:not([data-on]):hover,.slides-tab:focus-visible{color:var(--text)}.slides-tab-n{background:color-mix(in srgb, var(--passo-cor) 12%, transparent);font-variant-numeric:tabular-nums;border-radius:999px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 5px;display:inline-flex}.slides-tab:not([data-on]) .slides-tab-n{background:color-mix(in srgb, var(--text) 8%, transparent)}.slides-tab-tempo{transform-origin:0;background:var(--passo-cor);width:100%;height:2px;animation:linear forwards slides-tempo;position:absolute;bottom:0;left:0}@keyframes slides-tempo{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.slides-tocar{position:static}.slides-barra .slides-tocar{margin-top:0}.slides-barra :focus-visible{outline-color:color-mix(in srgb, var(--focus) 70%, black)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .slides-barra :focus-visible{outline-color:var(--focus)}}:root[data-theme=dark] .slides-barra :focus-visible{outline-color:var(--focus)}.slides .cena-passos .cena-tocar{display:none}@media (max-width:899px){.slides-barra{left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;background:color-mix(in srgb, var(--surface) 62%, transparent);border:1px solid color-mix(in srgb, var(--text) 14%, transparent);-webkit-backdrop-filter:blur(22px)saturate(1.6);backdrop-filter:blur(22px)saturate(1.6);transition:opacity .2s var(--ease-stamp), transform .24s var(--ease-stamp);border-radius:999px;gap:6px;padding:6px;position:fixed;transform:translate(-50%);box-shadow:0 12px 36px #00000059,inset 0 1px #ffffff1f}.slides-barra[data-acesa=true]{transition-delay:.22s}.slides-barra[data-acesa=false]{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s var(--ease-stamp), transform .24s var(--ease-stamp), visibility 0s linear .24s;transform:translate(-50%)translateY(18px)}.slides-tab{padding:4px 10px 4px 4px;font-size:.75rem}.slides-tab,.slides-tocar{position:relative;overflow:visible}.slides-tab:before,.slides-tocar:before{content:"";position:absolute;inset:-8px -4px}.slides-tab-tempo{border-radius:2px;width:auto;left:12px;right:12px}.slides{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}.slides .cena-passo-btn{position:relative}.slides .cena-passo-btn:before{content:"";position:absolute;inset:-12px 0 -16px}.slides-tab:not([data-on]) .slides-tab-marca{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.slides-tab:not([data-on]){padding:4px}.slides-tocar{width:34px;height:34px}}@media (min-width:900px){.slides{padding-bottom:clamp(32px,5vh,56px)}.slides-barra{z-index:1;margin-top:2px;position:relative}}@media (min-width:760px) and (max-width:899px){.slides{--slide-w:min(600px, calc(100vw - 160px));--slide-h:max(500px, min(860px, calc(100svh - var(--header-h,76px) - 124px)));padding-bottom:max(calc(90px + env(safe-area-inset-bottom,0px)), calc(100svh - var(--header-h,76px) - var(--slide-h) - 34px + env(safe-area-inset-bottom,0px)))}}@media (max-width:899px) and (max-height:500px){.slides-barra,.slides-barra[data-acesa=false]{z-index:1;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;margin-top:2px;position:relative;bottom:auto;left:auto;transform:none}.slides{padding-bottom:32px}}@media (prefers-reduced-motion:reduce){.slide,.slide .cena-cabeca,.slide .cena-passos,.slides-barra,.slides-barra[data-acesa=true],.slides-barra[data-acesa=false]{transition:none}.slides-tab-tempo{display:none}}}
