:root {
    --c-primary: #6f74f7;
    --c-primary-dark: #575ddd;
    --c-ink: #29292f;
    --c-muted: #686870;
    --c-border: #e6e6e4;
    --c-soft: #f7f7f6;
    --c-violet: #f0f1ff
}

.bp-commercial {
    margin: 0;
    background: #fff;
    color: var(--c-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
}

.bp-commercial * {
    box-sizing: border-box
}

.commercial-container {
    width: min(calc(100% - 40px), 1180px);
    margin-inline: auto
}

.bp-commercial a {
    color: inherit
}

.bp-commercial a:focus-visible {
    outline: 3px solid #aeb1ff;
    outline-offset: 3px
}

.commercial-skip {
    position: fixed;
    z-index: 100;
    top: -70px;
    left: 16px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px
}

.commercial-skip:focus {
    top: 10px
}

.commercial-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid rgba(230, 230, 228, .9);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px)
}

.commercial-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    gap: 24px
}

.commercial-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #303037;
    font-size: .98rem;
    font-weight: 740;
    text-decoration: none;
    letter-spacing: -.02em
}

.commercial-brand strong {
    color: #6267df;
    font: inherit
}

.commercial-brand img {
    border-radius: 10px;
    box-shadow: 0 4px 13px rgba(91, 96, 230, .18)
}

.commercial-header nav {
    display: flex;
    align-items: center;
    gap: 26px
}

.commercial-header nav>a:not(.commercial-button) {
    color: #55555d;
    font-size: .76rem;
    font-weight: 620;
    text-decoration: none
}

.commercial-header nav>a:hover {
    color: var(--c-primary-dark)
}

.commercial-login {
    padding-left: 20px;
    border-left: 1px solid var(--c-border)
}

.commercial-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 760;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease
}

.commercial-button:after {
    position: absolute;
    content: "";
    inset: -40% auto -40% -55%;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    transition: left .48s ease;
    pointer-events: none
}

.commercial-button:hover:after {
    left: 125%
}

.commercial-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(45, 46, 70, .12)
}

.commercial-button.primary {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: #fff;
    box-shadow: 0 8px 22px rgba(111, 116, 247, .2)
}

.commercial-button.primary:hover {
    border-color: var(--c-primary-dark);
    background: var(--c-primary-dark);
    box-shadow: 0 12px 28px rgba(87, 93, 221, .28)
}

.commercial-button.secondary {
    background: #fff
}

.commercial-button.secondary:hover {
    border-color: #cfd0ff;
    background: #f8f8ff;
    color: var(--c-primary-dark)
}

.commercial-button.light {
    border-color: #fff;
    background: #fff;
    color: #4e53c8
}

.header-cta {
    min-height: 40px;
    padding-inline: 16px
}

.commercial-hero {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr);
    align-items: center;
    gap: clamp(44px, 6vw, 90px);
    min-height: 660px;
    padding-block: 76px
}

.commercial-pill,
.commercial-eyebrow {
    display: inline-flex;
    color: #575cd7;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase
}

.commercial-pill {
    padding: 8px 12px;
    border: 1px solid #dfe0ff;
    border-radius: 999px;
    background: #f7f7ff
}

.commercial-hero h1 {
    max-width: 650px;
    margin: 20px 0 18px;
    color: #25252a;
    font-size: clamp(2.2rem, 4.15vw, 3.65rem);
    font-weight: 780;
    letter-spacing: -.05em;
    line-height: 1.06
}

.commercial-hero-copy>p {
    max-width: 590px;
    margin: 0;
    color: var(--c-muted);
    font-size: clamp(.92rem, 1.25vw, 1.08rem);
    line-height: 1.7
}

.commercial-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 18px
}

.commercial-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #5f5f65;
    font-size: .67rem
}

.commercial-checks li:before {
    content: "✓";
    margin-right: 6px;
    color: #1b9a71;
    font-weight: 900
}

.commercial-employee-link {
    display: block;
    margin-top: 20px;
    color: #838388;
    font-size: .67rem
}

.commercial-employee-link a {
    color: #555bd5;
    font-weight: 750
}

.commercial-product {
    position: relative
}

.product-window {
    overflow: hidden;
    border: 1px solid #dedee9;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(28, 28, 45, .16);
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg)
}

.product-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #ececef;
    background: #fafafa
}

.product-bar>span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d7d7dc
}

.product-bar strong {
    margin-left: 8px;
    color: #77777e;
    font-size: .6rem
}

.product-layout {
    display: grid;
    grid-template-columns: 55px 1fr;
    min-height: 390px
}

.product-layout>aside {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 22px;
    padding: 18px 10px;
    background: #242534
}

.product-layout>aside img {
    border-radius: 8px
}

.product-layout>aside i {
    display: block;
    width: 20px;
    height: 5px;
    border-radius: 8px;
    background: #555666
}

.product-content {
    padding: 30px
}

.product-content>small {
    color: #94949b;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .1em
}

.product-content>h2 {
    margin: 6px 0 24px;
    font-size: 1.35rem;
    letter-spacing: -.04em
}

.product-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.product-kpis>div {
    padding: 14px;
    border-radius: 12px;
    background: #f7f7f7
}

.product-kpis span,
.product-kpis strong {
    display: block
}

.product-kpis span {
    color: #828289;
    font-size: .56rem
}

.product-kpis strong {
    margin-top: 5px;
    font-size: 1.25rem
}

.product-kpis .attention {
    background: #fff7e9
}

.product-kpis .attention strong {
    color: #b87317
}

.product-panel {
    margin-top: 16px;
    border: 1px solid #e7e7e8;
    border-radius: 14px
}

.product-panel header,
.product-panel p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px
}

.product-panel header {
    justify-content: space-between;
    border-bottom: 1px solid #ededee;
    font-size: .65rem
}

.product-panel header span {
    color: #6267df
}

.product-panel p+p {
    border-top: 1px solid #ededee
}

.product-panel p>span {
    display: grid;
    flex: 1
}

.product-panel p strong {
    font-size: .62rem
}

.product-panel p small {
    margin-top: 2px;
    color: #8a8a91;
    font-size: .53rem
}

.product-panel em {
    padding: 5px 7px;
    border-radius: 99px;
    background: #fff2d9;
    color: #916018;
    font-size: .5rem;
    font-style: normal;
    font-weight: 700
}

.product-panel em.done {
    background: #e9f8f2;
    color: #197658
}

.avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #e9eaff;
    color: #6267e6;
    font-size: .52rem
}

.avatar.alt {
    background: #e9f8f2;
    color: #238064
}

.product-floating {
    position: absolute;
    right: -18px;
    bottom: -20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid #dfe1ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(28, 28, 45, .16)
}

.product-floating>span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #e8f8f1;
    color: #16805e;
    font-weight: 900
}

.product-floating div {
    display: grid
}

.product-floating strong {
    font-size: .62rem
}

.product-floating small {
    margin-top: 2px;
    color: #85858c;
    font-size: .53rem
}

.commercial-proof {
    border-block: 1px solid var(--c-border);
    background: var(--c-soft)
}

.commercial-proof>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
    color: #74747a;
    font-size: .67rem
}

.commercial-proof strong {
    color: #343438
}

.commercial-section {
    padding-block: 88px
}

.commercial-section-head {
    max-width: 720px;
    margin-bottom: 36px
}

.commercial-section-head.centered {
    margin-inline: auto;
    text-align: center
}

.commercial-section-head h2,
.commercial-security h2,
.commercial-cta h2 {
    margin: 10px 0 12px;
    font-size: clamp(1.65rem, 2.7vw, 2.3rem);
    font-weight: 740;
    letter-spacing: -.04em;
    line-height: 1.12
}

.commercial-section-head p,
.commercial-security p,
.commercial-cta p {
    margin: 0;
    color: var(--c-muted);
    font-size: .85rem;
    line-height: 1.7
}

.commercial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.commercial-feature {
    padding: 26px;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: #fff;
    transition: .2s ease
}

.commercial-feature:hover {
    border-color: #d2d4ff;
    box-shadow: 0 14px 34px rgba(42, 42, 65, .07);
    transform: translateY(-2px)
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--c-violet);
    color: #6065e0;
    font-size: 1rem;
    font-weight: 800
}

.commercial-feature h3,
.commercial-steps h3,
.commercial-plan h3 {
    margin: 0 0 8px;
    color: #303037;
    font-size: .9rem;
    font-weight: 700
}

.commercial-feature p,
.commercial-steps p,
.commercial-plan>p:not(.commercial-price) {
    margin: 0;
    color: var(--c-muted);
    font-size: .72rem;
    line-height: 1.6
}

.commercial-flow {
    padding-block: 92px;
    background: #191a25;
    color: #fff
}

.commercial-flow .commercial-eyebrow {
    color: #aeb1ff
}

.commercial-flow .commercial-section-head h2,
.commercial-flow .commercial-steps h3 {
    color: #fff
}

.commercial-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none
}

.commercial-steps li {
    padding: 24px;
    border: 1px solid #343545;
    border-radius: 16px;
    background: #22232f
}

.commercial-steps li>span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 28px;
    border-radius: 10px;
    background: #7479f7;
    color: #fff;
    font-size: .75rem;
    font-weight: 800
}

.commercial-steps p {
    color: #aaaab3
}

.commercial-security {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 80px;
    margin-block: 90px;
    padding: 56px;
    border-radius: 24px;
    background: #f1f2ff
}

.commercial-security ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

.commercial-security li {
    padding: 14px;
    border: 1px solid #dfe0fb;
    border-radius: 12px;
    background: #fff;
    color: #515159;
    font-size: .68rem;
    font-weight: 700
}

.commercial-security li:before {
    content: "✓";
    margin-right: 8px;
    color: #5d63df
}

.commercial-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px
}

.commercial-plan {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid #e1e1e9;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(46, 48, 90, .06)
}

.commercial-plan.featured {
    position: relative;
    border-color: #bfc2ff;
    box-shadow: 0 18px 42px rgba(75, 79, 170, .12)
}

.commercial-plan.featured:before {
    position: absolute;
    content: "Melhor forma de começar";
    top: -13px;
    right: 20px;
    padding: 6px 10px;
    border-radius: 99px;
    background: #676cf2;
    color: #fff;
    font-size: .57rem;
    font-weight: 750
}

.plan-label {
    color: #6267df;
    font-size: .6rem;
    font-weight: 760;
    text-transform: uppercase
}

.commercial-plan h3 {
    margin-top: 8px;
    font-size: 1.12rem
}

.commercial-price {
    margin: 18px 0 8px;
    color: #303037;
    font-size: 1.8rem;
    font-weight: 740;
    letter-spacing: -.04em
}

.commercial-price.commercial-price-text {
    font-size: 1.35rem;
    letter-spacing: -.025em
}

.commercial-price small {
    margin-left: 7px;
    color: #777;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: 0
}

.commercial-plan ul {
    display: grid;
    gap: 10px;
    margin: 22px 0;
    padding: 18px 0;
    border-block: 1px solid #ededed;
    list-style: none;
    color: #626269;
    font-size: .7rem
}

.commercial-plan li:before {
    content: "✓";
    margin-right: 8px;
    color: #1b9a71
}

.commercial-plan .commercial-button {
    width: 100%;
    margin-top: auto
}

.plan-main-action {
    gap: 12px
}

.plan-main-action span {
    font-size: 1rem;
    transition: transform .2s ease
}

.plan-main-action:hover span {
    transform: translateX(4px)
}

.plan-reassurance {
    margin-top: 10px;
    color: #85858c;
    font-size: .6rem;
    text-align: center
}

.whatsapp-action {
    gap: 8px;
    border-color: #bfe7d4;
    background: #f2fbf7;
    color: #147955
}

.whatsapp-action:hover {
    border-color: #79cca4;
    background: #e8f8f0;
    box-shadow: 0 10px 22px rgba(31, 157, 104, .15)
}

.whatsapp-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease
}

.whatsapp-action:hover svg {
    transform: rotate(-6deg) scale(1.1)
}

.commercial-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-block: 40px 90px;
    padding: 48px;
    border-radius: 24px;
    background: linear-gradient(135deg, #666cf0, #8589ff);
    color: #fff
}

.commercial-cta h2 {
    color: #fff
}

.commercial-cta .commercial-eyebrow,
.commercial-cta p {
    color: #f0f0ff
}

.commercial-cta-actions {
    display: flex;
    align-items: stretch;
    gap: 10px
}

.whatsapp-light {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .1);
    color: #fff
}

.whatsapp-light:hover {
    background: rgba(255, 255, 255, .2)
}

.commercial-footer {
    padding-block: 46px;
    border-top: 1px solid var(--c-border);
    background: #fafafa
}

.commercial-footer>div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px
}

.commercial-footer p,
.commercial-footer small {
    color: #818188;
    font-size: .65rem
}

.commercial-footer nav {
    display: flex;
    gap: 18px
}

.commercial-footer nav a {
    color: #626269;
    font-size: .67rem;
    text-decoration: none
}

.commercial-footer small {
    grid-column: 1/-1;
    padding-top: 22px;
    border-top: 1px solid #e7e7e7
}

.commercial-whatsapp {
    position: fixed;
    z-index: 40;
    right: 22px;
    bottom: 22px
}

.whatsapp-launcher {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 18px 8px 10px;
    border: 0;
    border-radius: 999px;
    background: #1f9d68;
    color: #fff;
    box-shadow: 0 14px 36px rgba(19, 112, 72, .28);
    cursor: pointer;
    font: inherit;
    font-size: .72rem;
    font-weight: 720;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease
}

.whatsapp-launcher:hover {
    background: #178a5a;
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(19, 112, 72, .36)
}

.whatsapp-launcher svg {
    width: 36px;
    height: 36px;
    padding: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease
}

.whatsapp-launcher:hover svg {
    transform: rotate(-7deg) scale(1.06)
}

.whatsapp-panel {
    position: absolute;
    right: 0;
    bottom: 66px;
    width: min(350px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid #dde4e0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(24, 37, 31, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.98);
    transform-origin: bottom right;
    transition: .2s ease
}

.commercial-whatsapp:hover .whatsapp-panel,
.commercial-whatsapp:focus-within .whatsapp-panel,
.commercial-whatsapp.is-open .whatsapp-panel {
    opacity: 1;
    visibility: visible;
    transform: none
}

.whatsapp-panel header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 17px 18px;
    background: #176b4d;
    color: #fff
}

.whatsapp-panel header>span:last-child {
    display: grid;
    gap: 3px
}

.whatsapp-panel header strong {
    font-size: .78rem
}

.whatsapp-panel header small {
    color: #d7f1e5;
    font-size: .6rem
}

.whatsapp-panel header i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #55df9d
}

.whatsapp-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 3px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .14)
}

.whatsapp-avatar img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 9px
}

.whatsapp-content {
    padding: 18px
}

.whatsapp-content>p {
    display: grid;
    gap: 5px;
    margin: 0 0 14px;
    color: #34343a;
    font-size: .78rem
}

.whatsapp-content>p span {
    color: #77777f;
    font-size: .66rem;
    font-weight: 400
}

.whatsapp-questions {
    display: grid;
    gap: 7px
}

.whatsapp-questions button {
    padding: 11px 12px;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #fafafa;
    color: #4d4d54;
    cursor: pointer;
    font: inherit;
    font-size: .67rem;
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease
}

.whatsapp-questions button:hover,
.whatsapp-questions button.is-selected {
    border-color: #9fd8bc;
    background: #effaf5;
    color: #126d4c;
    transform: translateX(3px);
    box-shadow: 0 5px 14px rgba(31, 157, 104, .09)
}

.whatsapp-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #1f9d68;
    color: #fff !important;
    font-size: .7rem;
    font-weight: 740;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease
}

.whatsapp-open:hover {
    background: #178a5a;
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(31, 157, 104, .22)
}

.whatsapp-open span {
    transition: transform .18s ease
}

.whatsapp-open:hover span {
    transform: translateX(4px)
}

.whatsapp-content>small {
    display: block;
    margin-top: 8px;
    color: #94949a;
    font-size: .56rem;
    text-align: center
}

.bp-commercial:not(.commercial-motion-ready) [data-aos] {
    opacity: 1 !important;
    transform: none !important
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important
    }

    .commercial-feature,
    .commercial-button,
    .whatsapp-launcher,
    .whatsapp-launcher svg,
    .whatsapp-questions button,
    .whatsapp-open,
    .whatsapp-open span,
    .whatsapp-action svg {
        transition: none !important
    }

    .commercial-button:hover,
    .whatsapp-launcher:hover,
    .whatsapp-questions button:hover,
    .whatsapp-open:hover {
        transform: none !important
    }
}

@media(max-width:900px) {
    .commercial-header nav>a:not(.commercial-button):not(.commercial-login) {
        display: none
    }

    .commercial-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-block: 58px
    }

    .commercial-product {
        max-width: 650px
    }

    .commercial-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .commercial-steps {
        grid-template-columns: repeat(2, 1fr)
    }

    .commercial-security {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .commercial-plans {
        grid-template-columns: 1fr
    }

    .commercial-plan {
        max-width: 560px;
        width: 100%;
        margin-inline: auto
    }

    .commercial-proof>div {
        flex-wrap: wrap;
        padding-block: 22px
    }

    .commercial-proof strong {
        width: 100%
    }
}

@media(max-width:600px) {
    .commercial-container {
        width: calc(100% - 28px)
    }

    .commercial-header-inner {
        min-height: 64px
    }

    .commercial-brand img {
        width: 34px;
        height: 34px
    }

    .commercial-header nav {
        gap: 8px
    }

    .commercial-login {
        padding: 0;
        border: 0
    }

    .header-cta {
        display: none
    }

    .commercial-hero h1 {
        font-size: 2.05rem;
        letter-spacing: -.04em;
        line-height: 1.08
    }

    .commercial-actions {
        flex-direction: column
    }

    .commercial-actions .commercial-button {
        width: 100%
    }

    .commercial-checks {
        display: grid;
        gap: 8px
    }

    .product-window {
        transform: none
    }

    .product-layout {
        grid-template-columns: 42px 1fr;
        min-height: 340px
    }

    .product-content {
        padding: 20px 14px
    }

    .product-content>h2 {
        font-size: 1.05rem
    }

    .product-kpis>div {
        padding: 10px
    }

    .product-panel p {
        padding: 10px
    }

    .product-floating {
        right: 8px
    }

    .commercial-grid,
    .commercial-steps {
        grid-template-columns: 1fr
    }

    .commercial-section {
        padding-block: 68px
    }

    .commercial-security {
        margin-block: 58px;
        padding: 30px 22px
    }

    .commercial-security ul {
        grid-template-columns: 1fr
    }

    .commercial-cta {
        align-items: stretch;
        flex-direction: column;
        margin-bottom: 58px;
        padding: 32px 24px
    }

    .commercial-cta-actions {
        flex-direction: column
    }

    .commercial-whatsapp {
        right: 14px;
        bottom: 14px
    }

    .whatsapp-launcher {
        width: 54px;
        padding: 9px
    }

    .whatsapp-launcher>span {
        display: none
    }

    .whatsapp-launcher svg {
        width: 36px;
        height: 36px
    }

    .commercial-footer>div {
        grid-template-columns: 1fr
    }

    .commercial-footer nav {
        flex-wrap: wrap
    }

    .commercial-footer small {
        grid-column: auto
    }
}

/* Ajustes finais de contraste da ação principal e do logotipo no atendimento. */
.commercial-button.primary:hover,
.commercial-button.primary:focus-visible {
    color: #fff !important
}

.whatsapp-avatar {
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    background: transparent;
    box-shadow: none
}

.whatsapp-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 10px
}

/* Fluxo diário entre o registro e o histórico. */
.commercial-proof {
    padding-block: 46px;
    background: linear-gradient(180deg, #fafaff, #f6f7ff)
}

.commercial-proof>.commercial-container {
    display: grid;
    justify-content: stretch;
    gap: 28px;
    min-height: 0
}

.commercial-proof header {
    text-align: center
}

.commercial-proof header h2 {
    max-width: 620px;
    margin: 8px auto 0;
    color: #303037;
    font-size: clamp(1.35rem, 2.3vw, 1.9rem);
    font-weight: 720;
    letter-spacing: -.035em;
    line-height: 1.15
}

.commercial-daily-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: center;
    gap: 14px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    list-style: none
}

.commercial-daily-flow li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e1e2f1;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 7px 20px rgba(58, 61, 110, .045)
}

.commercial-daily-flow li:not(:last-child):after {
    position: absolute;
    z-index: 2;
    content: "→";
    top: 50%;
    right: -19px;
    width: 24px;
    color: #777cf0;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    transform: translateY(-50%)
}

.daily-step {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #ececff;
    color: #6267df;
    font-size: .72rem;
    font-weight: 800
}

.commercial-daily-flow div {
    display: grid;
    gap: 4px;
    min-width: 0
}

.commercial-daily-flow strong {
    color: #393940;
    font-size: .72rem;
    font-weight: 720
}

.commercial-daily-flow small {
    color: #777780;
    font-size: .62rem;
    line-height: 1.45
}

@media(max-width:700px) {
    .commercial-proof {
        padding-block: 38px
    }

    .commercial-proof>.commercial-container {
        gap: 22px
    }

    .commercial-proof header {
        text-align: left
    }

    .commercial-daily-flow {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .commercial-daily-flow li {
        padding: 14px
    }

    .commercial-daily-flow li:not(:last-child):after {
        content: "↓";
        top: auto;
        right: auto;
        bottom: -17px;
        left: 23px;
        width: 18px;
        transform: none
    }

    .daily-step {
        flex-basis: 36px;
        width: 36px;
        height: 36px
    }
}

/* Ação final: uma decisão principal e atendimento como apoio. */
.commercial-cta-actions {
    display: grid;
    flex: 0 0 250px;
    gap: 14px;
    width: 250px
}

.commercial-cta-primary {
    width: 100%;
    min-height: 52px;
    gap: 12px;
    white-space: nowrap
}

.commercial-cta-primary span {
    font-size: 1rem;
    transition: transform .2s ease
}

.commercial-cta-primary:hover span {
    transform: translateX(4px)
}

.commercial-cta-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff !important;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease
}

.commercial-cta-whatsapp:hover {
    opacity: .88;
    transform: translateY(-1px)
}

.commercial-cta-whatsapp svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.commercial-cta-whatsapp>span {
    display: grid;
    gap: 2px;
    color: #ededff;
    font-size: .58rem
}

.commercial-cta-whatsapp strong {
    color: #fff;
    font-size: .67rem;
    font-weight: 720
}

@media(max-width:600px) {
    .commercial-cta-actions {
        width: 100%;
        flex-basis: auto
    }

    .commercial-cta-primary {
        white-space: normal
    }

    .commercial-cta-whatsapp {
        justify-content: flex-start;
        padding-inline: 6px
    }
}

/* Composição central da chamada final. */
.commercial-cta {
    display: grid;
    justify-items: center;
    gap: 26px;
    padding: 52px 32px;
    text-align: center
}

.commercial-cta>div:first-child {
    display: grid;
    justify-items: center
}

.commercial-cta h2 {
    max-width: 760px
}

.commercial-cta-actions {
    display: flex;
    flex: initial;
    justify-content: center;
    gap: 10px;
    width: auto
}

.commercial-cta-primary,
.commercial-cta-whatsapp {
    width: 190px;
    min-height: 50px;
    white-space: nowrap
}

.commercial-cta-whatsapp {
    justify-content: center;
    padding: 0 18px;
    border-color: rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .1);
    color: #fff !important
}

.commercial-cta-whatsapp:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .2);
    opacity: 1;
    transform: translateY(-2px)
}

.commercial-cta-whatsapp svg {
    width: 19px;
    height: 19px
}

@media(max-width:600px) {
    .commercial-cta {
        padding: 36px 22px
    }

    .commercial-cta-actions {
        display: grid;
        width: 100%
    }

    .commercial-cta-primary,
    .commercial-cta-whatsapp {
        width: 100%;
        white-space: normal
    }
}

/* Conversão final em dois níveis: benefício e ação. */
.commercial-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    justify-items: stretch;
    align-items: center;
    gap: clamp(38px, 7vw, 90px);
    overflow: hidden;
    padding: 54px 58px;
    background: radial-gradient(circle at 12% 10%, rgba(111, 116, 247, .28), transparent 34%), linear-gradient(135deg, #1e1f2c, #292b42);
    text-align: left
}

.commercial-cta:before {
    position: absolute;
    content: "";
    right: -90px;
    bottom: -130px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(139, 143, 255, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(139, 143, 255, .045), 0 0 0 96px rgba(139, 143, 255, .025);
    pointer-events: none
}

.commercial-cta>div:first-child {
    display: block;
    justify-items: initial
}

.commercial-cta-copy {
    position: relative;
    z-index: 1
}

.commercial-cta-copy .commercial-eyebrow {
    color: #afb2ff
}

.commercial-cta-copy h2 {
    max-width: 680px;
    margin-block: 12px 14px;
    color: #fff;
    font-size: clamp(1.8rem, 3.2vw, 2.65rem);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1.08
}

.commercial-cta-copy>p {
    max-width: 600px;
    color: #c6c7d2;
    font-size: .82rem
}

.commercial-cta-copy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none
}

.commercial-cta-copy li {
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #ececf2;
    font-size: .63rem
}

.commercial-cta-copy li:before {
    content: "✓";
    margin-right: 6px;
    color: #7de0b1;
    font-weight: 800
}

.commercial-cta-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 55px rgba(8, 9, 18, .28)
}

.commercial-cta-brand {
    display: flex;
    align-items: center;
    gap: 11px
}

.commercial-cta-brand img {
    border-radius: 11px;
    box-shadow: 0 6px 16px rgba(91, 96, 230, .2)
}

.commercial-cta-brand span {
    display: grid;
    gap: 2px
}

.commercial-cta-brand small {
    color: #696970;
    font-size: .58rem
}

.commercial-cta-brand strong {
    color: #303037;
    font-size: .86rem
}

.commercial-cta-card>p {
    margin: 0;
    color: #696970;
    font-size: .68rem;
    line-height: 1.55
}

.commercial-cta-card .commercial-cta-primary {
    width: 100%;
    min-height: 48px;
    color: #fff;
    white-space: nowrap
}

.commercial-cta-card .commercial-cta-whatsapp {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: auto;
    padding: 2px;
    color: #27775b !important;
    font-size: .65rem;
    white-space: normal
}

.commercial-cta-card .commercial-cta-whatsapp:hover {
    background: transparent;
    box-shadow: none;
    color: #175f47 !important;
    transform: none
}

.commercial-cta-card .commercial-cta-whatsapp svg {
    width: 18px;
    height: 18px
}

.commercial-cta-card .commercial-cta-whatsapp strong {
    color: #176b4d;
    font-weight: 760
}

@media(max-width:800px) {
    .commercial-cta {
        grid-template-columns: 1fr;
        padding: 40px 28px
    }

    .commercial-cta-card {
        width: 100%;
        max-width: 460px
    }
}

@media(max-width:600px) {
    .commercial-cta {
        padding: 34px 22px
    }

    .commercial-cta-copy h2 {
        font-size: 1.75rem
    }

    .commercial-cta-copy ul {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .commercial-cta-card {
        padding: 20px
    }

    .commercial-cta-card .commercial-cta-primary {
        white-space: normal
    }
}

/* Identidade BatePonto: menos ornamentos e mais produto. */
:root {
    --c-primary: #6267e8;
    --c-primary-dark: #4f54c9;
    --c-ink: #27282d;
    --c-muted: #686970;
    --c-border: #dedfe3;
    --c-soft: #f6f6f7;
    --c-violet: #f1f1fb
}

.commercial-header {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px)
}

.commercial-brand img {
    box-shadow: none
}

.commercial-button {
    border-radius: 9px;
    box-shadow: none !important
}

.commercial-button:after {
    display: none
}

.commercial-button:hover {
    transform: translateY(-1px)
}

.commercial-button.primary {
    box-shadow: none
}

.commercial-hero {
    gap: 64px;
    min-height: 610px;
    padding-block: 64px
}

.commercial-pill {
    padding: 0;
    border: 0;
    background: transparent
}

.commercial-hero h1 {
    max-width: 610px;
    font-size: clamp(2.15rem, 4vw, 3.45rem);
    font-weight: 730;
    letter-spacing: -.045em
}

.commercial-product .product-window {
    border-color: #d8d9df;
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(29, 30, 39, .12);
    transform: none
}

.product-kpis>div,
.product-panel,
.product-floating {
    border-radius: 8px
}

.product-floating {
    right: -10px;
    bottom: -14px;
    box-shadow: 0 10px 25px rgba(28, 28, 45, .12)
}

.commercial-proof {
    padding-block: 42px;
    border-block: 1px solid var(--c-border);
    background: #fff
}

.commercial-daily-flow li {
    padding: 12px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none
}

.daily-step {
    border: 1px solid #d9daf5;
    border-radius: 50%;
    background: #fff
}

.commercial-section {
    padding-block: 82px
}

.commercial-section-head {
    margin-bottom: 32px
}

.commercial-grid {
    gap: 0;
    border-top: 1px solid var(--c-border)
}

.commercial-feature {
    padding: 26px 24px;
    border: 0;
    border-bottom: 1px solid var(--c-border);
    border-radius: 0;
    box-shadow: none
}

.commercial-feature:nth-child(3n+2),
.commercial-feature:nth-child(3n+3) {
    border-left: 1px solid var(--c-border)
}

.commercial-feature:hover {
    border-color: var(--c-border);
    background: #fafafa;
    box-shadow: none;
    transform: none
}

.feature-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
    border-radius: 8px
}

.commercial-flow {
    padding-block: 78px;
    background: #23242b
}

.commercial-steps {
    gap: 0
}

.commercial-steps li {
    padding: 20px 24px;
    border: 0;
    border-left: 1px solid #3d3f49;
    border-radius: 0;
    background: transparent
}

.commercial-steps li:first-child {
    border-left: 0
}

.commercial-steps li>span {
    width: 30px;
    height: 30px;
    margin-bottom: 22px;
    border-radius: 7px;
    background: #696ee8
}

.commercial-security {
    margin-block: 76px;
    padding: 44px 0;
    border-block: 1px solid var(--c-border);
    border-radius: 0;
    background: #fff
}

.commercial-security li {
    border: 0;
    border-left: 2px solid #d9daf8;
    border-radius: 0;
    background: transparent
}

.commercial-plan {
    padding: 26px;
    border-color: #dedfe4;
    border-radius: 12px;
    box-shadow: none
}

.commercial-plan.featured {
    border: 2px solid #bfc1f7;
    box-shadow: none
}

.commercial-plan.featured:before {
    top: -12px;
    border-radius: 5px;
    background: #6267e8
}

.commercial-cta {
    border-radius: 12px;
    background: #242631
}

.commercial-cta:before {
    display: none
}

.commercial-cta-card {
    border: 1px solid #e0e1e5;
    border-radius: 10px;
    box-shadow: none
}

.commercial-cta-copy li {
    border-radius: 5px
}

.whatsapp-panel {
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(24, 37, 31, .16)
}

.whatsapp-panel header {
    background: #176b4d
}

.whatsapp-launcher {
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(19, 112, 72, .22)
}

.whatsapp-launcher svg {
    border-radius: 7px
}

.commercial-footer {
    background: #fff
}

@media(max-width:900px) {

    .commercial-feature:nth-child(3n+2),
    .commercial-feature:nth-child(3n+3) {
        border-left: 0
    }

    .commercial-feature:nth-child(even) {
        border-left: 1px solid var(--c-border)
    }

    .commercial-steps li:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #3d3f49
    }

    .commercial-steps li:nth-child(4) {
        border-top: 1px solid #3d3f49
    }
}

@media(max-width:600px) {
    .commercial-hero {
        padding-block: 46px
    }

    .commercial-grid {
        border: 0
    }

    .commercial-feature,
    .commercial-feature:nth-child(even) {
        padding-inline: 0;
        border-left: 0
    }

    .commercial-steps li,
    .commercial-steps li:nth-child(3),
    .commercial-steps li:nth-child(4) {
        padding-inline: 12px;
        border-top: 1px solid #3d3f49;
        border-left: 0
    }

    .commercial-steps li:first-child {
        border-top: 0
    }

    .commercial-security {
        padding: 34px 0
    }

    .commercial-cta {
        border-radius: 10px
    }

    .whatsapp-launcher {
        border-radius: 50%
    }
}

/* Movimento discreto e contínuo em toda a página comercial. */
.commercial-button,
.commercial-feature,
.commercial-plan,
.whatsapp-launcher,
.whatsapp-launcher svg,
.whatsapp-panel,
.whatsapp-questions button,
.whatsapp-open,
.whatsapp-open span,
.whatsapp-action svg,
.commercial-cta-whatsapp,
.commercial-cta-primary span {
    transition-duration: .32s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1)
}

.commercial-button:hover,
.whatsapp-launcher:hover,
.commercial-cta-whatsapp:hover {
    transform: translateY(-1px)
}

.commercial-button.primary:hover {
    box-shadow: 0 8px 20px rgba(79, 84, 201, .16) !important
}

.commercial-motion-ready [data-aos=fade-up] {
    transform: translate3d(0, 28px, 0)
}

.commercial-motion-ready [data-aos=fade-up].aos-animate {
    transform: translate3d(0, 0, 0)
}

@keyframes commercial-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes commercial-fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.commercial-hero-copy {
    animation: commercial-rise .85s cubic-bezier(.22, 1, .36, 1) both
}

.commercial-product {
    animation: commercial-rise .95s .14s cubic-bezier(.22, 1, .36, 1) both
}

.commercial-header {
    animation: commercial-fade .55s ease-out both
}

@media(prefers-reduced-motion:reduce) {

    .commercial-hero-copy,
    .commercial-product,
    .commercial-header {
        animation: none !important
    }
}

/* Monitores grandes: aproveita a largura sem esticar demais a leitura. */
@media(min-width:1440px) {
    .commercial-container {
        width: min(calc(100% - 96px), 1440px)
    }

    .commercial-header-inner {
        min-height: 76px
    }

    .commercial-header nav {
        gap: 32px
    }

    .commercial-header nav>a:not(.commercial-button) {
        font-size: .84rem
    }

    .commercial-hero {
        grid-template-columns: minmax(0, .9fr) minmax(600px, 1.1fr);
        gap: clamp(72px, 7vw, 120px);
        min-height: 700px;
        padding-block: 76px
    }

    .commercial-hero h1 {
        max-width: 720px;
        font-size: clamp(3.45rem, 3.7vw, 4.25rem)
    }

    .commercial-hero-copy>p {
        max-width: 680px;
        font-size: 1.08rem
    }

    .commercial-pill,
    .commercial-eyebrow {
        font-size: .76rem
    }

    .commercial-button {
        min-height: 50px;
        padding-inline: 24px;
        font-size: .84rem
    }

    .commercial-checks {
        gap: 22px;
        font-size: .73rem
    }

    .commercial-employee-link {
        font-size: .72rem
    }

    .product-layout {
        grid-template-columns: 64px 1fr;
        min-height: 455px
    }

    .product-content {
        padding: 38px
    }

    .product-content>h2 {
        font-size: 1.65rem
    }

    .product-kpis span {
        font-size: .64rem
    }

    .product-kpis strong {
        font-size: 1.45rem
    }

    .product-panel header {
        font-size: .72rem
    }

    .product-panel p strong {
        font-size: .7rem
    }

    .product-panel p small {
        font-size: .6rem
    }

    .commercial-proof {
        padding-block: 52px
    }

    .commercial-proof header h2 {
        font-size: 2.05rem
    }

    .commercial-daily-flow {
        max-width: 1320px;
        gap: 20px
    }

    .commercial-daily-flow li {
        padding: 16px 12px
    }

    .commercial-daily-flow strong {
        font-size: .8rem
    }

    .commercial-daily-flow small {
        font-size: .68rem
    }

    .commercial-section {
        padding-block: 104px
    }

    .commercial-section-head {
        max-width: 820px;
        margin-bottom: 42px
    }

    .commercial-section-head h2,
    .commercial-security h2 {
        font-size: 2.65rem
    }

    .commercial-section-head p,
    .commercial-security p {
        font-size: .94rem
    }

    .commercial-feature {
        padding: 32px 30px
    }

    .commercial-feature h3,
    .commercial-steps h3,
    .commercial-plan h3 {
        font-size: 1rem
    }

    .commercial-feature p,
    .commercial-steps p,
    .commercial-plan>p:not(.commercial-price) {
        font-size: .8rem
    }

    .commercial-flow {
        padding-block: 96px
    }

    .commercial-steps li {
        padding: 26px 30px
    }

    .commercial-security {
        margin-block: 96px;
        padding-block: 56px
    }

    .commercial-security li {
        padding: 17px;
        font-size: .75rem
    }

    .commercial-plans {
        gap: 22px
    }

    .commercial-plan {
        padding: 34px
    }

    .commercial-price {
        font-size: 2.05rem
    }

    .commercial-cta {
        padding: 64px 72px
    }

    .commercial-cta-copy h2 {
        font-size: 3rem
    }

    .commercial-cta-card {
        padding: 30px
    }
}

@media(min-width:1920px) {
    .commercial-container {
        width: min(calc(100% - 140px), 1640px)
    }

    .commercial-hero {
        grid-template-columns: minmax(0, .92fr) minmax(700px, 1.08fr);
        min-height: 760px
    }

    .commercial-hero h1 {
        font-size: 4.5rem
    }

    .commercial-product {
        max-width: 780px;
        width: 100%;
        justify-self: end
    }

    .commercial-daily-flow {
        max-width: 1500px
    }
}