{"id":562,"date":"2026-05-24T16:07:15","date_gmt":"2026-05-24T16:07:15","guid":{"rendered":"https:\/\/gabrielsilvaduartedev.com\/index.php\/auriks-r12\/"},"modified":"2026-05-24T16:11:02","modified_gmt":"2026-05-24T16:11:02","slug":"auriks-r12","status":"publish","type":"page","link":"https:\/\/gabrielsilvaduartedev.com\/index.php\/auriks-r12\/","title":{"rendered":"Auriks \u2014 Sistema Completo (r12)"},"content":{"rendered":"\n<div style=\"position:fixed;inset:0;z-index:99999;background:#0E0E10;\">\n<iframe srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;pt-BR&quot;&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;UTF-8&quot;&gt;\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n&lt;title&gt;Auriks \u2014 Sistema completo \u00b7 Rodada 12&lt;\/title&gt;\n&lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.googleapis.com&quot;&gt;\n&lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.gstatic.com&quot; crossorigin&gt;\n&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Baloo+2:wght@400;500;600;700;800&amp;family=Mukta:wght@300;400;500;600;700;800&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;style&gt;\n:root{--page-bg:#0E0E10;--page-fg:#E8E6E1;--page-muted:#7C7A73;--page-divider:#26252A}\n*{box-sizing:border-box;margin:0;padding:0}\nhtml,body{background:var(--page-bg);color:var(--page-fg);font-family:&quot;Mukta&quot;,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}\nbody{min-height:100vh;padding:48px 32px 96px}\n.page-head{max-width:1640px;margin:0 auto 56px;padding:0 8px}\n.page-head h1{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:clamp(36px,4vw,56px);letter-spacing:-.5px;line-height:1.05}\n.page-head h1 em{font-style:normal;font-weight:500;color:#B3AFA4}\n.page-head .lede{margin-top:18px;max-width:820px;font-size:17px;line-height:1.55;color:#A6A39A}\n.page-head .meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--page-muted);font-weight:700}\n.page-head .meta span{display:inline-flex;align-items:center;gap:8px}\n.page-head .meta span::before{content:&quot;&quot;;width:6px;height:6px;background:#5A5853;border-radius:50%}\n.fixes{margin-top:24px;padding:18px 22px;border:1px solid var(--page-divider);border-radius:10px;background:#15151A;font-size:13.5px;line-height:1.7;color:#B3AFA4;max-width:820px}\n.fixes strong{color:#E8E6E1;font-weight:700}\n.fixes ul{margin-top:8px;padding-left:0;list-style:none}\n.fixes li{padding:4px 0;padding-left:18px;position:relative}\n.fixes li::before{content:&quot;\u2192&quot;;position:absolute;left:0;color:#00E0FF;font-weight:700}\n.section{max-width:1640px;margin:0 auto 56px;padding:0 8px}\n.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--page-divider);margin-bottom:32px;flex-wrap:wrap}\n.section-head h2{font-family:&quot;Baloo 2&quot;,sans-serif;font-size:32px;font-weight:700;letter-spacing:-.3px;line-height:1.05}\n.section-head h2 em{font-style:normal;font-weight:500;color:#B3AFA4}\n.section-head .tag{display:inline-block;margin-bottom:6px;font-family:&quot;Mukta&quot;,sans-serif;font-size:11px;color:var(--page-muted);letter-spacing:.4em;font-weight:700}\n.section-head .count{font-family:&quot;Mukta&quot;,sans-serif;font-size:11px;color:var(--page-muted);letter-spacing:.18em;text-transform:uppercase;font-weight:600}\n.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px;justify-items:center}\n@media (max-width:1280px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media (max-width:680px){.phones{grid-template-columns:1fr}}\n.phone-card{display:flex;flex-direction:column;gap:10px;align-items:center}\n.phone-label{font-family:&quot;Baloo 2&quot;,sans-serif;font-size:14px;color:#E8E6E1;font-weight:600;text-align:center}\n.phone-label em{font-family:&quot;Mukta&quot;,sans-serif;font-style:italic;color:#9C9991;font-weight:400;margin-left:6px;font-size:12.5px}\n.phone-flow{font-family:&quot;Mukta&quot;,sans-serif;font-size:11px;color:#7C7A73;font-weight:500;text-align:center}\n.phone-flow b{color:#00E0FF;font-weight:600}\n\n.phone{position:relative;width:320px;height:690px;background:#0B0B0E;border-radius:46px;padding:10px;box-shadow:0 0 0 2px #1f1e22,0 30px 60px -20px rgba(0,0,0,.6),0 10px 25px -10px rgba(0,0,0,.5)}\n.phone .side-vol{position:absolute;left:-2px;top:200px;width:3px;height:80px;background:#1c1b1f;border-radius:2px}\n.phone .side-pwr{position:absolute;right:-2px;top:170px;width:3px;height:70px;background:#1c1b1f;border-radius:2px}\n.phone__screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;display:flex;flex-direction:column}\n.phone__notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:28px;background:#000;border-radius:18px;z-index:50}\n.phone__notch::after{content:&quot;&quot;;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#1a1a1a;box-shadow:inset 0 0 0 1px #2a2a2a}\n.scr{display:flex;flex-direction:column;height:100%;width:100%}\n.statusbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px 0;font-size:13px;font-weight:600;height:42px;z-index:40;position:relative}\n.statusbar .right{display:flex;gap:6px;align-items:center}\n.sb-icon{width:14px;height:8px}\n.sb-batt{width:22px;height:10px;border:1px solid currentColor;border-radius:2px;position:relative;padding:1px}\n.sb-batt::after{content:&quot;&quot;;position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}\n.sb-batt i{display:block;height:100%;background:currentColor;width:78%;border-radius:1px}\n\n.v2{--bg:#0B1A2E;--bg2:#0F2640;--bg3:#061021;--cyan:#00E0FF;--cyan-soft:rgba(0,224,255,.25);--purple:#7B5BFF;--gold:#FFD15A;--pink:#FF5A78;--orange:#FF8B3D;--green:#5AE8A0;--text:#E6F0FF;--text-dim:#7AA0CC;--text-soft:#A6BAD4}\n.v2 .phone__screen{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg3) 100%);color:var(--text);font-family:&quot;Mukta&quot;,sans-serif}\n.v2 .phone__screen::before{content:&quot;&quot;;position:absolute;inset:0;pointer-events:none;opacity:.6;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,200,255,.02) 3px,rgba(0,200,255,.02) 4px)}\n.v2 .statusbar{color:var(--text)}\n\n.hud-corners{position:absolute;top:8px;left:8px;right:8px;bottom:8px;pointer-events:none;z-index:2}\n.hud-corners span{position:absolute;width:14px;height:14px;border:2px solid rgba(0,224,255,.55)}\n.hud-corners .tl{top:0;left:0;border-right:none;border-bottom:none}\n.hud-corners .tr{top:0;right:0;border-left:none;border-bottom:none}\n.hud-corners .bl{bottom:0;left:0;border-right:none;border-top:none}\n.hud-corners .br{bottom:0;right:0;border-left:none;border-top:none}\n\n\/* AppBar Home *\/\n.v2 .appbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;z-index:5;position:relative}\n.v2 .player-tag{display:flex;align-items:center;gap:10px}\n.v2 .pl-av{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--purple));box-shadow:0 0 12px rgba(0,224,255,.4),inset 0 0 0 2px var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--bg);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:18px}\n.v2 .pl-info{font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--text-dim);line-height:1.2;font-weight:600}\n.v2 .pl-info strong{display:block;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:16px;color:var(--text);letter-spacing:-.01em;margin-top:1px;text-transform:none}\n.v2 .pl-info .nv{color:var(--gold)}\n.v2 .top-right{display:flex;gap:6px}\n.v2 .topbtn{width:34px;height:34px;border-radius:10px;background:rgba(0,224,255,.08);border:1px solid var(--cyan-soft);color:var(--cyan);display:flex;align-items:center;justify-content:center;position:relative}\n.v2 .topbtn .ndot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;background:var(--pink);border:2px solid var(--bg);border-radius:50%}\n\n\/* Stories (cuidado com overflow) *\/\n.v2 .stories-bar{padding:10px 14px 14px;display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;min-height:88px}\n.v2 .stories-bar::-webkit-scrollbar{display:none}\n.v2 .stories-mini{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:64px}\n.v2 .stories-mini .ring{width:60px;height:60px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--cyan),var(--green));display:flex;align-items:center;justify-content:center;flex-shrink:0}\n.v2 .stories-mini.off .ring{background:rgba(122,160,204,.35)}\n.v2 .stories-mini.add .ring{background:transparent;border:2px dashed var(--cyan-soft);padding:0}\n.v2 .stories-mini .avwrap{width:100%;height:100%;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid var(--bg)}\n.v2 .stories-mini.add .avwrap{background:rgba(0,224,255,.08);border:none;color:var(--cyan)}\n.v2 .stories-mini.add .avwrap svg{width:24px;height:24px}\n.v2 .stories-mini .avwrap svg.pet-svg{width:90%;height:90%;margin-top:4px}\n.v2 .stories-mini .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:10.5px;color:var(--text);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;line-height:1.2}\n\n\/* Pet stage Home *\/\n.v2 .stage{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;padding:0 14px;min-height:0}\n.v2 .pet-frame{width:280px;height:280px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 80%,rgba(0,224,255,.25),transparent 60%)}\n.v2 .pet-frame::before{content:&quot;&quot;;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:180px;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,224,255,.4),transparent 70%);filter:blur(4px)}\n.v2 .pet-img-wrap{width:260px;height:260px;position:relative;z-index:3;filter:drop-shadow(0 8px 22px rgba(0,224,255,.4))}\n.v2 .bubble{position:absolute;top:20px;right:6px;max-width:130px;font-size:12px;padding:7px 12px;line-height:1.35;background:rgba(11,26,46,.92);color:var(--text);border:1px solid var(--cyan);border-radius:12px;font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;box-shadow:0 0 14px rgba(0,224,255,.4);z-index:6}\n.v2 .bubble::after{content:&quot;&quot;;position:absolute;bottom:-6px;left:24px;border:6px solid transparent;border-top-color:var(--cyan)}\n.v2 .pet-name-row{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:-6px;cursor:pointer}\n.v2 .pet-name-row .name{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:24px;color:var(--text);letter-spacing:-.4px}\n.v2 .pet-name-row .chev{color:var(--cyan);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:18px}\n.v2 .lvl-badge{display:inline-block;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11px;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--orange));color:#1A0F00;padding:2px 9px;border-radius:6px}\n.v2 .arche{font-family:&quot;Mukta&quot;,sans-serif;text-align:center;font-size:11px;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;margin-top:2px;font-weight:600}\n\n\/* Stats com mais padding *\/\n.v2 .stats-bars{padding:12px 18px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}\n.v2 .sb{display:flex;flex-direction:column;gap:4px}\n.v2 .sb-head{display:flex;justify-content:space-between;align-items:center;font-family:&quot;Mukta&quot;,sans-serif;font-size:11.5px;font-weight:600;color:var(--text-soft)}\n.v2 .sb-head .v{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;color:var(--text);font-size:12px}\n.v2 .sb-track{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(0,224,255,.15)}\n.v2 .sb-fill{height:100%;border-radius:3px}\n.v2 .sb--saude .sb-fill{background:linear-gradient(90deg,var(--green),#7AE8B5)}\n.v2 .sb--energia .sb-fill{background:linear-gradient(90deg,var(--gold),var(--orange))}\n.v2 .sb--diversao .sb-fill{background:linear-gradient(90deg,var(--purple),#A48BFF)}\n.v2 .sb--fome .sb-fill{background:linear-gradient(90deg,var(--orange),var(--pink))}\n\n\/* Bottom nav 5 abas *\/\n.v2 .bottom-nav{margin-top:auto;background:rgba(6,16,33,.92);backdrop-filter:blur(16px);border-top:1px solid rgba(0,224,255,.25);padding:8px 4px 18px;display:grid;grid-template-columns:repeat(5,1fr)}\n.v2 .nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-dim);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:10.5px;position:relative;cursor:pointer}\n.v2 .nav-item svg{width:22px;height:22px;color:currentColor}\n.v2 .nav-item.active{color:var(--cyan)}\n.v2 .nav-item.active::before{content:&quot;&quot;;position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:28px;height:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}\n\n\/* Splash *\/\n.v2 .splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:40px 30px;text-align:center;gap:20px}\n.v2 .splash-pet{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,224,255,.25) 0%,transparent 70%);display:flex;align-items:center;justify-content:center}\n.v2 .splash-pet img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 32px rgba(0,224,255,.5))}\n.v2 .splash-logo{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:54px;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}\n.v2 .splash-tag{font-family:&quot;Mukta&quot;,sans-serif;font-weight:600;font-size:12.5px;color:var(--text-dim);letter-spacing:.32em;text-transform:uppercase}\n.v2 .splash-loading{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:140px;height:3px;background:rgba(0,224,255,.15);border-radius:2px;overflow:hidden}\n.v2 .splash-loading::after{content:&quot;&quot;;position:absolute;inset:0;width:40%;background:var(--cyan);border-radius:2px;box-shadow:0 0 12px var(--cyan);animation:sl 1.5s ease-in-out infinite}\n@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}\n\n\/* Login REFEITO menor *\/\n.v2 .login-warm{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}\n.v2 .login-pet-zone{height:180px;position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:0}\n.v2 .login-pet-zone::before{content:&quot;&quot;;position:absolute;width:200px;height:200px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,224,255,.32) 0%,rgba(0,224,255,.1) 40%,transparent 65%);z-index:1}\n.v2 .login-pet-zone::after{content:&quot;&quot;;position:absolute;inset:0;background:radial-gradient(1px 1px at 22% 35%,rgba(0,224,255,.7),transparent 60%),radial-gradient(1px 1px at 78% 28%,rgba(255,209,90,.6),transparent 60%),radial-gradient(1.5px 1.5px at 15% 65%,rgba(123,91,255,.55),transparent 60%),radial-gradient(1px 1px at 88% 60%,rgba(0,224,255,.45),transparent 60%);z-index:2}\n.v2 .login-pet-zone .lpet{width:160px;height:160px;position:relative;z-index:3;filter:drop-shadow(0 4px 18px rgba(0,224,255,.4))}\n.v2 .login-pet-zone .lpet img{width:100%;height:100%;object-fit:contain}\n.v2 .login-greet{padding:16px 28px 6px;text-align:center}\n.v2 .login-greet h2{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:21px;color:var(--text);letter-spacing:-.3px;line-height:1.15}\n.v2 .login-greet p{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:12.5px;color:var(--cyan);margin-top:2px}\n.v2 .login-form{flex:1;padding:14px 26px 14px;display:flex;flex-direction:column}\n.v2 .field{width:100%;margin-bottom:10px}\n.v2 .field label{display:block;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11px;font-weight:600;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}\n.v2 .field input,.v2 .field textarea{width:100%;background:rgba(11,26,46,.6);border:1px solid var(--cyan-soft);border-radius:12px;padding:12px 14px;color:var(--text);font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:13.5px;outline:none;font-family:&quot;Mukta&quot;,sans-serif;resize:none}\n.v2 .field--focus input{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,224,255,.15)}\n.v2 .auth-cta{width:100%;margin-top:8px;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:none;border-radius:12px;box-shadow:0 8px 24px rgba(0,224,255,.4)}\n.v2 .auth-alt{margin-top:14px;display:flex;justify-content:center;gap:18px;width:100%;font-family:&quot;Mukta&quot;,sans-serif;font-weight:600;font-size:12.5px;color:var(--text-dim);padding-bottom:12px}\n.v2 .auth-alt a{color:var(--cyan)}\n.v2 .auth-alt .dot{color:var(--text-dim);opacity:.4}\n\n\/* Page-head-bar *\/\n.v2 .page-head-bar{padding:14px 18px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--cyan-soft);z-index:3;position:relative}\n.v2 .page-head-bar .back{width:36px;height:36px;border-radius:10px;background:rgba(0,224,255,.06);border:1px solid var(--cyan-soft);color:var(--cyan);display:flex;align-items:center;justify-content:center;flex-shrink:0}\n.v2 .page-title{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:20px;color:var(--text);letter-spacing:-.2px;flex:1;text-align:center}\n.v2 .page-title small{display:block;font-family:&quot;Mukta&quot;,sans-serif;font-size:10.5px;color:var(--text-dim);text-transform:none;margin-top:1px;font-weight:500}\n.v2 .icon-btn{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(0,224,255,.4)}\n\n\/* Auth forms gen\u00e9ricos *\/\n.v2 .signup{flex:1;padding:14px 26px 14px;display:flex;flex-direction:column;overflow-y:auto}\n.v2 .signup .page-title-c{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:22px;color:var(--text);margin-bottom:4px;letter-spacing:-.3px}\n.v2 .signup .page-sub{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:13px;color:var(--text-dim);margin-bottom:18px}\n.v2 .verify{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 30px;text-align:center;gap:18px}\n.v2 .verify-icon{width:88px;height:88px;border-radius:24px;background:linear-gradient(135deg,rgba(0,224,255,.15),rgba(123,91,255,.1));border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;color:var(--cyan);box-shadow:0 0 28px rgba(0,224,255,.3)}\n.v2 .verify h2{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:24px;color:var(--text);letter-spacing:-.4px}\n.v2 .verify p{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:13px;color:var(--text-dim);line-height:1.5}\n.v2 .verify .email-tag{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:12.5px;color:var(--cyan);background:rgba(0,224,255,.08);padding:8px 14px;border-radius:10px;border:1px solid var(--cyan-soft);letter-spacing:.04em}\n.v2 .verify .resend{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:13px;color:var(--cyan);margin-top:8px}\n\n\/* Permiss\u00f5es *\/\n.v2 .perms{flex:1;display:flex;flex-direction:column;padding:14px 0}\n.v2 .perms-head{padding:0 22px 12px}\n.v2 .perms-head h2{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:22px;color:var(--text);letter-spacing:-.3px;line-height:1.15}\n.v2 .perms-head p{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:12.5px;color:var(--text-dim);margin-top:6px;line-height:1.4}\n.v2 .perms-list{padding:0 16px;display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto}\n.v2 .perm-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:rgba(0,224,255,.04);border:1px solid var(--cyan-soft);border-radius:12px}\n.v2 .perm-row .pi{width:36px;height:36px;border-radius:10px;background:rgba(0,224,255,.12);display:flex;align-items:center;justify-content:center;color:var(--cyan)}\n.v2 .perm-row .pb .pt{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:13px;color:var(--text);line-height:1.15}\n.v2 .perm-row .pb .ps{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:10.5px;color:var(--text-dim);margin-top:1px;line-height:1.25}\n.v2 .toggle{width:38px;height:22px;border-radius:14px;background:rgba(122,160,204,.25);position:relative;transition:.2s}\n.v2 .toggle::after{content:&quot;&quot;;position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--text);border-radius:50%;transition:.2s}\n.v2 .toggle.on{background:linear-gradient(90deg,var(--cyan),var(--purple))}\n.v2 .toggle.on::after{left:18px;background:var(--bg)}\n\n\/* DETALHES PET *\/\n.v2 .pet-detail{flex:1;display:flex;flex-direction:column;overflow-y:auto}\n.v2 .pet-detail .hero{padding:14px 18px 8px;display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 0%,rgba(0,224,255,.22),transparent 70%);position:relative}\n.v2 .pet-detail .hero .pet-img-wrap{width:200px;height:200px;filter:drop-shadow(0 6px 18px rgba(0,224,255,.4));position:relative}\n.v2 .pet-detail .hero .pet-img-wrap img{width:100%;height:100%;object-fit:contain}\n.v2 .pet-detail .lvl-over{position:absolute;top:-2px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--orange));color:#1A0F00;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:12px;padding:4px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(255,209,90,.4);z-index:5;letter-spacing:.04em;border:2px solid var(--bg2)}\n.v2 .meta-card{margin:0 18px 10px;background:linear-gradient(180deg,rgba(0,224,255,.06),rgba(123,91,255,.04));border:1px solid var(--cyan-soft);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}\n.v2 .meta-card .cell .l{font-family:&quot;Mukta&quot;,sans-serif;font-size:10px;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;font-weight:600}\n.v2 .meta-card .cell .v{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:15px;color:var(--text);margin-top:2px}\n.v2 .evol{margin:0 18px 10px;padding:12px 14px;background:rgba(11,26,46,.6);border-radius:14px;border:1px solid rgba(255,209,90,.25)}\n.v2 .evol .l{font-family:&quot;Mukta&quot;,sans-serif;font-size:10px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:6px}\n.v2 .evol .xp-track{height:6px;background:rgba(255,209,90,.12);border-radius:3px;overflow:hidden;border:1px solid rgba(255,209,90,.25)}\n.v2 .evol .xp-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:3px;box-shadow:0 0 8px var(--gold)}\n.v2 .evol .v{font-family:&quot;Mukta&quot;,sans-serif;font-size:11px;color:var(--text);font-weight:600;margin-top:6px;display:flex;justify-content:space-between}\n\/* Stats detalhados na tela Detalhes *\/\n.v2 .stats-rich{margin:0 18px 14px;padding:8px 14px 12px;background:linear-gradient(180deg,rgba(0,224,255,.04),rgba(123,91,255,.03));border:1px solid var(--cyan-soft);border-radius:14px;display:flex;flex-direction:column;gap:10px}\n.v2 .stats-rich-head{font-family:&quot;Mukta&quot;,sans-serif;font-size:10px;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding-top:6px}\n.v2 .sb-rich{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}\n.v2 .sb-rich .ri{width:30px;height:30px;border-radius:50%;background:rgba(0,224,255,.1);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}\n.v2 .sb-rich .rb{display:flex;flex-direction:column;gap:3px;min-width:0}\n.v2 .sb-rich .rh{display:flex;justify-content:space-between;align-items:baseline}\n.v2 .sb-rich .rh .lbl{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:12.5px;color:var(--text)}\n.v2 .sb-rich .rh .narr{font-family:&quot;Mukta&quot;,sans-serif;font-style:italic;font-weight:500;font-size:10.5px;color:var(--text-dim)}\n.v2 .sb-rich .rt{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}\n.v2 .sb-rich .rf{height:100%;border-radius:3px}\n.v2 .sb-rich.s-saude .rf{background:linear-gradient(90deg,var(--green),#7AE8B5)}\n.v2 .sb-rich.s-energia .rf{background:linear-gradient(90deg,var(--gold),var(--orange))}\n.v2 .sb-rich.s-diversao .rf{background:linear-gradient(90deg,var(--purple),#A48BFF)}\n.v2 .sb-rich.s-fome .rf{background:linear-gradient(90deg,var(--orange),var(--pink))}\n.v2 .sb-rich .val{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:15px;color:var(--text);font-feature-settings:&quot;tnum&quot;}\n\n\/* C\u00c2MERA \u2014 2 bot\u00f5es + foto+texto *\/\n.v2 .ar-view{flex:1;position:relative;background:linear-gradient(135deg,#2a3b50,#1a2840 60%,#0f1c2e);overflow:hidden}\n.v2 .ar-view::before{content:&quot;&quot;;position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.06),transparent 40%)}\n.v2 .ar-view::after{content:&quot;sua c\u00e2mera&quot;;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);font-family:&quot;Mukta&quot;,sans-serif;font-size:13px;color:rgba(230,240,255,.12);letter-spacing:.2em;text-transform:uppercase;font-weight:600}\n.v2 .ar-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;z-index:3}\n.v2 .ar-close{width:42px;height:42px;border-radius:50%;background:rgba(11,26,46,.7);border:1px solid var(--cyan-soft);color:var(--text);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}\n.v2 .ar-tag{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:11.5px;color:var(--text);background:rgba(11,26,46,.75);padding:6px 12px;border-radius:999px;border:1px solid var(--cyan-soft);display:flex;align-items:center;gap:6px;backdrop-filter:blur(8px)}\n.v2 .ar-tag .rec{width:7px;height:7px;background:var(--pink);border-radius:50%;box-shadow:0 0 6px var(--pink)}\n.v2 .ar-pets{position:absolute;bottom:170px;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;z-index:2}\n.v2 .ar-pets .ar-pet{width:160px;height:180px;margin:0 -8px;filter:drop-shadow(0 8px 24px rgba(0,224,255,.4))}\n.v2 .ar-pets .ar-pet img{width:100%;height:100%;object-fit:contain}\n.v2 .ar-pets .ar-pet.active{outline:2px dashed var(--cyan);outline-offset:-4px;border-radius:8px;background:rgba(0,224,255,.08)}\n.v2 .ar-pets .ar-pet:nth-child(2){margin-bottom:14px;width:110px;height:140px}\n.v2 .ar-pets .ar-pet:nth-child(3){margin-bottom:8px;width:120px;height:150px}\n.v2 .ar-pets .ar-pet:nth-child(4){margin-bottom:18px;width:100px;height:130px}\n\/* 2 bot\u00f5es grandes em cima dos controles *\/\n.v2 .ar-cta-row{position:absolute;bottom:96px;left:14px;right:14px;display:flex;gap:8px;z-index:4}\n.v2 .ar-cta{flex:1;padding:11px 12px;border-radius:14px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;gap:7px;backdrop-filter:blur(8px);border:none;letter-spacing:-.01em}\n.v2 .ar-cta svg{width:16px;height:16px}\n.v2 .ar-cta.pri{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);box-shadow:0 6px 18px rgba(0,224,255,.4)}\n.v2 .ar-cta.sec{background:rgba(11,26,46,.85);color:var(--text);border:1px solid var(--cyan)}\n.v2 .ar-controls{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 24px;z-index:3}\n.v2 .ar-mode{width:50px;height:50px;border-radius:50%;background:rgba(11,26,46,.7);border:2px solid rgba(230,240,255,.4);color:var(--text);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}\n.v2 .ar-mode.rot{background:var(--purple);border-color:var(--text)}\n.v2 .ar-shutter{width:64px;height:64px;border-radius:50%;background:var(--text);border:4px solid var(--purple);box-shadow:0 0 0 3px rgba(0,224,255,.6),0 8px 24px rgba(0,224,255,.5);display:flex;align-items:center;justify-content:center;color:var(--purple)}\n.v2 .ar-switch{width:50px;height:50px;border-radius:50%;background:rgba(11,26,46,.7);color:var(--text);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}\n.v2 .ar-pet-tabs{position:absolute;top:64px;left:12px;right:64px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;z-index:3}\n.v2 .ar-pet-tabs::-webkit-scrollbar{display:none}\n.v2 .ar-pet-tab{flex-shrink:0;padding:7px 12px;background:rgba(11,26,46,.7);border:1px solid var(--cyan-soft);border-radius:14px;color:var(--text);font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11px;font-weight:600;backdrop-filter:blur(8px);display:flex;flex-direction:column;line-height:1.1}\n.v2 .ar-pet-tab.active{background:linear-gradient(135deg,rgba(0,224,255,.4),rgba(123,91,255,.3));border-color:var(--cyan);box-shadow:0 0 12px rgba(0,224,255,.4)}\n.v2 .ar-pet-tab .pn{font-size:10.5px;font-weight:700}\n.v2 .ar-pet-tab .po{font-family:&quot;Mukta&quot;,sans-serif;font-size:9px;font-weight:500;color:var(--text-dim);margin-top:-1px}\n.v2 .ar-pet-tab.active .po{color:var(--text)}\n.v2 .ar-reset{position:absolute;top:64px;right:14px;width:42px;height:42px;border-radius:50%;background:rgba(11,26,46,.75);border:1px solid var(--cyan-soft);color:var(--text);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);z-index:3}\n\n\/* Foto com texto \u2014 tela *\/\n.v2 .photo-text{flex:1;display:flex;flex-direction:column;padding:0}\n.v2 .photo-preview{height:280px;background:linear-gradient(135deg,#2a3b50,#0f1c2e);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}\n.v2 .photo-preview::before{content:&quot;PR\u00c9-VISUALIZA\u00c7\u00c3O&quot;;position:absolute;top:12px;left:14px;font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:10px;color:rgba(230,240,255,.4);letter-spacing:.18em;background:rgba(11,26,46,.6);padding:4px 10px;border-radius:8px}\n.v2 .photo-preview .pt-img{width:180px;height:180px;filter:drop-shadow(0 6px 18px rgba(0,224,255,.4))}\n.v2 .photo-preview .pt-img img{width:100%;height:100%;object-fit:contain}\n.v2 .pt-form{flex:1;padding:14px 18px;display:flex;flex-direction:column}\n.v2 .pt-form .ptt{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:18px;color:var(--text);margin-bottom:4px;letter-spacing:-.3px}\n.v2 .pt-form .pts{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:12.5px;color:var(--text-dim);margin-bottom:12px;line-height:1.4}\n.v2 .pt-form textarea{width:100%;flex:1;background:rgba(11,26,46,.6);border:1px solid var(--cyan-soft);border-radius:12px;padding:12px 14px;color:var(--text);font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:13px;outline:none;resize:none;line-height:1.4;min-height:80px}\n.v2 .pt-cta{margin:12px 0 0;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:14px;border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 20px rgba(0,224,255,.4)}\n.v2 .pt-cta svg{width:16px;height:16px}\n\n\/* INTERA\u00c7\u00d5ES \u2014 refeita refletindo categorias reais *\/\n.v2 .inters{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:12px 0 0}\n.v2 .inters-head{padding:0 18px 12px}\n.v2 .inters-head h2{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:22px;color:var(--text);letter-spacing:-.3px}\n.v2 .inters-head p{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:12px;color:var(--text-dim);margin-top:2px;line-height:1.4}\n.v2 .inters-cta{margin:0 14px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}\n.v2 .ict-btn{padding:14px 12px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:-.01em;border:none;color:var(--text);position:relative}\n.v2 .ict-btn .ii{font-size:22px}\n.v2 .ict-btn .il{line-height:1.1;text-align:center}\n.v2 .ict-btn .isub{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:10px;color:var(--text-dim);margin-top:-2px}\n.v2 .ict-btn.foto{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);box-shadow:0 8px 20px rgba(0,224,255,.35)}\n.v2 .ict-btn.foto .isub{color:rgba(11,26,46,.7)}\n.v2 .ict-btn.print{background:rgba(0,224,255,.06);border:1px solid var(--cyan-soft)}\n.v2 .now-detect{margin:0 18px 14px;padding:10px 12px;background:linear-gradient(135deg,rgba(123,91,255,.1),rgba(0,224,255,.06));border:1px solid var(--cyan-soft);border-radius:12px}\n.v2 .now-detect-h{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:10px;color:var(--cyan);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}\n.v2 .now-detect-h .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.5s ease-in-out infinite}\n@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}\n.v2 .now-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-family:&quot;Mukta&quot;,sans-serif;font-size:12px;color:var(--text)}\n.v2 .now-row .nri{font-size:16px}\n.v2 .now-row .nrt{font-weight:600;font-family:&quot;Baloo 2&quot;,sans-serif}\n.v2 .now-row .nrs{color:var(--text-dim);font-weight:500;font-size:11px;margin-left:auto}\n.v2 .cats-head{padding:0 18px 8px;font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:11px;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase}\n.v2 .cats-grid{padding:0 14px 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}\n.v2 .cat{aspect-ratio:1;border-radius:12px;background:rgba(0,224,255,.04);border:1px solid var(--cyan-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px}\n.v2 .cat .ci{font-size:22px}\n.v2 .cat .cn{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:9.5px;color:var(--text);letter-spacing:-.01em;text-align:center;line-height:1.05}\n\n\/* HIST\u00d3RICO *\/\n.v2 .history{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:6px 0 0}\n.v2 .timeline{padding:6px 16px 8px;display:flex;flex-direction:column;gap:6px}\n.v2 .day-tag{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:10px;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;padding:8px 4px 4px}\n.v2 .event{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:rgba(0,224,255,.04);border:1px solid var(--cyan-soft);border-radius:12px;cursor:pointer}\n.v2 .event .ei{width:36px;height:36px;border-radius:10px;background:rgba(0,224,255,.12);display:flex;align-items:center;justify-content:center;font-size:16px}\n.v2 .event .eb .et{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:12.5px;color:var(--text);line-height:1.15}\n.v2 .event .eb .es{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:10.5px;color:var(--text-dim);margin-top:1px}\n.v2 .event .tv{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13px;color:var(--green);text-align:right}\n.v2 .event .tv.neg{color:var(--pink)}\n.v2 .event .tv .tm{display:block;font-family:&quot;Mukta&quot;,sans-serif;font-size:9px;color:var(--text-dim);font-weight:500;margin-top:1px}\n\n\/* DETALHE DO EVENTO *\/\n.v2 .evd{flex:1;display:flex;flex-direction:column;overflow-y:auto}\n.v2 .evd-photo{height:240px;background:linear-gradient(135deg,#2a3b50,#0f1c2e);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}\n.v2 .evd-photo .img-mock{width:160px;height:160px;border-radius:14px;background:linear-gradient(135deg,#FFB35A,#FF7373);display:flex;align-items:center;justify-content:center;font-size:60px;box-shadow:0 8px 24px rgba(0,0,0,.4)}\n.v2 .evd-tag{position:absolute;top:14px;left:14px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:11px;color:var(--text);background:rgba(11,26,46,.75);padding:5px 10px;border-radius:8px;backdrop-filter:blur(8px);letter-spacing:.04em;border:1px solid var(--cyan-soft);display:flex;align-items:center;gap:5px}\n.v2 .evd-points{position:absolute;top:14px;right:14px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:16px;color:#1A0F00;background:linear-gradient(135deg,var(--gold),var(--orange));padding:6px 12px;border-radius:10px;box-shadow:0 4px 14px rgba(255,209,90,.4)}\n.v2 .evd-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}\n.v2 .evd-section h4{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:10px;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}\n.v2 .evd-section .txt{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:13.5px;color:var(--text);line-height:1.45;background:rgba(0,224,255,.04);padding:10px 12px;border-radius:10px;border-left:3px solid var(--cyan)}\n.v2 .evd-section .ia{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:13px;color:var(--text);line-height:1.45;background:rgba(123,91,255,.06);padding:10px 12px;border-radius:10px;border-left:3px solid var(--purple);font-style:italic}\n.v2 .evd-section .ia::before{content:&quot;\ud83d\udcac &quot;;opacity:.7}\n.v2 .evd-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}\n.v2 .evd-mc{padding:10px 12px;background:rgba(0,224,255,.04);border:1px solid var(--cyan-soft);border-radius:10px}\n.v2 .evd-mc .l{font-family:&quot;Mukta&quot;,sans-serif;font-size:10px;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;font-weight:700}\n.v2 .evd-mc .v{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13.5px;color:var(--text);margin-top:2px}\n.v2 .evd-impact{display:flex;flex-direction:column;gap:5px;padding:10px 12px;background:rgba(90,232,160,.05);border:1px solid rgba(90,232,160,.25);border-radius:10px}\n.v2 .evd-imp-row{display:flex;justify-content:space-between;align-items:center;font-family:&quot;Mukta&quot;,sans-serif;font-size:11.5px;color:var(--text);font-weight:500}\n.v2 .evd-imp-row .pos{color:var(--green);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700}\n.v2 .evd-imp-row .neg{color:var(--pink);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700}\n\n\/* SUB-TABS com badge em cima como notif p\u00edlula *\/\n.v2 .subtabs{display:flex;gap:6px;padding:10px 14px 8px;border-bottom:1px solid var(--cyan-soft)}\n.v2 .subtab{flex:1;padding:9px 6px;text-align:center;background:rgba(0,224,255,.04);border:1px solid var(--cyan-soft);border-radius:10px;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11.5px;font-weight:600;color:var(--text-dim);position:relative;cursor:pointer;letter-spacing:-.01em}\n.v2 .subtab.active{background:linear-gradient(180deg,rgba(0,224,255,.18),rgba(123,91,255,.12));color:var(--text);border-color:var(--cyan)}\n.v2 .subtab .nbadge{position:absolute;top:-7px;right:-5px;min-width:18px;height:18px;background:var(--pink);color:var(--text);font-family:&quot;Baloo 2&quot;,sans-serif;font-size:10px;font-weight:700;border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);padding:0 5px;box-shadow:0 2px 6px rgba(255,90,120,.5)}\n\n\/* Friend list *\/\n.v2 .friend-list{padding:6px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1}\n.v2 .friend-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(180deg,rgba(0,224,255,.04),rgba(123,91,255,.04));border:1px solid var(--cyan-soft);border-radius:12px}\n.v2 .friend-card .mini-pet{width:44px;height:44px;border-radius:50%;background:rgba(11,26,46,.6);border:1.5px solid var(--cyan);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}\n.v2 .friend-card .mini-pet svg{width:90%;height:90%;margin-top:6px}\n.v2 .friend-card .info{flex:1;min-width:0}\n.v2 .friend-card .info .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:14px;color:var(--text)}\n.v2 .friend-card .info .sub{display:flex;align-items:center;gap:6px;font-family:&quot;Mukta&quot;,sans-serif;font-size:11px;color:var(--text-dim);margin-top:1px;font-weight:500}\n.v2 .dot-on{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}\n.v2 .dot-off{width:7px;height:7px;border-radius:50%;background:var(--text-dim);opacity:.5}\n.v2 .friend-card .lvl-mini{font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11px;background:rgba(255,209,90,.12);color:var(--gold);padding:3px 8px;border-radius:6px;font-weight:700}\n.v2 .sec-label{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:10.5px;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;padding:8px 4px 4px}\n\n\/* Adicionar amigo *\/\n.v2 .addf{flex:1;display:flex;flex-direction:column;padding:14px 0;overflow-y:auto}\n.v2 .my-code{margin:0 18px 14px;padding:16px;background:radial-gradient(ellipse at 50% 0%,rgba(0,224,255,.2),transparent 70%);border:1.5px dashed var(--cyan);border-radius:16px;text-align:center}\n.v2 .my-code .l{font-family:&quot;Mukta&quot;,sans-serif;font-weight:600;font-size:10.5px;color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase}\n.v2 .my-code .code{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:26px;color:var(--cyan);letter-spacing:.18em;margin:6px 0 8px;text-shadow:0 0 16px rgba(0,224,255,.5)}\n.v2 .my-code .share-row{display:flex;gap:6px;justify-content:center}\n.v2 .my-code .sb{padding:6px 12px;background:rgba(0,224,255,.08);border:1px solid var(--cyan-soft);border-radius:8px;color:var(--cyan);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:11.5px;display:inline-flex;align-items:center;gap:5px}\n.v2 .my-code .sb svg{width:13px;height:13px}\n.v2 .addf-sep{display:flex;align-items:center;gap:10px;padding:0 22px 12px;font-family:&quot;Mukta&quot;,sans-serif;font-size:11px;color:var(--text-dim);font-weight:600;letter-spacing:.06em;text-transform:uppercase}\n.v2 .addf-sep::before,.v2 .addf-sep::after{content:&quot;&quot;;flex:1;height:1px;background:rgba(0,224,255,.15)}\n.v2 .addf .field{padding:0 22px}\n.v2 .addf-cta{margin:8px 22px 12px;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13.5px;border-radius:12px;text-align:center;box-shadow:0 8px 20px rgba(0,224,255,.4);border:none}\n\n\/* Rooms *\/\n.v2 .rooms-list{padding:8px 14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}\n.v2 .room-card{padding:12px;background:linear-gradient(180deg,rgba(0,224,255,.06),rgba(123,91,255,.04));border:1px solid var(--cyan-soft);border-radius:14px;display:flex;flex-direction:column;gap:8px}\n.v2 .room-card .rh{display:flex;justify-content:space-between;align-items:flex-start}\n.v2 .room-card .rh .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:14px;color:var(--text)}\n.v2 .room-card .rh .sub{font-family:&quot;Mukta&quot;,sans-serif;font-size:10.5px;color:var(--text-dim);font-weight:500;margin-top:1px}\n.v2 .room-card .rh .pill{font-family:&quot;Baloo 2&quot;,sans-serif;font-size:10px;font-weight:700;color:var(--green);background:rgba(90,232,160,.12);padding:3px 8px;border-radius:8px;border:1px solid rgba(90,232,160,.3)}\n.v2 .room-card .pets-mini{display:flex;align-items:center}\n.v2 .room-card .pets-mini .pm{width:32px;height:32px;border-radius:50%;background:rgba(11,26,46,.7);border:2px solid var(--cyan);overflow:hidden;margin-left:-8px;display:flex;align-items:center;justify-content:center}\n.v2 .room-card .pets-mini .pm:first-child{margin-left:0}\n.v2 .room-card .pets-mini .pm svg{width:90%;height:90%;margin-top:5px}\n.v2 .room-card .pets-mini .pm img{width:90%;height:90%;object-fit:contain}\n.v2 .room-card .pets-mini .more{margin-left:8px;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11px;color:var(--text-dim);font-weight:600}\n.v2 .new-room{margin:0 14px 8px;padding:14px;background:rgba(0,224,255,.04);border:1.5px dashed var(--cyan);border-radius:14px;color:var(--cyan);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}\n\n\/* Convites *\/\n.v2 .invites-list{padding:8px 14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}\n.v2 .invite-card{padding:12px;background:linear-gradient(135deg,rgba(255,209,90,.08),rgba(0,224,255,.05));border:1px solid rgba(255,209,90,.3);border-radius:14px;display:flex;flex-direction:column;gap:10px;position:relative}\n.v2 .invite-card .ih{display:flex;align-items:center;gap:10px}\n.v2 .invite-card .ih .mini-pet{width:42px;height:42px;border-radius:50%;background:rgba(11,26,46,.6);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}\n.v2 .invite-card .ih .mini-pet svg{width:90%;height:90%;margin-top:6px}\n.v2 .invite-card .ih .info .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13.5px;color:var(--text)}\n.v2 .invite-card .ih .info .sub{font-family:&quot;Mukta&quot;,sans-serif;font-size:11px;color:var(--text-dim);font-weight:500;margin-top:1px}\n.v2 .invite-card .timer{position:absolute;top:10px;right:12px;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:10.5px;color:var(--gold);font-weight:700}\n.v2 .invite-card .iact{display:flex;gap:6px}\n.v2 .invite-card .iact button{flex:1;padding:9px 0;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:12px;border-radius:10px;border:none}\n.v2 .invite-card .iact .accept{background:linear-gradient(135deg,var(--green),#7AE8B5);color:var(--bg);box-shadow:0 4px 12px rgba(90,232,160,.3)}\n.v2 .invite-card .iact .decline{background:rgba(255,90,120,.12);color:var(--pink);border:1px solid var(--pink)}\n\n\/* SALA 3D com chat WhatsApp *\/\n.v2 .room-head{padding:12px 16px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--cyan-soft);background:rgba(11,26,46,.6);z-index:5;position:relative}\n.v2 .room-head .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:14px;color:var(--text)}\n.v2 .room-head .sub{font-family:&quot;Mukta&quot;,sans-serif;font-size:10.5px;color:var(--cyan);margin-top:1px;font-weight:600}\n.v2 .room-leave{padding:6px 12px;background:rgba(255,90,120,.12);color:var(--pink);border:1px solid var(--pink);border-radius:10px;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11px;font-weight:600}\n.v2 .room-stage{position:relative;background:radial-gradient(ellipse at 50% 70%,rgba(0,224,255,.18),transparent 60%);display:flex;align-items:flex-end;justify-content:center;padding:8px 0 16px;min-height:180px}\n.v2 .room-stage .floor{position:absolute;bottom:8px;left:30px;right:30px;height:20px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,224,255,.3),transparent 70%);filter:blur(6px)}\n.v2 .room-pets{display:flex;align-items:flex-end;position:relative;z-index:3}\n.v2 .room-pets .rp{width:70px;height:90px;margin:0 -6px;position:relative}\n.v2 .room-pets .rp svg{filter:drop-shadow(0 6px 14px rgba(0,224,255,.3))}\n.v2 .room-pets .rp img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,224,255,.3))}\n.v2 .room-pets .rp .nm{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-family:&quot;Baloo 2&quot;,sans-serif;font-size:9.5px;color:var(--text);background:rgba(11,26,46,.85);padding:1px 7px;border-radius:8px;border:1px solid var(--cyan-soft);white-space:nowrap;font-weight:600}\n.v2 .room-pets .rp .chat-bubble{position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:rgba(11,26,46,.95);color:var(--text);border:1px solid var(--cyan);padding:3px 8px;border-radius:10px;font-family:&quot;Mukta&quot;,sans-serif;font-size:9.5px;font-weight:500;white-space:nowrap;box-shadow:0 0 8px rgba(0,224,255,.3);max-width:100px;overflow:hidden;text-overflow:ellipsis}\n\/* CHAT estilo WhatsApp *\/\n.v2 .room-chat{flex:1;display:flex;flex-direction:column;background:rgba(11,26,46,.7);border-top:1px solid var(--cyan-soft);padding:8px 0 0;overflow:hidden}\n.v2 .chat-list{flex:1;padding:6px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}\n.v2 .cmsg{display:flex;gap:6px;max-width:80%;align-items:flex-end}\n.v2 .cmsg.me{margin-left:auto;flex-direction:row-reverse}\n.v2 .cmsg .av{width:24px;height:24px;border-radius:50%;background:rgba(11,26,46,.7);border:1.5px solid var(--cyan-soft);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-bottom:2px}\n.v2 .cmsg .av svg{width:90%;height:90%;margin-top:3px}\n.v2 .cmsg .av img{width:90%;height:90%;object-fit:contain}\n.v2 .cmsg .bb{padding:6px 10px;border-radius:14px;font-family:&quot;Mukta&quot;,sans-serif;font-size:12px;color:var(--text);background:rgba(255,255,255,.08);border:1px solid rgba(122,160,204,.2);position:relative;line-height:1.3}\n.v2 .cmsg .bb .nn{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:10.5px;color:var(--cyan);margin-bottom:1px;letter-spacing:-.01em}\n.v2 .cmsg .bb .tm{font-family:&quot;Mukta&quot;,sans-serif;font-size:9px;color:var(--text-dim);margin-top:2px;font-weight:500;text-align:right}\n.v2 .cmsg.me .bb{background:linear-gradient(135deg,rgba(0,224,255,.25),rgba(123,91,255,.2));border-color:var(--cyan);color:var(--text)}\n.v2 .cmsg.me .bb .nn{color:var(--gold);text-align:right}\n.v2 .chat-input{padding:8px 12px 12px;display:flex;gap:8px;align-items:center;background:rgba(6,16,33,.85);border-top:1px solid var(--cyan-soft)}\n.v2 .chat-input input{flex:1;background:rgba(11,26,46,.7);border:1px solid var(--cyan-soft);border-radius:18px;padding:8px 14px;color:var(--text);font-family:&quot;Mukta&quot;,sans-serif;font-size:12.5px;font-weight:500;outline:none}\n.v2 .chat-input .send{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(0,224,255,.4)}\n.v2 .chat-input .send svg{width:16px;height:16px}\n\n\/* CORES com picker hex *\/\n.v2 .colors-preview{padding:14px 16px 8px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,rgba(0,224,255,.2),transparent 60%);position:relative}\n.v2 .colors-preview .pet-img-wrap{width:160px;height:160px}\n.v2 .colors-preview .pet-img-wrap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,224,255,.3))}\n.v2 .kits-scroll{padding:6px 14px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}\n.v2 .kits-scroll::-webkit-scrollbar{display:none}\n.v2 .kit{flex-shrink:0;padding:7px 13px;background:rgba(0,224,255,.06);border:1px solid var(--cyan-soft);border-radius:999px;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11.5px;font-weight:600;color:var(--text)}\n.v2 .kit.active{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);border-color:transparent}\n.v2 .colors-section{padding:6px 18px 0}\n.v2 .colors-section .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}\n.v2 .colors-section h4{font-family:&quot;Baloo 2&quot;,sans-serif;font-size:12px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em}\n.v2 .pick-custom{font-family:&quot;Baloo 2&quot;,sans-serif;font-size:10.5px;font-weight:700;color:var(--cyan);background:rgba(0,224,255,.08);padding:4px 10px;border-radius:8px;border:1px solid var(--cyan-soft);display:inline-flex;align-items:center;gap:4px}\n.v2 .color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:10px}\n.v2 .color-chip{aspect-ratio:1;border-radius:10px;border:2px solid transparent;position:relative}\n.v2 .color-chip.sel{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,224,255,.3),0 0 12px var(--cyan)}\n.v2 .color-chip.sel::after{content:&quot;\u2713&quot;;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--bg);font-weight:800;font-size:14px;font-family:&quot;Baloo 2&quot;,sans-serif}\n.v2 .color-chip.rainbow{background:conic-gradient(red,orange,yellow,green,cyan,blue,purple,red);display:flex;align-items:center;justify-content:center;color:#fff;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:14px}\n.v2 .apply-cta{margin:10px 18px;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;border:none;border-radius:12px;box-shadow:0 8px 20px rgba(0,224,255,.4);text-align:center}\n.v2 .picker-overlay{position:absolute;inset:0;background:rgba(6,16,33,.85);backdrop-filter:blur(12px);z-index:20;display:flex;flex-direction:column;justify-content:flex-end}\n.v2 .picker-sheet{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--cyan);border-radius:24px 24px 0 0;padding:18px;box-shadow:0 -10px 40px rgba(0,224,255,.2)}\n.v2 .picker-handle{width:50px;height:5px;border-radius:3px;background:var(--cyan-soft);margin:0 auto 14px}\n.v2 .picker-sheet h3{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:18px;color:var(--text);text-align:center;margin-bottom:14px}\n.v2 .pick-circle{width:160px;height:160px;border-radius:50%;background:conic-gradient(red,orange,yellow,green,cyan,blue,purple,red);margin:0 auto 12px;position:relative;box-shadow:0 0 24px rgba(0,224,255,.3)}\n.v2 .pick-circle::after{content:&quot;&quot;;position:absolute;inset:25%;background:radial-gradient(circle,#fff,transparent 80%);border-radius:50%}\n.v2 .pick-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:#FFB35A;border:3px solid #fff;top:30%;right:22%;box-shadow:0 0 8px rgba(0,0,0,.4)}\n.v2 .pick-hex{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:13px;color:var(--cyan);text-align:center;letter-spacing:.16em;margin-bottom:14px}\n.v2 .pick-slider{width:100%;height:14px;border-radius:7px;background:linear-gradient(90deg,#000,#fff);margin-bottom:14px;position:relative}\n.v2 .pick-slider::after{content:&quot;&quot;;position:absolute;left:60%;top:-3px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--cyan);box-shadow:0 0 8px rgba(0,224,255,.4)}\n.v2 .pick-actions{display:flex;gap:8px}\n.v2 .pick-actions button{flex:1;padding:11px;border-radius:10px;border:none;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13px}\n.v2 .pick-actions .cancel{background:rgba(122,160,204,.15);color:var(--text)}\n.v2 .pick-actions .confirm{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg)}\n\n\/* Overlay e Menu radial *\/\n.v2 .overlay-sim{flex:1;position:relative;background:#FAFAFA;overflow:hidden}\n.v2 .overlay-sim .fake-app{padding:14px 16px;color:#0F1A2E;font-family:&quot;Mukta&quot;,sans-serif}\n.v2 .overlay-sim .fake-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #E5E5E5}\n.v2 .overlay-sim .fake-head .ft{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:18px}\n.v2 .overlay-sim .fake-msg{padding:14px 0;display:flex;flex-direction:column;gap:10px}\n.v2 .overlay-sim .fake-msg .row{display:flex;align-items:center;gap:10px}\n.v2 .overlay-sim .fake-msg .av{width:34px;height:34px;border-radius:50%;background:#D0D5DD;flex-shrink:0}\n.v2 .overlay-sim .fake-msg .txt .nn{font-size:12.5px;font-weight:700;color:#1F2937}\n.v2 .overlay-sim .fake-msg .txt .pp{font-size:11.5px;color:#6B7280;margin-top:2px}\n.v2 .overlay-sim .fake-msg .row.right{flex-direction:row-reverse}\n.v2 .overlay-sim .fake-msg .row.right .bubble-c{background:#0F1A2E;color:#fff;padding:8px 12px;border-radius:14px;font-size:12px}\n.v2 .overlay-sim .fake-msg .bubble-c{background:#F0F2F5;padding:8px 12px;border-radius:14px;font-size:12px;color:#1F2937}\n.v2 .overlay-sim .pet-overlay{position:absolute;top:340px;right:22px;width:88px;height:88px;z-index:10;filter:drop-shadow(0 6px 18px rgba(0,224,255,.4))}\n.v2 .overlay-sim .pet-overlay::before{content:&quot;&quot;;position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(0,224,255,.3),transparent 70%);filter:blur(8px);z-index:-1}\n.v2 .overlay-sim .pet-overlay img{width:100%;height:100%;object-fit:contain}\n.v2 .radial-sim{flex:1;position:relative;background:radial-gradient(ellipse at 50% 50%,rgba(11,26,46,.85),rgba(6,16,33,.95));overflow:hidden}\n.v2 .radial-sim::before{content:&quot;&quot;;position:absolute;inset:0;backdrop-filter:blur(10px);background:rgba(11,26,46,.4)}\n.v2 .radial-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;z-index:5;filter:drop-shadow(0 0 24px rgba(0,224,255,.5))}\n.v2 .radial-center img{width:100%;height:100%;object-fit:contain}\n.v2 .radial-opt{position:absolute;width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,rgba(0,224,255,.2),rgba(123,91,255,.18));border:2px solid var(--cyan);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text);box-shadow:0 0 20px rgba(0,224,255,.4);backdrop-filter:blur(8px);z-index:4}\n.v2 .radial-opt svg{width:24px;height:24px;color:var(--cyan)}\n.v2 .radial-opt .lbl{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:-.01em;text-align:center;padding:0 4px}\n.v2 .radial-opt.pos-l{top:50%;left:18px;transform:translateY(-50%)}\n.v2 .radial-opt.pos-r{top:50%;right:18px;transform:translateY(-50%)}\n.v2 .radial-opt.pos-top-only{top:18%;left:50%;transform:translateX(-50%)}\n.v2 .radial-bubble{position:absolute;top:6%;left:50%;transform:translateX(-50%);background:rgba(11,26,46,.92);color:var(--text);border:1px solid var(--cyan);padding:8px 14px;border-radius:14px;font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:12px;z-index:6;white-space:nowrap}\n.v2 .radial-close{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:rgba(255,90,120,.15);border:1.5px solid var(--pink);color:var(--pink);display:flex;align-items:center;justify-content:center;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:24px;z-index:5}\n\n\/* Perfil *\/\n.v2 .profile-head{padding:20px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;background:radial-gradient(ellipse at 50% 0%,rgba(0,224,255,.2),transparent 70%);border-bottom:1px solid var(--cyan-soft)}\n.v2 .profile-av{width:84px;height:84px;border-radius:22px;background:linear-gradient(135deg,var(--cyan),var(--purple));box-shadow:0 0 24px rgba(0,224,255,.4),inset 0 0 0 3px var(--bg2);display:flex;align-items:center;justify-content:center;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:38px;color:var(--bg)}\n.v2 .profile-name{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:22px;color:var(--text);text-align:center}\n.v2 .profile-code{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:12px;color:var(--cyan);letter-spacing:.16em;background:rgba(0,224,255,.08);padding:4px 12px;border-radius:8px;border:1px solid var(--cyan-soft)}\n.v2 .profile-stats{display:flex;gap:22px;margin-top:6px}\n.v2 .profile-stat{text-align:center}\n.v2 .profile-stat .v{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:22px;color:var(--gold);line-height:1}\n.v2 .profile-stat .l{font-family:&quot;Mukta&quot;,sans-serif;font-size:10px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-top:2px}\n.v2 .menu-list{flex:1;padding:6px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}\n.v2 .menu-item{display:flex;align-items:center;gap:12px;padding:13px 14px;background:linear-gradient(180deg,rgba(0,224,255,.04),rgba(123,91,255,.04));border:1px solid var(--cyan-soft);border-radius:12px;color:var(--text);font-family:&quot;Baloo 2&quot;,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:-.01em}\n.v2 .menu-item svg{width:18px;height:18px;color:var(--cyan)}\n.v2 .menu-item .chevron{margin-left:auto;color:var(--text-dim);font-family:&quot;Mukta&quot;,sans-serif;font-weight:600;font-size:12px}\n.v2 .menu-item--danger{color:var(--pink);border-color:rgba(255,90,120,.3)}\n.v2 .menu-item--danger svg{color:var(--pink)}\n\n\/* Notif *\/\n.v2 .notif{flex:1;display:flex;flex-direction:column;overflow-y:auto}\n.v2 .notif-grp{padding:8px 18px 4px}\n.v2 .notif-grp .gh{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:10.5px;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}\n.v2 .notif-list{padding:0 16px;display:flex;flex-direction:column;gap:6px}\n.v2 .notif-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px 14px;background:rgba(0,224,255,.04);border:1px solid var(--cyan-soft);border-radius:12px}\n.v2 .notif-row .nb .t{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:13px;color:var(--text)}\n.v2 .notif-row .nb .s{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:11px;color:var(--text-dim);margin-top:2px}\n\n\/* QUIZ \u2014 1 tela exemplo *\/\n.v2 .quiz{flex:1;display:flex;flex-direction:column;padding:14px 0}\n.v2 .quiz-progress{padding:0 22px 6px;display:flex;gap:4px}\n.v2 .quiz-step{flex:1;height:3px;border-radius:2px;background:rgba(0,224,255,.15)}\n.v2 .quiz-step.done{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}\n.v2 .quiz-step.curr{background:linear-gradient(90deg,var(--cyan) 60%,rgba(0,224,255,.15) 60%)}\n.v2 .quiz-counter{padding:8px 22px 0;font-family:&quot;Mukta&quot;,sans-serif;font-weight:600;font-size:11px;color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase}\n.v2 .quiz-q{padding:14px 22px 18px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:22px;color:var(--text);line-height:1.2;letter-spacing:-.3px}\n.v2 .quiz-options{padding:0 18px;display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto}\n.v2 .quiz-opt{display:flex;align-items:center;gap:12px;padding:14px 14px;background:linear-gradient(180deg,rgba(0,224,255,.06),rgba(123,91,255,.04));border:1.5px solid var(--cyan-soft);border-radius:14px}\n.v2 .quiz-opt.sel{border-color:var(--cyan);background:linear-gradient(180deg,rgba(0,224,255,.18),rgba(123,91,255,.12));box-shadow:0 0 16px rgba(0,224,255,.2)}\n.v2 .quiz-opt .glyph{width:38px;height:38px;border-radius:10px;background:rgba(0,224,255,.1);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:var(--cyan)}\n.v2 .quiz-opt.sel .glyph{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg)}\n.v2 .quiz-opt .body .t{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:13.5px;color:var(--text);letter-spacing:-.01em;line-height:1.2}\n.v2 .quiz-opt .body .s{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:11px;color:var(--text-dim);margin-top:2px;line-height:1.3}\n.v2 .quiz-cta{margin:14px 22px 18px;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:none;border-radius:12px;text-align:center;box-shadow:0 8px 24px rgba(0,224,255,.4)}\n\n\/* STORY VIEWER (Instagram-style) *\/\n.v2 .stview{flex:1;position:relative;background:linear-gradient(135deg,#8B5A8B,#5B3A8B 50%,#2A1858);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}\n.v2 .stview::after{content:&quot;foto postada \u00b7 #praia&quot;;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:&quot;Mukta&quot;,sans-serif;font-size:13px;color:rgba(255,255,255,.4);letter-spacing:.2em;text-transform:uppercase;font-weight:600}\n.v2 .stview-bars{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:4px;z-index:5}\n.v2 .stview-bar{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}\n.v2 .stview-bar.done{background:rgba(255,255,255,.85)}\n.v2 .stview-bar.curr{background:rgba(255,255,255,.3);position:relative}\n.v2 .stview-bar.curr::after{content:&quot;&quot;;position:absolute;left:0;top:0;bottom:0;width:60%;background:rgba(255,255,255,.95)}\n.v2 .stview-head{position:absolute;top:32px;left:14px;right:14px;display:flex;align-items:center;gap:10px;z-index:5}\n.v2 .stview-head .av{width:36px;height:36px;border-radius:50%;background:rgba(11,26,46,.5);border:2px solid #fff;overflow:hidden;display:flex;align-items:center;justify-content:center}\n.v2 .stview-head .av svg{width:90%;height:90%;margin-top:5px}\n.v2 .stview-head .info{flex:1;line-height:1.15}\n.v2 .stview-head .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13.5px;color:#fff}\n.v2 .stview-head .tm{font-family:&quot;Mukta&quot;,sans-serif;font-size:10.5px;color:rgba(255,255,255,.7);font-weight:500}\n.v2 .stview-close{width:32px;height:32px;color:#fff;display:flex;align-items:center;justify-content:center}\n.v2 .stview-cap{margin:0 22px 14px;font-family:&quot;Mukta&quot;,sans-serif;font-size:13px;color:#fff;font-weight:500;text-shadow:0 2px 8px rgba(0,0,0,.5);text-align:center;z-index:3;position:relative}\n.v2 .stview-reply{padding:8px 14px 18px;display:flex;gap:8px;z-index:3;position:relative;background:linear-gradient(180deg,transparent,rgba(0,0,0,.3))}\n.v2 .stview-reply input{flex:1;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:9px 14px;color:#fff;font-family:&quot;Mukta&quot;,sans-serif;font-size:13px;font-weight:500;outline:none;backdrop-filter:blur(8px)}\n.v2 .stview-reply input::placeholder{color:rgba(255,255,255,.6)}\n.v2 .stview-reply .heart{width:38px;height:38px;border-radius:50%;background:rgba(255,90,120,.2);color:#FFC1CB;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,90,120,.4);backdrop-filter:blur(8px)}\n.v2 .stview-reply .send{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}\n\n\/* STORY ADDER *\/\n.v2 .stadd-confirm{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px;background:rgba(11,26,46,.85);backdrop-filter:blur(12px);border-top:1px solid var(--cyan-soft)}\n.v2 .stadd-confirm .stt{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:14px;color:var(--text);text-align:center}\n.v2 .stadd-confirm .row{display:flex;gap:8px}\n.v2 .stadd-confirm .row button{flex:1;padding:13px;border-radius:12px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13px;border:none}\n.v2 .stadd-confirm .cancel{background:rgba(122,160,204,.15);color:var(--text)}\n.v2 .stadd-confirm .post{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);box-shadow:0 6px 18px rgba(0,224,255,.4)}\n\n\/* A\u00c7\u00d5ES DA DETALHES PET \u2014 Loja \/ Cores \/ Hist\u00f3rico *\/\n.v2 .pet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 18px 12px}\n.v2 .pet-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px 8px;border-radius:14px;background:linear-gradient(180deg,rgba(0,224,255,.08),rgba(123,91,255,.05));border:1px solid var(--cyan-soft);color:var(--text);font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:12px;letter-spacing:-.01em;position:relative;overflow:hidden}\n.v2 .pet-act::before{content:&quot;&quot;;position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 50%)}\n.v2 .pet-act svg{width:22px;height:22px;color:var(--cyan);z-index:2}\n.v2 .pet-act.shop{background:linear-gradient(180deg,rgba(255,209,90,.14),rgba(255,139,61,.08));border-color:rgba(255,209,90,.4)}\n.v2 .pet-act.shop svg{color:var(--gold)}\n.v2 .pet-act.shop::after{content:&quot;&quot;;position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--gold);border-radius:50%;box-shadow:0 0 6px var(--gold)}\n\n\/* LOJA *\/\n.v2 .shop{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}\n.v2 .shop::-webkit-scrollbar{display:none}\n.v2 .shop-coins{display:flex;align-items:center;gap:6px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:13px;color:#1A0F00;background:linear-gradient(135deg,var(--gold),var(--orange));padding:5px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(255,209,90,.4)}\n.v2 .shop-coins svg{width:14px;height:14px}\n.v2 .shop-preview{padding:8px 16px 4px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,rgba(255,209,90,.18),transparent 60%);position:relative}\n.v2 .shop-preview .pet-img-wrap{width:108px;height:108px;position:relative}\n.v2 .shop-preview .pet-img-wrap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,224,255,.3))}\n.v2 .shop-preview .item-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-30%);font-size:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}\n.v2 .shop-current{padding:2px 18px 6px;text-align:center}\n.v2 .shop-current .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:15px;color:var(--text);letter-spacing:-.2px}\n.v2 .shop-current .sub{font-family:&quot;Mukta&quot;,sans-serif;font-size:10.5px;color:var(--text-dim);font-weight:500;margin-top:0}\n.v2 .shop-cats{padding:0 14px 6px;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}\n.v2 .shop-cats::-webkit-scrollbar{display:none}\n.v2 .shop-cat{flex-shrink:0;padding:6px 11px;background:rgba(0,224,255,.06);border:1px solid var(--cyan-soft);border-radius:999px;font-family:&quot;Baloo 2&quot;,sans-serif;font-size:11px;font-weight:600;color:var(--text-dim);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}\n.v2 .shop-cat.active{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);border-color:transparent}\n.v2 .shop-grid{padding:4px 12px 6px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}\n.v2 .shop-item{aspect-ratio:.95;border-radius:12px;background:linear-gradient(180deg,rgba(0,224,255,.06),rgba(123,91,255,.04));border:1px solid var(--cyan-soft);display:flex;flex-direction:column;align-items:center;padding:5px 3px;position:relative;overflow:hidden}\n.v2 .shop-item::before{content:&quot;&quot;;position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%);pointer-events:none}\n.v2 .shop-item .ph{flex:1;width:100%;display:flex;align-items:center;justify-content:center;font-size:28px;z-index:2}\n.v2 .shop-item .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:9.5px;color:var(--text);text-align:center;line-height:1.1;margin-bottom:2px;z-index:2;letter-spacing:-.02em}\n.v2 .shop-item .pr{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:9px;color:var(--gold);display:flex;align-items:center;gap:2px;z-index:2;white-space:nowrap;letter-spacing:-.01em}\n.v2 .shop-item .pr svg{width:8px;height:8px;flex-shrink:0}\n.v2 .shop-item.equipped{border-color:var(--green);background:linear-gradient(180deg,rgba(90,232,160,.12),rgba(0,224,255,.05));box-shadow:0 0 12px rgba(90,232,160,.2)}\n.v2 .shop-item.equipped .pr{color:var(--green);font-family:&quot;Baloo 2&quot;,sans-serif;text-transform:none;letter-spacing:-.02em;font-size:8.5px;gap:2px;line-height:1}\n.v2 .shop-item.equipped .pr::before{content:&quot;\u2713 &quot;;font-size:10px;line-height:1}\n.v2 .shop-item.locked{opacity:.55}\n.v2 .shop-item.locked .pr{color:var(--text-dim)}\n.v2 .shop-item.selected{border-color:var(--cyan);box-shadow:0 0 16px rgba(0,224,255,.3)}\n.v2 .shop-buy{margin:6px 16px 8px;padding:11px;background:linear-gradient(135deg,var(--gold),var(--orange));color:#1A0F00;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:12.5px;letter-spacing:-.01em;border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 6px 16px rgba(255,209,90,.4)}\n.v2 .shop-buy svg{width:16px;height:16px}\n\n\/* COMPRAR MOEDAS *\/\n.v2 .coins-page{flex:1;display:flex;flex-direction:column;overflow-y:auto}\n.v2 .coins-hero{padding:18px 18px 12px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(255,209,90,.25),transparent 70%)}\n.v2 .coins-bag{width:100px;height:100px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:72px;filter:drop-shadow(0 8px 18px rgba(255,209,90,.5))}\n.v2 .coins-hero h2{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:22px;color:var(--text);letter-spacing:-.3px;margin-top:4px}\n.v2 .coins-hero p{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:12px;color:var(--text-dim);margin-top:2px}\n.v2 .coins-balance{margin:8px auto 0;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--gold),var(--orange));color:#1A0F00;padding:5px 14px;border-radius:999px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:13.5px;box-shadow:0 4px 12px rgba(255,209,90,.4)}\n.v2 .coins-balance svg{width:14px;height:14px}\n.v2 .coins-grid{padding:14px 16px 8px;display:flex;flex-direction:column;gap:8px}\n.v2 .coin-pack{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;background:linear-gradient(180deg,rgba(0,224,255,.06),rgba(123,91,255,.04));border:1px solid var(--cyan-soft);border-radius:14px;position:relative}\n.v2 .coin-pack.best{background:linear-gradient(135deg,rgba(255,209,90,.18),rgba(255,139,61,.1));border-color:var(--gold);box-shadow:0 0 16px rgba(255,209,90,.18)}\n.v2 .coin-pack .ci{font-size:36px;line-height:1}\n.v2 .coin-pack .cb .nm{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:15px;color:var(--text);display:flex;align-items:center;gap:5px}\n.v2 .coin-pack .cb .nm .bn{font-family:&quot;Mukta&quot;,sans-serif;font-size:9.5px;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--orange));color:#1A0F00;padding:2px 7px;border-radius:6px;letter-spacing:.04em;text-transform:uppercase}\n.v2 .coin-pack .cb .sub{font-family:&quot;Mukta&quot;,sans-serif;font-weight:500;font-size:11.5px;color:var(--text-dim);margin-top:1px}\n.v2 .coin-pack .pr{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:800;font-size:15px;color:var(--cyan);background:rgba(0,224,255,.1);padding:7px 12px;border-radius:10px;border:1px solid var(--cyan-soft);text-align:center;letter-spacing:-.02em}\n.v2 .coin-pack.best .pr{background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);border-color:transparent}\n.v2 .coin-pay{margin:10px 16px;padding:13px;background:rgba(0,224,255,.04);border:1px solid var(--cyan-soft);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:&quot;Mukta&quot;,sans-serif;font-size:11.5px;color:var(--text-dim);font-weight:600}\n.v2 .coin-pay .methods{display:flex;gap:6px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:11.5px;color:var(--text)}\n.v2 .coin-pay .methods span{padding:3px 8px;background:rgba(0,224,255,.08);border-radius:6px;border:1px solid var(--cyan-soft)}\n\n\/* CONTA E E-MAIL *\/\n.v2 .account{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:14px 18px}\n.v2 .account-grp{margin-bottom:14px}\n.v2 .account-grp .gh{font-family:&quot;Mukta&quot;,sans-serif;font-weight:700;font-size:10.5px;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}\n.v2 .account-card{background:linear-gradient(180deg,rgba(0,224,255,.04),rgba(123,91,255,.03));border:1px solid var(--cyan-soft);border-radius:12px;overflow:hidden}\n.v2 .account-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid rgba(0,224,255,.08)}\n.v2 .account-row:last-child{border-bottom:none}\n.v2 .account-row .ab .l{font-family:&quot;Mukta&quot;,sans-serif;font-size:10.5px;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;font-weight:600}\n.v2 .account-row .ab .v{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:600;font-size:13.5px;color:var(--text);margin-top:1px}\n.v2 .account-row .edit{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:11.5px;color:var(--cyan);padding:6px 10px;border:1px solid var(--cyan-soft);border-radius:8px;background:rgba(0,224,255,.06)}\n.v2 .account-row .verif{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:10.5px;color:var(--green);background:rgba(90,232,160,.12);padding:3px 8px;border-radius:6px;border:1px solid rgba(90,232,160,.3);display:inline-flex;align-items:center;gap:4px}\n.v2 .account-row .verif svg{width:11px;height:11px}\n.v2 .account-row .not-verif{font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:10.5px;color:var(--orange);background:rgba(255,139,61,.12);padding:3px 8px;border-radius:6px;border:1px solid rgba(255,139,61,.3)}\n.v2 .account-danger{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-bottom:8px}\n.v2 .account-danger button{padding:13px;border-radius:12px;font-family:&quot;Baloo 2&quot;,sans-serif;font-weight:700;font-size:13px;border:none;display:flex;align-items:center;justify-content:center;gap:8px}\n.v2 .account-danger .logout{background:rgba(255,139,61,.1);color:var(--orange);border:1px solid var(--orange)}\n.v2 .account-danger .delete{background:rgba(255,90,120,.1);color:var(--pink);border:1px solid var(--pink)}\n.v2 .account-danger svg{width:14px;height:14px}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;svg width=&quot;0&quot; height=&quot;0&quot; style=&quot;position:absolute&quot; aria-hidden=&quot;true&quot;&gt;&lt;defs&gt;\n&lt;symbol id=&quot;pet&quot; viewBox=&quot;0 0 240 300&quot;&gt;\n&lt;ellipse cx=&quot;190&quot; cy=&quot;220&quot; rx=&quot;36&quot; ry=&quot;44&quot; fill=&quot;#FFFFFF&quot; transform=&quot;rotate(20 190 220)&quot;\/&gt;\n&lt;ellipse cx=&quot;190&quot; cy=&quot;232&quot; rx=&quot;22&quot; ry=&quot;30&quot; fill=&quot;#E8F3F8&quot; transform=&quot;rotate(20 190 232)&quot;\/&gt;\n&lt;ellipse cx=&quot;120&quot; cy=&quot;220&quot; rx=&quot;44&quot; ry=&quot;50&quot; fill=&quot;var(--pet-main, #5BAFD9)&quot;\/&gt;\n&lt;ellipse cx=&quot;120&quot; cy=&quot;235&quot; rx=&quot;30&quot; ry=&quot;36&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;ellipse cx=&quot;58&quot; cy=&quot;200&quot; rx=&quot;18&quot; ry=&quot;9&quot; fill=&quot;var(--pet-main, #5BAFD9)&quot;\/&gt;\n&lt;ellipse cx=&quot;182&quot; cy=&quot;200&quot; rx=&quot;18&quot; ry=&quot;9&quot; fill=&quot;var(--pet-main, #5BAFD9)&quot;\/&gt;\n&lt;ellipse cx=&quot;46&quot; cy=&quot;201&quot; rx=&quot;9&quot; ry=&quot;7&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;ellipse cx=&quot;194&quot; cy=&quot;201&quot; rx=&quot;9&quot; ry=&quot;7&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;ellipse cx=&quot;92&quot; cy=&quot;278&quot; rx=&quot;13&quot; ry=&quot;9&quot; fill=&quot;#FFFFFF&quot; stroke=&quot;var(--pet-stroke, #4A95BC)&quot; stroke-width=&quot;1&quot;\/&gt;\n&lt;ellipse cx=&quot;148&quot; cy=&quot;278&quot; rx=&quot;13&quot; ry=&quot;9&quot; fill=&quot;#FFFFFF&quot; stroke=&quot;var(--pet-stroke, #4A95BC)&quot; stroke-width=&quot;1&quot;\/&gt;\n&lt;circle cx=&quot;120&quot; cy=&quot;120&quot; r=&quot;68&quot; fill=&quot;var(--pet-main, #5BAFD9)&quot;\/&gt;\n&lt;ellipse cx=&quot;120&quot; cy=&quot;145&quot; rx=&quot;48&quot; ry=&quot;40&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;path d=&quot;M62 88 L48 38 L94 64 Z&quot; fill=&quot;var(--pet-main, #5BAFD9)&quot;\/&gt;\n&lt;path d=&quot;M64 84 L62 56 L86 70 Z&quot; fill=&quot;#FFD8C2&quot;\/&gt;\n&lt;path d=&quot;M178 88 L192 38 L146 64 Z&quot; fill=&quot;var(--pet-main, #5BAFD9)&quot;\/&gt;\n&lt;path d=&quot;M176 84 L178 56 L154 70 Z&quot; fill=&quot;#FFD8C2&quot;\/&gt;\n&lt;path d=&quot;M95 65 Q108 50 120 60 Q132 50 145 65 Q130 58 120 64 Q110 58 95 65&quot; fill=&quot;#FFFFFF&quot; opacity=&quot;.95&quot;\/&gt;\n&lt;ellipse cx=&quot;94&quot; cy=&quot;118&quot; rx=&quot;14&quot; ry=&quot;17&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;ellipse cx=&quot;146&quot; cy=&quot;118&quot; rx=&quot;14&quot; ry=&quot;17&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;ellipse cx=&quot;94&quot; cy=&quot;122&quot; rx=&quot;10&quot; ry=&quot;13&quot; fill=&quot;#E89B4D&quot;\/&gt;\n&lt;ellipse cx=&quot;146&quot; cy=&quot;122&quot; rx=&quot;10&quot; ry=&quot;13&quot; fill=&quot;#E89B4D&quot;\/&gt;\n&lt;ellipse cx=&quot;94&quot; cy=&quot;124&quot; rx=&quot;5&quot; ry=&quot;7&quot; fill=&quot;#1A1A1A&quot;\/&gt;\n&lt;ellipse cx=&quot;146&quot; cy=&quot;124&quot; rx=&quot;5&quot; ry=&quot;7&quot; fill=&quot;#1A1A1A&quot;\/&gt;\n&lt;circle cx=&quot;97&quot; cy=&quot;120&quot; r=&quot;2.5&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;circle cx=&quot;149&quot; cy=&quot;120&quot; r=&quot;2.5&quot; fill=&quot;#FFFFFF&quot;\/&gt;\n&lt;ellipse cx=&quot;120&quot; cy=&quot;145&quot; rx=&quot;5&quot; ry=&quot;3.8&quot; fill=&quot;#1A1A1A&quot;\/&gt;\n&lt;path d=&quot;M112 155 Q120 162 128 155&quot; stroke=&quot;#1A1A1A&quot; stroke-width=&quot;1.8&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot;\/&gt;\n&lt;path d=&quot;M120 152 L120 155&quot; stroke=&quot;#1A1A1A&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot;\/&gt;\n&lt;path d=&quot;M100 195 Q120 188 140 195 Q132 205 120 205 Q108 205 100 195&quot; fill=&quot;#FFFFFF&quot; opacity=&quot;.95&quot;\/&gt;\n&lt;\/symbol&gt;\n&lt;\/defs&gt;&lt;\/svg&gt;\n\n&lt;header class=&quot;page-head&quot;&gt;\n  &lt;h1&gt;Auriks &lt;em&gt;\u00b7 sistema completo \u00b7 rodada 12&lt;\/em&gt;&lt;\/h1&gt;\n  &lt;p class=&quot;lede&quot;&gt;Reorganiza\u00e7\u00e3o: todas as telas relacionadas ao pet agora moram no &lt;strong style=&quot;color:#E8E6E1&quot;&gt;mesmo m\u00f3dulo B&lt;\/strong&gt; (Pet \u00b7 Detalhes \u00b7 Loja \u00b7 Cores \u00b7 Hist\u00f3rico). 2 telas novas: &lt;strong style=&quot;color:#E8E6E1&quot;&gt;Comprar moedas&lt;\/strong&gt; (pacotes com dinheiro real) e &lt;strong style=&quot;color:#E8E6E1&quot;&gt;Conta e e-mail&lt;\/strong&gt; (acessada pela aba Eu). Loja ganhou aba &quot;Meus itens&quot;.&lt;\/p&gt;\n  &lt;div class=&quot;meta&quot;&gt;&lt;span&gt;33 telas numeradas&lt;\/span&gt;&lt;span&gt;5 abas&lt;\/span&gt;&lt;span&gt;Pet centralizado num m\u00f3dulo&lt;\/span&gt;&lt;span&gt;Comprar moedas + Conta&lt;\/span&gt;&lt;\/div&gt;\n  &lt;div class=&quot;fixes&quot;&gt;&lt;strong&gt;Status de implementa\u00e7\u00e3o \u00b7 pra orientar o pr\u00f3ximo agente&lt;\/strong&gt;\n    &lt;p style=&quot;margin:8px 0 12px;color:#9C9991&quot;&gt;Legenda baseada no &lt;b&gt;backend&lt;\/b&gt; (n\u00e3o na UI atual): &lt;span style=&quot;color:#5AE8A0;font-weight:700&quot;&gt;\u2713 OK&lt;\/span&gt; = backend tem tudo que essa tela precisa, \u00e9 s\u00f3 fazer\/refazer a UI seguindo o mockup e integrar \u00b7 &lt;span style=&quot;color:#FFD15A;font-weight:700&quot;&gt;\u25cb parcial&lt;\/span&gt; = backend tem parte (precisa criar endpoint complementar \u2014 ex: GET listar) \u00b7 &lt;span style=&quot;color:#FF5A78;font-weight:700&quot;&gt;\u2717 a criar&lt;\/span&gt; = backend N\u00c3O tem nada \u00b7 fazer a tela &lt;b&gt;est\u00e1tica&lt;\/b&gt; com aviso vis\u00edvel &quot;ainda sem integra\u00e7\u00e3o&quot;&lt;\/p&gt;\n\n    &lt;div style=&quot;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px&quot;&gt;\n      &lt;div&gt;\n        &lt;strong&gt;A \u00b7 Auth &amp; Onboarding \u00b7 6 telas&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Splash&lt;\/b&gt; \u00b7 visual puro, sem depend\u00eancia de backend&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Login&lt;\/b&gt; \u00b7 &lt;code&gt;POST \/login&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Signup&lt;\/b&gt; \u00b7 &lt;code&gt;POST \/signup&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Verificar e-mail&lt;\/b&gt; \u00b7 &lt;code&gt;POST \/verify-email&lt;\/code&gt; + &lt;code&gt;POST \/resend-verification&lt;\/code&gt; + &lt;code&gt;GET \/auth\/verify&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Esqueci a senha&lt;\/b&gt; \u00b7 &lt;code&gt;POST \/forgot-password&lt;\/code&gt; + &lt;code&gt;POST \/reset-password&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Permiss\u00f5es&lt;\/b&gt; \u00b7 s\u00f3 pede permiss\u00f5es nativas, sem backend&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n\n      &lt;div&gt;\n        &lt;strong&gt;B \u00b7 Pet \u00b7 Detalhes \u00b7 Loja \u00b7 Cores \u00b7 Hist\u00f3rico \u00b7 8 telas&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Home (Pet)&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/me&lt;\/code&gt; + &lt;code&gt;GET \/api\/pets\/{id}\/stats&lt;\/code&gt; + pet 3D Filament&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Detalhes do pet&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/pets\/{id}\/stats&lt;\/code&gt; traz tudo (sa\u00fade, energia, divers\u00e3o, fome, humor) \u00b7 s\u00f3 falta UI&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#FF5A78&quot;&gt;\u2717&lt;\/span&gt; &lt;b&gt;Loja&lt;\/b&gt; \u00b7 sem cat\u00e1logo no backend \u00b7 &lt;b&gt;fazer est\u00e1tico&lt;\/b&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#FF5A78&quot;&gt;\u2717&lt;\/span&gt; &lt;b&gt;Comprar moedas&lt;\/b&gt; \u00b7 sem economia\/pagamentos \u00b7 &lt;b&gt;fazer est\u00e1tico&lt;\/b&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Cores&lt;\/b&gt; \u00b7 &lt;code&gt;PATCH \/api\/pets\/{id}\/customization&lt;\/code&gt; + &lt;code&gt;GET \/api\/pets\/{id}\/glb&lt;\/code&gt; \u00b7 cancelar\/salvar reflete no GLB&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Cores \u00b7 picker hex&lt;\/b&gt; \u00b7 mesma API, qualquer hex aceito \u00b7 s\u00f3 UI nova&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Hist\u00f3rico&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/pets\/{id}\/interactions&lt;\/code&gt; paginado cursor-based (before=DateTime&amp;take=N) + &lt;code&gt;POST&lt;\/code&gt; existente \u00b7 &lt;b&gt;implementado 2026-05-24&lt;\/b&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Detalhe do evento&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/interactions\/{id}&lt;\/code&gt; (payload IA + deltas + placeName + mediaUrl) + &lt;code&gt;GET \/api\/interactions\/{id}\/media&lt;\/code&gt; serve bytes \u00b7 &lt;b&gt;implementado 2026-05-24&lt;\/b&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n\n      &lt;div&gt;\n        &lt;strong&gt;C \u00b7 C\u00e2mera \u00b7 1 tela&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;C\u00e2mera (galeria\/story)&lt;\/b&gt; \u00b7 captura local + salva na galeria, sem depend\u00eancia de backend&lt;\/li&gt;\n        &lt;\/ul&gt;\n\n        &lt;strong style=&quot;display:block;margin-top:10px&quot;&gt;D \u00b7 Intera\u00e7\u00f5es \u00b7 3 telas&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Hub&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/interaction-categories&lt;\/code&gt; lista as 17 categorias&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;C\u00e2mera de intera\u00e7\u00e3o (2 bot\u00f5es)&lt;\/b&gt; \u00b7 &lt;code&gt;POST \/api\/pets\/{id}\/interactions&lt;\/code&gt; aceita m\u00e9dia&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Foto + texto pra IA&lt;\/b&gt; \u00b7 mesmo endpoint aceita m\u00e9dia+texto \u00b7 Gemini classifica e altera stats&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n\n      &lt;div&gt;\n        &lt;strong&gt;E \u00b7 Social \u00b7 7 telas&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Amigos \u00b7 lista&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/users\/{code}\/friendships&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Pedidos (in\/out)&lt;\/b&gt; \u00b7 &lt;code&gt;POST\/PATCH\/DELETE \/api\/friendships\/{id}&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Adicionar amigo&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/users\/by-code\/{code}&lt;\/code&gt; + &lt;code&gt;POST friendships&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Salas (minhas)&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/rooms\/mine&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Convites de sala&lt;\/b&gt; \u00b7 invites + GPS Haversine \u2264150m em &lt;code&gt;POST \/invites\/{id}\/accept&lt;\/code&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Sala 3D + chat&lt;\/b&gt; \u00b7 sala SignalR &lt;code&gt;RoomHub.cs&lt;\/code&gt; + chat completo (&lt;code&gt;POST \/api\/rooms\/{id}\/messages&lt;\/code&gt; text \u00b7 &lt;code&gt;POST \/messages\/image&lt;\/code&gt; multipart \u00b7 &lt;code&gt;GET \/messages&lt;\/code&gt; paginado \u00b7 &lt;code&gt;GET \/messages\/{id}\/media&lt;\/code&gt; \u00b7 broadcast SignalR &lt;code&gt;MessageReceived&lt;\/code&gt; em tempo real \u00b7 persistido em &lt;code&gt;RoomMessage&lt;\/code&gt;) \u00b7 &lt;b&gt;implementado 2026-05-24&lt;\/b&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;C\u00e2mera da sala (coletiva)&lt;\/b&gt; \u00b7 captura local com seletor de pet ativo, sem persist\u00eancia al\u00e9m da galeria&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n\n      &lt;div&gt;\n        &lt;strong&gt;E2 \u00b7 Quiz + Stories \u00b7 3 telas&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#FF5A78&quot;&gt;\u2717&lt;\/span&gt; &lt;b&gt;Quiz arqu\u00e9tipos&lt;\/b&gt; \u00b7 sem entidade Archetype com perguntas no backend \u00b7 &lt;b&gt;fazer est\u00e1tico demo&lt;\/b&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#FF5A78&quot;&gt;\u2717&lt;\/span&gt; &lt;b&gt;Visualizar story&lt;\/b&gt; \u00b7 sem feed\/post no backend \u00b7 &lt;b&gt;fazer est\u00e1tico&lt;\/b&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#FF5A78&quot;&gt;\u2717&lt;\/span&gt; &lt;b&gt;Adicionar story&lt;\/b&gt; \u00b7 idem \u00b7 &lt;b&gt;fazer est\u00e1tico&lt;\/b&gt; (pode reusar a c\u00e2mera)&lt;\/li&gt;\n        &lt;\/ul&gt;\n\n        &lt;strong style=&quot;display:block;margin-top:10px&quot;&gt;F \u00b7 Overlay (Kotlin nativo) \u00b7 2 telas&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Pet em overlay&lt;\/b&gt; \u00b7 &lt;code&gt;OverlayService.kt&lt;\/code&gt; + Filament nativo, valida em 2026-05-13&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Menu radial (1 op\u00e7\u00e3o Foto)&lt;\/b&gt; \u00b7 l\u00f3gica nativa existe, s\u00f3 ajustar UI\/posicionamento&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n\n      &lt;div&gt;\n        &lt;strong&gt;G \u00b7 Eu \u00b7 3 telas&lt;\/strong&gt;\n        &lt;ul style=&quot;margin-top:4px&quot;&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Perfil + menu&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/me&lt;\/code&gt; traz nome, email, FriendCode, dados pra exibir&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#5AE8A0&quot;&gt;\u2713&lt;\/span&gt; &lt;b&gt;Conta e e-mail&lt;\/b&gt; \u00b7 &lt;code&gt;GET \/api\/auth\/me&lt;\/code&gt; leitura + &lt;code&gt;PATCH \/api\/auth\/me&lt;\/code&gt; (displayName\/newPassword\/newEmail; newPassword e newEmail requerem currentPassword; newEmail dispara nova verifica\u00e7\u00e3o automaticamente) \u00b7 &lt;b&gt;implementado 2026-05-24&lt;\/b&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;span style=&quot;color:#FF5A78&quot;&gt;\u2717&lt;\/span&gt; &lt;b&gt;Notifica\u00e7\u00f5es (config UI)&lt;\/b&gt; \u00b7 &lt;code&gt;fcm-token&lt;\/code&gt; existe pra receber push \u00b7 &lt;b&gt;sem entidade de prefer\u00eancias&lt;\/b&gt; (toggles) \u2014 fazer est\u00e1tico&lt;\/li&gt;\n        &lt;\/ul&gt;\n\n        &lt;strong style=&quot;display:block;margin-top:10px&quot;&gt;Resumo total \u00b7 33 telas&lt;\/strong&gt;\n        &lt;p style=&quot;margin-top:4px;color:#9C9991&quot;&gt;&lt;span style=&quot;color:#5AE8A0;font-weight:700&quot;&gt;\u2713 27 OK&lt;\/span&gt; (backend pronto \u2014 os 4 parciais anteriores entregues em 2026-05-24: Hist\u00f3rico, Detalhe do evento, Sala+Chat completo, PATCH \/me) \u00b7 &lt;span style=&quot;color:#FFD15A;font-weight:700&quot;&gt;\u25cb 0 parciais&lt;\/span&gt; \u00b7 &lt;span style=&quot;color:#FF5A78;font-weight:700&quot;&gt;\u2717 6 a criar est\u00e1ticas&lt;\/span&gt; (Loja, Comprar Moedas, Quiz, View Story, Add Story, Notif config)&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;p style=&quot;margin-top:14px;padding-top:14px;border-top:1px solid var(--page-divider);color:#9C9991;font-size:12.5px&quot;&gt;\n      &lt;strong style=&quot;color:#E8E6E1&quot;&gt;Como aplicar:&lt;\/strong&gt; pra cada tela \u2713 &lt;span style=&quot;color:#5AE8A0&quot;&gt;pronta&lt;\/span&gt;, o agente reaplica o novo design mantendo o endpoint atual \u00b7 pra \u25cb &lt;span style=&quot;color:#FFD15A&quot;&gt;parcial&lt;\/span&gt;, completa o que falta \u00b7 pra \u2717 &lt;span style=&quot;color:#FF5A78&quot;&gt;a criar&lt;\/span&gt;, faz a tela &lt;strong&gt;est\u00e1tica&lt;\/strong&gt; seguindo o mockup, com um aviso vis\u00edvel tipo &lt;em&gt;&quot;esta tela ainda n\u00e3o tem integra\u00e7\u00e3o \u2014 s\u00f3 visual por enquanto&quot;&lt;\/em&gt;.\n    &lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/header&gt;\n\n&lt;!-- A. AUTH --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;A \u00b7 AUTH&lt;\/div&gt;&lt;h2&gt;Entrada &lt;em&gt;e cadastro&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;6 telas&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. Splash&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;primeira tela ao abrir&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;splash&quot;&gt;&lt;div class=&quot;splash-pet&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;splash-logo&quot;&gt;auriks&lt;\/div&gt;&lt;div class=&quot;splash-tag&quot;&gt;your familiar&lt;\/div&gt;&lt;div class=&quot;splash-loading&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;2. Login &lt;em&gt;\u00b7 refeito menor&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Splash&lt;\/b&gt; \u00b7 pet 160px \u00b7 aura contida&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;login-warm&quot;&gt;\n          &lt;div class=&quot;login-pet-zone&quot;&gt;&lt;div class=&quot;lpet&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;login-greet&quot;&gt;&lt;h2&gt;Que bom te ver!&lt;\/h2&gt;&lt;p&gt;seu familiar sentiu sua falta&lt;\/p&gt;&lt;\/div&gt;\n          &lt;div class=&quot;login-form&quot;&gt;\n            &lt;div class=&quot;field&quot;&gt;&lt;label&gt;E-mail&lt;\/label&gt;&lt;input type=&quot;email&quot; value=&quot;gabriel@auriks.app&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;field field--focus&quot;&gt;&lt;label&gt;Senha&lt;\/label&gt;&lt;input type=&quot;password&quot; value=&quot;\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022&quot;&gt;&lt;\/div&gt;\n            &lt;button class=&quot;auth-cta&quot;&gt;Entrar&lt;\/button&gt;\n            &lt;div class=&quot;auth-alt&quot;&gt;&lt;a&gt;Criar conta&lt;\/a&gt;&lt;span class=&quot;dot&quot;&gt;\u00b7&lt;\/span&gt;&lt;a&gt;Esqueci a senha&lt;\/a&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;3. Signup&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Login&lt;\/b&gt; \u00b7 tap &quot;Criar conta&quot;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Criar conta&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;signup&quot;&gt;\n          &lt;div class=&quot;page-title-c&quot; style=&quot;margin-top:8px&quot;&gt;Bem-vindo!&lt;\/div&gt;\n          &lt;div class=&quot;page-sub&quot;&gt;Vamos te apresentar ao seu pr\u00f3ximo familiar.&lt;\/div&gt;\n          &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Como podemos te chamar?&lt;\/label&gt;&lt;input type=&quot;text&quot; value=&quot;Gabriel&quot;&gt;&lt;\/div&gt;\n          &lt;div class=&quot;field&quot;&gt;&lt;label&gt;E-mail&lt;\/label&gt;&lt;input type=&quot;email&quot; value=&quot;gabriel@auriks.app&quot;&gt;&lt;\/div&gt;\n          &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Senha&lt;\/label&gt;&lt;input type=&quot;password&quot; value=&quot;\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022&quot;&gt;&lt;\/div&gt;\n          &lt;div class=&quot;field&quot;&gt;&lt;label&gt;Confirmar senha&lt;\/label&gt;&lt;input type=&quot;password&quot; value=&quot;\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022&quot;&gt;&lt;\/div&gt;\n          &lt;button class=&quot;auth-cta&quot;&gt;Criar conta&lt;\/button&gt;\n          &lt;div class=&quot;auth-alt&quot; style=&quot;justify-content:center;gap:6px&quot;&gt;&lt;span&gt;J\u00e1 tem conta?&lt;\/span&gt;&lt;a&gt;Entrar&lt;\/a&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;4. Verificar e-mail&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Signup&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Verificar e-mail&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;verify&quot;&gt;\n          &lt;div class=&quot;verify-icon&quot;&gt;&lt;svg width=&quot;44&quot; height=&quot;44&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.8&quot;&gt;&lt;path d=&quot;M4 6l8 6 8-6M4 18h16V6H4z&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;h2&gt;Cheque seu e-mail&lt;\/h2&gt;\n          &lt;p&gt;Mandamos um link de confirma\u00e7\u00e3o. Clique nele pra entrar no jogo.&lt;\/p&gt;\n          &lt;div class=&quot;email-tag&quot;&gt;gabriel@auriks.app&lt;\/div&gt;\n          &lt;p style=&quot;font-size:11.5px&quot;&gt;N\u00e3o chegou? Espere 60s e tente de novo.&lt;\/p&gt;\n          &lt;div class=&quot;resend&quot;&gt;Reenviar e-mail&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;5. Esqueci a senha&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Login&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Recuperar senha&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;signup&quot;&gt;\n          &lt;div class=&quot;page-title-c&quot; style=&quot;margin-top:8px&quot;&gt;Esqueceu? Acontece.&lt;\/div&gt;\n          &lt;div class=&quot;page-sub&quot;&gt;Coloque seu e-mail e mandamos um link.&lt;\/div&gt;\n          &lt;div class=&quot;field&quot;&gt;&lt;label&gt;E-mail cadastrado&lt;\/label&gt;&lt;input type=&quot;email&quot; value=&quot;&quot;&gt;&lt;\/div&gt;\n          &lt;button class=&quot;auth-cta&quot;&gt;Enviar link&lt;\/button&gt;\n          &lt;div class=&quot;auth-alt&quot; style=&quot;justify-content:center;gap:6px&quot;&gt;&lt;span&gt;Lembrou?&lt;\/span&gt;&lt;a&gt;Voltar pro login&lt;\/a&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;6. Permiss\u00f5es&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Login&lt;\/b&gt; primeiro acesso&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;perms&quot;&gt;\n          &lt;div class=&quot;perms-head&quot;&gt;&lt;h2&gt;Pra come\u00e7armos bem juntos&lt;\/h2&gt;&lt;p&gt;Auri precisa dessas permiss\u00f5es. Voc\u00ea pode ajustar depois.&lt;\/p&gt;&lt;\/div&gt;\n          &lt;div class=&quot;perms-list&quot;&gt;\n            &lt;div class=&quot;perm-row&quot;&gt;&lt;div class=&quot;pi&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;pb&quot;&gt;&lt;div class=&quot;pt&quot;&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;ps&quot;&gt;Pra tirar foto com Auri sobreposto&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;perm-row&quot;&gt;&lt;div class=&quot;pi&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;10&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;pb&quot;&gt;&lt;div class=&quot;pt&quot;&gt;Localiza\u00e7\u00e3o&lt;\/div&gt;&lt;div class=&quot;ps&quot;&gt;Salas presenciais s\u00f3 funcionam perto&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;perm-row&quot;&gt;&lt;div class=&quot;pi&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;pb&quot;&gt;&lt;div class=&quot;pt&quot;&gt;Atividade f\u00edsica&lt;\/div&gt;&lt;div class=&quot;ps&quot;&gt;Auri sabe quando voc\u00ea se mexe&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;perm-row&quot;&gt;&lt;div class=&quot;pi&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 8a6 6 0 1112 0c0 7 3 8 3 8H3s3-1 3-8M10 21a2 2 0 004 0&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;pb&quot;&gt;&lt;div class=&quot;pt&quot;&gt;Notifica\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;ps&quot;&gt;Avisos quando precisar&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;perm-row&quot;&gt;&lt;div class=&quot;pi&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;4&quot; width=&quot;14&quot; height=&quot;16&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;10&quot; cy=&quot;14&quot; r=&quot;2&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;pb&quot;&gt;&lt;div class=&quot;pt&quot;&gt;Sobreposi\u00e7\u00e3o&lt;\/div&gt;&lt;div class=&quot;ps&quot;&gt;Auri flutua sobre outros apps&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;button class=&quot;auth-cta&quot; style=&quot;margin:14px 22px 18px&quot;&gt;Continuar&lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;!-- B. PET \u00b7 DETALHES \u00b7 LOJA \u00b7 CORES \u00b7 HIST\u00d3RICO --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;B \u00b7 PET \u00b7 DETALHES \u00b7 LOJA \u00b7 CORES \u00b7 HIST\u00d3RICO&lt;\/div&gt;&lt;h2&gt;Ecossistema &lt;em&gt;do pet&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;8 telas \u00b7 mesmo m\u00f3dulo&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. Home &lt;em&gt;\u00b7 stories sem cortar, mais respiro&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;aba &lt;b&gt;Pet&lt;\/b&gt; \u00b7 pet + stats limpo, sem a\u00e7\u00f5es&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;appbar&quot;&gt;\n          &lt;div class=&quot;player-tag&quot;&gt;&lt;div class=&quot;pl-av&quot;&gt;G&lt;\/div&gt;&lt;div class=&quot;pl-info&quot;&gt;&lt;span class=&quot;nv&quot;&gt;Nv. 7 \u00b7 Domador&lt;\/span&gt;&lt;strong&gt;Gabriel&lt;\/strong&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;top-right&quot;&gt;\n            &lt;div class=&quot;topbtn&quot; title=&quot;Hist\u00f3rico&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;path d=&quot;M12 8v4l3 2&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;topbtn&quot;&gt;&lt;span class=&quot;ndot&quot;&gt;&lt;\/span&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 8a6 6 0 1112 0c0 7 3 8 3 8H3s3-1 3-8&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;stories-bar&quot;&gt;\n          &lt;div class=&quot;stories-mini add&quot;&gt;&lt;div class=&quot;ring&quot;&gt;&lt;div class=&quot;avwrap&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 5v14M5 12h14&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Add&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;stories-mini&quot;&gt;&lt;div class=&quot;ring&quot;&gt;&lt;div class=&quot;avwrap&quot; style=&quot;--pet-main:#E89B7B;--pet-stroke:#C77B5D&quot;&gt;&lt;svg class=&quot;pet-svg&quot; viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Bruno&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;stories-mini&quot;&gt;&lt;div class=&quot;ring&quot;&gt;&lt;div class=&quot;avwrap&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;svg class=&quot;pet-svg&quot; viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;L\u00e9a&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;stories-mini&quot;&gt;&lt;div class=&quot;ring&quot;&gt;&lt;div class=&quot;avwrap&quot; style=&quot;--pet-main:#7BC97B;--pet-stroke:#5AAA5A&quot;&gt;&lt;svg class=&quot;pet-svg&quot; viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Diego&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;stories-mini off&quot;&gt;&lt;div class=&quot;ring&quot;&gt;&lt;div class=&quot;avwrap&quot; style=&quot;--pet-main:#FFC85A;--pet-stroke:#D9A23C&quot;&gt;&lt;svg class=&quot;pet-svg&quot; viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Elisa&lt;\/div&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;stage&quot;&gt;\n          &lt;div class=&quot;pet-frame&quot;&gt;&lt;div class=&quot;hud-corners&quot;&gt;&lt;span class=&quot;tl&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;tr&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;bl&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;br&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;bubble&quot;&gt;Estou com soninho...&lt;\/div&gt;\n            &lt;div class=&quot;pet-img-wrap&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot; style=&quot;width:100%;height:100%;object-fit:contain&quot;&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;pet-name-row&quot;&gt;&lt;span class=&quot;name&quot;&gt;Auri&lt;\/span&gt;&lt;span class=&quot;lvl-badge&quot;&gt;Nv. 7&lt;\/span&gt;&lt;span class=&quot;chev&quot;&gt;\u203a&lt;\/span&gt;&lt;\/div&gt;\n          &lt;div class=&quot;arche&quot;&gt;Familiar do Crep\u00fasculo&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;stats-bars&quot;&gt;\n          &lt;div class=&quot;sb sb--saude&quot;&gt;&lt;div class=&quot;sb-head&quot;&gt;&lt;span&gt;Sa\u00fade&lt;\/span&gt;&lt;span class=&quot;v&quot;&gt;88&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;sb-track&quot;&gt;&lt;div class=&quot;sb-fill&quot; style=&quot;width:88%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;sb sb--energia&quot;&gt;&lt;div class=&quot;sb-head&quot;&gt;&lt;span&gt;Energia&lt;\/span&gt;&lt;span class=&quot;v&quot;&gt;34&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;sb-track&quot;&gt;&lt;div class=&quot;sb-fill&quot; style=&quot;width:34%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;sb sb--diversao&quot;&gt;&lt;div class=&quot;sb-head&quot;&gt;&lt;span&gt;Divers\u00e3o&lt;\/span&gt;&lt;span class=&quot;v&quot;&gt;48&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;sb-track&quot;&gt;&lt;div class=&quot;sb-fill&quot; style=&quot;width:48%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;sb sb--fome&quot;&gt;&lt;div class=&quot;sb-head&quot;&gt;&lt;span&gt;Fome&lt;\/span&gt;&lt;span class=&quot;v&quot;&gt;72&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;sb-track&quot;&gt;&lt;div class=&quot;sb-fill&quot; style=&quot;width:72%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;\n          &lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;\n          &lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;\n          &lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;\n          &lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;\n          &lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;2. Detalhes do pet &lt;em&gt;\u00b7 evol em cima&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Home&lt;\/b&gt; \u00b7 tap em &lt;b&gt;Auri \u203a&lt;\/b&gt; \u00b7 sem tra\u00e7os\/conquistas, stats narrativos&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Auri&lt;small&gt;familiar do crep\u00fasculo&lt;\/small&gt;&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;pet-detail&quot;&gt;\n          &lt;div class=&quot;evol&quot; style=&quot;margin:12px 18px 8px&quot;&gt;\n            &lt;div class=&quot;l&quot;&gt;Pr\u00f3xima evolu\u00e7\u00e3o em 3 n\u00edveis&lt;\/div&gt;\n            &lt;div class=&quot;xp-track&quot;&gt;&lt;div class=&quot;xp-fill&quot; style=&quot;width:62%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;v&quot;&gt;&lt;span&gt;Nv. 7&lt;\/span&gt;&lt;span&gt;620 \/ 1000 XP&lt;\/span&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;hero&quot;&gt;\n            &lt;div class=&quot;pet-img-wrap&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;meta-card&quot;&gt;\n            &lt;div class=&quot;cell&quot;&gt;&lt;div class=&quot;l&quot;&gt;Arqu\u00e9tipo&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;Crep\u00fasculo&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cell&quot;&gt;&lt;div class=&quot;l&quot;&gt;Idade&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;28 dias&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cell&quot;&gt;&lt;div class=&quot;l&quot;&gt;Humor&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;Sonolenta&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cell&quot;&gt;&lt;div class=&quot;l&quot;&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;142&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;pet-actions&quot;&gt;\n            &lt;div class=&quot;pet-act shop&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 2l-2 6h16l-2-6M4 8v12h16V8M9 12h6&quot;\/&gt;&lt;\/svg&gt;Loja&lt;\/div&gt;\n            &lt;div class=&quot;pet-act&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;Cores&lt;\/div&gt;\n            &lt;div class=&quot;pet-act&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;path d=&quot;M12 8v4l3 2&quot;\/&gt;&lt;\/svg&gt;Hist\u00f3rico&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;stats-rich&quot;&gt;\n            &lt;div class=&quot;stats-rich-head&quot;&gt;Estados&lt;\/div&gt;\n            &lt;div class=&quot;sb-rich s-saude&quot;&gt;&lt;div class=&quot;ri&quot;&gt;\ud83d\udc97&lt;\/div&gt;&lt;div class=&quot;rb&quot;&gt;&lt;div class=&quot;rh&quot;&gt;&lt;span class=&quot;lbl&quot;&gt;Sa\u00fade&lt;\/span&gt;&lt;span class=&quot;narr&quot;&gt;muito bem&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;rt&quot;&gt;&lt;div class=&quot;rf&quot; style=&quot;width:88%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;span class=&quot;val&quot;&gt;88&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;sb-rich s-energia&quot;&gt;&lt;div class=&quot;ri&quot;&gt;\ud83d\udca4&lt;\/div&gt;&lt;div class=&quot;rb&quot;&gt;&lt;div class=&quot;rh&quot;&gt;&lt;span class=&quot;lbl&quot;&gt;Energia&lt;\/span&gt;&lt;span class=&quot;narr&quot;&gt;precisa dormir&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;rt&quot;&gt;&lt;div class=&quot;rf&quot; style=&quot;width:34%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;span class=&quot;val&quot;&gt;34&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;sb-rich s-diversao&quot;&gt;&lt;div class=&quot;ri&quot;&gt;\ud83c\udf88&lt;\/div&gt;&lt;div class=&quot;rb&quot;&gt;&lt;div class=&quot;rh&quot;&gt;&lt;span class=&quot;lbl&quot;&gt;Divers\u00e3o&lt;\/span&gt;&lt;span class=&quot;narr&quot;&gt;um pouco entediada&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;rt&quot;&gt;&lt;div class=&quot;rf&quot; style=&quot;width:48%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;span class=&quot;val&quot;&gt;48&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;sb-rich s-fome&quot;&gt;&lt;div class=&quot;ri&quot;&gt;\ud83c\udf53&lt;\/div&gt;&lt;div class=&quot;rb&quot;&gt;&lt;div class=&quot;rh&quot;&gt;&lt;span class=&quot;lbl&quot;&gt;Fome&lt;\/span&gt;&lt;span class=&quot;narr&quot;&gt;comendo bem&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;rt&quot;&gt;&lt;div class=&quot;rf&quot; style=&quot;width:72%&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;span class=&quot;val&quot;&gt;72&lt;\/span&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;3. Loja &lt;em&gt;\u00b7 Meus itens + categorias&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Detalhes do pet \u203a Loja&lt;\/b&gt; \u00b7 saldo no header (toca pra comprar moedas)&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;\n          &lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;div class=&quot;page-title&quot;&gt;Loja&lt;small&gt;vista do Auri&lt;\/small&gt;&lt;\/div&gt;\n          &lt;div class=&quot;shop-coins&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;\/svg&gt;1.240&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;shop&quot;&gt;\n          &lt;div class=&quot;shop-preview&quot;&gt;\n            &lt;div class=&quot;pet-img-wrap&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;div class=&quot;item-overlay&quot;&gt;\ud83c\udfa9&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;shop-current&quot;&gt;\n            &lt;div class=&quot;nm&quot;&gt;Cartola Vintage&lt;\/div&gt;\n            &lt;div class=&quot;sub&quot;&gt;muito charmosa \u00b7 acess\u00f3rio raro&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;shop-cats&quot;&gt;\n            &lt;div class=&quot;shop-cat active&quot;&gt;\u2b50 Meus itens&lt;\/div&gt;\n            &lt;div class=&quot;shop-cat&quot;&gt;\ud83d\udc55 Roupas&lt;\/div&gt;\n            &lt;div class=&quot;shop-cat&quot;&gt;\ud83c\udfa9 Acess\u00f3rios&lt;\/div&gt;\n            &lt;div class=&quot;shop-cat&quot;&gt;\ud83d\udcff Colares&lt;\/div&gt;\n            &lt;div class=&quot;shop-cat&quot;&gt;\ud83d\udd76\ufe0f \u00d3culos&lt;\/div&gt;\n            &lt;div class=&quot;shop-cat&quot;&gt;\u2728 Adesivos&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;shop-grid&quot;&gt;\n            &lt;div class=&quot;shop-item equipped&quot;&gt;&lt;div class=&quot;ph&quot;&gt;\ud83d\udc55&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Camiseta&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;Equipado&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;shop-item selected&quot;&gt;&lt;div class=&quot;ph&quot;&gt;\ud83c\udfa9&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Cartola&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;\/svg&gt;180&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;shop-item&quot;&gt;&lt;div class=&quot;ph&quot;&gt;\ud83e\udde5&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Jaqueta&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;\/svg&gt;240&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;shop-item&quot;&gt;&lt;div class=&quot;ph&quot;&gt;\ud83d\udc54&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Gravata&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;\/svg&gt;120&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;shop-item&quot;&gt;&lt;div class=&quot;ph&quot;&gt;\ud83c\udfbd&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Regata&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;\/svg&gt;90&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;shop-item locked&quot;&gt;&lt;div class=&quot;ph&quot;&gt;\ud83d\udc58&lt;\/div&gt;&lt;div class=&quot;nm&quot;&gt;Kimono&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;\ud83d\udd12 Nv. 12&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;button class=&quot;shop-buy&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;\/svg&gt;Comprar Cartola \u00b7 180 moedas&lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;4. Comprar moedas &lt;em&gt;\u00b7 pacotes com R$&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Loja&lt;\/b&gt; \u00b7 tap no saldo de moedas no header&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Moedas&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;coins-page&quot;&gt;\n          &lt;div class=&quot;coins-hero&quot;&gt;\n            &lt;div class=&quot;coins-bag&quot;&gt;\ud83d\udcb0&lt;\/div&gt;\n            &lt;h2&gt;Comprar moedas&lt;\/h2&gt;\n            &lt;p&gt;Use moedas pra desbloquear roupas, acess\u00f3rios e adesivos.&lt;\/p&gt;\n            &lt;div class=&quot;coins-balance&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;9&quot;\/&gt;&lt;\/svg&gt;Saldo \u00b7 1.240&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;coins-grid&quot;&gt;\n            &lt;div class=&quot;coin-pack&quot;&gt;&lt;div class=&quot;ci&quot;&gt;\ud83e\ude99&lt;\/div&gt;&lt;div class=&quot;cb&quot;&gt;&lt;div class=&quot;nm&quot;&gt;100 moedas&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;o suficiente pra 1 item barato&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;R$ 4,99&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;coin-pack&quot;&gt;&lt;div class=&quot;ci&quot;&gt;\ud83d\udcb0&lt;\/div&gt;&lt;div class=&quot;cb&quot;&gt;&lt;div class=&quot;nm&quot;&gt;500 moedas&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;o set completo de roupas&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;R$ 19,90&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;coin-pack best&quot;&gt;&lt;div class=&quot;ci&quot;&gt;\ud83d\udc8e&lt;\/div&gt;&lt;div class=&quot;cb&quot;&gt;&lt;div class=&quot;nm&quot;&gt;1.500 moedas &lt;span class=&quot;bn&quot;&gt;+15% b\u00f4nus&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;vira 1.725 \u00b7 economia de R$ 9&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;pr&quot;&gt;R$ 49,90&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;coin-pack best&quot; style=&quot;background:linear-gradient(135deg,rgba(0,224,255,.18),rgba(123,91,255,.12));border-color:var(--cyan)&quot;&gt;&lt;div class=&quot;ci&quot;&gt;\ud83d\udc51&lt;\/div&gt;&lt;div class=&quot;cb&quot;&gt;&lt;div class=&quot;nm&quot;&gt;5.000 moedas &lt;span class=&quot;bn&quot; style=&quot;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg)&quot;&gt;+30% b\u00f4nus&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;vira 6.500 \u00b7 todo o cat\u00e1logo aberto&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;pr&quot; style=&quot;background:linear-gradient(135deg,var(--cyan),var(--purple));color:var(--bg);border:none&quot;&gt;R$ 149&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;coin-pay&quot;&gt;&lt;span&gt;Pagamento via&lt;\/span&gt;&lt;div class=&quot;methods&quot;&gt;&lt;span&gt;Apple Pay&lt;\/span&gt;&lt;span&gt;Google Pay&lt;\/span&gt;&lt;span&gt;Pix&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;5. Cores &lt;em&gt;\u00b7 paleta + cor livre&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Detalhes do pet \u203a Cores&lt;\/b&gt; (ou Eu \u203a Personalizar pet)&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Cores&lt;small&gt;personalize auri&lt;\/small&gt;&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;colors-preview&quot;&gt;&lt;div class=&quot;pet-img-wrap&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;kits-scroll&quot;&gt;&lt;div class=&quot;kit active&quot;&gt;Pessoal&lt;\/div&gt;&lt;div class=&quot;kit&quot;&gt;Naturais&lt;\/div&gt;&lt;div class=&quot;kit&quot;&gt;Past\u00e9is&lt;\/div&gt;&lt;div class=&quot;kit&quot;&gt;Vibrantes&lt;\/div&gt;&lt;div class=&quot;kit&quot;&gt;Noturnos&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;colors-section&quot;&gt;\n          &lt;div class=&quot;ch&quot;&gt;&lt;h4&gt;Cor principal&lt;\/h4&gt;&lt;div class=&quot;pick-custom&quot;&gt;&lt;svg width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 19l7-7 3 3-7 7-3-3z&quot;\/&gt;&lt;\/svg&gt;cor livre&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;color-grid&quot;&gt;\n            &lt;div class=&quot;color-chip sel&quot; style=&quot;background:#5BAFD9&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#E89B7B&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#C49EFF&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#7BC97B&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#E89BC4&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#FFC85A&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#FF7373&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip rainbow&quot;&gt;+&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;ch&quot;&gt;&lt;h4&gt;Cor das orelhas&lt;\/h4&gt;&lt;div class=&quot;pick-custom&quot;&gt;&lt;svg width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 19l7-7 3 3-7 7-3-3z&quot;\/&gt;&lt;\/svg&gt;cor livre&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;color-grid&quot;&gt;\n            &lt;div class=&quot;color-chip sel&quot; style=&quot;background:#FFD8C2&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#FFB3B3&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#D9C4F5&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#B5E8A0&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#FFEEC2&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#C2E8FF&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip&quot; style=&quot;background:#FFB3D9&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;color-chip rainbow&quot;&gt;+&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;apply-cta&quot;&gt;Aplicar mudan\u00e7as&lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;6. Cores \u00b7 picker hex&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Cores&lt;\/b&gt; \u00b7 tap em &quot;cor livre&quot;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Cores&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;colors-preview&quot; style=&quot;opacity:.3&quot;&gt;&lt;div class=&quot;pet-img-wrap&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;picker-overlay&quot;&gt;\n          &lt;div class=&quot;picker-sheet&quot;&gt;\n            &lt;div class=&quot;picker-handle&quot;&gt;&lt;\/div&gt;\n            &lt;h3&gt;Escolher cor livre&lt;\/h3&gt;\n            &lt;div class=&quot;pick-circle&quot;&gt;&lt;div class=&quot;pick-dot&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;pick-hex&quot;&gt;#FFB35A&lt;\/div&gt;\n            &lt;div class=&quot;pick-slider&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;pick-actions&quot;&gt;&lt;button class=&quot;cancel&quot;&gt;Cancelar&lt;\/button&gt;&lt;button class=&quot;confirm&quot;&gt;Aplicar&lt;\/button&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;7. Hist\u00f3rico &lt;em&gt;\u00b7 tap pra detalhe&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Home&lt;\/b&gt; \u231b ou &lt;b&gt;Detalhes do pet \u203a Hist\u00f3rico&lt;\/b&gt; ou &lt;b&gt;Eu \u203a Hist\u00f3rico&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Hist\u00f3rico&lt;small&gt;tap pra ver detalhe&lt;\/small&gt;&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;history&quot;&gt;\n          &lt;div class=&quot;timeline&quot;&gt;\n            &lt;div class=&quot;day-tag&quot;&gt;Hoje&lt;\/div&gt;\n            &lt;div class=&quot;event&quot;&gt;&lt;div class=&quot;ei&quot; style=&quot;color:var(--gold)&quot;&gt;\ud83c\udf53&lt;\/div&gt;&lt;div class=&quot;eb&quot;&gt;&lt;div class=&quot;et&quot;&gt;A\u00e7a\u00ed p\u00f3s-treino&lt;\/div&gt;&lt;div class=&quot;es&quot;&gt;Refei\u00e7\u00e3o detectada via foto + texto&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;tv&quot;&gt;+18&lt;span class=&quot;tm&quot;&gt;14:14&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;event&quot;&gt;&lt;div class=&quot;ei&quot; style=&quot;color:var(--purple)&quot;&gt;\ud83c\udfb5&lt;\/div&gt;&lt;div class=&quot;eb&quot;&gt;&lt;div class=&quot;et&quot;&gt;M\u00fasica tocando&lt;\/div&gt;&lt;div class=&quot;es&quot;&gt;Spotify \u00b7 &quot;Sun Comes Up&quot; \u00b7 28 min&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;tv&quot;&gt;+8&lt;span class=&quot;tm&quot;&gt;14:02&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;event&quot;&gt;&lt;div class=&quot;ei&quot; style=&quot;color:var(--green)&quot;&gt;\ud83c\udfc3&lt;\/div&gt;&lt;div class=&quot;eb&quot;&gt;&lt;div class=&quot;et&quot;&gt;Caminhada de 12 min&lt;\/div&gt;&lt;div class=&quot;es&quot;&gt;Detectada por sensor de atividade&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;tv&quot;&gt;+15&lt;span class=&quot;tm&quot;&gt;12:40&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;event&quot;&gt;&lt;div class=&quot;ei&quot; style=&quot;color:var(--cyan)&quot;&gt;\ud83d\udcf8&lt;\/div&gt;&lt;div class=&quot;eb&quot;&gt;&lt;div class=&quot;et&quot;&gt;Foto com Bruno&lt;\/div&gt;&lt;div class=&quot;es&quot;&gt;Selfie detectada via IA&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;tv&quot;&gt;+12&lt;span class=&quot;tm&quot;&gt;11:38&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;day-tag&quot;&gt;Ontem&lt;\/div&gt;\n            &lt;div class=&quot;event&quot;&gt;&lt;div class=&quot;ei&quot; style=&quot;color:var(--purple)&quot;&gt;\ud83d\ude34&lt;\/div&gt;&lt;div class=&quot;eb&quot;&gt;&lt;div class=&quot;et&quot;&gt;Auri foi dormir sozinha&lt;\/div&gt;&lt;div class=&quot;es&quot;&gt;Telefone inativo por mais de 1h&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;tv neg&quot;&gt;\u22124&lt;span class=&quot;tm&quot;&gt;23:12&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;event&quot;&gt;&lt;div class=&quot;ei&quot; style=&quot;color:var(--orange)&quot;&gt;\ud83c\udfae&lt;\/div&gt;&lt;div class=&quot;eb&quot;&gt;&lt;div class=&quot;et&quot;&gt;Sess\u00e3o de jogo&lt;\/div&gt;&lt;div class=&quot;es&quot;&gt;Screenshot do The Witcher&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;tv&quot;&gt;+10&lt;span class=&quot;tm&quot;&gt;21:08&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;8. Detalhe do evento &lt;em&gt;\u00b7 foto + texto + pontos&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Hist\u00f3rico&lt;\/b&gt; \u00b7 tap em qualquer evento&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Detalhe&lt;small&gt;a\u00e7a\u00ed p\u00f3s-treino \u00b7 14:14&lt;\/small&gt;&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;evd&quot;&gt;\n          &lt;div class=&quot;evd-photo&quot;&gt;\n            &lt;div class=&quot;evd-tag&quot;&gt;\ud83c\udf53 REFEI\u00c7\u00c3O&lt;\/div&gt;\n            &lt;div class=&quot;evd-points&quot;&gt;+18 pts&lt;\/div&gt;\n            &lt;div class=&quot;img-mock&quot;&gt;\ud83c\udf47&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;evd-body&quot;&gt;\n            &lt;div class=&quot;evd-section&quot;&gt;&lt;h4&gt;O que voc\u00ea mandou&lt;\/h4&gt;&lt;div class=&quot;txt&quot;&gt;t\u00f4 comendo um a\u00e7a\u00ed gigante depois do treino, ainda bem que terminei!&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;evd-section&quot;&gt;&lt;h4&gt;Resposta do Auri (IA)&lt;\/h4&gt;&lt;div class=&quot;ia&quot;&gt;Que a\u00e7a\u00ed lindo! Combina dois bons h\u00e1bitos no mesmo momento \u2014 exerc\u00edcio e refei\u00e7\u00e3o. A Auri ficou super animada vendo isso.&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;evd-section&quot;&gt;&lt;h4&gt;Contexto detectado&lt;\/h4&gt;\n              &lt;div class=&quot;evd-meta&quot;&gt;\n                &lt;div class=&quot;evd-mc&quot;&gt;&lt;div class=&quot;l&quot;&gt;Categoria&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;Refei\u00e7\u00e3o&lt;\/div&gt;&lt;\/div&gt;\n                &lt;div class=&quot;evd-mc&quot;&gt;&lt;div class=&quot;l&quot;&gt;Lugar&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;Academia&lt;\/div&gt;&lt;\/div&gt;\n                &lt;div class=&quot;evd-mc&quot;&gt;&lt;div class=&quot;l&quot;&gt;M\u00fasica&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;Sun Comes Up&lt;\/div&gt;&lt;\/div&gt;\n                &lt;div class=&quot;evd-mc&quot;&gt;&lt;div class=&quot;l&quot;&gt;Atividade&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;Caminhando&lt;\/div&gt;&lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;evd-section&quot;&gt;&lt;h4&gt;Impacto nos estados&lt;\/h4&gt;\n              &lt;div class=&quot;evd-impact&quot;&gt;\n                &lt;div class=&quot;evd-imp-row&quot;&gt;&lt;span&gt;Fome&lt;\/span&gt;&lt;span class=&quot;pos&quot;&gt;+22&lt;\/span&gt;&lt;\/div&gt;\n                &lt;div class=&quot;evd-imp-row&quot;&gt;&lt;span&gt;Sa\u00fade&lt;\/span&gt;&lt;span class=&quot;pos&quot;&gt;+8&lt;\/span&gt;&lt;\/div&gt;\n                &lt;div class=&quot;evd-imp-row&quot;&gt;&lt;span&gt;Divers\u00e3o&lt;\/span&gt;&lt;span class=&quot;pos&quot;&gt;+5&lt;\/span&gt;&lt;\/div&gt;\n                &lt;div class=&quot;evd-imp-row&quot;&gt;&lt;span&gt;Energia&lt;\/span&gt;&lt;span class=&quot;neg&quot;&gt;\u22123&lt;\/span&gt;&lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;!-- C. C\u00c2MERA (s\u00f3 foto pra galeria\/story) --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;C \u00b7 C\u00c2MERA \u00b7 s\u00f3 galeria\/story&lt;\/div&gt;&lt;h2&gt;Foto &lt;em&gt;com pet sobreposto&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;1 tela \u00b7 n\u00e3o \u00e9 intera\u00e7\u00e3o&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. C\u00e2mera &lt;em&gt;\u00b7 salva na galeria ou posta no story&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;aba &lt;b&gt;C\u00e2mera&lt;\/b&gt; \u00b7 mover pet \u00b7 rotacionar \u00b7 capturar \u00b7 sem 2 bot\u00f5es (n\u00e3o \u00e9 intera\u00e7\u00e3o)&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;ar-view&quot;&gt;\n          &lt;div class=&quot;ar-top&quot;&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6L6 18&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;ar-tag&quot;&gt;&lt;span class=&quot;rec&quot;&gt;&lt;\/span&gt;FOTO&lt;\/div&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;path d=&quot;M3 17l4-3 4 3 4-4 6 5&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-pets&quot;&gt;&lt;div class=&quot;ar-pet&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-controls&quot;&gt;\n            &lt;div class=&quot;ar-mode&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M5 9l-3 3 3 3M9 5l3-3 3 3M19 9l3 3-3 3M9 19l3 3 3-3M2 12h20M12 2v20&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-shutter&quot;&gt;&lt;svg width=&quot;28&quot; height=&quot;28&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-switch&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M20 5h-3l-2-2H9L7 5H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2z&quot;\/&gt;&lt;path d=&quot;M15 12l-3-3-3 3M9 12l3 3 3-3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;!-- D. INTERA\u00c7\u00d5ES --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;D \u00b7 INTERA\u00c7\u00d5ES \u00b7 enxuto&lt;\/div&gt;&lt;h2&gt;O que o Auri &lt;em&gt;captura&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;3 telas \u00b7 hist\u00f3rico foi pra m\u00f3dulo B&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. Intera\u00e7\u00f5es &lt;em&gt;\u00b7 hub&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;aba &lt;b&gt;Intera\u00e7\u00f5es&lt;\/b&gt; \u00b7 reflete categorias reais do backend&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;inters&quot;&gt;\n          &lt;div class=&quot;inters-head&quot;&gt;&lt;h2&gt;O que t\u00e1 rolando?&lt;\/h2&gt;&lt;p&gt;Manda foto, screenshot ou deixa o Auri detectar automaticamente.&lt;\/p&gt;&lt;\/div&gt;\n          &lt;div class=&quot;inters-cta&quot;&gt;\n            &lt;button class=&quot;ict-btn foto&quot;&gt;&lt;span class=&quot;ii&quot;&gt;\ud83d\udcf8&lt;\/span&gt;&lt;span class=&quot;il&quot;&gt;Mandar foto&lt;\/span&gt;&lt;span class=&quot;isub&quot;&gt;com ou sem texto&lt;\/span&gt;&lt;\/button&gt;\n            &lt;button class=&quot;ict-btn print&quot;&gt;&lt;span class=&quot;ii&quot;&gt;\ud83d\uddbc\ufe0f&lt;\/span&gt;&lt;span class=&quot;il&quot;&gt;Capturar tela&lt;\/span&gt;&lt;span class=&quot;isub&quot;&gt;com ou sem texto&lt;\/span&gt;&lt;\/button&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;now-detect&quot;&gt;\n            &lt;div class=&quot;now-detect-h&quot;&gt;&lt;span class=&quot;pulse&quot;&gt;&lt;\/span&gt;Detectando agora&lt;\/div&gt;\n            &lt;div class=&quot;now-row&quot;&gt;&lt;span class=&quot;nri&quot;&gt;\ud83c\udfb5&lt;\/span&gt;&lt;div&gt;&lt;div class=&quot;nrt&quot;&gt;M\u00fasica tocando&lt;\/div&gt;&lt;\/div&gt;&lt;span class=&quot;nrs&quot;&gt;Spotify \u00b7 28 min&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;now-row&quot;&gt;&lt;span class=&quot;nri&quot;&gt;\ud83d\udeb6&lt;\/span&gt;&lt;div&gt;&lt;div class=&quot;nrt&quot;&gt;Caminhando&lt;\/div&gt;&lt;\/div&gt;&lt;span class=&quot;nrs&quot;&gt;8 min at\u00e9 agora&lt;\/span&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;cats-head&quot;&gt;Categorias que o Auri reconhece&lt;\/div&gt;\n          &lt;div class=&quot;cats-grid&quot;&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83c\udf53&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Refei\u00e7\u00e3o&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83c\udfcb\ufe0f&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Exerc\u00edcio&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83c\udf33&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Ao ar livre&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83e\udd33&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Selfie&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83c\udfb5&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;M\u00fasica&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83d\udcd6&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Estudo&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83e\udd1d&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Visita&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83d\udcf1&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Screen&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83c\udfac&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Assistir&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83d\udcda&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Mang\u00e1&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83c\udfae&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Jogos&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83c\udfad&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Cultura&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83d\udc65&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Com gente&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83d\udc3e&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Bicho fofo&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\ud83d\ude0c&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Descanso&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cat&quot;&gt;&lt;span class=&quot;ci&quot;&gt;\u2708\ufe0f&lt;\/span&gt;&lt;span class=&quot;cn&quot;&gt;Viagem&lt;\/span&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;2. C\u00e2mera de intera\u00e7\u00e3o &lt;em&gt;\u00b7 2 bot\u00f5es&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Intera\u00e7\u00f5es \u203a Mandar foto&lt;\/b&gt; \u00b7 escolhe se quer mandar com ou sem texto&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;ar-view&quot;&gt;\n          &lt;div class=&quot;ar-top&quot;&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6L6 18&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;ar-tag&quot; style=&quot;background:rgba(123,91,255,.4);border-color:var(--purple)&quot;&gt;&lt;span class=&quot;rec&quot;&gt;&lt;\/span&gt;INTERA\u00c7\u00c3O&lt;\/div&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;path d=&quot;M3 17l4-3 4 3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-pets&quot;&gt;&lt;div class=&quot;ar-pet&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-cta-row&quot;&gt;\n            &lt;button class=&quot;ar-cta pri&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;Foto direta&lt;\/button&gt;\n            &lt;button class=&quot;ar-cta sec&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M3 12c0-5 4-9 9-9s9 4 9 9-4 9-9 9c-2 0-3-1-4-1l-5 1 1-5c-1-1-1-2-1-4z&quot;\/&gt;&lt;\/svg&gt;Foto + texto&lt;\/button&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;ar-controls&quot;&gt;\n            &lt;div class=&quot;ar-mode&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M5 9l-3 3 3 3M9 5l3-3 3 3M19 9l3 3-3 3M9 19l3 3 3-3M2 12h20M12 2v20&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-shutter&quot;&gt;&lt;svg width=&quot;28&quot; height=&quot;28&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-switch&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M20 5h-3l-2-2H9L7 5H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2z&quot;\/&gt;&lt;path d=&quot;M15 12l-3-3-3 3M9 12l3 3 3-3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;3. Foto + texto pra IA&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;C\u00e2mera Intera\u00e7\u00e3o&lt;\/b&gt; \u00b7 bot\u00e3o &quot;Foto + texto&quot;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Mandar pro Auri&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;photo-text&quot;&gt;\n          &lt;div class=&quot;photo-preview&quot;&gt;&lt;div class=&quot;pt-img&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Foto&quot; style=&quot;width:100%;height:100%;object-fit:contain&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;pt-form&quot;&gt;\n            &lt;div class=&quot;ptt&quot;&gt;Conta pra Auri o que t\u00e1 rolando&lt;\/div&gt;\n            &lt;div class=&quot;pts&quot;&gt;Adiciona um texto pra ajudar a IA a entender melhor a situa\u00e7\u00e3o.&lt;\/div&gt;\n            &lt;textarea placeholder=&quot;Ex: t\u00f4 treinando hoje, queria que voc\u00ea visse&quot;&gt;t\u00f4 comendo um a\u00e7a\u00ed gigante depois do treino, ainda bem que terminei!&lt;\/textarea&gt;\n            &lt;button class=&quot;pt-cta&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M3 11l18-8-8 18-2-8z&quot;\/&gt;&lt;\/svg&gt;Enviar pro Auri&lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;!-- E. SOCIAL --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;E \u00b7 SOCIAL \u00b7 sub-tabs com badge em cima&lt;\/div&gt;&lt;h2&gt;Amigos &lt;em&gt;e salas&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;7 telas (com c\u00e2mera da sala)&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. Amigos &lt;em&gt;\u00b7 lista&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;aba &lt;b&gt;Social&lt;\/b&gt; \u00b7 sub-tabs: Amigos \u00b7 Pedidos \u00b7 Salas \u00b7 Convites&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Social&lt;small&gt;5 amigos \u00b7 2 salas ativas&lt;\/small&gt;&lt;\/div&gt;&lt;div class=&quot;icon-btn&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 5v14M5 12h14&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;subtabs&quot;&gt;&lt;div class=&quot;subtab active&quot;&gt;Amigos&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Pedidos&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Salas&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Convites&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;friend-list&quot;&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#E89B7B;--pet-stroke:#C77B5D&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Bruno&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span class=&quot;dot-on&quot;&gt;&lt;\/span&gt;&lt;span&gt;Online \u00b7 BR4K-X9M2&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;lvl-mini&quot;&gt;Nv. 12&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;L\u00e9a&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span class=&quot;dot-on&quot;&gt;&lt;\/span&gt;&lt;span&gt;Em sala com Carla&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;lvl-mini&quot;&gt;Nv. 9&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#7BC97B;--pet-stroke:#5AAA5A&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Diego&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span class=&quot;dot-on&quot;&gt;&lt;\/span&gt;&lt;span&gt;Online&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;lvl-mini&quot;&gt;Nv. 5&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#E89BC4;--pet-stroke:#C57BA0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Carla&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span class=&quot;dot-off&quot;&gt;&lt;\/span&gt;&lt;span&gt;Vista h\u00e1 2h&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;lvl-mini&quot;&gt;Nv. 14&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#FFC85A;--pet-stroke:#D9A23C&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Elisa&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span class=&quot;dot-off&quot;&gt;&lt;\/span&gt;&lt;span&gt;Vista h\u00e1 1d&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;lvl-mini&quot;&gt;Nv. 3&lt;\/div&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;2. Pedidos &lt;em&gt;\u00b7 badge em cima&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;sub-tab Pedidos \u00b7 recebidos + enviados&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Social&lt;\/div&gt;&lt;div class=&quot;icon-btn&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 5v14M5 12h14&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;subtabs&quot;&gt;&lt;div class=&quot;subtab&quot;&gt;Amigos&lt;\/div&gt;&lt;div class=&quot;subtab active&quot;&gt;Pedidos&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Salas&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Convites&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;friend-list&quot;&gt;\n          &lt;div class=&quot;sec-label&quot;&gt;Recebidos&lt;\/div&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#FFB35A;--pet-stroke:#D9923C&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Pedro&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span&gt;Quer ser seu amigo&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div style=&quot;display:flex;gap:4px&quot;&gt;&lt;div style=&quot;width:32px;height:32px;border-radius:10px;background:rgba(90,232,160,.15);border:1px solid var(--green);color:var(--green);display:flex;align-items:center;justify-content:center&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;3&quot;&gt;&lt;path d=&quot;M5 12l4 4 10-10&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div style=&quot;width:32px;height:32px;border-radius:10px;background:rgba(255,90,120,.12);border:1px solid var(--pink);color:var(--pink);display:flex;align-items:center;justify-content:center&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;3&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6L6 18&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#A0C9FF;--pet-stroke:#7BAEDF&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Marina&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span&gt;Conheceu vc na sala da L\u00e9a&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div style=&quot;display:flex;gap:4px&quot;&gt;&lt;div style=&quot;width:32px;height:32px;border-radius:10px;background:rgba(90,232,160,.15);border:1px solid var(--green);color:var(--green);display:flex;align-items:center;justify-content:center&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;3&quot;&gt;&lt;path d=&quot;M5 12l4 4 10-10&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div style=&quot;width:32px;height:32px;border-radius:10px;background:rgba(255,90,120,.12);border:1px solid var(--pink);color:var(--pink);display:flex;align-items:center;justify-content:center&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;3&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6L6 18&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;sec-label&quot;&gt;Enviados&lt;\/div&gt;\n          &lt;div class=&quot;friend-card&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#B9E89E;--pet-stroke:#94C778&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Sofia&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&lt;span&gt;Aguardando \u00b7 2d&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div style=&quot;padding:4px 10px;border-radius:8px;background:rgba(255,90,120,.08);border:1px solid var(--pink);color:var(--pink);font-family:'Baloo 2',sans-serif;font-size:10.5px;font-weight:600&quot;&gt;Cancelar&lt;\/div&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;3. Adicionar amigo&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;tap &quot;+&quot; do header&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Adicionar amigo&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;addf&quot;&gt;\n          &lt;div class=&quot;my-code&quot;&gt;\n            &lt;div class=&quot;l&quot;&gt;Seu c\u00f3digo&lt;\/div&gt;\n            &lt;div class=&quot;code&quot;&gt;M9X7-K2A1&lt;\/div&gt;\n            &lt;div class=&quot;share-row&quot;&gt;\n              &lt;div class=&quot;sb&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;rect x=&quot;9&quot; y=&quot;9&quot; width=&quot;13&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;path d=&quot;M5 15V5a2 2 0 012-2h10&quot;\/&gt;&lt;\/svg&gt;Copiar&lt;\/div&gt;\n              &lt;div class=&quot;sb&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;circle cx=&quot;18&quot; cy=&quot;5&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;6&quot; cy=&quot;12&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;18&quot; cy=&quot;19&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M8.5 10.5l7-4M8.5 13.5l7 4&quot;\/&gt;&lt;\/svg&gt;Compartilhar&lt;\/div&gt;\n              &lt;div class=&quot;sb&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;7&quot; height=&quot;7&quot; rx=&quot;1&quot;\/&gt;&lt;rect x=&quot;14&quot; y=&quot;3&quot; width=&quot;7&quot; height=&quot;7&quot; rx=&quot;1&quot;\/&gt;&lt;rect x=&quot;3&quot; y=&quot;14&quot; width=&quot;7&quot; height=&quot;7&quot; rx=&quot;1&quot;\/&gt;&lt;\/svg&gt;QR&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;addf-sep&quot;&gt;ou busque pelo c\u00f3digo&lt;\/div&gt;\n          &lt;div class=&quot;field&quot;&gt;&lt;label&gt;C\u00f3digo do amigo&lt;\/label&gt;&lt;input type=&quot;text&quot; placeholder=&quot;X9M2-BR4K&quot;&gt;&lt;\/div&gt;\n          &lt;button class=&quot;addf-cta&quot;&gt;Mandar pedido&lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;4. Salas&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;sub-tab Salas \u00b7 voc\u00ea \u00e9 dono ou convidado&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Social&lt;\/div&gt;&lt;div class=&quot;icon-btn&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 5v14M5 12h14&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;subtabs&quot;&gt;&lt;div class=&quot;subtab&quot;&gt;Amigos&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Pedidos&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;subtab active&quot;&gt;Salas&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Convites&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;rooms-list&quot;&gt;\n          &lt;div class=&quot;room-card&quot;&gt;\n            &lt;div class=&quot;rh&quot;&gt;&lt;div&gt;&lt;div class=&quot;nm&quot;&gt;Sala da L\u00e9a&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;12 min \u00b7 voc\u00ea \u00e9 convidado&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;pill&quot;&gt;ATIVA&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;pets-mini&quot;&gt;&lt;div class=&quot;pm&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;pm&quot; style=&quot;--pet-main:#E89BC4;--pet-stroke:#C57BA0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;pm&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;&quot;&gt;&lt;\/div&gt;&lt;span class=&quot;more&quot;&gt;+1&lt;\/span&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;room-card&quot;&gt;\n            &lt;div class=&quot;rh&quot;&gt;&lt;div&gt;&lt;div class=&quot;nm&quot;&gt;Festa do Bruno&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;32 min \u00b7 voc\u00ea \u00e9 dono&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;pill&quot; style=&quot;color:var(--gold);background:rgba(255,209,90,.12);border-color:rgba(255,209,90,.3)&quot;&gt;DONO&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;pets-mini&quot;&gt;&lt;div class=&quot;pm&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;pm&quot; style=&quot;--pet-main:#E89B7B;--pet-stroke:#C77B5D&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;new-room&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 5v14M5 12h14&quot;\/&gt;&lt;\/svg&gt;Criar nova sala&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;5. Convites de sala&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;sub-tab Convites \u00b7 amigos te convidando&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Social&lt;\/div&gt;&lt;div class=&quot;icon-btn&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M12 5v14M5 12h14&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;subtabs&quot;&gt;&lt;div class=&quot;subtab&quot;&gt;Amigos&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Pedidos&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;subtab&quot;&gt;Salas&lt;\/div&gt;&lt;div class=&quot;subtab active&quot;&gt;Convites&lt;span class=&quot;nbadge&quot;&gt;2&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;invites-list&quot;&gt;\n          &lt;div class=&quot;invite-card&quot;&gt;\n            &lt;div class=&quot;timer&quot;&gt;4:23&lt;\/div&gt;\n            &lt;div class=&quot;ih&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;L\u00e9a te convidou pra sala&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&quot;Sala da L\u00e9a&quot; \u00b7 3 pets \u00b7 142m de voc\u00ea&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;iact&quot;&gt;&lt;button class=&quot;accept&quot;&gt;Entrar&lt;\/button&gt;&lt;button class=&quot;decline&quot;&gt;Recusar&lt;\/button&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;invite-card&quot;&gt;\n            &lt;div class=&quot;timer&quot;&gt;2:11&lt;\/div&gt;\n            &lt;div class=&quot;ih&quot;&gt;&lt;div class=&quot;mini-pet&quot; style=&quot;--pet-main:#E89B7B;--pet-stroke:#C77B5D&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;Bruno te convidou pra sala&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;&quot;Festa do Bruno&quot; \u00b7 2 pets \u00b7 38m de voc\u00ea&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;iact&quot;&gt;&lt;button class=&quot;accept&quot;&gt;Entrar&lt;\/button&gt;&lt;button class=&quot;decline&quot;&gt;Recusar&lt;\/button&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div style=&quot;font-family:'Mukta',sans-serif;font-weight:500;font-size:11.5px;color:var(--text-dim);text-align:center;padding:14px;font-style:italic&quot;&gt;Convites expiram em 5 minutos.&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;6. Sala 3D &lt;em&gt;\u00b7 chat estilo WhatsApp&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Salas&lt;\/b&gt; tap em card \u00b7 minhas msg \u00e0 direita&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;room-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;nm&quot;&gt;Sala da L\u00e9a&lt;\/div&gt;&lt;div class=&quot;sub&quot;&gt;4 pets \u00b7 12 min&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;room-leave&quot;&gt;Sair&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;room-stage&quot;&gt;\n          &lt;div class=&quot;hud-corners&quot;&gt;&lt;span class=&quot;tl&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;tr&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;bl&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;br&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n          &lt;div class=&quot;floor&quot;&gt;&lt;\/div&gt;\n          &lt;div class=&quot;room-pets&quot;&gt;\n            &lt;div class=&quot;rp&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;&quot;&gt;&lt;span class=&quot;nm&quot;&gt;Auri&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;rp&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;div class=&quot;chat-bubble&quot;&gt;Cheguei!&lt;\/div&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;nm&quot;&gt;L\u00e9a&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;rp&quot; style=&quot;--pet-main:#E89BC4;--pet-stroke:#C57BA0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;nm&quot;&gt;Carla&lt;\/span&gt;&lt;\/div&gt;\n            &lt;div class=&quot;rp&quot; style=&quot;--pet-main:#E89B7B;--pet-stroke:#C77B5D&quot;&gt;&lt;div class=&quot;chat-bubble&quot;&gt;Ol\u00e1 \ud83d\udc4b&lt;\/div&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;nm&quot;&gt;Bruno&lt;\/span&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;room-chat&quot;&gt;\n          &lt;div class=&quot;chat-list&quot;&gt;\n            &lt;div class=&quot;cmsg&quot;&gt;&lt;div class=&quot;av&quot; style=&quot;--pet-main:#E89B7B;--pet-stroke:#C77B5D&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;bb&quot;&gt;&lt;div class=&quot;nn&quot;&gt;Bruno&lt;\/div&gt;Ol\u00e1 pessoal \ud83d\udc4b&lt;div class=&quot;tm&quot;&gt;14:22&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cmsg&quot;&gt;&lt;div class=&quot;av&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;bb&quot;&gt;&lt;div class=&quot;nn&quot;&gt;L\u00e9a&lt;\/div&gt;Cheguei agora!&lt;div class=&quot;tm&quot;&gt;14:24&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cmsg me&quot;&gt;&lt;div class=&quot;av&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;bb&quot;&gt;&lt;div class=&quot;nn&quot;&gt;Voc\u00ea&lt;\/div&gt;Tirar foto da galera?&lt;div class=&quot;tm&quot;&gt;14:25&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cmsg&quot;&gt;&lt;div class=&quot;av&quot; style=&quot;--pet-main:#E89BC4;--pet-stroke:#C57BA0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;bb&quot;&gt;&lt;div class=&quot;nn&quot;&gt;Carla&lt;\/div&gt;Bora!&lt;div class=&quot;tm&quot;&gt;14:25&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;cmsg me&quot;&gt;&lt;div class=&quot;av&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;bb&quot;&gt;&lt;div class=&quot;nn&quot;&gt;Voc\u00ea&lt;\/div&gt;Vou no bot\u00e3o da c\u00e2mera&lt;div class=&quot;tm&quot;&gt;14:26&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;chat-input&quot;&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Escreva uma mensagem...&quot;&gt;&lt;div class=&quot;send&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M3 11l18-8-8 18-2-8z&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;7. C\u00e2mera da sala &lt;em&gt;\u00b7 foto coletiva&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Sala 3D&lt;\/b&gt; \u00b7 tap em &quot;Tirar foto&quot; \u00b7 seletor de pet pra mover\/rotacionar cada um&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;ar-view&quot;&gt;\n          &lt;div class=&quot;ar-top&quot;&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6L6 18&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;ar-tag&quot;&gt;&lt;span class=&quot;rec&quot;&gt;&lt;\/span&gt;FOTO \u00b7 4 pets&lt;\/div&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;path d=&quot;M3 17l4-3 4 3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-pet-tabs&quot;&gt;&lt;div class=&quot;ar-pet-tab active&quot;&gt;&lt;span class=&quot;pn&quot;&gt;Auri&lt;\/span&gt;&lt;span class=&quot;po&quot;&gt;voc\u00ea&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;ar-pet-tab&quot;&gt;&lt;span class=&quot;pn&quot;&gt;Lua&lt;\/span&gt;&lt;span class=&quot;po&quot;&gt;L\u00e9a&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;ar-pet-tab&quot;&gt;&lt;span class=&quot;pn&quot;&gt;Pip&lt;\/span&gt;&lt;span class=&quot;po&quot;&gt;Carla&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;ar-pet-tab&quot;&gt;&lt;span class=&quot;pn&quot;&gt;Tor&lt;\/span&gt;&lt;span class=&quot;po&quot;&gt;Bruno&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-reset&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M3 12a9 9 0 109-9v3l4-4-4-4v3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-pets&quot;&gt;\n            &lt;div class=&quot;ar-pet active&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-pet&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-pet&quot; style=&quot;--pet-main:#E89BC4;--pet-stroke:#C57BA0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-pet&quot; style=&quot;--pet-main:#E89B7B;--pet-stroke:#C77B5D&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;ar-controls&quot;&gt;\n            &lt;div class=&quot;ar-mode rot&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M12 2a10 10 0 110 20M12 2L7 7M12 2l5 5&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-shutter&quot;&gt;&lt;svg width=&quot;28&quot; height=&quot;28&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-switch&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M20 5h-3l-2-2H9L7 5H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2z&quot;\/&gt;&lt;path d=&quot;M15 12l-3-3-3 3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;!-- E2. ONBOARDING + STORIES (telas novas \u2014 n\u00e3o-implementadas, design ready) --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;E2 \u00b7 NOVAS \u00b7 onboarding + stories&lt;\/div&gt;&lt;h2&gt;Quiz &lt;em&gt;e stories&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;3 telas novas&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. Quiz arqu\u00e9tipos &lt;em&gt;\u00b7 exemplo&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Signup&lt;\/b&gt; primeiro acesso \u00b7 1 das 12 perguntas (estrutura se repete)&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;quiz&quot;&gt;\n          &lt;div class=&quot;quiz-progress&quot;&gt;\n            &lt;span class=&quot;quiz-step done&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step done&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step curr&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;quiz-step&quot;&gt;&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;quiz-counter&quot;&gt;Pergunta 3 de 12&lt;\/div&gt;\n          &lt;div class=&quot;quiz-q&quot;&gt;Como voc\u00ea costuma carregar suas baterias?&lt;\/div&gt;\n          &lt;div class=&quot;quiz-options&quot;&gt;\n            &lt;div class=&quot;quiz-opt&quot;&gt;&lt;div class=&quot;glyph&quot;&gt;\ud83c\udf19&lt;\/div&gt;&lt;div class=&quot;body&quot;&gt;&lt;div class=&quot;t&quot;&gt;Em sil\u00eancio, sozinho&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Tempo introspectivo me restaura&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;quiz-opt sel&quot;&gt;&lt;div class=&quot;glyph&quot;&gt;\ud83d\udd25&lt;\/div&gt;&lt;div class=&quot;body&quot;&gt;&lt;div class=&quot;t&quot;&gt;Com pessoas pr\u00f3ximas&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Conversas e companhia me energizam&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;quiz-opt&quot;&gt;&lt;div class=&quot;glyph&quot;&gt;\ud83c\udf3f&lt;\/div&gt;&lt;div class=&quot;body&quot;&gt;&lt;div class=&quot;t&quot;&gt;Na natureza&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Ar livre \u00e9 meu reset&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;quiz-opt&quot;&gt;&lt;div class=&quot;glyph&quot;&gt;\u26a1&lt;\/div&gt;&lt;div class=&quot;body&quot;&gt;&lt;div class=&quot;t&quot;&gt;Em movimento&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Exerc\u00edcio, dan\u00e7a, a\u00e7\u00e3o&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;button class=&quot;quiz-cta&quot;&gt;Pr\u00f3xima&lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;2. Visualizar story &lt;em&gt;\u00b7 Instagram-style&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Home&lt;\/b&gt; \u00b7 tap em qualquer story do carrossel \u00b7 n\u00e3o \u00e9 o pet, \u00e9 a foto postada&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot; style=&quot;color:#fff;z-index:6&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;stview&quot;&gt;\n          &lt;div class=&quot;stview-bars&quot;&gt;&lt;span class=&quot;stview-bar done&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;stview-bar done&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;stview-bar curr&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;stview-bar&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;\n          &lt;div class=&quot;stview-head&quot;&gt;\n            &lt;div class=&quot;av&quot; style=&quot;--pet-main:#C49EFF;--pet-stroke:#A47BE0&quot;&gt;&lt;svg viewBox=&quot;0 0 240 300&quot;&gt;&lt;use href=&quot;#pet&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;info&quot;&gt;&lt;div class=&quot;nm&quot;&gt;L\u00e9a&lt;\/div&gt;&lt;div class=&quot;tm&quot;&gt;h\u00e1 12 min \u00b7 Sala da L\u00e9a&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;stview-close&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6L6 18&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;stview-cap&quot;&gt;domingo de sol na praia \ud83c\udf0a&lt;\/div&gt;\n          &lt;div class=&quot;stview-reply&quot;&gt;\n            &lt;input type=&quot;text&quot; placeholder=&quot;Responde pra L\u00e9a...&quot;&gt;\n            &lt;div class=&quot;heart&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M12 21s-7-5-9-10c-1.5-4 1-8 5-8 2 0 3 1 4 3 1-2 2-3 4-3 4 0 6.5 4 5 8-2 5-9 10-9 10z&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;send&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M3 11l18-8-8 18-2-8z&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;3. Adicionar story &lt;em&gt;\u00b7 salvar ou postar&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Home&lt;\/b&gt; \u00b7 tap em &quot;+&quot; do carrossel de stories&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;ar-view&quot; style=&quot;flex:none;height:480px&quot;&gt;\n          &lt;div class=&quot;ar-top&quot;&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6L6 18&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;ar-tag&quot;&gt;&lt;span class=&quot;rec&quot;&gt;&lt;\/span&gt;NOVO STORY&lt;\/div&gt;&lt;div class=&quot;ar-close&quot;&gt;&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;path d=&quot;M3 17l4-3 4 3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-pets&quot; style=&quot;bottom:90px&quot;&gt;&lt;div class=&quot;ar-pet&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;ar-controls&quot;&gt;\n            &lt;div class=&quot;ar-mode&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M5 9l-3 3 3 3M9 5l3-3 3 3M19 9l3 3-3 3M9 19l3 3 3-3M2 12h20M12 2v20&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-shutter&quot;&gt;&lt;svg width=&quot;28&quot; height=&quot;28&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;7&quot; width=&quot;18&quot; height=&quot;13&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n            &lt;div class=&quot;ar-switch&quot;&gt;&lt;svg width=&quot;22&quot; height=&quot;22&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M20 5h-3l-2-2H9L7 5H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2z&quot;\/&gt;&lt;path d=&quot;M15 12l-3-3-3 3M9 12l3 3 3-3&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;stadd-confirm&quot;&gt;\n          &lt;div class=&quot;stt&quot;&gt;O que fazer com a foto?&lt;\/div&gt;\n          &lt;div class=&quot;row&quot;&gt;&lt;button class=&quot;cancel&quot;&gt;Cancelar&lt;\/button&gt;&lt;button class=&quot;save&quot; style=&quot;background:rgba(0,224,255,.12);color:var(--cyan);border:1px solid var(--cyan)&quot;&gt;Salvar&lt;\/button&gt;&lt;button class=&quot;post&quot;&gt;Postar story&lt;\/button&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;!-- F. OVERLAY --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;F \u00b7 OVERLAY \u00b7 2 bot\u00f5es (foto direta + foto com texto)&lt;\/div&gt;&lt;h2&gt;Pet &lt;em&gt;sempre presente&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;2 telas&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. Pet em overlay&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;autom\u00e1tico ao minimizar o app&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot; style=&quot;color:#1F2937&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;overlay-sim&quot;&gt;\n          &lt;div class=&quot;fake-app&quot;&gt;\n            &lt;div class=&quot;fake-head&quot;&gt;&lt;div class=&quot;ft&quot;&gt;Conversas&lt;\/div&gt;&lt;div style=&quot;font-size:18px;color:#6B7280&quot;&gt;\u22ef&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;fake-msg&quot;&gt;\n              &lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;av&quot; style=&quot;background:#FFD970&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;txt&quot;&gt;&lt;div class=&quot;nn&quot;&gt;M\u00e3e&lt;\/div&gt;&lt;div class=&quot;pp&quot;&gt;Filho, almo\u00e7o amanh\u00e3?&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n              &lt;div class=&quot;row right&quot;&gt;&lt;div class=&quot;bubble-c&quot;&gt;Vou sim, m\u00e3e&lt;\/div&gt;&lt;\/div&gt;\n              &lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;av&quot; style=&quot;background:#A8DADC&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;txt&quot;&gt;&lt;div class=&quot;nn&quot;&gt;M\u00e3e&lt;\/div&gt;&lt;div class=&quot;pp&quot;&gt;Que bom! 13h t\u00e1 bom?&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n              &lt;div class=&quot;row right&quot;&gt;&lt;div class=&quot;bubble-c&quot;&gt;Combinado \ud83d\ude18&lt;\/div&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;pet-overlay&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;2. Menu radial &lt;em&gt;\u00b7 1 op\u00e7\u00e3o (Foto)&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Overlay&lt;\/b&gt; \u00b7 1 tap no pet&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;radial-sim&quot;&gt;\n          &lt;div class=&quot;radial-bubble&quot;&gt;Quer tirar uma foto?&lt;\/div&gt;\n          &lt;div class=&quot;radial-center&quot;&gt;&lt;img src=&quot;https:\/\/gabrielsilvaduartedev.com\/wp-content\/uploads\/2026\/05\/auriks-logo.png&quot; alt=&quot;Auri&quot;&gt;&lt;\/div&gt;\n          &lt;div class=&quot;radial-opt pos-top-only&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;lbl&quot;&gt;Foto&lt;\/span&gt;&lt;\/div&gt;\n          &lt;div class=&quot;radial-close&quot;&gt;\u00d7&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;!-- G. EU --&gt;\n&lt;section class=&quot;section v2&quot;&gt;\n  &lt;div class=&quot;section-head&quot;&gt;&lt;div&gt;&lt;div class=&quot;tag&quot;&gt;G \u00b7 EU \u00b7 voc\u00ea e sistema&lt;\/div&gt;&lt;h2&gt;Voc\u00ea &lt;em&gt;e o sistema&lt;\/em&gt;&lt;\/h2&gt;&lt;\/div&gt;&lt;div class=&quot;count&quot;&gt;3 telas \u00b7 cores foi pra m\u00f3dulo B&lt;\/div&gt;&lt;\/div&gt;\n  &lt;div class=&quot;phones&quot;&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;1. Eu &lt;em&gt;\u00b7 perfil + menu&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;aba &lt;b&gt;Eu&lt;\/b&gt; \u00b7 acesso a tudo&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;profile-head&quot;&gt;&lt;div class=&quot;profile-av&quot;&gt;G&lt;\/div&gt;&lt;div class=&quot;profile-name&quot;&gt;Gabriel Duarte&lt;\/div&gt;&lt;div class=&quot;profile-code&quot;&gt;M9X7-K2A1&lt;\/div&gt;&lt;div class=&quot;profile-stats&quot;&gt;&lt;div class=&quot;profile-stat&quot;&gt;&lt;div class=&quot;v&quot;&gt;7&lt;\/div&gt;&lt;div class=&quot;l&quot;&gt;N\u00edvel&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;profile-stat&quot;&gt;&lt;div class=&quot;v&quot;&gt;5&lt;\/div&gt;&lt;div class=&quot;l&quot;&gt;Amigos&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;profile-stat&quot;&gt;&lt;div class=&quot;v&quot;&gt;28&lt;\/div&gt;&lt;div class=&quot;l&quot;&gt;Dias&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;menu-list&quot;&gt;\n          &lt;div class=&quot;menu-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;8&quot; r=&quot;4&quot;\/&gt;&lt;path d=&quot;M4 20c0-4 4-6 8-6s8 2 8 6&quot;\/&gt;&lt;\/svg&gt;Conta e e-mail&lt;span class=&quot;chevron&quot;&gt;\u203a&lt;\/span&gt;&lt;\/div&gt;\n          &lt;div class=&quot;menu-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M6 8a6 6 0 1112 0c0 7 3 8 3 8H3s3-1 3-8&quot;\/&gt;&lt;\/svg&gt;Notifica\u00e7\u00f5es&lt;span class=&quot;chevron&quot;&gt;\u203a&lt;\/span&gt;&lt;\/div&gt;\n          &lt;div class=&quot;menu-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6z&quot;\/&gt;&lt;\/svg&gt;Permiss\u00f5es&lt;span class=&quot;chevron&quot;&gt;\u203a&lt;\/span&gt;&lt;\/div&gt;\n          &lt;div class=&quot;menu-item menu-item--danger&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M16 17l5-5-5-5M21 12H9M13 3H5a2 2 0 00-2 2v14a2 2 0 002 2h8&quot;\/&gt;&lt;\/svg&gt;Sair da conta&lt;span class=&quot;chevron&quot;&gt;\u203a&lt;\/span&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;2. Conta e e-mail &lt;em&gt;\u00b7 dados pessoais&lt;\/em&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Eu \u203a Conta e e-mail&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Conta e e-mail&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;account&quot;&gt;\n          &lt;div class=&quot;account-grp&quot;&gt;\n            &lt;div class=&quot;gh&quot;&gt;DADOS PESSOAIS&lt;\/div&gt;\n            &lt;div class=&quot;account-card&quot;&gt;\n              &lt;div class=&quot;account-row&quot;&gt;&lt;div class=&quot;ab&quot;&gt;&lt;div class=&quot;l&quot;&gt;Nome&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;Gabriel Duarte&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;edit&quot;&gt;Editar&lt;\/div&gt;&lt;\/div&gt;\n              &lt;div class=&quot;account-row&quot;&gt;&lt;div class=&quot;ab&quot;&gt;&lt;div class=&quot;l&quot;&gt;C\u00f3digo do amigo&lt;\/div&gt;&lt;div class=&quot;v&quot; style=&quot;font-family:'Mukta',monospace;letter-spacing:.12em&quot;&gt;M9X7-K2A1&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;account-grp&quot;&gt;\n            &lt;div class=&quot;gh&quot;&gt;ACESSO&lt;\/div&gt;\n            &lt;div class=&quot;account-card&quot;&gt;\n              &lt;div class=&quot;account-row&quot;&gt;&lt;div class=&quot;ab&quot;&gt;&lt;div class=&quot;l&quot;&gt;E-mail&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;gabriel@auriks.app&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;verif&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;3&quot;&gt;&lt;path d=&quot;M5 12l4 4 10-10&quot;\/&gt;&lt;\/svg&gt;Verificado&lt;\/div&gt;&lt;\/div&gt;\n              &lt;div class=&quot;account-row&quot;&gt;&lt;div class=&quot;ab&quot;&gt;&lt;div class=&quot;l&quot;&gt;Senha&lt;\/div&gt;&lt;div class=&quot;v&quot;&gt;\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022 &lt;span style=&quot;font-family:'Mukta',sans-serif;font-size:10px;color:var(--text-dim);font-weight:500;margin-left:6px&quot;&gt;atualizada h\u00e1 28 dias&lt;\/span&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;edit&quot;&gt;Trocar&lt;\/div&gt;&lt;\/div&gt;\n              &lt;div class=&quot;account-row&quot;&gt;&lt;div class=&quot;ab&quot;&gt;&lt;div class=&quot;l&quot;&gt;Telefone&lt;\/div&gt;&lt;div class=&quot;v&quot; style=&quot;color:var(--text-dim);font-style:italic&quot;&gt;n\u00e3o cadastrado&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;edit&quot;&gt;Adicionar&lt;\/div&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;account-danger&quot;&gt;\n            &lt;button class=&quot;logout&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M16 17l5-5-5-5M21 12H9M13 3H5a2 2 0 00-2 2v14a2 2 0 002 2h8&quot;\/&gt;&lt;\/svg&gt;Sair da conta&lt;\/button&gt;\n            &lt;button class=&quot;delete&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6&quot;\/&gt;&lt;\/svg&gt;Excluir conta permanentemente&lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;phone-card&quot;&gt;\n      &lt;div class=&quot;phone-label&quot;&gt;3. Notifica\u00e7\u00f5es&lt;\/div&gt;\n      &lt;div class=&quot;phone-flow&quot;&gt;de: &lt;b&gt;Eu \u203a Notifica\u00e7\u00f5es&lt;\/b&gt;&lt;\/div&gt;\n      &lt;div class=&quot;phone&quot;&gt;&lt;span class=&quot;side-vol&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;side-pwr&quot;&gt;&lt;\/span&gt;&lt;div class=&quot;phone__screen&quot;&gt;&lt;div class=&quot;phone__notch&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;scr&quot;&gt;\n        &lt;div class=&quot;statusbar&quot;&gt;&lt;span&gt;9:41&lt;\/span&gt;&lt;span class=&quot;right&quot;&gt;&lt;svg class=&quot;sb-icon&quot; viewBox=&quot;0 0 16 10&quot; fill=&quot;currentColor&quot;&gt;&lt;path d=&quot;M1 7l1-1 1 1 1-2 1 2 1-3 1 3 1-4 1 4 1-5 1 5 1-6 1 6V10H1z&quot;\/&gt;&lt;\/svg&gt;&lt;span class=&quot;sb-batt&quot;&gt;&lt;i&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;div class=&quot;page-head-bar&quot;&gt;&lt;div class=&quot;back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot;\/&gt;&lt;\/svg&gt;&lt;\/div&gt;&lt;div class=&quot;page-title&quot;&gt;Notifica\u00e7\u00f5es&lt;\/div&gt;&lt;div style=&quot;width:36px&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n        &lt;div class=&quot;notif&quot;&gt;\n          &lt;div class=&quot;notif-grp&quot;&gt;&lt;div class=&quot;gh&quot;&gt;SOBRE O PET&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;notif-list&quot;&gt;\n            &lt;div class=&quot;notif-row&quot;&gt;&lt;div class=&quot;nb&quot;&gt;&lt;div class=&quot;t&quot;&gt;Pet com fome ou cansado&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Auri precisa de voc\u00ea&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;notif-row&quot;&gt;&lt;div class=&quot;nb&quot;&gt;&lt;div class=&quot;t&quot;&gt;Pet ficou doente&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Quando sa\u00fade cai muito&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;notif-row&quot;&gt;&lt;div class=&quot;nb&quot;&gt;&lt;div class=&quot;t&quot;&gt;Subiu de n\u00edvel&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Conquistas e evolu\u00e7\u00e3o&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;notif-grp&quot;&gt;&lt;div class=&quot;gh&quot;&gt;SOCIAL&lt;\/div&gt;&lt;\/div&gt;\n          &lt;div class=&quot;notif-list&quot;&gt;\n            &lt;div class=&quot;notif-row&quot;&gt;&lt;div class=&quot;nb&quot;&gt;&lt;div class=&quot;t&quot;&gt;Pedido de amizade&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Algu\u00e9m quer ser amigo&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;notif-row&quot;&gt;&lt;div class=&quot;nb&quot;&gt;&lt;div class=&quot;t&quot;&gt;Convite pra sala&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Amigos te chamando&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle on&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n            &lt;div class=&quot;notif-row&quot;&gt;&lt;div class=&quot;nb&quot;&gt;&lt;div class=&quot;t&quot;&gt;Mensagem em sala&lt;\/div&gt;&lt;div class=&quot;s&quot;&gt;Algu\u00e9m escreveu no chat&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;toggle&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;bottom-nav&quot;&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;5&quot;\/&gt;&lt;\/svg&gt;Pet&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;18&quot; height=&quot;14&quot; rx=&quot;2&quot;\/&gt;&lt;circle cx=&quot;12&quot; cy=&quot;13&quot; r=&quot;4&quot;\/&gt;&lt;\/svg&gt;C\u00e2mera&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;path d=&quot;M13 2L4 14h6l-2 8 10-12h-6l1-8z&quot;\/&gt;&lt;\/svg&gt;Intera\u00e7\u00f5es&lt;\/div&gt;&lt;div class=&quot;nav-item&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;9&quot; cy=&quot;8&quot; r=&quot;3&quot;\/&gt;&lt;circle cx=&quot;17&quot; cy=&quot;10&quot; r=&quot;2.5&quot;\/&gt;&lt;path d=&quot;M3 20c1-3 4-5 6-5s5 2 6 5&quot;\/&gt;&lt;\/svg&gt;Social&lt;\/div&gt;&lt;div class=&quot;nav-item active&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;9&quot; r=&quot;3&quot;\/&gt;&lt;path d=&quot;M5 20c1-4 4-6 7-6s6 2 7 6&quot;\/&gt;&lt;\/svg&gt;Eu&lt;\/div&gt;&lt;\/div&gt;\n      &lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/section&gt;\n\n&lt;div style=&quot;max-width:1640px;margin:48px auto 0;padding:24px 8px 0;border-top:1px solid var(--page-divider);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--page-muted);font-family:'Mukta',sans-serif;font-weight:700&quot;&gt;\n  &lt;span&gt;auriks \u00b7 sistema completo \u00b7 r10 \u00b7 pr\u00e9-dev&lt;\/span&gt;\n  &lt;span&gt;30 telas \u00b7 5 abas \u00b7 c\u00e2mera separada de intera\u00e7\u00e3o&lt;\/span&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\" style=\"width:100vw;height:100vh;border:0;display:block;\"><\/iframe>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/pages\/562"}],"collection":[{"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/comments?post=562"}],"version-history":[{"count":1,"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/pages\/562\/revisions"}],"predecessor-version":[{"id":564,"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/pages\/562\/revisions\/564"}],"wp:attachment":[{"href":"https:\/\/gabrielsilvaduartedev.com\/index.php\/wp-json\/wp\/v2\/media?parent=562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}