.solution-detail-page {
    background: #f6fbff;
}

.solution-detail {
    width: 100%;
    padding-top: 118px;
}

.solution-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
    align-items: center;
    gap: 70px;
    width: min(1180px, calc(100% - 64px));
    min-height: 650px;
    padding: 48px 0 72px;
    margin: 0 auto;
}

.solution-back {
    display: inline-flex;
    margin-bottom: 48px;
    color: #54718b;
    font-size: 12px;
    font-weight: 750;
}

.solution-back:hover,
.solution-back:focus-visible {
    color: var(--home-blue);
}

.solution-hero h1 {
    max-width: 650px;
    margin-bottom: 24px;
    font-size: 50px;
}

.solution-hero-copy > p:not(.kicker) {
    max-width: 620px;
    margin-bottom: 25px;
    color: var(--home-muted);
    font-size: 18px;
    line-height: 1.7;
}

.solution-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
}

.solution-tags span {
    padding: 8px 11px;
    color: #245a8c;
    border: 1px solid #b7d5ed;
    border-radius: 5px;
    background: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 750;
}

.solution-visual {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    border: 1px solid rgba(99, 158, 207, .55);
    border-radius: 8px;
    background: linear-gradient(145deg, #1d6dde, #68c6ee);
    box-shadow: 0 24px 60px rgba(31, 82, 126, .16);
}

.solution-visual::before {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -110px;
    width: 330px;
    height: 330px;
    border: 65px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.solution-visual.cover-landpage {
    background:
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.3), transparent 22%),
        linear-gradient(145deg, #2b8cf0, #72d0ff 58%, #f7fbff);
}

.solution-visual.cover-landpage .solution-window {
    background:
        linear-gradient(90deg, rgba(255,255,255,.9) 0 37%, transparent 37%),
        rgba(255,255,255,.22);
}

.solution-visual.cover-landpage .solution-window b {
    width: 116px;
    height: 144px;
    border-radius: 54% 54% 8px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.22));
}

.solution-visual.cover-system {
    background:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 25%),
        linear-gradient(145deg, #17427a, #22a8c8 60%, #8ee0e9);
}

.solution-visual.cover-system .solution-window {
    background:
        linear-gradient(90deg, rgba(8,43,78,.22) 0 23%, transparent 23%),
        rgba(255,255,255,.16);
}

.solution-visual.cover-system .solution-window b {
    width: 142px;
    height: 82px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.8) 0 48%, transparent 48%),
        rgba(255,255,255,.2);
}

.solution-visual.cover-panel {
    background:
        linear-gradient(145deg, #f1f7ff 0 24%, #4c89e8 24% 46%, #7b86e6);
}

.solution-visual.cover-panel .solution-window {
    background:
        linear-gradient(90deg, rgba(17,53,91,.26) 0 27%, transparent 27%),
        rgba(255,255,255,.18);
}

.solution-visual.cover-panel .solution-window b {
    width: 150px;
    height: 60px;
    border-radius: 999px;
}

.solution-visual.cover-online {
    background:
        radial-gradient(circle at 72% 18%, rgba(255,255,255,.28), transparent 24%),
        linear-gradient(145deg, #0d5d94, #2aa6c8 62%, #c9f1fb);
}

.solution-visual.cover-online .solution-window {
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}

.solution-visual.cover-online .solution-window b {
    right: 50%;
    width: 126px;
    height: 76px;
    transform: translateX(50%);
}

.solution-visual > span {
    position: absolute;
    top: 34px;
    left: 36px;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.solution-window {
    position: absolute;
    top: 82px;
    right: 42px;
    left: 42px;
    height: 310px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 7px;
    background: rgba(255, 255, 255, .14);
    box-shadow: 18px 18px 0 rgba(8, 43, 78, .12);
}

.solution-window::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .24);
    background: rgba(8, 43, 78, .14);
}

.solution-window i {
    position: absolute;
    left: 36px;
    height: 11px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .76);
}

.solution-window i:nth-child(1) { top: 86px; width: 54%; }
.solution-window i:nth-child(2) { top: 116px; width: 68%; opacity: .76; }
.solution-window i:nth-child(3) { top: 146px; width: 40%; opacity: .6; }

.solution-window b {
    position: absolute;
    right: 34px;
    bottom: 35px;
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 7px;
    background: rgba(255, 255, 255, .2);
}

.solution-visual > strong {
    position: absolute;
    bottom: 48px;
    z-index: 2;
    padding: 8px 11px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 5px;
    background: rgba(7, 39, 72, .2);
    font-size: 11px;
}

.solution-visual > strong:nth-of-type(1) { left: 42px; }
.solution-visual > strong:nth-of-type(2) { left: 132px; }
.solution-visual > strong:nth-of-type(3) { left: 245px; }

.solution-definition {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(450px, 1.18fr);
    gap: 90px;
    align-items: center;
    width: 100%;
    padding: 80px max(32px, calc((100vw - 1180px) / 2));
    border-top: 1px solid var(--home-line);
    border-bottom: 1px solid var(--home-line);
    background: #fff;
}

/* Vídeo do produto (vertical, em moldura de celular) */
.solution-video { border-top: 0; }
.solution-video > div > p:not(.kicker) {
    margin: 18px 0 26px;
    color: var(--home-muted);
    font-size: 17px;
    line-height: 1.8;
}
.solution-video video {
    justify-self: center;
    width: min(340px, 100%);
    height: auto;
    aspect-ratio: 9 / 16;
    border: 8px solid var(--home-deep);
    border-radius: 34px;
    background: var(--home-deep);
    box-shadow: var(--home-shadow);
}

.solution-definition h2 {
    max-width: 520px;
    margin-bottom: 0;
    font-size: 36px;
}

.solution-definition > p {
    margin: 0;
    color: var(--home-muted);
    font-size: 17px;
    line-height: 1.8;
}

.solution-examples {
    width: min(1180px, calc(100% - 64px));
    padding: 92px 0 40px;
    margin: 0 auto;
}

.solution-examples-heading {
    align-items: end;
}

.solution-examples-heading > div:first-child {
    max-width: 720px;
}

.examples-carousel {
    display: grid;
    grid-auto-columns: minmax(360px, 48%);
    grid-auto-flow: column;
    gap: 18px;
    overflow-x: auto;
    padding: 10px 0 22px;
    scroll-snap-type: x mandatory;
    scrollbar-color: #2f83ef #d8ecfb;
}

.examples-carousel::-webkit-scrollbar {
    height: 10px;
}

.examples-carousel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #2f83ef;
}

.example-card {
    display: grid;
    grid-template-rows: 220px 1fr;
    min-height: 470px;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 44px rgba(37, 80, 119, .1);
}

.example-cover {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.3), transparent 24%),
        linear-gradient(135deg, #2b8cf0, #78d4ff);
}

.example-system .example-cover {
    background:
        radial-gradient(circle at 78% 20%, rgba(255,255,255,.22), transparent 24%),
        linear-gradient(135deg, #17427a, #25aac9 62%, #96e5ed);
}

.example-panel .example-cover {
    background:
        linear-gradient(145deg, #eef6ff 0 24%, #4e8be8 24% 48%, #7b86e6);
}

.example-online .example-cover {
    background:
        radial-gradient(circle at 72% 18%, rgba(255,255,255,.28), transparent 24%),
        linear-gradient(135deg, #0d5d94, #2aa6c8 62%, #c9f1fb);
}

.example-cover::before {
    content: "";
    position: absolute;
    inset: 34px 34px 30px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.9) 0 36%, transparent 36%),
        rgba(255,255,255,.17);
    box-shadow: 14px 14px 0 rgba(9,42,83,.11);
}

.example-system .example-cover::before {
    background:
        linear-gradient(90deg, rgba(9,42,83,.22) 0 24%, transparent 24%),
        rgba(255,255,255,.16);
}

.example-panel .example-cover::before {
    background:
        linear-gradient(90deg, rgba(17,53,91,.25) 0 26%, transparent 26%),
        rgba(255,255,255,.18);
}

.example-cover span,
.example-cover i,
.example-cover b {
    position: absolute;
    z-index: 2;
}

.example-cover span {
    top: 54px;
    left: 56px;
    padding: 5px 8px;
    color: #fff;
    border-radius: 4px;
    background: rgba(9,42,83,.25);
    font-size: 10px;
    font-weight: 850;
}

.example-cover i {
    left: 56px;
    width: 48%;
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
}

.example-cover i:nth-of-type(1) { top: 104px; }
.example-cover i:nth-of-type(2) { top: 130px; width: 62%; opacity: .76; }
.example-cover i:nth-of-type(3) { top: 156px; width: 36%; opacity: .58; }

.example-cover b {
    right: 52px;
    bottom: 40px;
    width: 86px;
    height: 86px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 7px;
    background: rgba(255,255,255,.24);
}

.example-landpage .example-cover b {
    width: 82px;
    height: 112px;
    border-radius: 48% 48% 7px 7px;
}

.example-system .example-cover b {
    width: 122px;
    height: 72px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.8) 0 48%, transparent 48%),
        rgba(255,255,255,.22);
}

.example-panel .example-cover b {
    width: 112px;
    height: 50px;
    border-radius: 999px;
}

.example-card > div:last-child {
    padding: 30px;
}

.example-card h3 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.18;
}

.example-card p:last-child {
    margin: 0;
    color: var(--home-muted);
    font-size: 14px;
    line-height: 1.7;
}

.solution-possibilities {
    width: min(1180px, calc(100% - 64px));
    padding: 100px 0;
    margin: 0 auto;
}

.possibility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.possibility-grid article {
    position: relative;
    min-height: 240px;
    padding: 30px;
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
}

.possibility-grid article::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--home-blue);
}

.possibility-grid article > span {
    display: block;
    margin-bottom: 32px;
    color: var(--home-blue);
    font-size: 12px;
    font-weight: 850;
}

.possibility-grid h3 {
    margin-bottom: 12px;
    font-size: 22px;
}

.possibility-grid p {
    margin: 0;
    color: var(--home-muted);
    font-size: 14px;
    line-height: 1.7;
}

.solution-includes {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(440px, 1.18fr);
    gap: 90px;
    width: 100%;
    padding: 88px max(32px, calc((100vw - 1180px) / 2));
    background: #e9f5ff;
}

.solution-includes > div > p:not(.kicker) {
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.7;
}

.solution-includes ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    padding: 0;
    margin: 0;
    border-top: 1px solid #b6d3e9;
    list-style: none;
}

.solution-includes li {
    position: relative;
    padding: 17px 8px 17px 28px;
    color: #244b6e;
    border-bottom: 1px solid #b6d3e9;
    font-size: 13px;
    font-weight: 700;
}

.solution-includes li::before {
    content: "✓";
    position: absolute;
    top: 16px;
    left: 3px;
    color: var(--home-blue);
    font-weight: 900;
}

.solution-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 70px;
    width: 100%;
    padding: 82px max(32px, calc((100vw - 1180px) / 2));
    color: #fff;
    background: var(--home-deep);
}

.solution-cta .kicker {
    color: #75c9ff;
}

.solution-cta h2 {
    max-width: 780px;
    margin: 0;
    color: #fff;
}

.solution-cta .button.primary {
    color: var(--home-blue-dark);
    background: #fff;
}

.solution-footer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: min(1180px, calc(100% - 64px));
    padding: 24px 0 36px;
    margin: 0 auto;
    color: #6d8296;
    font-size: 12px;
}

.solution-footer a {
    color: var(--home-blue-dark);
    font-weight: 750;
}

@media (max-width: 900px) {
    .solution-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 30px;
    }

    .solution-hero-copy {
        max-width: 720px;
    }

    .solution-visual {
        min-height: 480px;
    }

    .solution-definition,
    .solution-includes,
    .solution-cta {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .examples-carousel {
        grid-auto-columns: minmax(320px, 72%);
    }

    .solution-cta {
        justify-items: start;
    }
}

@media (max-width: 620px) {
    .solution-detail {
        padding-top: 82px;
    }

    .solution-hero,
    .solution-possibilities,
    .solution-examples {
        width: calc(100% - 36px);
    }

    .solution-hero {
        min-height: 0;
        padding: 34px 0 60px;
    }

    .solution-back {
        margin-bottom: 34px;
    }

    .solution-hero h1 {
        font-size: 39px;
    }

    .solution-hero-copy > p:not(.kicker) {
        font-size: 16px;
    }

    .solution-hero .button {
        width: 100%;
    }

    .solution-visual {
        min-height: 370px;
    }

    .solution-window {
        top: 70px;
        right: 20px;
        left: 20px;
        height: 220px;
    }

    .solution-window i:nth-child(1) { top: 72px; }
    .solution-window i:nth-child(2) { top: 100px; }
    .solution-window i:nth-child(3) { top: 128px; }

    .solution-window b {
        width: 72px;
        height: 72px;
    }

    .solution-visual > strong {
        bottom: 28px;
        font-size: 9px;
    }

    .solution-visual > strong:nth-of-type(1) { left: 20px; }
    .solution-visual > strong:nth-of-type(2) { left: 92px; }
    .solution-visual > strong:nth-of-type(3) { left: 182px; }

    .solution-definition,
    .solution-includes,
    .solution-cta {
        padding: 64px 18px;
    }

    .solution-definition h2 {
        font-size: 31px;
    }

    .solution-possibilities {
        padding: 72px 0;
    }

    .solution-examples {
        padding: 70px 0 26px;
    }

    .examples-carousel {
        grid-auto-columns: minmax(286px, 88%);
    }

    .example-card {
        min-height: 450px;
    }

    .possibility-grid {
        grid-template-columns: 1fr;
    }

    .possibility-grid article {
        min-height: 215px;
        padding: 25px;
    }

    .solution-includes ul {
        grid-template-columns: 1fr;
    }

    .solution-cta .button {
        width: 100%;
    }

    .solution-footer {
        align-items: flex-start;
        flex-direction: column;
        width: calc(100% - 36px);
    }
}

/* Landpage: o print do site real leva para ele, com a legenda logo abaixo */
.solution-case { display: grid; gap: 12px; min-width: 0; }
.solution-shot-legenda { margin: 0; color: var(--home-muted); font-size: 14px; line-height: 1.6; }
.solution-shot-legenda a { color: var(--home-blue-dark); font-weight: 750; }

/* Planos com preço (páginas do VitrineZap e do Cardápio) */
.solution-plans { width: 100%; padding: 88px max(32px, calc((100vw - 1180px) / 2)); }
.plans-grid { display: grid; gap: 22px; margin-top: 34px; }
.plans-grid.plans-1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.plans-grid.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-left: auto; margin-right: auto; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--home-line); border-radius: 22px; background: #fff; box-shadow: var(--home-shadow); }
.plan-card.is-featured { border: 2px solid var(--home-blue); }
.plan-badge { position: absolute; top: -14px; left: 30px; padding: 6px 14px; border-radius: 99px; background: var(--home-blue); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.plan-card h3 { margin: 0 0 10px; font-size: 22px; }
.plan-price { margin: 0; font-size: 54px; font-weight: 900; letter-spacing: -.03em; color: var(--home-ink); line-height: 1; }
.plan-price small { font-size: 20px; font-weight: 800; margin-right: 4px; vertical-align: 22px; }
.plan-price span { font-size: 16px; font-weight: 700; color: var(--home-muted); margin-left: 4px; }
.plan-setup { margin: 10px 0 18px; color: var(--home-muted); font-size: 14px; font-weight: 600; }
.plan-card ul { flex: 1; margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--home-line); }
.plan-card li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--home-line); font-size: 14px; font-weight: 600; color: #244b6e; }
.plan-card li::before { content: "✓"; position: absolute; left: 2px; top: 10px; color: var(--home-blue); font-weight: 900; }
.plan-card .button { justify-content: center; text-align: center; }
.plans-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 30px 0 0; padding: 0; list-style: none; color: #244b6e; font-size: 14px; font-weight: 700; }
.plans-perks li::before { content: "✓ "; color: var(--home-blue); font-weight: 900; }
@media (max-width: 760px) {
    .solution-plans { padding: 64px 16px; }
    .plans-grid.plans-2 { grid-template-columns: 1fr; }
    .plan-price { font-size: 46px; }
}
.plan-zap { display: block; margin-top: 10px; text-align: center; color: var(--home-muted); font-size: 13px; font-weight: 700; text-decoration: underline; }