/* =========================================================
   JUXTA - PÁGINAS DE SOLUÇÕES
   Base compartilhada para JuxtaPOS, JuxtaPOS V3, Mono etc.
   ========================================================= */

.jx-solution {
    --jx-sol-bg: #090d16;
    --jx-sol-bg-2: #0f1522;
    --jx-sol-surface: #ffffff;
    --jx-sol-soft: #f6f7fb;
    --jx-sol-text: #111827;
    --jx-sol-muted: #667085;
    --jx-sol-border: #e7e9ef;
    --jx-sol-primary: #7c5cfc;
    --jx-sol-primary-2: #4c8dff;
    --jx-sol-radius: 22px;
    color: var(--jx-sol-text);
}

.jx-solution *,
.jx-solution *::before,
.jx-solution *::after { box-sizing: border-box; }

.jx-sol-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 82px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(124,92,252,.24), transparent 32%),
        radial-gradient(circle at 88% 30%, rgba(76,141,255,.20), transparent 30%),
        #090d16;
}

.jx-sol-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: rgba(255,255,255,.08);
}

.jx-sol-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
    gap: 64px;
    align-items: center;
}

.jx-sol-eyebrow,
.jx-sol-section__eyebrow,
.jx-sol-final__eyebrow {
    color: #8b6cff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.jx-sol-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: rgba(255,255,255,.76);
}

.jx-sol-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 0 5px rgba(139,92,246,.13);
}

.jx-sol-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #fff !important;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.01;
    letter-spacing: -.045em;
    font-weight: 850;
}

.jx-sol-hero h1 span {
    background: linear-gradient(90deg, #c084fc, #818cf8 52%, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jx-sol-hero__lead {
    max-width: 680px;
    margin: 22px 0 0;
    color: rgba(255,255,255,.70) !important;
    font-size: 17px;
    line-height: 1.72;
}

.jx-sol-tags,
.jx-sol-choice__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.jx-sol-tags { margin-top: 25px; }

.jx-sol-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.045);
    font-size: 10px;
    font-weight: 750;
}

.jx-sol-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 29px;
}

.jx-sol-btn {
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.jx-sol-btn:hover { transform: translateY(-2px); }

.jx-sol-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    box-shadow: 0 15px 38px rgba(99,102,241,.28);
}

.jx-sol-btn--ghost {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}

.jx-sol-btn--ghost-light {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}

.jx-sol-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 22px;
    margin-top: 27px;
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 650;
}

.jx-sol-hero__trust i {
    margin-right: 5px;
    color: #a78bfa;
}

.jx-sol-hero__visual { position: relative; }

.jx-sol-window {
    overflow: hidden;
    border: 1px solid #dfe3eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(16,24,40,.16);
}

.jx-sol-window--hero {
    transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
    transform-origin: center;
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 35px 90px rgba(0,0,0,.32);
}

.jx-sol-window__bar {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-bottom: 1px solid #eaecf0;
    background: #f8f9fb;
}

.jx-sol-window__bar > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d0d5dd;
}

.jx-sol-window__bar small {
    margin-left: 5px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 700;
}

.jx-sol-window img {
    display: block;
    width: 100%;
    height: auto;
}

.jx-sol-floating-card {
    position: absolute;
    right: -18px;
    bottom: -28px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 270px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: rgba(12,17,29,.93);
    box-shadow: 0 22px 55px rgba(0,0,0,.30);
    backdrop-filter: blur(12px);
}

.jx-sol-floating-card__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #c4b5fd;
    background: rgba(124,92,252,.14);
}

.jx-sol-floating-card strong,
.jx-sol-floating-card small { display: block; }

.jx-sol-floating-card strong { color: #fff; font-size: 12px; }
.jx-sol-floating-card small { margin-top: 3px; color: rgba(255,255,255,.52); font-size: 9px; }

.jx-sol-section { padding: 88px 0; }
.jx-sol-section--light { background: #fff; }
.jx-sol-section--soft { background: var(--jx-sol-soft); }
.jx-sol-section--dark {
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, rgba(76,141,255,.17), transparent 30%),
        #090d16;
    color: #fff;
}

.jx-sol-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 60px;
    align-items: end;
    margin-bottom: 40px;
}

.jx-sol-heading h2,
.jx-sol-section__header h2,
.jx-sol-split h2,
.jx-sol-dark-grid h2,
.jx-sol-chooser h2 {
    margin: 7px 0 0;
    color: var(--jx-sol-text) !important;
    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 850;
}

.jx-sol-heading > p,
.jx-sol-section__header > p,
.jx-sol-split__copy > p,
.jx-sol-chooser__intro > p {
    color: var(--jx-sol-muted) !important;
    font-size: 15px;
    line-height: 1.72;
}

.jx-sol-pill-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

.jx-sol-pill-grid article,
.jx-sol-feature-grid article {
    padding: 22px;
    border: 1px solid var(--jx-sol-border);
    border-radius: 17px;
    background: #fff;
}

.jx-sol-pill-grid i,
.jx-sol-feature-grid i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 12px;
    color: var(--jx-sol-primary);
    background: rgba(124,92,252,.09);
}

.jx-sol-pill-grid strong,
.jx-sol-pill-grid span {
    display: block;
}

.jx-sol-pill-grid strong { color: var(--jx-sol-text); font-size: 14px; }
.jx-sol-pill-grid span { margin-top: 6px; color: var(--jx-sol-muted); font-size: 12px; line-height: 1.55; }

.jx-sol-split,
.jx-sol-dark-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(470px, 1.15fr);
    gap: 65px;
    align-items: center;
}

.jx-sol-checks {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.jx-sol-checks li {
    position: relative;
    margin-top: 10px;
    padding-left: 26px;
    color: #475467;
    font-size: 13px;
}

.jx-sol-checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--jx-sol-primary);
    font-weight: 900;
}

.jx-sol-dark-grid h2 { color: #fff !important; }

.jx-sol-dark-grid__copy > p {
    margin-top: 16px;
    color: rgba(255,255,255,.63) !important;
    font-size: 15px;
    line-height: 1.72;
}

.jx-sol-metric-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 27px;
}

.jx-sol-metric-list div {
    padding: 15px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
}

.jx-sol-metric-list strong,
.jx-sol-metric-list span { display: block; }

.jx-sol-metric-list strong { color: #fff; font-size: 12px; }
.jx-sol-metric-list span { margin-top: 4px; color: rgba(255,255,255,.50); font-size: 10px; line-height: 1.45; }

.jx-sol-window--dark { border-color: rgba(255,255,255,.10); }

.jx-sol-gallery-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.jx-sol-media-card {
    overflow: hidden;
    border: 1px solid var(--jx-sol-border);
    border-radius: 22px;
    background: #fff;
}

.jx-sol-media-card__copy { padding: 25px 25px 20px; }

.jx-sol-media-card__copy > span {
    color: var(--jx-sol-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
}

.jx-sol-media-card h3 {
    margin: 7px 0 0;
    color: var(--jx-sol-text) !important;
    font-size: 22px;
    font-weight: 800;
}

.jx-sol-media-card p {
    margin: 8px 0 0;
    color: var(--jx-sol-muted) !important;
    font-size: 12px;
    line-height: 1.55;
}

.jx-sol-media-card .jx-sol-window {
    margin: 0 16px 16px;
    border-radius: 13px;
    box-shadow: none;
}

.jx-sol-section__header {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.jx-sol-section__header > p {
    max-width: 680px;
    margin: 13px auto 0;
}

.jx-sol-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 15px;
}

.jx-sol-feature-grid article { min-height: 190px; }

.jx-sol-feature-grid h3 {
    margin: 0;
    color: var(--jx-sol-text) !important;
    font-size: 15px;
    font-weight: 800;
}

.jx-sol-feature-grid p {
    margin: 7px 0 0;
    color: var(--jx-sol-muted) !important;
    font-size: 12px;
    line-height: 1.55;
}

.jx-sol-chooser {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(480px, 1.25fr);
    gap: 55px;
    align-items: start;
}

.jx-sol-chooser__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 15px;
}

.jx-sol-choice {
    padding: 24px;
    border: 1px solid var(--jx-sol-border);
    border-radius: 18px;
    background: #fff;
}

.jx-sol-choice--active {
    border-color: rgba(124,92,252,.28);
    background:
        radial-gradient(circle at 100% 0, rgba(124,92,252,.09), transparent 32%),
        #fff;
}

.jx-sol-choice > span {
    color: var(--jx-sol-primary);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .06em;
}

.jx-sol-choice h3 {
    margin: 7px 0 0;
    color: var(--jx-sol-text) !important;
    font-size: 22px;
    font-weight: 850;
}

.jx-sol-choice p {
    margin: 9px 0 0;
    color: var(--jx-sol-muted) !important;
    font-size: 12px;
    line-height: 1.55;
}

.jx-sol-choice__tags { margin-top: 16px; }

.jx-sol-choice__tags span {
    padding: 6px 8px;
    border-radius: 999px;
    color: #5d4bb7;
    background: rgba(124,92,252,.075);
    font-size: 9px;
    font-weight: 700;
}

.jx-sol-choice > a {
    display: inline-flex;
    margin-top: 17px;
    color: var(--jx-sol-primary) !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none !important;
}

.jx-sol-final {
    padding: 30px 0 76px;
    background: #fff;
}

.jx-sol-final__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 42px 46px;
    border-radius: 25px;
    background:
        radial-gradient(circle at 85% 20%, rgba(76,141,255,.22), transparent 28%),
        radial-gradient(circle at 15% 100%, rgba(124,92,252,.22), transparent 34%),
        #0b101c;
}

.jx-sol-final__box > div:first-child { max-width: 680px; }

.jx-sol-final h2 {
    margin: 8px 0 0;
    color: #fff !important;
    font-size: clamp(29px, 4vw, 43px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.jx-sol-final p {
    margin: 12px 0 0;
    color: rgba(255,255,255,.60) !important;
    font-size: 13px;
    line-height: 1.65;
}

.jx-sol-final__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 210px;
}

.jx-sol-final__actions .jx-sol-btn { width: 100%; }

@media (max-width: 1199px) {
    .jx-sol-hero__grid,
    .jx-sol-split,
    .jx-sol-dark-grid,
    .jx-sol-chooser {
        grid-template-columns: 1fr;
    }

    .jx-sol-hero__visual { max-width: 800px; }
    .jx-sol-pill-grid,
    .jx-sol-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px) {
    .jx-sol-hero { padding: 65px 0 58px; }
    .jx-sol-section { padding: 65px 0; }

    .jx-sol-hero h1 { font-size: 41px; }

    .jx-sol-heading {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .jx-sol-pill-grid,
    .jx-sol-gallery-pair,
    .jx-sol-feature-grid,
    .jx-sol-chooser__cards,
    .jx-sol-metric-list {
        grid-template-columns: 1fr;
    }

    .jx-sol-floating-card {
        position: static;
        max-width: none;
        margin-top: 12px;
    }

    .jx-sol-window--hero { transform: none; }

    .jx-sol-final__box {
        align-items: flex-start;
        flex-direction: column;
        padding: 31px 24px;
    }

    .jx-sol-final__actions {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   JUXTAPOS - AJUSTES FINAIS
   ========================================================= */

/* Evita herança visual estranha do tema em parágrafos específicos. */
.jx-sol-heading__text,
.jx-sol-body-text {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jx-sol-heading__text::before,
.jx-sol-body-text::before {
    content: none !important;
    display: none !important;
}

/* Mais presença visual para Mesas e Delivery. */
.jx-sol-gallery-pair--large {
    gap: 22px;
}

.jx-sol-gallery-pair--large .jx-sol-media-card {
    padding-bottom: 4px;
}

.jx-sol-gallery-pair--large .jx-sol-media-card .jx-sol-window {
    margin: 0 14px 14px;
}

.jx-sol-gallery-pair--large .jx-sol-media-card .jx-sol-window img {
    width: 100%;
    aspect-ratio: 16 / 9.2;
    object-fit: cover;
    object-position: top center;
}

.jx-sol-gallery-pair--large .jx-sol-media-card__copy {
    padding-bottom: 18px;
}

/* Mais respiro na comparação JuxtaPOS x JuxtaPOS V3. */
.jx-sol-chooser--spacious {
    padding-top: 10px;
    padding-bottom: 10px;
}

.jx-sol-chooser--spacious .jx-sol-chooser__intro {
    padding-top: 10px;
}

.jx-sol-chooser--spacious .jx-sol-chooser__cards {
    gap: 18px;
}

.jx-sol-chooser--spacious .jx-sol-choice {
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.jx-sol-chooser--spacious .jx-sol-choice__tags {
    margin-top: auto;
    padding-top: 18px;
}

.jx-sol-chooser--spacious .jx-sol-choice > a {
    margin-top: 18px;
}

@media (max-width: 991px) {
    .jx-sol-gallery-pair--large .jx-sol-media-card .jx-sol-window img {
        aspect-ratio: 16 / 9;
    }

    .jx-sol-chooser--spacious .jx-sol-choice {
        min-height: 0;
    }
}


/* =========================================================
   JUXTAPOS V3
   ========================================================= */

.jx-solution--v3 {
    --jx-sol-primary: #8b5cf6;
    --jx-sol-primary-2: #60a5fa;
}

.jx-v3-hero {
    background:
        radial-gradient(circle at 15% 18%, rgba(139,92,246,.25), transparent 31%),
        radial-gradient(circle at 86% 30%, rgba(96,165,250,.19), transparent 29%),
        #090d16;
}

.jx-v3-payments {
    background:
        radial-gradient(circle at 83% 16%, rgba(139,92,246,.18), transparent 27%),
        radial-gradient(circle at 15% 80%, rgba(96,165,250,.12), transparent 30%),
        #090d16;
}

.jx-v3-payment-stack {
    position: relative;
    min-width: 0;
    padding-bottom: 24px;
}

.jx-v3-payment-stack .jx-sol-window img {
    aspect-ratio: 16 / 8.8;
    object-fit: cover;
    object-position: top center;
}

.jx-v3-payment-badge {
    position: absolute;
    right: -18px;
    bottom: -2px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: rgba(12,17,29,.94);
    box-shadow: 0 18px 45px rgba(0,0,0,.26);
}

.jx-v3-payment-badge > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #c4b5fd;
    background: rgba(124,92,252,.15);
}

.jx-v3-payment-badge strong,
.jx-v3-payment-badge small {
    display: block;
}

.jx-v3-payment-badge strong {
    color: #fff;
    font-size: 11px;
}

.jx-v3-payment-badge small {
    margin-top: 2px;
    color: rgba(255,255,255,.52);
    font-size: 9px;
}

.jx-v3-segments {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

.jx-v3-segments article {
    padding: 23px;
    border: 1px solid var(--jx-sol-border);
    border-radius: 18px;
    background: #fff;
}

.jx-v3-segments i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 13px;
    color: var(--jx-sol-primary);
    background: rgba(124,92,252,.09);
}

.jx-v3-segments strong,
.jx-v3-segments span {
    display: block;
}

.jx-v3-segments strong {
    color: var(--jx-sol-text);
    font-size: 15px;
}

.jx-v3-segments span {
    margin-top: 6px;
    color: var(--jx-sol-muted);
    font-size: 11px;
    line-height: 1.5;
}

.jx-v3-screen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.jx-v3-screen-grid .jx-sol-media-card .jx-sol-window img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

.jx-v3-final .jx-sol-final__box {
    background:
        radial-gradient(circle at 84% 20%, rgba(96,165,250,.22), transparent 28%),
        radial-gradient(circle at 14% 100%, rgba(139,92,246,.26), transparent 34%),
        #0b101c;
}

@media (max-width: 991px) {
    .jx-v3-segments {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .jx-v3-payment-badge {
        right: 12px;
    }
}

@media (max-width: 767px) {
    .jx-v3-segments,
    .jx-v3-screen-grid {
        grid-template-columns: 1fr;
    }

    .jx-v3-payment-badge {
        position: static;
        margin-top: 12px;
    }
}

/* =========================================================
   JUXTAPED
   ========================================================= */

.jx-solution--ped {
    --jx-sol-primary: #2f9360;
    --jx-sol-primary-2: #5cc987;
}

.jx-ped-hero {
    background:
        radial-gradient(circle at 14% 18%, rgba(47,147,96,.24), transparent 31%),
        radial-gradient(circle at 88% 26%, rgba(92,201,135,.15), transparent 28%),
        #090d16;
}

.jx-solution--ped .jx-sol-eyebrow__dot {
    background: #48b978;
    box-shadow: 0 0 0 5px rgba(72,185,120,.13);
}

.jx-solution--ped .jx-sol-hero h1 span {
    background: linear-gradient(90deg, #7ee2a6, #53c884 52%, #70b7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jx-solution--ped .jx-sol-btn--primary {
    background: linear-gradient(135deg, #35a66a, #267f55);
    box-shadow: 0 15px 38px rgba(47,147,96,.28);
}

.jx-solution--ped .jx-sol-hero__trust i { color: #65d294; }
.jx-solution--ped .jx-sol-section__eyebrow,
.jx-solution--ped .jx-sol-final__eyebrow { color: #2f9360; }

.jx-ped-hero__visual { padding: 10px 0 70px; }
.jx-ped-main-window { position: relative; z-index: 1; }
.jx-ped-main-window img { aspect-ratio: 16 / 8.55; object-fit: cover; object-position: top center; }

.jx-ped-preview-card {
    position: absolute;
    right: -24px;
    bottom: -8px;
    z-index: 3;
    width: 48%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 28px 65px rgba(0,0,0,.34);
    transform: rotate(1.2deg);
}

.jx-ped-preview-card__bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid #eaecf0;
    background: #f8faf9;
}

.jx-ped-preview-card__bar i {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #2f9360;
    background: rgba(47,147,96,.10);
}

.jx-ped-preview-card__bar strong,
.jx-ped-preview-card__bar small { display: block; }
.jx-ped-preview-card__bar strong { color: #111827; font-size: 9px; }
.jx-ped-preview-card__bar small { margin-top: 1px; color: #98a2b3; font-size: 7px; }
.jx-ped-preview-card > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }

.jx-ped-customer-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 18px;
}

.jx-ped-customer-card .jx-sol-window img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

.jx-ped-pizza-section {
    background:
        radial-gradient(circle at 84% 18%, rgba(47,147,96,.19), transparent 29%),
        radial-gradient(circle at 15% 84%, rgba(92,201,135,.10), transparent 31%),
        #090d16;
}

.jx-ped-pizza-grid { grid-template-columns: minmax(0,.78fr) minmax(520px,1.22fr); }
.jx-ped-pizza-window img { width: 100%; aspect-ratio: 16 / 8.9; object-fit: cover; object-position: top center; }

.jx-ped-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.jx-ped-admin-grid .jx-sol-media-card .jx-sol-window img {
    width: 100%;
    aspect-ratio: 16 / 8.8;
    object-fit: cover;
    object-position: top center;
}

.jx-ped-pix-window img { width: 100%; aspect-ratio: 16 / 8.8; object-fit: cover; object-position: top center; }

.jx-ped-final .jx-sol-final__box {
    background:
        radial-gradient(circle at 85% 20%, rgba(92,201,135,.20), transparent 28%),
        radial-gradient(circle at 15% 100%, rgba(47,147,96,.25), transparent 34%),
        #0b101c;
}

.jx-ped-final .jx-sol-final__eyebrow { color: #6bd99a; }

@media (max-width: 1199px) {
    .jx-ped-pizza-grid { grid-template-columns: 1fr; }
    .jx-ped-preview-card { right: 10px; width: 45%; }
}

@media (max-width: 767px) {
    .jx-ped-hero__visual { padding-bottom: 0; }
    .jx-ped-preview-card { position: static; width: 100%; margin-top: 12px; transform: none; }
    .jx-ped-customer-grid,
    .jx-ped-admin-grid { grid-template-columns: 1fr; }
    .jx-ped-customer-card .jx-sol-window img,
    .jx-ped-admin-grid .jx-sol-media-card .jx-sol-window img,
    .jx-ped-pizza-window img,
    .jx-ped-pix-window img { aspect-ratio: auto; }
}