@cupcodev/ui 1.0.2 → 1.0.7

package/styles/dock.css

@@ -1,858 +1,875 @@
-:root {
-    --accent-color: #1fa8f5;
-    --accent-color-fg: #fefefe;
-    --app-content-background-color: transparent;
-    --inset-shadow: rgba(7, 43, 74, 0.3);
-    --outset-shadow: rgba(223, 240, 255, 0.25);
-    --clay-box-shadow: rgba(7, 43, 74, 0.3);
-    --clay-background-color: #c0d8ec;
-    --clay-fg-color: #444;
-    --lg-bg-color: rgba(255, 255, 255, 0.25);
-    --lg-highlight: rgba(255, 255, 255, 0.75);
-    --lg-text: #18013a;
-    --lg-hover-glow: rgba(255, 255, 255, 0.4);
-    --lg-grey: #5b5b5b;
-    --card-spacing: 0.5rem;
-    --marketing-base: #ed1e79;
-    --desenvolvimento-base: #951ddb;
-    --blue-sky-light: #87ceeb;
-    --blue-sky-med: #00b7eb;
-    --blue-sky-dark: #006bb3;
-    --blue-pink-light: #ff69b4;
-    --blue-pink-med: #00b7eb;
-    --purple-orange-light: #ff4500;
-    --purple-orange-med: #951ddb;
-    --black-grey-light: #a9a9a9;
-    --black-grey-med: #2f2f2f;
-    --orange-base: #ffa500;
-    --yellow-base: #ffff00;
-    --pink-blue-light: #ff69b4;
-    --pink-blue-med: #00b7eb;
-    --yellow-purple-light: #ffff00;
-    --yellow-purple-med: #951ddb;
-    --blue-green-grey-light: #00b7eb;
-    --blue-green-grey-med: #228b22;
-    --blue-green-grey-dark: #696969;
-}
-
-.flex-center {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
-
-.dock {
-    max-width: 100%;
-    width: 100%;
-    margin: 0 auto;
-    position: fixed;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1000;
-    max-width: 580px;
-    margin-bottom: 0.5rem;
-    border-radius: 2rem;
-    overflow: visible;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-    background: #fcfcfc87;
-}
-
-.dark .dock {
-    background: #00000087;
-}
-
-.marketing-style {
-    --app-content-background-color: #ed1e79;
-}
-.mn-desenvolvimento-style {
-    --app-content-background-color: #951ddb;
-}
-.mn-solucoes-style {
-    --app-content-background-color: #00b7eb;
-}
-.mn-cases-de-sucesso-style {
-    --app-content-background-color: #ff69b4;
-}
-.mn-sobre-nos-style {
-    --app-content-background-color: #ffff00;
-}
-.mn-contato-style {
-    --app-content-background-color: #228b22;
-}
-
-.tabbar {
-    position: relative;
-    background: transparent;
-    border-radius: 2rem;
-    height: 80px;
-    min-height: 80px;
-    display: flex;
-    flex-direction: column;
-    box-sizing: content-box;
-    overflow: visible;
-    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
-}
-
-.is-active-menu.tabbar {
-    height: auto;
-    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.tabbar ul,
-.tabbar li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.tabbar ul {
-    position: relative;
-    width: 100%;
-    justify-content: center;
-    height: 80px;
-    z-index: 3;
-    padding: 0.5rem 1rem;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    overflow: visible;
-}
-
-.tabbar li {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1rem;
-    width: 60px;
-    height: 60px;
-    position: relative;
-    color: var(--lg-text);
-    cursor: pointer;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.tabbar li:last-child {
-    margin-right: 0;
-}
-
-.tab-style1 li {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 60px;
-    height: 60px;
-    flex-direction: column;
-    border-radius: 1.2rem;
-    padding: 1px;
-    position: relative;
-}
-.tab-style1 li::after {
-    content: '';
-    position: absolute;
-    top: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid rgb(148 20 222 / 71%);
-    opacity: 0;
-    transition: opacity 0.4s;
-    z-index: 4;
-}
-.tab-style1 li.active::after {
-    opacity: 1;
-}
-
-.tab-style1 li:hover {
-    transform: scale(0.95);
-    box-shadow: 0 0 10px var(--lg-hover-glow);
-}
-
-.tab-style1 li.dock-divider:hover {
-    transform: none;
-    box-shadow: none;
-}
-
-.tab-style1 li.dock-divider::after {
-    content: none;
-}
-
-.tab-style1 li.dock-divider {
-    width: 1px;
-    min-width: 1px;
-    height: 44px;
-    padding: 0;
-    margin: 0 7px;
-    border-radius: 999px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(120, 120, 120, 0.2));
-    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.55), 0 0 2px rgba(0, 0, 0, 0.25);
-    pointer-events: none;
-    cursor: default;
-    align-self: center;
-}
-
-.tabbar ul > li:last-of-type::before {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: hsl(var(--cc-pink, 330 87% 52%));
-    box-shadow: 0 0 6px rgba(237, 30, 121, 0.45);
-}
-
-.tabbar li .bg-img-menu-fix-mob {
-    display: block;
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 1px;
-}
-
-.tabbar li.mn-sobre-nos .bg-img-menu-fix-mob {
-    padding: 5px;
-}
-
-.list-menu-mob-show {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    z-index: 5;
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-    pointer-events: none;
-}
-
-.list-menu-mob-show.show {
-    display: flex;
-    pointer-events: auto;
-}
-
-.list-menu-mob-show .mob-list-menu.hide {
-    display: none;
-}
-
-.list-menu-mob-show .mob-list-menu.show {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-.submenu-stack {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    max-width: 210px;
-    background: none;
-}
-
-.submenu-stack::after {
-    content: '';
-    position: absolute;
-    bottom: -14px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 14px solid transparent;
-    border-right: 14px solid transparent;
-    border-top: 14px solid rgba(255, 255, 255, 0.6);
-    opacity: 0;
-    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-    pointer-events: none;
-    z-index: -1;
-}
-
-.submenu-stack::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-    z-index: -1;
-}
-
-.submenu-stack.visible::before {
-    opacity: 1;
-    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.submenu-stack:not(.visible)::before {
-    transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.mob-list-menu.show .submenu-stack::after {
-    opacity: 1;
-}
-
-.submenu-stack.marketing::before {
-    background: linear-gradient(182deg, rgba(149, 29, 218, 0) 13.45%, rgba(184, 29, 218, 0.66) 18.07%, rgba(218, 10, 163, 0.77));
-}
-.submenu-stack.mn-desenvolvimento::before {
-    background: linear-gradient(187deg, rgba(237, 29, 120, 0) 12.18%, rgba(241, 12, 202, 0.68) 14.29%, rgba(83, 1, 190, 0.73));
-}
-.submenu-stack.mn-solucoes::before {
-    background: linear-gradient(182deg, rgba(255, 255, 0, 0) 12.18%, rgba(217, 0, 255, 0.62) 15.55%, rgba(239, 64, 176, 0.78));
-}
-.submenu-stack.mn-cases-de-sucesso::before {
-    background: linear-gradient(192deg, rgba(135, 206, 235, 0) 13.45%, rgba(21, 43, 228, 0.49) 16.39%, rgba(178, 0, 235, 0.6));
-}
-.submenu-stack.mn-sobre-nos::before {
-    background: linear-gradient(187deg, rgba(0, 182, 235, 0) 12.61%, rgba(73, 0, 235, 0.56) 15.97%, rgba(201, 209, 59, 0.62));
-}
-.submenu-stack.mn-contato::before {
-    background: linear-gradient(192deg, rgba(255, 105, 180, 0) 10.92%, rgba(11, 149, 61, 0.68) 15.13%, rgba(0, 183, 235, 0.8));
-}
-
-.marketing .submenu-stack::after { border-top-color: rgba(237, 30, 121, 0.8); }
-.mn-desenvolvimento .submenu-stack::after { border-top-color: rgba(149, 29, 218, 0.8); }
-.mn-solucoes .submenu-stack::after { border-top-color: rgba(0, 183, 235, 0.8); }
-.mn-cases-de-sucesso .submenu-stack::after { border-top-color: rgba(255, 105, 180, 0.8); }
-.mn-sobre-nos .submenu-stack::after { border-top-color: rgba(255, 255, 0, 0.8); }
-.mn-contato .submenu-stack::after { border-top-color: rgba(34, 139, 34, 0.8); }
-
-.submenu-card {
-    width: 280px;
-    height: 90px;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    clip-path: polygon(0 0, 95% 5%, 100% 100%, 5% 95%);
-    border-radius: 10px 61px 20px 0;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-    will-change: transform, opacity;
-    isolation: isolate;
-    transform-origin: center bottom;
-    transform: translateY(100%);
-    opacity: 0;
-}
-
-.submenu-card.animate-in {
-    transform: translateY(0);
-    opacity: 1;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.submenu-card:not(.animate-in) {
-    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.submenu-card:hover.animate-in {
-    transform: scale(1.02) translateY(-2px) !important;
-}
-
-.submenu-card:hover:not(.animate-in) {
-    transform: scale(1.02) translateY(-2px);
-}
-
-.marketing {
-    --c1: rgb(252 210 228 / 77%);
-    --c2: rgb(215 45 146 / 50%);
-    --c3: rgba(238, 135, 214, 0.35);
-    --base-angle: 119deg;
-    --p1: 0%;
-    --p2: 50.84%;
-    --p3: 100%;
-}
-
-.mn-desenvolvimento {
-    --c1: rgba(204, 127, 247, 0.6);
-    --c2: rgba(181, 160, 245, 0.55);
-    --c3: rgba(203, 132, 226, 0.69);
-    --base-angle: 150deg;
-    --p1: 21.01%;
-    --p2: 73.95%;
-    --p3: 100%;
-}
-
-.mn-cases-de-sucesso {
-    --c1: rgba(240, 173, 206, 0.69);
-    --c2: rgba(206, 82, 217, 0.62);
-    --c3: rgba(201, 243, 255, 0.5);
-    --base-angle: 45deg;
-    --p1: 0%;
-    --p2: 44.12%;
-    --p3: 100%;
-}
-
-.mn-sobre-nos {
-    --c1: rgba(230, 145, 218, 0.6);
-    --c2: rgba(198, 128, 238, 0.52);
-    --c3: rgba(241, 241, 212, 0.51);
-    --base-angle: 135deg;
-    --p1: 0%;
-    --p2: 50%;
-    --p3: 100%;
-}
-
-.mn-contato {
-    --c1: rgba(171, 217, 230, 0.65);
-    --c2: rgba(213, 240, 213, 0.63);
-    --c3: rgba(175, 214, 154, 0.61);
-    --base-angle: 135deg;
-    --p1: 0%;
-    --p2: 55.88%;
-    --p3: 100%;
-}
-
-:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card {
-    --a: var(--base-angle, 135deg);
-    --o1: var(--c1);
-    --o2: var(--c2);
-    --o3: var(--c3);
-    background: linear-gradient(var(--a), var(--o1) var(--p1, 0%), var(--o2) var(--p2, 50%), var(--o3) var(--p3, 100%));
-}
-:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:first-child {
-    --a: calc(var(--base-angle, 135deg) + 14deg);
-    --o1: var(--c3);
-    --o2: var(--c1);
-    --o3: var(--c2);
-}
-:is(.marketing, .mn-desenvolvimento, .mn-sobre-nos, .mn-contato) .submenu-card:last-child {
-    --a: calc(var(--base-angle, 135deg) + 180deg);
-    --o1: var(--c2);
-    --o2: var(--c3);
-    --o3: var(--c1);
-}
-:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:not(:first-child):not(:last-child):nth-child(odd) {
-    --a: calc(var(--base-angle, 135deg) + 31deg);
-    --o1: var(--c1);
-    --o2: var(--c3);
-    --o3: var(--c2);
-}
-:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:not(:first-child):not(:last-child):nth-child(even) {
-    --a: calc(var(--base-angle, 135deg) - 16deg);
-    --o1: var(--c2);
-    --o2: var(--c1);
-    --o3: var(--c3);
-}
-:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:only-child {
-    --a: var(--base-angle, 135deg);
-    --o1: var(--c1);
-    --o2: var(--c2);
-    --o3: var(--c3);
-}
-:is(.mn-cases-de-sucesso) .submenu-card:last-child {
-    --a: calc(var(--base-angle, 45deg) + 180deg);
-    background: linear-gradient(
-        var(--a),
-        rgba(155, 26, 196, 0.68) 0%,
-        rgba(185, 82, 225, 0.71) 40%,
-        rgb(198 110 235 / 90%) 50%,
-        rgba(185, 82, 225, 0.71) 60%,
-        rgb(170 39 177 / 58%) 100%
-    );
-    background-size: 300% 100%;
-    animation: visibleFlare 7.5s ease-in-out infinite;
-    position: relative;
-    z-index: 1;
-    transform: translate3d(0, 0, 0);
-    backface-visibility: hidden;
-    will-change: background-position;
-}
-
-@keyframes visibleFlare {
-    0% {
-        background-position: 0% 0%;
-    }
-    25% {
-        background-position: 100% 100%;
-    }
-    50% {
-        background-position: 0% 100%;
-    }
-    75% {
-        background-position: 100% 0%;
-    }
-    100% {
-        background-position: 0% 0%;
-    }
-}
-
-.mn-solucoes .submenu-card:nth-child(1) {
-    background: linear-gradient(to bottom right, rgba(39, 109, 177, 0.68), rgba(156, 212, 255, 0.71) 49.16%, rgba(252, 195, 212, 0.58));
-}
-.mn-solucoes .submenu-card:nth-child(2) {
-    background: linear-gradient(to bottom right, rgba(255, 105, 180, 0.55), rgba(0, 183, 235, 0.66));
-}
-.mn-solucoes .submenu-card:nth-child(3) {
-    background: linear-gradient(to bottom right, rgba(149, 29, 218, 0.68) 46.22%, rgba(255, 171, 0, 0.7));
-}
-.mn-solucoes .submenu-card:nth-child(4) {
-    background: linear-gradient(to bottom right, rgba(132, 132, 132, 0.49), rgba(0, 0, 0, 0.59) 66.81%);
-}
-.mn-solucoes .submenu-card:nth-child(4) .card-content .text-content {
-    color: #fff;
-}
-.mn-solucoes .submenu-card:nth-child(5) {
-    background: linear-gradient(166deg, rgba(255, 128, 0, 0.64) 54.62%, color(display-p3 0.06 0.036 0.441 / 0.56) 92.86%);
-}
-.mn-solucoes .submenu-card:nth-child(6) {
-    background: linear-gradient(to bottom right, rgba(255, 255, 0, 0.63), rgba(254, 123, 3, 0.64));
-}
-
-.submenu-card .fold {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 30px;
-    height: 20px;
-    background: inherit;
-    transform: skewX(10deg);
-    transform-origin: right;
-    z-index: 1;
-}
-
-.submenu-card .glass-filter {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    filter: url(#lg-dist);
-    isolation: isolate;
-    backdrop-filter: blur(3px);
-}
-
-@supports (-webkit-backdrop-filter: blur(3px)) {
-    .submenu-card .glass-filter,
-    .tabbar .glass-filter {
-        filter: url(#lg-dist);
-    }
-}
-@supports not (-webkit-backdrop-filter: blur(3px)) {
-    .submenu-card .glass-filter,
-    .tabbar .glass-filter {
-        backdrop-filter: blur(3px);
-    }
-}
-
-.submenu-card .glass-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    background: rgb(0 0 0 / 25%);
-}
-
-.submenu-card .glass-specular {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    overflow: hidden;
-    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset -1px -1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
-}
-
-.dark .tabbar .glass-specular {
-    box-shadow: inset 1px 1px 0 rgb(44 44 44 / 75%), inset -1px -1px 0 rgb(29 29 29 / 75%), inset 0 0 5px rgb(189 189 189 / 75%);
-}
-
-.submenu-card .card-content {
-    position: relative;
-    z-index: 3;
-    display: flex;
-    align-items: start;
-    justify-content: flex-start;
-    padding: 1rem 1rem 0 1rem;
-    height: 100%;
-    color: var(--lg-text);
-    width: 100%;
-}
-
-.submenu-card .card-content .icon {
-    width: 50px;
-    margin-right: 0.5rem;
-    flex-shrink: 0;
-}
-
-.submenu-card .card-content .text-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.submenu-card .card-content .title {
-    font-size: 0.8rem;
-    font-weight: bold;
-}
-
-.submenu-card .card-content .description {
-    font-size: 0.65rem;
-    opacity: 0.9;
-    line-height: 1.2;
-}
-
-.submenu-card .card-content .saiba-mais {
-    background: rgba(22, 185, 4, 0.69);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 0.5rem;
-    padding: 0.1rem 0.6rem;
-    color: #013a05;
-    text-decoration: none;
-    font-size: 0.75rem;
-    position: absolute;
-    bottom: -2px;
-    right: 0;
-    transition: background 0.3s;
-    white-space: nowrap;
-}
-.saiba-mais-1 {
-    background: rgba(22, 185, 4, 0.69);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 0.5rem;
-    padding: 0.1rem 0.6rem;
-    color: #013a05;
-    text-decoration: none;
-    font-size: 0.75rem;
-    position: absolute;
-    bottom: -2px;
-    right: 120px;
-    transition: background 0.3s;
-    white-space: nowrap;
-}
-
-.submenu-card .card-content .saiba-mais:hover, .saiba-mais-1:hover {
-    background: rgb(1 60 12 / 66%);
-    color: #fff;
-}
-
-.tabbar .glass-filter {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    filter: url(#lg-dist);
-    isolation: isolate;
-    backdrop-filter: blur(3px);
-    border-radius: 40px;
-}
-
-.tabbar .glass-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    background: rgba(255, 255, 255, 0.25);
-    border-radius: 35px;
-}
-
-.tabbar .glass-specular {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    border-radius: inherit;
-    overflow: hidden;
-    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset -1px -1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
-}
-
-.dark .tabbar .glass-specular {
-    box-shadow: inset 1px 1px 0 rgb(44 44 44 / 75%), inset -1px -1px 0 rgb(29 29 29 / 75%), inset 0 0 5px rgb(189 189 189 / 75%);
-}
-.dark .tabbar .glass-overlay {
-    background: rgba(0, 0, 0, 0.25);
-}
-
-.tab-style1 li img {
-    max-width: 40px;
-    max-height: 40px;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.tab-style1 li:hover img {
-    transform: scale(0.95);
-}
-
-.tabbar li.mn-homepage {
-    position: relative;
-}
-
-a.link-absolute-menu {
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    inset: 0;
-}
-
-.tabbar li.mn-homepage .bg-img-menu-fix-mob {
-    height: 60px;
-    width: 60px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding: 1px;
-}
-
-.tooltip {
-    z-index: 10000 !important;
-    filter: none !important;
-}
-
-.tooltip-inner {
-    background-color: rgba(0, 0, 0, 0.8) !important;
-    color: #fff !important;
-    font-weight: 600;
-}
-
-.tooltip .arrow::before {
-    border-top-color: rgba(0, 0, 0, 0.8) !important;
-}
-
-@media (max-width: 600px) {
-    .dock {
-        max-width: 90%;
-        min-width: 370px;
-    }
-    .submenu-card {
-        height: 90px;
-        width: 270px;
-    }
-
-    .submenu-stack {
-        max-width: 240px;
-    }
-
-    .tabbar li .bg-img-menu-fix-mob {
-        height: 40px;
-        width: 40px;
-    }
-
-    .tabbar li.mn-sobre-nos .bg-img-menu-fix-mob {
-        padding: 4px;
-    }
-
-    .tab-style1 li {
-        width: 40px;
-        height: 40px;
-    }
-
-    .tabbar ul {
-        height: 60px;
-        padding: 0.5rem 0.5rem;
-        gap: 5px;
-    }
-
-    .tabbar {
-        height: 60px;
-        min-height: 60px;
-    }
-
-    .tab-style1 li.dock-divider {
-        height: 32px;
-        margin: 0 6px;
-    }
-
-    .tabbar ul > li:last-of-type::before {
-        bottom: -8px;
-    }
-
-    .submenu-card .card-content .icon {
-        width: 40px;
-        margin-right: 0.25rem;
-    }
-
-    .submenu-card .card-content .title {
-        font-size: 0.8rem;
-    }
-
-    .submenu-card .card-content .description {
-        font-size: 0.65rem;
-    }
-
-    .submenu-card .card-content .saiba-mais {
-        font-size: 0.7rem;
-        padding: 0.1rem 0.4rem;
-    }
-}
-
-.tabbar ul::after {
-    content: '';
-    position: absolute;
-    top: var(--slider-top, 10px);
-    left: var(--slider-left, 0px);
-    width: var(--slider-width, 60px);
-    height: var(--slider-height, 60px);
-    border-radius: 1.2rem;
-    background: rgb(225 175 241 / 30%);
-    z-index: 2;
-    backdrop-filter: blur(3px);
-    transition-property: left, width, height, top, transform;
-    transition-duration: var(--slider-duration, 0.4s);
-    transition-timing-function: var(--slider-ease, ease);
-    transform-origin: center;
-    box-shadow:
-        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
-        inset 2px 1px 0px -1px rgba(255, 255, 255, 0.8),
-        inset -1.5px -1px 0px -1px rgba(255, 255, 255, 0.7),
-        inset -2px -6px 1px -5px rgba(255, 255, 255, 0.5),
-        inset -1px 2px 3px -1px rgba(24, 1, 58, 0.2),
-        inset 0px -4px 1px -2px rgba(24, 1, 58, 0.1),
-        0px 3px 6px 0px rgba(24, 1, 58, 0.08);
-    z-index: -1;
-    will-change: left, width, height, top, transform;
-    transform: translateZ(0) scale(var(--slider-scale, 1));
-}
-
-.tabbar ul {
-    overflow: visible;
-}
-/* Custom dock backgrounds */
-@keyframes dockFloatFast {
-    0% { transform: translate3d(0,0,0); }
-    50% { transform: translate3d(0,-4px,0); }
-    100% { transform: translate3d(0,0,0); }
-}
-.submenu-card { 
-    backdrop-filter: blur(3px);
-}
-
-.submenu-card.submenu-card--particle-stars {
-    background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / 45%) 0%, rgb(212 100 228 / 56%) 45%, rgb(122 16 191 / 49%) 100%);
-}
-
-.submenu-card.submenu-card--purple {
-    background: linear-gradient(135deg, rgba(83, 37, 167, 0.78), rgb(126 77 237 / 52%), rgb(176 78 236 / 60%));
-}
-
-.submenu-card.submenu-card--pink {
-    background: linear-gradient(140deg, rgb(237 30 121 / 40%), rgba(255, 177, 213, 0.62), rgb(208 47 121 / 55%));
-}
-
-.submenu-card.submenu-card--comet {
-    background: var(--cc-gradient-comet);
-}
-.submenu-card.submenu-card--comet .glass-overlay {
-    background: radial-gradient(circle at 20% 20%, rgb(217 90 220 / 64%), rgb(64 9 116 / 65%), rgb(109 17 96 / 65%));
-}
-.submenu-card.submenu-card--comet .card-content .text-content {
-    color: #f6f6ff;
-}
-
-.submenu-card.submenu-card--sunset {
-    background: linear-gradient(155deg, rgb(255 168 66 / 56%), rgb(184 66 155 / 62%), rgb(94 25 180 / 58%));
-}
-
-.submenu-card.submenu-card--particle-comets {
-    background: linear-gradient(150deg, rgb(223 35 213 / 56%), rgb(132 78 211 / 54%), rgb(132 78 211 / 48%));
-}
-.submenu-card.submenu-card--particle-comets .card-content {
-    animation: dockFloatFast 7.5s ease-in-out infinite;
-}
+:root {
+    --accent-color: #1fa8f5;
+    --accent-color-fg: #fefefe;
+    --app-content-background-color: transparent;
+    --inset-shadow: rgba(7, 43, 74, 0.3);
+    --outset-shadow: rgba(223, 240, 255, 0.25);
+    --clay-box-shadow: rgba(7, 43, 74, 0.3);
+    --clay-background-color: #c0d8ec;
+    --clay-fg-color: #444;
+    --lg-bg-color: rgba(255, 255, 255, 0.25);
+    --lg-highlight: rgba(255, 255, 255, 0.75);
+    --lg-text: #18013a;
+    --lg-hover-glow: rgba(255, 255, 255, 0.4);
+    --lg-grey: #5b5b5b;
+    --card-spacing: 0.5rem;
+    --marketing-base: #ed1e79;
+    --desenvolvimento-base: #951ddb;
+    --blue-sky-light: #87ceeb;
+    --blue-sky-med: #00b7eb;
+    --blue-sky-dark: #006bb3;
+    --blue-pink-light: #ff69b4;
+    --blue-pink-med: #00b7eb;
+    --purple-orange-light: #ff4500;
+    --purple-orange-med: #951ddb;
+    --black-grey-light: #a9a9a9;
+    --black-grey-med: #2f2f2f;
+    --orange-base: #ffa500;
+    --yellow-base: #ffff00;
+    --pink-blue-light: #ff69b4;
+    --pink-blue-med: #00b7eb;
+    --yellow-purple-light: #ffff00;
+    --yellow-purple-med: #951ddb;
+    --blue-green-grey-light: #00b7eb;
+    --blue-green-grey-med: #228b22;
+    --blue-green-grey-dark: #696969;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.dock {
+    max-width: 100%;
+    width: 100%;
+    margin: 0 auto;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    max-width: 580px;
+    margin-bottom: 0.5rem;
+    border-radius: 2rem;
+    overflow: visible;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+    background: #fcfcfc87;
+}
+
+.dark .dock {
+    background: #00000087;
+}
+
+.marketing-style {
+    --app-content-background-color: #ed1e79;
+}
+.mn-desenvolvimento-style {
+    --app-content-background-color: #951ddb;
+}
+.mn-solucoes-style {
+    --app-content-background-color: #00b7eb;
+}
+.mn-cases-de-sucesso-style {
+    --app-content-background-color: #ff69b4;
+}
+.mn-sobre-nos-style {
+    --app-content-background-color: #ffff00;
+}
+.mn-contato-style {
+    --app-content-background-color: #228b22;
+}
+
+.tabbar {
+    position: relative;
+    background: transparent;
+    border-radius: 2rem;
+    height: 80px;
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: content-box;
+    overflow: visible;
+    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.is-active-menu.tabbar {
+    height: auto;
+    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.tabbar ul,
+.tabbar li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.tabbar ul {
+    position: relative;
+    width: 100%;
+    justify-content: center;
+    height: 80px;
+    z-index: 3;
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    overflow: visible;
+}
+
+.tabbar li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    width: 60px;
+    height: 60px;
+    position: relative;
+    color: var(--lg-text);
+    cursor: pointer;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.tabbar li:last-child {
+    margin-right: 0;
+}
+
+.tab-style1 li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
+    flex-direction: column;
+    border-radius: 1.2rem;
+    padding: 1px;
+    position: relative;
+}
+.tab-style1 li::after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid rgb(148 20 222 / 71%);
+    opacity: 0;
+    transition: opacity 0.4s;
+    z-index: 4;
+}
+.tab-style1 li.active::after {
+    opacity: 1;
+}
+
+.tab-style1 li:hover {
+    transform: scale(0.95);
+    box-shadow: 0 0 10px var(--lg-hover-glow);
+}
+
+.tab-style1 li.dock-divider:hover {
+    transform: none;
+    box-shadow: none;
+}
+
+.tab-style1 li.dock-divider::after {
+    content: none;
+}
+
+.tab-style1 li.dock-divider {
+    width: 1px;
+    min-width: 1px;
+    height: 44px;
+    padding: 0;
+    margin: 0 7px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(120, 120, 120, 0.2));
+    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.55), 0 0 2px rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    cursor: default;
+    align-self: center;
+}
+
+.tabbar ul > li:last-of-type::before {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: hsl(var(--cc-pink, 330 87% 52%));
+    box-shadow: 0 0 6px rgba(237, 30, 121, 0.45);
+}
+
+.tabbar li .bg-img-menu-fix-mob {
+    display: block;
+    height: 60px;
+    width: 60px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    padding: 1px;
+}
+
+.tabbar li .bg-img-menu-fix-mob.dock-fallback {
+    display: grid;
+    place-items: center;
+    border-radius: 1rem;
+    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2) 45%, rgba(149, 29, 219, 0.22) 75%);
+    color: var(--lg-text);
+    font-weight: 700;
+    font-size: 0.85rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 12px rgba(24, 1, 58, 0.18);
+}
+
+.tabbar li .bg-img-menu-fix-mob.dock-fallback .dock-fallback-icon {
+    line-height: 1;
+}
+
+.tabbar li.mn-sobre-nos .bg-img-menu-fix-mob {
+    padding: 5px;
+}
+
+.list-menu-mob-show {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    z-index: 5;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    pointer-events: none;
+}
+
+.list-menu-mob-show.show {
+    display: flex;
+    pointer-events: auto;
+}
+
+.list-menu-mob-show .mob-list-menu.hide {
+    display: none;
+}
+
+.list-menu-mob-show .mob-list-menu.show {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.submenu-stack {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 210px;
+    background: none;
+}
+
+.submenu-stack::after {
+    content: '';
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    border-top: 14px solid rgba(255, 255, 255, 0.6);
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.submenu-stack::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+    z-index: -1;
+}
+
+.submenu-stack.visible::before {
+    opacity: 1;
+    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.submenu-stack:not(.visible)::before {
+    transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.mob-list-menu.show .submenu-stack::after {
+    opacity: 1;
+}
+
+.submenu-stack.marketing::before {
+    background: linear-gradient(182deg, rgba(149, 29, 218, 0) 13.45%, rgba(184, 29, 218, 0.66) 18.07%, rgba(218, 10, 163, 0.77));
+}
+.submenu-stack.mn-desenvolvimento::before {
+    background: linear-gradient(187deg, rgba(237, 29, 120, 0) 12.18%, rgba(241, 12, 202, 0.68) 14.29%, rgba(83, 1, 190, 0.73));
+}
+.submenu-stack.mn-solucoes::before {
+    background: linear-gradient(182deg, rgba(255, 255, 0, 0) 12.18%, rgba(217, 0, 255, 0.62) 15.55%, rgba(239, 64, 176, 0.78));
+}
+.submenu-stack.mn-cases-de-sucesso::before {
+    background: linear-gradient(192deg, rgba(135, 206, 235, 0) 13.45%, rgba(21, 43, 228, 0.49) 16.39%, rgba(178, 0, 235, 0.6));
+}
+.submenu-stack.mn-sobre-nos::before {
+    background: linear-gradient(187deg, rgba(0, 182, 235, 0) 12.61%, rgba(73, 0, 235, 0.56) 15.97%, rgba(201, 209, 59, 0.62));
+}
+.submenu-stack.mn-contato::before {
+    background: linear-gradient(192deg, rgba(255, 105, 180, 0) 10.92%, rgba(11, 149, 61, 0.68) 15.13%, rgba(0, 183, 235, 0.8));
+}
+
+.marketing .submenu-stack::after { border-top-color: rgba(237, 30, 121, 0.8); }
+.mn-desenvolvimento .submenu-stack::after { border-top-color: rgba(149, 29, 218, 0.8); }
+.mn-solucoes .submenu-stack::after { border-top-color: rgba(0, 183, 235, 0.8); }
+.mn-cases-de-sucesso .submenu-stack::after { border-top-color: rgba(255, 105, 180, 0.8); }
+.mn-sobre-nos .submenu-stack::after { border-top-color: rgba(255, 255, 0, 0.8); }
+.mn-contato .submenu-stack::after { border-top-color: rgba(34, 139, 34, 0.8); }
+
+.submenu-card {
+    width: 280px;
+    height: 90px;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    clip-path: polygon(0 0, 95% 5%, 100% 100%, 5% 95%);
+    border-radius: 10px 61px 20px 0;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+    will-change: transform, opacity;
+    isolation: isolate;
+    transform-origin: center bottom;
+    transform: translateY(100%);
+    opacity: 0;
+}
+
+.submenu-card.animate-in {
+    transform: translateY(0);
+    opacity: 1;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.submenu-card:not(.animate-in) {
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.submenu-card:hover.animate-in {
+    transform: scale(1.02) translateY(-2px) !important;
+}
+
+.submenu-card:hover:not(.animate-in) {
+    transform: scale(1.02) translateY(-2px);
+}
+
+.marketing {
+    --c1: rgb(252 210 228 / 77%);
+    --c2: rgb(215 45 146 / 50%);
+    --c3: rgba(238, 135, 214, 0.35);
+    --base-angle: 119deg;
+    --p1: 0%;
+    --p2: 50.84%;
+    --p3: 100%;
+}
+
+.mn-desenvolvimento {
+    --c1: rgba(204, 127, 247, 0.6);
+    --c2: rgba(181, 160, 245, 0.55);
+    --c3: rgba(203, 132, 226, 0.69);
+    --base-angle: 150deg;
+    --p1: 21.01%;
+    --p2: 73.95%;
+    --p3: 100%;
+}
+
+.mn-cases-de-sucesso {
+    --c1: rgba(240, 173, 206, 0.69);
+    --c2: rgba(206, 82, 217, 0.62);
+    --c3: rgba(201, 243, 255, 0.5);
+    --base-angle: 45deg;
+    --p1: 0%;
+    --p2: 44.12%;
+    --p3: 100%;
+}
+
+.mn-sobre-nos {
+    --c1: rgba(230, 145, 218, 0.6);
+    --c2: rgba(198, 128, 238, 0.52);
+    --c3: rgba(241, 241, 212, 0.51);
+    --base-angle: 135deg;
+    --p1: 0%;
+    --p2: 50%;
+    --p3: 100%;
+}
+
+.mn-contato {
+    --c1: rgba(171, 217, 230, 0.65);
+    --c2: rgba(213, 240, 213, 0.63);
+    --c3: rgba(175, 214, 154, 0.61);
+    --base-angle: 135deg;
+    --p1: 0%;
+    --p2: 55.88%;
+    --p3: 100%;
+}
+
+:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card {
+    --a: var(--base-angle, 135deg);
+    --o1: var(--c1);
+    --o2: var(--c2);
+    --o3: var(--c3);
+    background: linear-gradient(var(--a), var(--o1) var(--p1, 0%), var(--o2) var(--p2, 50%), var(--o3) var(--p3, 100%));
+}
+:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:first-child {
+    --a: calc(var(--base-angle, 135deg) + 14deg);
+    --o1: var(--c3);
+    --o2: var(--c1);
+    --o3: var(--c2);
+}
+:is(.marketing, .mn-desenvolvimento, .mn-sobre-nos, .mn-contato) .submenu-card:last-child {
+    --a: calc(var(--base-angle, 135deg) + 180deg);
+    --o1: var(--c2);
+    --o2: var(--c3);
+    --o3: var(--c1);
+}
+:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:not(:first-child):not(:last-child):nth-child(odd) {
+    --a: calc(var(--base-angle, 135deg) + 31deg);
+    --o1: var(--c1);
+    --o2: var(--c3);
+    --o3: var(--c2);
+}
+:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:not(:first-child):not(:last-child):nth-child(even) {
+    --a: calc(var(--base-angle, 135deg) - 16deg);
+    --o1: var(--c2);
+    --o2: var(--c1);
+    --o3: var(--c3);
+}
+:is(.marketing, .mn-desenvolvimento, .mn-cases-de-sucesso, .mn-sobre-nos, .mn-contato) .submenu-card:only-child {
+    --a: var(--base-angle, 135deg);
+    --o1: var(--c1);
+    --o2: var(--c2);
+    --o3: var(--c3);
+}
+:is(.mn-cases-de-sucesso) .submenu-card:last-child {
+    --a: calc(var(--base-angle, 45deg) + 180deg);
+    background: linear-gradient(
+        var(--a),
+        rgba(155, 26, 196, 0.68) 0%,
+        rgba(185, 82, 225, 0.71) 40%,
+        rgb(198 110 235 / 90%) 50%,
+        rgba(185, 82, 225, 0.71) 60%,
+        rgb(170 39 177 / 58%) 100%
+    );
+    background-size: 300% 100%;
+    animation: visibleFlare 7.5s ease-in-out infinite;
+    position: relative;
+    z-index: 1;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+    will-change: background-position;
+}
+
+@keyframes visibleFlare {
+    0% {
+        background-position: 0% 0%;
+    }
+    25% {
+        background-position: 100% 100%;
+    }
+    50% {
+        background-position: 0% 100%;
+    }
+    75% {
+        background-position: 100% 0%;
+    }
+    100% {
+        background-position: 0% 0%;
+    }
+}
+
+.mn-solucoes .submenu-card:nth-child(1) {
+    background: linear-gradient(to bottom right, rgba(39, 109, 177, 0.68), rgba(156, 212, 255, 0.71) 49.16%, rgba(252, 195, 212, 0.58));
+}
+.mn-solucoes .submenu-card:nth-child(2) {
+    background: linear-gradient(to bottom right, rgba(255, 105, 180, 0.55), rgba(0, 183, 235, 0.66));
+}
+.mn-solucoes .submenu-card:nth-child(3) {
+    background: linear-gradient(to bottom right, rgba(149, 29, 218, 0.68) 46.22%, rgba(255, 171, 0, 0.7));
+}
+.mn-solucoes .submenu-card:nth-child(4) {
+    background: linear-gradient(to bottom right, rgba(132, 132, 132, 0.49), rgba(0, 0, 0, 0.59) 66.81%);
+}
+.mn-solucoes .submenu-card:nth-child(4) .card-content .text-content {
+    color: #fff;
+}
+.mn-solucoes .submenu-card:nth-child(5) {
+    background: linear-gradient(166deg, rgba(255, 128, 0, 0.64) 54.62%, color(display-p3 0.06 0.036 0.441 / 0.56) 92.86%);
+}
+.mn-solucoes .submenu-card:nth-child(6) {
+    background: linear-gradient(to bottom right, rgba(255, 255, 0, 0.63), rgba(254, 123, 3, 0.64));
+}
+
+.submenu-card .fold {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 20px;
+    background: inherit;
+    transform: skewX(10deg);
+    transform-origin: right;
+    z-index: 1;
+}
+
+.submenu-card .glass-filter {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    filter: url(#lg-dist);
+    isolation: isolate;
+    backdrop-filter: blur(3px);
+}
+
+@supports (-webkit-backdrop-filter: blur(3px)) {
+    .submenu-card .glass-filter,
+    .tabbar .glass-filter {
+        filter: url(#lg-dist);
+    }
+}
+@supports not (-webkit-backdrop-filter: blur(3px)) {
+    .submenu-card .glass-filter,
+    .tabbar .glass-filter {
+        backdrop-filter: blur(3px);
+    }
+}
+
+.submenu-card .glass-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: rgb(0 0 0 / 25%);
+}
+
+.submenu-card .glass-specular {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    overflow: hidden;
+    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset -1px -1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
+}
+
+.dark .tabbar .glass-specular {
+    box-shadow: inset 1px 1px 0 rgb(44 44 44 / 75%), inset -1px -1px 0 rgb(29 29 29 / 75%), inset 0 0 5px rgb(189 189 189 / 75%);
+}
+
+.submenu-card .card-content {
+    position: relative;
+    z-index: 3;
+    display: flex;
+    align-items: start;
+    justify-content: flex-start;
+    padding: 1rem 1rem 0 1rem;
+    height: 100%;
+    color: var(--lg-text);
+    width: 100%;
+}
+
+.submenu-card .card-content .icon {
+    width: 50px;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+}
+
+.submenu-card .card-content .text-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.submenu-card .card-content .title {
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.submenu-card .card-content .description {
+    font-size: 0.65rem;
+    opacity: 0.9;
+    line-height: 1.2;
+}
+
+.submenu-card .card-content .saiba-mais {
+    background: rgba(22, 185, 4, 0.69);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0.5rem;
+    padding: 0.1rem 0.6rem;
+    color: #013a05;
+    text-decoration: none;
+    font-size: 0.75rem;
+    position: absolute;
+    bottom: -2px;
+    right: 0;
+    transition: background 0.3s;
+    white-space: nowrap;
+}
+.saiba-mais-1 {
+    background: rgba(22, 185, 4, 0.69);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0.5rem;
+    padding: 0.1rem 0.6rem;
+    color: #013a05;
+    text-decoration: none;
+    font-size: 0.75rem;
+    position: absolute;
+    bottom: -2px;
+    right: 120px;
+    transition: background 0.3s;
+    white-space: nowrap;
+}
+
+.submenu-card .card-content .saiba-mais:hover, .saiba-mais-1:hover {
+    background: rgb(1 60 12 / 66%);
+    color: #fff;
+}
+
+.tabbar .glass-filter {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    filter: url(#lg-dist);
+    isolation: isolate;
+    backdrop-filter: blur(3px);
+    border-radius: 40px;
+}
+
+.tabbar .glass-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 35px;
+}
+
+.tabbar .glass-specular {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    border-radius: inherit;
+    overflow: hidden;
+    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset -1px -1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
+}
+
+.dark .tabbar .glass-specular {
+    box-shadow: inset 1px 1px 0 rgb(44 44 44 / 75%), inset -1px -1px 0 rgb(29 29 29 / 75%), inset 0 0 5px rgb(189 189 189 / 75%);
+}
+.dark .tabbar .glass-overlay {
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.tab-style1 li img {
+    max-width: 40px;
+    max-height: 40px;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.tab-style1 li:hover img {
+    transform: scale(0.95);
+}
+
+.tabbar li.mn-homepage {
+    position: relative;
+}
+
+a.link-absolute-menu {
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    inset: 0;
+}
+
+.tabbar li.mn-homepage .bg-img-menu-fix-mob {
+    height: 60px;
+    width: 60px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    padding: 1px;
+}
+
+.tooltip {
+    z-index: 10000 !important;
+    filter: none !important;
+}
+
+.tooltip-inner {
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    color: #fff !important;
+    font-weight: 600;
+}
+
+.tooltip .arrow::before {
+    border-top-color: rgba(0, 0, 0, 0.8) !important;
+}
+
+@media (max-width: 600px) {
+    .dock {
+        max-width: 90%;
+        min-width: 370px;
+    }
+    .submenu-card {
+        height: 90px;
+        width: 270px;
+    }
+
+    .submenu-stack {
+        max-width: 240px;
+    }
+
+    .tabbar li .bg-img-menu-fix-mob {
+        height: 40px;
+        width: 40px;
+    }
+
+    .tabbar li.mn-sobre-nos .bg-img-menu-fix-mob {
+        padding: 4px;
+    }
+
+    .tab-style1 li {
+        width: 40px;
+        height: 40px;
+    }
+
+    .tabbar ul {
+        height: 60px;
+        padding: 0.5rem 0.5rem;
+        gap: 5px;
+    }
+
+    .tabbar {
+        height: 60px;
+        min-height: 60px;
+    }
+
+    .tab-style1 li.dock-divider {
+        height: 32px;
+        margin: 0 6px;
+    }
+
+    .tabbar ul > li:last-of-type::before {
+        bottom: -8px;
+    }
+
+    .submenu-card .card-content .icon {
+        width: 40px;
+        margin-right: 0.25rem;
+    }
+
+    .submenu-card .card-content .title {
+        font-size: 0.8rem;
+    }
+
+    .submenu-card .card-content .description {
+        font-size: 0.65rem;
+    }
+
+    .submenu-card .card-content .saiba-mais {
+        font-size: 0.7rem;
+        padding: 0.1rem 0.4rem;
+    }
+}
+
+.tabbar ul::after {
+    content: '';
+    position: absolute;
+    top: var(--slider-top, 10px);
+    left: var(--slider-left, 0px);
+    width: var(--slider-width, 60px);
+    height: var(--slider-height, 60px);
+    border-radius: 1.2rem;
+    background: rgb(225 175 241 / 30%);
+    z-index: 2;
+    backdrop-filter: blur(3px);
+    transition-property: left, width, height, top, transform;
+    transition-duration: var(--slider-duration, 0.4s);
+    transition-timing-function: var(--slider-ease, ease);
+    transform-origin: center;
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
+        inset 2px 1px 0px -1px rgba(255, 255, 255, 0.8),
+        inset -1.5px -1px 0px -1px rgba(255, 255, 255, 0.7),
+        inset -2px -6px 1px -5px rgba(255, 255, 255, 0.5),
+        inset -1px 2px 3px -1px rgba(24, 1, 58, 0.2),
+        inset 0px -4px 1px -2px rgba(24, 1, 58, 0.1),
+        0px 3px 6px 0px rgba(24, 1, 58, 0.08);
+    z-index: -1;
+    will-change: left, width, height, top, transform;
+    transform: translateZ(0) scale(var(--slider-scale, 1));
+}
+
+.tabbar ul {
+    overflow: visible;
+}
+/* Custom dock backgrounds */
+@keyframes dockFloatFast {
+    0% { transform: translate3d(0,0,0); }
+    50% { transform: translate3d(0,-4px,0); }
+    100% { transform: translate3d(0,0,0); }
+}
+.submenu-card { 
+    backdrop-filter: blur(3px);
+}
+
+.submenu-card.submenu-card--particle-stars {
+    background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / 45%) 0%, rgb(212 100 228 / 56%) 45%, rgb(122 16 191 / 49%) 100%);
+}
+
+.submenu-card.submenu-card--purple {
+    background: linear-gradient(135deg, rgba(83, 37, 167, 0.78), rgb(126 77 237 / 52%), rgb(176 78 236 / 60%));
+}
+
+.submenu-card.submenu-card--pink {
+    background: linear-gradient(140deg, rgb(237 30 121 / 40%), rgba(255, 177, 213, 0.62), rgb(208 47 121 / 55%));
+}
+
+.submenu-card.submenu-card--comet {
+    background: var(--cc-gradient-comet);
+}
+.submenu-card.submenu-card--comet .glass-overlay {
+    background: radial-gradient(circle at 20% 20%, rgb(217 90 220 / 64%), rgb(64 9 116 / 65%), rgb(109 17 96 / 65%));
+}
+.submenu-card.submenu-card--comet .card-content .text-content {
+    color: #f6f6ff;
+}
+
+.submenu-card.submenu-card--sunset {
+    background: linear-gradient(155deg, rgb(255 168 66 / 56%), rgb(184 66 155 / 62%), rgb(94 25 180 / 58%));
+}
+
+.submenu-card.submenu-card--particle-comets {
+    background: linear-gradient(150deg, rgb(223 35 213 / 56%), rgb(132 78 211 / 54%), rgb(132 78 211 / 48%));
+}
+.submenu-card.submenu-card--particle-comets .card-content {
+    animation: dockFloatFast 7.5s ease-in-out infinite;
+}