/* Telas animadas dos projetos. Recriações com dados fictícios.
   Cada .tela é um container: tudo dentro escala com a largura (cqw). */
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

.tela { position: relative; width: 100%; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden; isolation: isolate; }
.tela * { box-sizing: border-box; margin: 0; }
.t-in { position: absolute; inset: 0; font-size: 1.55cqw; line-height: 1.25; font-family: "Instrument Sans", "Onest", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
.t-in b { font-weight: 650; }
.cnt { animation: t-cnt var(--ciclo, 9s) infinite; counter-reset: n var(--n); }
.cnt::after { content: counter(n); }
@keyframes t-cnt { 0% { --n: 0 } 30%, 100% { --n: var(--to) } }
@keyframes t-in { 0%, 4% { opacity: 0; transform: translateY(.6em) } 10%, 88% { opacity: 1; transform: none } 96%, 100% { opacity: 0; transform: none } }
.t-anim { animation: t-in var(--ciclo, 9s) infinite both; animation-delay: calc(var(--i, 0) * .32s); }

/* 1. Gestão para administradora */
.g { display: grid; grid-template-columns: 22% 1fr; background: #F2F1EC; color: #1C2A31; }
.g-side { background: #1C2A31; color: #C9D4D6; padding: 1.4em 1em; display: flex; flex-direction: column; gap: .55em; font-size: .9em; }
.g-logo { display: flex; align-items: center; gap: .5em; color: #fff; margin-bottom: 1em; }
.g-logo i { width: 1.4em; height: 1.4em; border-radius: .35em; background: linear-gradient(135deg, #2A8C82, #8FD3C8); }
.g-side span { padding: .45em .6em; border-radius: .4em; }
.g-side span.on { background: #2A8C82; color: #fff; }
.g-side .g-mod { margin-top: auto; font-size: .8em; opacity: .6; }
.g-main { padding: 1.3em 1.5em; display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.g-top { display: flex; justify-content: space-between; align-items: center; }
.g-top b { font-size: 1.25em; }
.g-busca { border: 1px solid #CFD5D3; border-radius: 2em; padding: .35em 1em; font-size: .8em; color: #7A878A; background: #fff; }
.g-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.g-kpis div { background: #fff; border-radius: .6em; padding: .6em .8em; display: grid; gap: .15em; }
.g-kpis small { font-size: .75em; color: #6B7A7E; }
.g-kpis b { font-size: 1.5em; font-variant-numeric: tabular-nums; }
.g-lista { background: #fff; border-radius: .6em; padding: .3em .9em; display: grid; }
.g-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: .8em; align-items: center; padding: .55em 0; border-bottom: 1px solid #ECEDEA; font-size: .9em; }
.g-row:last-child { border: 0; }
.g-row em { font-style: normal; color: #6B7A7E; }
.pill { position: relative; display: inline-grid; font-size: .78em; font-weight: 600; }
.pill > * { grid-area: 1 / 1; padding: .2em .7em; border-radius: 2em; text-align: center; }
.pill .pa { background: #FBEBD3; color: #9A5A0B; animation: t-pa var(--ciclo, 9s) infinite; animation-delay: calc(var(--i, 0) * .32s); }
.pill .pb { background: #D5EFEA; color: #1C6E64; animation: t-pb var(--ciclo, 9s) infinite; animation-delay: calc(var(--i, 0) * .32s); }
@keyframes t-pa { 0%, 45% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes t-pb { 0%, 45% { opacity: 0; transform: scale(.8) } 52%, 100% { opacity: 1; transform: none } }

/* 2. Terceirização: ponto e postos */
.p { display: grid; grid-template-columns: 34% 1fr; gap: 1.6em; padding: 1.4em 1.8em; background: #12233A; color: #E8EEF6; }
.p-fone { background: #0A1424; border-radius: 1.6em; border: .35em solid #2A3B55; padding: 1.1em .9em; display: flex; flex-direction: column; gap: .7em; align-items: center; text-align: center; position: relative; overflow: hidden; }
.p-fone small { font-size: .72em; color: #8FA2BD; }
.js-relogio { font-size: 2.1em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.p-mapa { width: 100%; aspect-ratio: 1.3; border-radius: .8em; position: relative; overflow: hidden;
  background: #183056 repeating-linear-gradient(90deg, transparent 0 1.6em, rgba(255,255,255,.06) 1.6em calc(1.6em + 1px)),
              repeating-linear-gradient(0deg, transparent 0 1.6em, rgba(255,255,255,.06) 1.6em calc(1.6em + 1px)); }
.p-mapa::before { content: ""; position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px dashed #F2B63D; background: rgba(242,182,61,.12); }
.p-mapa::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9em; height: .9em; translate: -50% -50%; border-radius: 50%; background: #F2B63D; box-shadow: 0 0 0 0 rgba(242,182,61,.6); animation: t-pulso 2s infinite; }
@keyframes t-pulso { to { box-shadow: 0 0 0 1.6em rgba(242,182,61,0) } }
.p-btn { width: 100%; padding: .7em; border-radius: .7em; background: #F2B63D; color: #12233A; font-weight: 700; animation: t-btn 9s infinite; }
@keyframes t-btn { 0%, 30% { transform: none } 33% { transform: scale(.94) } 36%, 100% { transform: none } }
.p-ok { position: absolute; inset: auto .6em .6em; background: #1F8A5B; color: #fff; border-radius: .7em; padding: .6em; font-size: .8em; font-weight: 600; animation: t-ok 9s infinite; }
@keyframes t-ok { 0%, 34% { opacity: 0; transform: translateY(1em) } 38%, 85% { opacity: 1; transform: none } 92%, 100% { opacity: 0 } }
.p-dir { display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.p-dir h4 { font-size: 1em; font-weight: 600; display: flex; justify-content: space-between; }
.p-dir h4 small { color: #8FA2BD; font-weight: 400; }
.p-escala { display: grid; grid-template-columns: 6.5em repeat(7, 1fr); gap: .3em; font-size: .75em; }
.p-escala span { padding: .35em .2em; text-align: center; border-radius: .3em; }
.p-escala .h { color: #8FA2BD; }
.p-escala .n { text-align: left; color: #C7D3E3; }
.p-escala .dd { background: #F2B63D; color: #12233A; font-weight: 700; animation: t-in 9s infinite both; animation-delay: calc(var(--i) * .12s); }
.p-escala .ff { background: rgba(255,255,255,.06); color: #6C7F99; }
.p-hoje { display: grid; gap: .35em; font-size: .8em; }
.p-hoje div { display: flex; justify-content: space-between; background: rgba(255,255,255,.05); padding: .45em .7em; border-radius: .4em; }
.p-hoje i { font-style: normal; color: #6FD3A2; }

/* 3. marcaí */
.m { background: #F4F5F3; color: #14313A; display: grid; grid-template-rows: auto 1fr; }
.m-top { background: #14313A; color: #F4F5F3; padding: .9em 1.5em; display: flex; align-items: center; justify-content: space-between; }
.m-marca { font-weight: 700; font-size: 1.35em; letter-spacing: -.02em; }
.m-marca span { color: #C4922E; }
.m-top small { font-size: .78em; opacity: .75; }
.m-corpo { padding: 1.1em 1.5em; display: grid; grid-template-columns: 1fr 13em; gap: 1.2em; min-height: 0; }
.m-tab { background: #fff; border-radius: .6em; overflow: hidden; font-size: .82em; font-variant-numeric: tabular-nums; align-self: start; }
.m-tab div { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr) .9fr; padding: .5em .9em; border-bottom: 1px solid #E8EBE8; }
.m-tab .h { background: #E9EDEC; font-weight: 600; font-size: .9em; color: #4C6168; }
.m-tab .r { animation: t-in 9s infinite both; animation-delay: calc(var(--i) * .3s); }
.m-tab .pos { color: #2F8A5C; font-weight: 600; }
.m-tab .neg { color: #B4472F; font-weight: 600; }
.m-lado { display: grid; gap: .8em; align-content: start; }
.m-card { background: #14313A; color: #F4F5F3; border-radius: .7em; padding: .9em 1em; display: grid; gap: .25em; }
.m-card small { font-size: .75em; opacity: .7; }
.m-card b { font-size: 1.9em; color: #E2B95E; font-variant-numeric: tabular-nums; }
.m-aj { background: #fff; border-radius: .7em; padding: .8em 1em; font-size: .78em; display: grid; gap: .45em; }
.m-aj p { display: flex; justify-content: space-between; gap: .5em; }
.m-aj i { font-style: normal; background: #F3E6C8; color: #7E5A12; padding: .05em .55em; border-radius: 1em; animation: t-pa 9s infinite; }
.m-aj i + i { background: #D7EEDF; color: #23704A; animation-name: t-pb; }
.m-aj .st { display: inline-grid; } .m-aj .st i { grid-area: 1/1; }
.m-aj i.ok { background: #D7EEDF; color: #23704A; animation: none; }

/* 4. VK Barbershop */
.v { background: radial-gradient(120% 90% at 85% 0%, #2A1015 0%, #0B0B0D 55%); color: #E9E9EC; padding: 1.2em 1.6em; display: grid; grid-template-columns: 1fr 15em; gap: 1.4em; }
.v-esq { display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.v-marca { font-weight: 800; letter-spacing: .12em; font-size: 1.1em; display: flex; align-items: center; gap: .6em; }
.v-poste { width: .7em; height: 1.8em; border-radius: .35em; background: repeating-linear-gradient(-35deg, #D7263D 0 .35em, #fff .35em .55em, #1FB5C9 .55em .9em, #fff .9em 1.1em); background-size: 100% 2.2em; animation: t-poste 1.6s linear infinite; }
@keyframes t-poste { to { background-position: 0 2.2em } }
.v-barb { display: flex; gap: .6em; }
.v-barb span { display: flex; align-items: center; gap: .45em; border: 1px solid #2E2E35; border-radius: 2em; padding: .25em .8em .25em .3em; font-size: .85em; }
.v-barb span.on { border-color: #1FB5C9; background: rgba(31,181,201,.1); }
.v-barb i { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .8em; background: #23232A; }
.v-dias { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4em; font-size: .8em; text-align: center; }
.v-dias span { padding: .4em 0; border-radius: .5em; background: #16161B; color: #9C9CA6; }
.v-dias span b { display: block; font-size: 1.3em; color: #E9E9EC; }
.v-dias span.on { background: #D7263D; color: #fff; } .v-dias span.on b { color: #fff; }
.v-hor { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; font-size: .85em; font-variant-numeric: tabular-nums; }
.v-hor span { text-align: center; padding: .5em 0; border-radius: .45em; border: 1px solid #2A2A31; }
.v-hor .x { color: #4B4B55; text-decoration: line-through; border-color: #1A1A1F; }
.v-hor .sel { animation: t-sel 9s infinite; }
@keyframes t-sel { 0%, 22% { background: transparent; border-color: #2A2A31; color: inherit } 26%, 90% { background: #1FB5C9; border-color: #1FB5C9; color: #071214; font-weight: 700 } 100% { background: transparent } }
.v-conf { align-self: center; background: #141418; border: 1px solid #2A2A31; border-radius: 1em; padding: 1.1em; display: grid; gap: .55em; font-size: .85em; animation: t-ok 9s infinite; }
.v-conf b { font-size: 1.2em; }
.v-conf .tag { justify-self: start; background: rgba(31,181,201,.15); color: #6FE0EE; padding: .2em .7em; border-radius: 2em; font-weight: 600; }
.v-conf p { display: flex; justify-content: space-between; color: #A4A4AE; } .v-conf p span { color: #E9E9EC; }

/* 5. D'Óculos: provador */
.o { background: #F5EFE6; color: #2B2420; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4em; padding: 1.3em 1.6em; }
.o-cam { position: relative; border-radius: 1em; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #D9CBB9, #A8968A); display: grid; place-items: center; }
.o-cam .rec { position: absolute; top: .8em; left: .9em; font-size: .72em; color: #fff; display: flex; align-items: center; gap: .4em; background: rgba(0,0,0,.35); padding: .2em .6em; border-radius: 2em; }
.o-cam .rec::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #E5484D; animation: t-blink 1.2s infinite; }
@keyframes t-blink { 50% { opacity: .2 } }
.o-rosto { position: relative; width: 46%; aspect-ratio: .78; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; background: #EADBC9; box-shadow: inset -.8em -.6em 1.4em rgba(120,90,60,.18); margin-top: 8%; }
.o-rosto::before { content: ""; position: absolute; left: -6%; right: -6%; top: -12%; height: 42%; border-radius: 50% 50% 30% 30%; background: #4A3A30; }
.o-rosto::after { content: ""; position: absolute; left: 50%; bottom: 20%; width: 26%; height: 5%; translate: -50%; border-bottom: .18em solid #A7746A; border-radius: 0 0 50% 50%; }
.o-olho { position: absolute; top: 46%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #3A2C25; }
.o-olho.oe { left: 27% } .o-olho.od { right: 27% }
.o-arm { position: absolute; left: 6%; right: 6%; top: 37%; height: 22%; opacity: 0; animation: t-arm 9s infinite; animation-delay: calc(var(--i) * 3s - 9s); }
.o-arm svg { width: 100%; height: 100%; overflow: visible; }
@keyframes t-arm { 0% { opacity: 0; transform: translateY(-40%) } 4%, 30% { opacity: 1; transform: none } 33.3%, 100% { opacity: 0; transform: translateY(-20%) } }
.o-lado { display: flex; flex-direction: column; gap: .7em; min-width: 0; }
.o-lado h4 { font-size: 1.15em; font-weight: 650; }
.o-lado > small { color: #8A7A6E; font-size: .78em; }
.o-item { display: grid; grid-template-columns: 4.6em 1fr; gap: .8em; align-items: center; background: #fff; border-radius: .7em; padding: .55em .7em; font-size: .85em; border: 1px solid transparent; animation: t-item 9s infinite; animation-delay: calc(var(--i) * 3s - 9s); }
@keyframes t-item { 0%, 31% { border-color: #B5835A; box-shadow: 0 .4em 1em rgba(120,80,40,.12) } 34%, 100% { border-color: transparent; box-shadow: none } }
.o-item svg { width: 100%; height: 2em; }
.o-item small { display: block; color: #8A7A6E; }

/* 6. Scala Pro */
.s { background: #0D0D0D; color: #EDE6D6; padding: 1.2em 1.6em; display: grid; grid-template-rows: auto auto 1fr; gap: .9em; }
.s-top { display: flex; justify-content: space-between; align-items: center; }
.s-top b { font-size: 1.15em; letter-spacing: .04em; } .s-top b span { color: #C9A24A; }
.s-top small { border: 1px solid #3A3426; padding: .3em .8em; border-radius: 2em; font-size: .75em; color: #C9A24A; }
.s-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.s-kpi div { border: 1px solid #2A2620; border-radius: .6em; padding: .6em .8em; display: grid; gap: .1em; }
.s-kpi small { font-size: .72em; color: #9C9384; }
.s-kpi b { font-size: 1.45em; font-variant-numeric: tabular-nums; }
.s-kpi i { font-style: normal; font-size: .72em; color: #7FCB8F; }
.s-graf { display: grid; grid-template-columns: 1.6fr 1fr; gap: .9em; min-height: 0; }
.s-graf > div { border: 1px solid #2A2620; border-radius: .6em; padding: .7em .8em; display: flex; flex-direction: column; gap: .4em; min-height: 0; }
.s-graf small { font-size: .72em; color: #9C9384; }
.s-graf svg { flex: 1; width: 100%; min-height: 0; }
.s-linha { stroke-dasharray: 400; stroke-dashoffset: 400; animation: t-draw 9s infinite; }
@keyframes t-draw { 0%, 5% { stroke-dashoffset: 400 } 40%, 90% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 0; opacity: 0 } }
.s-barras { flex: 1; display: flex; align-items: flex-end; gap: .4em; }
.s-barras span { flex: 1; background: linear-gradient(#E2C377, #9C7A2E); border-radius: .25em .25em 0 0; height: var(--h); transform-origin: bottom; animation: t-bar 9s infinite both; animation-delay: calc(var(--i) * .15s); }
@keyframes t-bar { 0%, 5% { transform: scaleY(0) } 30%, 92% { transform: none } 100% { transform: scaleY(0) } }

/* 7. App do casal (conceito) */
.c { background: #EEF4EE; color: #1E3A2B; padding: 1.3em 1.6em; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; }
.c-card { background: #fff; border-radius: 1em; padding: 1em 1.1em; display: grid; grid-template-columns: 6.5em 1fr; gap: .9em; align-items: center; align-content: start; }
.c-anel { width: 6.5em; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--cor) calc(var(--p) * 1%), #E3ECE4 0); animation: t-anel 9s infinite; position: relative; }
.c-anel::before { content: ""; position: absolute; inset: .7em; border-radius: 50%; background: #fff; }
.c-anel b { position: relative; font-size: 1.2em; }
@keyframes t-anel { 0% { --p: 0 } 35%, 92% { --p: var(--alvo) } 100% { --p: 0 } }
.c-card h5 { font-size: 1em; font-weight: 650; } .c-card > div > small { font-size: .75em; color: #5D7A69; }
.c-tarefas { grid-column: 1 / -1; display: grid; gap: .4em; font-size: .82em; }
.c-tarefas span { display: flex; align-items: center; gap: .55em; }
.c-tarefas span::before { content: ""; width: 1.05em; height: 1.05em; border-radius: .3em; border: 2px solid #9CB8A6; flex: none; animation: t-tick 9s infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes t-tick { 0%, 15% { background: transparent; border-color: #9CB8A6 } 20%, 92% { background: var(--cor) radial-gradient(circle, #fff 28%, transparent 32%); border-color: var(--cor) } 100% { background: transparent } }
.c-peso { grid-column: 1 / -1; background: #fff; border-radius: 1em; padding: .8em 1.1em; display: grid; grid-template-columns: auto 1fr; gap: 1em; align-items: center; font-size: .82em; }
.c-peso svg { width: 100%; height: 3.2em; }

/* 8. Campanha (conceito) */
.k { background: #E7E9EE; padding: 1.4em 1.8em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; align-items: center; color: #fff; }
.k-post { aspect-ratio: 4 / 5; border-radius: .8em; padding: 1.1em 1em; background: linear-gradient(160deg, #0F2B57 0%, #213F6B 45%, #5A3926 100%); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1em 2em rgba(15,43,87,.25); animation: t-in 9s infinite both; animation-delay: calc(var(--i) * .5s); }
.k-post small { font-size: .65em; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.k-post b { font-size: 1.45em; line-height: 1.1; font-weight: 700; }
.k-post i { font-style: normal; font-size: .65em; opacity: .75; border-top: 1px solid rgba(255,255,255,.25); padding-top: .6em; }

/* 9. AC Inspeções */
.a { background: #1E2225; color: #E7ECEC; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; padding: 1.4em 1.8em; align-items: center; }
.a-marca { display: grid; justify-items: start; gap: 1em; }
.a-simb { width: 8em; aspect-ratio: 1; }
.a-simb svg { width: 100%; height: 100%; overflow: visible; }
.a-onda { stroke-dasharray: 100 100; animation: t-onda 3s ease-in-out infinite; }
@keyframes t-onda { 0% { stroke-dashoffset: 100 } 45%, 60% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -100 } }
.a-nome { font-weight: 800; letter-spacing: .1em; font-size: 1.5em; }
.a-nome span { color: #2EC4B6; }
.a-marca small { font-size: .78em; color: #93A2A4; letter-spacing: .08em; text-transform: uppercase; }
.a-apl { display: grid; gap: .8em; }
.a-cartao { background: #F2F4F4; color: #1E2225; border-radius: .6em; padding: .9em 1em; display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: center; font-size: .78em; transform: rotate(-3deg); box-shadow: 0 .8em 1.6em rgba(0,0,0,.35); }
.a-cartao svg { width: 3em; height: 3em; }
.a-folha { background: #F2F4F4; border-radius: .5em; padding: .8em 1em; display: grid; gap: .4em; transform: rotate(2deg); }
.a-folha i { height: .45em; border-radius: 1em; background: #C9D2D2; display: block; width: var(--w); }
.a-folha i:first-child { background: #2EC4B6; height: .6em; }

/* 10. Documentos, planilhas, apresentações */
.d { background: #E6E4DE; padding: 1.3em 1.5em; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .9em; color: #2A2B2E; align-items: center; }
.d-pl, .d-doc, .d-sl { background: #fff; border-radius: .5em; box-shadow: 0 .6em 1.4em rgba(40,40,40,.12); overflow: hidden; }
.d-pl { display: grid; grid-template-columns: 1.6fr 1fr 1fr; font-size: .7em; font-variant-numeric: tabular-nums; }
.d-pl span { padding: .4em .5em; border-right: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC; text-align: right; }
.d-pl span:nth-child(3n+1) { text-align: left; }
.d-pl .h { background: #2F5D50; color: #fff; font-weight: 600; text-align: left; }
.d-pl .dv { animation: t-in 9s infinite both; animation-delay: calc(var(--i) * .2s); }
.d-pl .t { background: #E5F0EC; font-weight: 700; }
.d-doc { padding: 1em .9em; display: grid; gap: .45em; aspect-ratio: .72; align-content: start; }
.d-doc b { font-size: .75em; text-align: center; letter-spacing: .06em; }
.d-doc i { display: block; height: .35em; border-radius: 1em; background: #D7D7D2; width: var(--w); transform-origin: left; animation: t-linha 9s infinite both; animation-delay: calc(var(--i) * .25s); }
@keyframes t-linha { 0%, 3% { transform: scaleX(0) } 12%, 92% { transform: none } 100% { transform: scaleX(0) } }
.d-sl { aspect-ratio: 16 / 10; padding: .7em; display: grid; grid-template-rows: auto 1fr; gap: .4em; }
.d-sl b { font-size: .6em; }
.d-sl div { display: flex; align-items: flex-end; gap: .25em; }
.d-sl div span { flex: 1; height: var(--h); background: #2F5D50; border-radius: .15em .15em 0 0; transform-origin: bottom; animation: t-bar 9s infinite both; animation-delay: calc(var(--i) * .15s); }
.d-sl div span:nth-child(even) { background: #C98B3A; }

@media (prefers-reduced-motion: reduce) {
  .tela *, .tela *::before, .tela *::after { animation: none !important; }
  .pill .pa, .m-aj .st i:first-child { opacity: 0; }
  .o-arm[style*="--i:0"] { opacity: 1; }
  .cnt { --n: var(--to); }
  .s-linha { stroke-dashoffset: 0; }
  .c-anel { --p: var(--alvo); }
  .v-hor .sel { background: #1FB5C9; color: #071214; }
}

/* ajustes de preenchimento */
.g { font-size: 1.68cqw; } .g-row { padding: .75em 0; } .g-main { justify-content: center; }
.v { align-items: center; font-size: 1.72cqw; } .v-hor span { padding: .75em 0; } .v-esq { gap: 1.1em; }
.m { font-size: 1.62cqw; } .m-tab div { padding: 1.08em 1em; } .m-corpo { align-content: center; }
.c { align-content: center; font-size: 1.65cqw; } .c-tarefas { gap: .6em; }
.a { font-size: 1.7cqw; } .a-simb { width: 10em; }