/* Telas da versão atual da Lumi e personagem. Desenhadas em 1360 x 860 e escaladas para caber. */
:root { --p-marca: #7c5cdb; --p-destaque: #2fb39b; --p-apoio: #ff8fa8; --p-sol: #ffc857; }

.ap {
  --m: var(--p-marca); --m-ink: color-mix(in srgb, var(--p-marca) 76%, #000); --m-soft: color-mix(in srgb, var(--p-marca) 13%, #fff);
  --tx: color-mix(in srgb, var(--p-marca) 20%, #1b1f2c); --mu: color-mix(in srgb, var(--p-marca) 18%, #66708a); --ln: color-mix(in srgb, var(--p-marca) 12%, #e9ecf3);
  --e: .5; position: relative; width: 100%; aspect-ratio: 1360 / 860; overflow: hidden; color: var(--tx); font-family: Figtree, 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--p-marca) 18%, transparent), transparent 55%), radial-gradient(ellipse at 100% 30%, color-mix(in srgb, var(--p-destaque) 12%, transparent), transparent 50%), color-mix(in srgb, var(--p-marca) 6%, #fbfcff);
}
.ap-palco { position: absolute; left: 0; top: 0; display: flex; gap: 26px; width: 1360px; height: 860px; padding: 18px 28px 0 26px; font-size: 16px; line-height: 1.35; text-align: left; transform: scale(var(--e)); transform-origin: 0 0; }
.ap .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ap h2, .ap h3 { margin: 0; color: var(--tx); font-family: Nunito, 'Trebuchet MS', system-ui, sans-serif; letter-spacing: -.01em; }
.ap p { margin: 0; }
.ap small { display: block; color: var(--mu); font-size: 14px; font-weight: 400; }
.ap b { font-weight: 700; }
.ap-up { text-transform: uppercase; font-size: 15.5px; }

.ap-lateral { position: relative; flex: none; display: flex; flex-direction: column; width: 222px; height: 824px; padding: 18px 12px 16px 20px; border-radius: 24px; background: #fff; box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--p-marca) 22%, transparent), inset 0 0 0 1px var(--ln); }
.ap-marca { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px; margin-bottom: 12px; border-bottom: 1px solid var(--ln); color: var(--m); }
.ap-marca .ic { width: 42px; height: 42px; stroke-width: 1.6; }
.ap-marca b { display: block; color: var(--tx); font-family: Nunito, system-ui, sans-serif; font-size: 21px; font-weight: 900; line-height: 1.05; }
.ap-lateral nav { position: relative; display: grid; gap: 1px; }
.ap-nav { display: flex; align-items: center; gap: 13px; width: 100%; height: 45px; padding: 0 6px; border: 0; border-radius: 12px; background: transparent; color: var(--tx); font: inherit; font-size: 16px; text-align: left; transition: padding .3s, color .3s; }
button.ap-nav { cursor: pointer; }
button.ap-nav:hover:not(:disabled) { color: var(--m); }
button.ap-nav:disabled { cursor: default; }
button.ap-nav:focus-visible { outline: 2px solid var(--m); outline-offset: -2px; }
.ap-nav.ativa { padding-left: 12px; color: var(--m-ink); font-weight: 700; }
.ap-nav.ativa .ic { opacity: 0; }
.ap-config { margin-top: auto; }
.ap-orbe { position: absolute; left: -42px; top: 0; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; pointer-events: none; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--p-marca) 62%, #fff), var(--p-marca) 72%); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--p-marca) 75%, transparent), 0 0 0 5px #fff; transition: transform .55s cubic-bezier(.35, 1.45, .5, 1); }
.ap-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-topo { position: relative; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 88px; }
.ap-mascote-topo { position: absolute; left: 50%; top: -6px; width: 76px; height: 98px; transform: translateX(-50%); }
.ap-sino, .ap-perfil { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--p-marca) 40%, transparent); }
.ap-sino b { padding: 1px 8px; border-radius: 999px; background: #2fb39b; color: #fff; font-size: 13px; }
.ap-perfil i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; background: linear-gradient(135deg, var(--p-marca), var(--p-destaque)); }
.ap-perfil b { display: block; font-size: 14.5px; }
.ap-perfil small { font-size: 12.5px; }
.ap-conteudo { position: relative; flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.ap-conteudo > * { animation: ap-surge .55s cubic-bezier(.2, .8, .2, 1) backwards; }
.ap-conteudo > :nth-child(2) { animation-delay: .07s; }
.ap-conteudo > :nth-child(3) { animation-delay: .14s; }
@keyframes ap-surge { from { opacity: .3; transform: translateY(14px); } }

.ap-card { position: relative; padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px color-mix(in srgb, var(--p-marca) 8%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--p-marca) 30%, transparent), inset 0 0 0 1px var(--ln); }
.ap-cab { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-radius: 24px; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px #fff, 0 10px 28px -16px color-mix(in srgb, var(--p-marca) 30%, transparent); }
.ap-cab h2 { font-size: 34px; font-weight: 900; }
.ap-cab-ic, .ap-num-ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; color: var(--m-ink); background: var(--m-soft); }
.ap-cab-ic .ic { width: 26px; height: 26px; }
.ap-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ap-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ln); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ap-b.pri { color: #fff; background: var(--m); box-shadow: 0 10px 18px -10px color-mix(in srgb, var(--p-marca) 80%, transparent); }
.ap-b.ic-so { padding: 10px; }
.ap-b.inv { flex-direction: row-reverse; border-radius: 14px; font-weight: 400; }
.ap-selo { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; color: var(--m-ink); background: var(--m-soft); font-size: 13.5px; font-weight: 600; }
.ap-selo.menta { color: #17735a; background: #dff5ec; }
.ap-selo.cinza { color: var(--mu); background: #f0f1f6; }
.ap-selo.cont { padding: 2px 10px; }
.ap-selo.acao { background: var(--m-soft); }
.ap-selo.bord { padding: 8px 14px; color: var(--tx); background: color-mix(in srgb, var(--p-marca) 6%, #fff); }
.ap-selo .ic { width: 18px; height: 18px; }

.ap-saud { display: flex; align-items: center; gap: 18px; margin-top: -60px; }
.ap-saud h2 { font-size: 36px; font-weight: 900; }
.ap-saud small { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.ap-saud small .ic { color: #2fb39b; }
.ap-saud p { color: var(--mu); }
.ap-saud p b { color: var(--m-ink); }
.ap-mascote { flex: none; display: block; width: 86px; height: 112px; }
.ap-numeros { display: grid; grid-template-columns: repeat(4, 1fr); padding: 18px 24px; }
.ap-numeros > div { display: flex; align-items: center; gap: 14px; }
.ap-numeros > div + div { padding-left: 22px; border-left: 1px solid var(--ln); }
.ap-numeros b { display: block; font-family: Nunito, system-ui, sans-serif; font-size: 34px; font-weight: 900; line-height: 1; }
.ap-num-ic.menta { color: #17735a; background: #dff5ec; }
.ap-num-ic.rosa { color: #b23b5c; background: #fde7ed; }
.ap-num-ic.sol { color: #8a6500; background: #fff3d1; }
.ap-duas { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.ap-col { display: grid; gap: 16px; align-content: start; }
.ap-tit { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ap-tit h3 { font-size: 21px; font-weight: 800; }
.ap-tit a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--m-ink); font-size: 15px; font-weight: 600; }
.ap-tit a .ic { width: 17px; height: 17px; }
.ap-tit.grande h3 { font-size: 26px; }
.ap-linha { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-top: 1px solid var(--ln); }
.ap-tit + .ap-linha { border-top: 0; }
.ap-linha > span:nth-child(2) { flex: 1; min-width: 0; }
.ap-linha > .ic { color: var(--mu); }
.ap-ini { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: var(--m-ink); background: var(--m-soft); font-size: 14px; font-weight: 700; }
.ap-ponto { flex: none; width: 10px; height: 10px; margin: 0 6px; border-radius: 50%; background: var(--m); box-shadow: 0 0 0 4px var(--m-soft); }
.ap-cal { flex: none; width: 58px; overflow: hidden; border-radius: 12px; text-align: center; box-shadow: inset 0 0 0 1px var(--ln); }
.ap-cal small { padding: 2px 0; color: #fff; background: var(--m); font-size: 12.5px; font-weight: 700; }
.ap-cal b { font-size: 22px; }

.ap-divisao { display: grid; gap: 18px; flex: 1; min-height: 0; }
.d1 { grid-template-columns: 1fr 2fr; }
.d2 { grid-template-columns: 312px 1fr; }
.d3 { grid-template-columns: 1fr 1.25fr; }
.d4 { grid-template-columns: 1fr 1.2fr; }
.ap-divisao .ap-card { min-height: 700px; }
.ap-h { margin-bottom: 14px !important; font-size: 23px; font-weight: 800; }
.ap-busca { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 16px; margin-bottom: 12px; border-radius: 16px; color: var(--mu); white-space: nowrap; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--p-marca) 24%, #e6e9f3); font-size: 15px; }
.ap-linha-bt { display: flex; align-items: flex-start; gap: 10px; }
.ap-linha-bt .ap-b { padding-block: 12px; }
.ap-info { margin-bottom: 10px; }
.ap-rot { margin: 14px 8px 8px; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .08em; }
.ap-pasta { display: flex; align-items: center; gap: 13px; padding: 11px 12px; margin-bottom: 7px; border-radius: 18px; }
.ap-pasta b { display: block; }
.ap-pasta > span:last-child small { font-size: 13.5px; }
.ap-pasta.ativa { color: #fff; background: linear-gradient(110deg, var(--p-marca), color-mix(in srgb, var(--p-marca) 74%, #d9a6e6)); box-shadow: 0 12px 20px -14px var(--p-marca); }
.ap-pasta.ativa small { color: #ffffffd9; }
.ap-dia { flex: none; display: block; width: 54px; padding: 6px 0; border-radius: 13px; color: var(--tx); text-align: center; background: #fff; box-shadow: inset 0 0 0 1px var(--ln); }
.ap-dia b { font-family: Nunito, system-ui, sans-serif; font-size: 22px; font-weight: 900; line-height: 1; }
.ap-dia small { font-size: 12px; font-weight: 600; }
.ap-pasta.ativa .ap-dia small { color: var(--mu); }
.ap-pasta-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; color: var(--m-ink); background: var(--m-soft); }
.ap-pasta.ativa .ap-pasta-ic { color: #fff; background: #ffffff33; }
.ap-grupo { padding: 8px; margin-bottom: 8px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--ln); }
.ap-grupo-tit { display: flex; align-items: center; gap: 12px; padding: 8px; color: var(--m-ink); }
.ap-grupo-tit b { color: var(--tx); display: block; }
.ap-tabela { font-size: 15px; }
.ap-tr { display: grid; grid-template-columns: var(--col); gap: 12px; align-items: center; padding: 15px 14px; border-top: 1px solid var(--ln); }
.ap-tr > span { min-width: 0; }
.ap-th { border-top: 0; padding-block: 11px; color: var(--mu); font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ap-fab { position: absolute; right: -2px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; color: #fff; background: var(--m); font-weight: 700; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--p-marca) 80%, transparent); }
.ap-ficha { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ap-ficha h3 { margin-bottom: 8px; font-size: 28px; font-weight: 800; }
.ap-av { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; color: var(--m-ink); background: var(--m-soft); }
.ap-av.g { width: 90px; height: 90px; box-shadow: 0 0 0 1px var(--ln), inset 0 0 0 6px #fff; }
.ap-av.g .ic { width: 38px; height: 38px; }
.ap-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; padding: 24px 26px; margin-bottom: 16px; border-radius: 20px; background: color-mix(in srgb, var(--p-marca) 4%, #fff); box-shadow: inset 0 0 0 1px var(--ln); }
.ap-dados small { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ap-dados b { font-weight: 500; font-size: 17px; }
.ap-abas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: 18px; border-bottom: 1px solid var(--ln); color: var(--mu); font-size: 15.5px; text-align: center; }
.ap-abas span { padding: 11px 0; }
.ap-abas .ativa { color: var(--m-ink); font-weight: 700; box-shadow: inset 0 -3px var(--m); }
.ap-pac { display: flex; align-items: center; gap: 13px; padding: 12px 14px; margin-bottom: 7px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--ln); }
.ap-pac > span:nth-child(2) { flex: 1; min-width: 0; }
.ap-pac.ativa { background: var(--m-soft); box-shadow: none; }
.ap-pilulas { display: flex; gap: 10px; margin: 8px 0 16px; }
.ap-check { display: block; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ln); }
.ap-exportar { position: absolute; left: 24px; bottom: 24px; }
.ap-rodape-b { display: flex; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ln); }
.ap-atelie { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; background: radial-gradient(ellipse at 90% 12%, #fff1d6, transparent 42%), radial-gradient(ellipse at 40% 75%, var(--m-soft), transparent 62%), #fff; }
.ap-atelie small { color: var(--m-ink); font-size: 13.5px; font-weight: 700; letter-spacing: .14em; }
.ap-atelie h3 { font-size: 48px; font-weight: 900; }
.ap-atelie p { color: var(--mu); font-weight: 600; }
.ap-mascote.g { width: 300px; height: 386px; }
.ap-conversa { display: flex; flex-direction: column; }
.ap-conversa > h3 { font-size: 26px; font-weight: 900; }
.ap-conversa > p { padding-bottom: 18px; color: var(--mu); border-bottom: 1px solid var(--ln); }
.ap-vazio { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.ap-vazio h3 { font-size: 25px; font-weight: 800; }
.ap-vazio p { color: var(--mu); }
.ap-escreva { position: relative; height: 130px; padding: 20px; margin-bottom: 10px; border-radius: 22px; color: var(--mu); box-shadow: inset 0 0 0 1px var(--ln); }
.ap-escreva span { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--m); }

/* Personagem */
.lumi-rig { position: relative; display: block; width: 100%; height: 100%; }
.lumi-ink-drawing { display: block; width: 100%; height: 100%; overflow: visible; fill: initial; stroke: none; }
.lumi-ink-shadow { opacity: .3; }
.lumi-ink-puppet { animation: ink-float 4.6s ease-in-out infinite; }
.lumi-ink-body { transform-origin: 70px 150px; animation: ink-breathe 4.6s ease-in-out infinite; }
.lumi-ink-head { transform-origin: 70px 100px; animation: ink-look 6.2s ease-in-out infinite; }
.lumi-ink-hair { transform-origin: 70px 58px; animation: ink-hair 6.2s .14s ease-in-out infinite; }
.lumi-ink-arm-left { transform-origin: 52px 119px; }
.lumi-ink-arm-right { transform-origin: 88px 119px; }
.lumi-ink-leg { transform-origin: var(--hip-x) 146px; }
.motion-playful .lumi-ink-puppet { animation-duration: 3.2s; }
.motion-playful .lumi-ink-body { animation-duration: 3.2s; }
.motion-quiet * { animation: none !important; }
.lumora-eye-open { animation: ink-blink 5.8s infinite; }
.lumora-eye-smile, .lumora-eye-heart { display: none; }
.lumi-ink[data-expression='happy'] .lumora-eye-open, .lumi-ink[data-expression='love'] .lumora-eye-open { display: none; }
.lumi-ink[data-expression='happy'] .lumora-eye-smile, .lumi-ink[data-expression='love'] .lumora-eye-heart { display: block; }
.lumi-ink[data-expression='happy'] .lumi-ink-arm-right { animation: ink-wave .65s ease-in-out 4; }
.lumi-ink[data-expression='happy'] .lumi-ink-body { animation: ink-cheer .65s ease-in-out 4; }
.lumi-ink[data-expression='happy'] .lumi-ink-leg-left { animation: ink-step .65s ease-in-out 4; }
.lumi-ink[data-expression='happy'] .lumi-ink-leg-right { animation: ink-step .65s .12s ease-in-out 4 reverse; }
.lumi-ink[data-expression='love'] .lumi-ink-arm-left { animation: ink-hug-left 1.2s ease-in-out 2; }
.lumi-ink[data-expression='love'] .lumi-ink-arm-right { animation: ink-hug-right 1.2s ease-in-out 2; }
.rig-sparkles { position: absolute; right: 4%; top: 28%; display: none; color: #c49b59; font-size: 22px; }
.rig-sparkles span { position: absolute; top: 28px; right: 12px; font-size: 13px; }
.accessory-star .rig-sparkles { display: block; animation: ink-twinkle 2s infinite; }
@keyframes ink-float { 50% { transform: translateY(-4px); } }
@keyframes ink-breathe { 50% { transform: scaleY(1.03); } }
@keyframes ink-look { 0%, 25%, 75%, 100% { transform: none; } 45% { transform: rotate(-5deg); } 58% { transform: rotate(4deg); } }
@keyframes ink-hair { 0%, 25%, 75%, 100% { transform: none; } 45% { transform: skewX(6deg); } 58% { transform: skewX(-4deg); } }
@keyframes ink-blink { 0%, 43%, 48%, 100% { transform: scaleY(1); } 45%, 46% { transform: scaleY(.08); } }
@keyframes ink-wave { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-108deg); } 65% { transform: rotate(-77deg); } }
@keyframes ink-cheer { 0%, 100% { transform: none; } 45% { transform: scaleY(1.1) rotate(-3deg); } }
@keyframes ink-hug-left { 0%, 100% { transform: none; } 50% { transform: rotate(-46deg); } }
@keyframes ink-hug-right { 0%, 100% { transform: none; } 50% { transform: rotate(46deg); } }
@keyframes ink-step { 0%, 100% { transform: none; } 50% { transform: rotate(9deg); } }
@keyframes ink-twinkle { 50% { opacity: .35; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) {
  .lumi-rig *, .ap-conteudo > * { animation: none !important; }
  .ap-orbe { transition: none; }
}